275 lines
10 KiB
HTML
275 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||
|
|
<meta name="description" content="Point Cloud Attenuation and Eye Dome Lighting example.">
|
||
|
|
<meta name="cesium-sandcastle-labels" content="3D Tiles">
|
||
|
|
<title>Cesium Demo</title>
|
||
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||
|
|
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
if(typeof require === 'function') {
|
||
|
|
require.config({
|
||
|
|
baseUrl : '../../../Source',
|
||
|
|
waitSeconds : 120
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
|
||
|
|
<style>
|
||
|
|
@import url(../templates/bucket.css);
|
||
|
|
#toolbar {
|
||
|
|
background: rgba(42, 42, 42, 0.8);
|
||
|
|
padding: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
#toolbar input {
|
||
|
|
vertical-align: middle;
|
||
|
|
padding-top: 2px;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
}
|
||
|
|
#toolbar .header {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
||
|
|
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||
|
|
<div id="toolbar">
|
||
|
|
<select data-bind="options: exampleTypes, value: currentExampleType"></select>
|
||
|
|
<table><tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Maximum Screen Space Error</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="64.0" step="0.1" data-bind="value: maximumScreenSpaceError, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: maximumScreenSpaceError">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td class="header">Attenuation</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td>Geometric Error Scale</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="2.0" step="0.1" data-bind="value: geometricErrorScale, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: geometricErrorScale">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Maximum Attenuation</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="32.0" step="1.0" data-bind="value: maximumAttenuation, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: maximumAttenuation">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Base Resolution</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="10.0" step="0.01" data-bind="value: baseResolution, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: baseResolution">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td class="header">Eye Dome Lighting</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td>Eye Dome Lighting Strength</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="10.0" step="0.1" data-bind="value: eyeDomeLightingStrength, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: eyeDomeLightingStrength">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Eye Dome Lighting Radius</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="0.0" max="10.0" step="0.1" data-bind="value: eyeDomeLightingRadius, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: eyeDomeLightingRadius">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody></table>
|
||
|
|
</div>
|
||
|
|
<script id="cesium_sandcastle_script">
|
||
|
|
function startup(Cesium) {
|
||
|
|
'use strict';
|
||
|
|
//Sandcastle_Begin
|
||
|
|
var viewer = new Cesium.Viewer('cesiumContainer', {
|
||
|
|
terrainProvider: Cesium.createWorldTerrain()
|
||
|
|
});
|
||
|
|
|
||
|
|
var scene = viewer.scene;
|
||
|
|
var viewModelTileset;
|
||
|
|
|
||
|
|
if (!Cesium.PointCloudShading.isSupported(scene)) {
|
||
|
|
console.log('This browser does not support point cloud shading');
|
||
|
|
}
|
||
|
|
|
||
|
|
function reset() {
|
||
|
|
viewer.scene.primitives.remove(viewModelTileset);
|
||
|
|
viewModelTileset = undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
// The viewModel tracks the state of our mini application.
|
||
|
|
var pointClouds = ['St. Helens', 'Church'];
|
||
|
|
var viewModel = {
|
||
|
|
exampleTypes : pointClouds,
|
||
|
|
currentExampleType : pointClouds[0],
|
||
|
|
maximumScreenSpaceError : 16.0,
|
||
|
|
geometricErrorScale : 1.0,
|
||
|
|
maximumAttenuation : 0, // Equivalent to undefined
|
||
|
|
baseResolution : 0, // Equivalent to undefined
|
||
|
|
eyeDomeLightingStrength : 1.0,
|
||
|
|
eyeDomeLightingRadius : 1.0
|
||
|
|
};
|
||
|
|
|
||
|
|
function tilesetToViewModel(tileset) {
|
||
|
|
viewModelTileset = tileset;
|
||
|
|
|
||
|
|
var pointCloudShading = tileset.pointCloudShading;
|
||
|
|
viewModel.maximumScreenSpaceError = tileset.maximumScreenSpaceError;
|
||
|
|
viewModel.geometricErrorScale = pointCloudShading.geometricErrorScale;
|
||
|
|
viewModel.maximumAttenuation = pointCloudShading.maximumAttenuation ? pointCloudShading.maximumAttenuation : 0;
|
||
|
|
viewModel.baseResolution = pointCloudShading.baseResolution ? pointCloudShading.baseResolution : 0;
|
||
|
|
viewModel.eyeDomeLightingStrength = pointCloudShading.eyeDomeLightingStrength;
|
||
|
|
viewModel.eyeDomeLightingRadius = pointCloudShading.eyeDomeLightingRadius;
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadStHelens() {
|
||
|
|
// Set the initial camera view to look at Mt. St. Helens
|
||
|
|
var initialPosition = Cesium.Cartesian3.fromRadians(-2.1344873183780484, 0.8071380277370774, 5743.394497982162);
|
||
|
|
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(112.99596671210358, -21.34390550872461, 0.0716951918898415);
|
||
|
|
viewer.scene.camera.setView({
|
||
|
|
destination: initialPosition,
|
||
|
|
orientation: initialOrientation,
|
||
|
|
endTransform: Cesium.Matrix4.IDENTITY
|
||
|
|
});
|
||
|
|
|
||
|
|
// Mt. St. Helens 3D Tileset generated from LAS provided by https://www.liblas.org/samples/
|
||
|
|
// This tileset uses replacement refinement and has geometric error approximately equal to
|
||
|
|
// the average interpoint distance in each tile.
|
||
|
|
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5713) });
|
||
|
|
viewer.scene.primitives.add(tileset);
|
||
|
|
|
||
|
|
tileset.maximumScreenSpaceError = 16.0;
|
||
|
|
tileset.pointCloudShading.maximumAttenuation = undefined; // Will be based on maximumScreenSpaceError instead
|
||
|
|
tileset.pointCloudShading.baseResolution = undefined;
|
||
|
|
tileset.pointCloudShading.geometricErrorScale = 1.0;
|
||
|
|
tileset.pointCloudShading.attenuation = true;
|
||
|
|
tileset.pointCloudShading.eyeDomeLighting = true;
|
||
|
|
|
||
|
|
tilesetToViewModel(tileset);
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadChurch() {
|
||
|
|
// Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie.
|
||
|
|
// This tileset uses additive refinement and has geometric error based on the bounding box size for each tile.
|
||
|
|
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(16421) });
|
||
|
|
viewer.scene.primitives.add(tileset);
|
||
|
|
|
||
|
|
tileset.maximumScreenSpaceError = 16.0;
|
||
|
|
tileset.pointCloudShading.maximumAttenuation = 4.0; // Don't allow points larger than 4 pixels.
|
||
|
|
tileset.pointCloudShading.baseResolution = 0.05; // Assume an original capture resolution of 5 centimeters between neighboring points.
|
||
|
|
tileset.pointCloudShading.geometricErrorScale = 0.5; // Applies to both geometric error and the base resolution.
|
||
|
|
tileset.pointCloudShading.attenuation = true;
|
||
|
|
tileset.pointCloudShading.eyeDomeLighting = true;
|
||
|
|
|
||
|
|
viewer.scene.camera.setView({
|
||
|
|
destination: new Cesium.Cartesian3(4401744.644145314, 225051.41078911052, 4595420.374784433),
|
||
|
|
orientation: new Cesium.HeadingPitchRoll(5.646733805039757, -0.276607153839886, 6.281110875400085)
|
||
|
|
});
|
||
|
|
|
||
|
|
tilesetToViewModel(tileset);
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkZero(newValue) {
|
||
|
|
var newValueFloat = parseFloat(newValue);
|
||
|
|
return (newValueFloat === 0.0) ? undefined : newValueFloat;
|
||
|
|
}
|
||
|
|
|
||
|
|
loadStHelens();
|
||
|
|
|
||
|
|
// Convert the viewModel members into knockout observables.
|
||
|
|
Cesium.knockout.track(viewModel);
|
||
|
|
|
||
|
|
// Bind the viewModel to the DOM elements of the UI that call for it.
|
||
|
|
var toolbar = document.getElementById('toolbar');
|
||
|
|
Cesium.knockout.applyBindings(viewModel, toolbar);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'currentExampleType').subscribe(function(newValue) {
|
||
|
|
reset();
|
||
|
|
if (newValue === pointClouds[0]) {
|
||
|
|
loadStHelens();
|
||
|
|
} else if (newValue === pointClouds[1]) {
|
||
|
|
loadChurch();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'maximumScreenSpaceError').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.maximumScreenSpaceError = parseFloat(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'geometricErrorScale').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.geometricErrorScale = parseFloat(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'maximumAttenuation').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.maximumAttenuation = checkZero(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'baseResolution').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.baseResolution = checkZero(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'eyeDomeLightingStrength').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.eyeDomeLightingStrength = parseFloat(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Cesium.knockout.getObservable(viewModel, 'eyeDomeLightingRadius').subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.eyeDomeLightingRadius = parseFloat(newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
Sandcastle.addToggleButton('Enable Attenuation', true, function(checked) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.attenuation = checked;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Sandcastle.addToggleButton('Enable Eye Dome Lighting', true, function(checked) {
|
||
|
|
if (Cesium.defined(viewModelTileset)) {
|
||
|
|
viewModelTileset.pointCloudShading.eyeDomeLighting = checked;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//Sandcastle_End
|
||
|
|
Sandcastle.finishedLoading();
|
||
|
|
}
|
||
|
|
if (typeof Cesium !== 'undefined') {
|
||
|
|
startup(Cesium);
|
||
|
|
} else if (typeof require === 'function') {
|
||
|
|
require(['Cesium'], startup);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|