CesiumGS · lilleyse · May 4, 2018 · Jun 15, 2017 · Jul 11, 2017 · Jul 11, 2017
diff --git a/Apps/Sandcastle/gallery/Ambient Occlusion.html b/Apps/Sandcastle/gallery/Ambient Occlusion.html
@@ -0,0 +1,122 @@
+<!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="Ambient Occlusion.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, Post Processing">
+    <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">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+<table><tbody>
+    <tr>
+        <td>Ambient Occlusion</td>
+        <td><input type="checkbox" data-bind="checked: show"></td>
+    </tr>
+    <tr>
+        <td>Ambient Occlusion Only</td>
+        <td><input type="checkbox" data-bind="checked: ambientOcclusionOnly"></td>
+    </tr>
+    <tr>
+        <td>Intensity</td>
+        <td><input type="range" min="1" max="10" step="1" data-bind="value: intensity, valueUpdate: 'input'"></td>
+    </tr>
+    <tr>
+        <td>Length Cap</td>
+        <td><input type="range" min="0" max="1" step="0.01" data-bind="value: lengthCap, valueUpdate: 'input'"></td>
+    </tr>
+    <tr>
+        <td>Step Size</td>
+        <td><input type="range" min="1" max="10" step="0.01" data-bind="value: stepSize, valueUpdate: 'input'"></td>
+    </tr>
+    <tr>
+        <td>Bias</td>
+        <td><input type="range" min="0" max="1" step="0.01" data-bind="value: bias, valueUpdate: 'input'"></td>
+    </tr>
+    <tr>
+        <td>Blur Step Size</td>
+        <td><input type="range" min="0" max="4" step="0.01" data-bind="value: blurStepSize, valueUpdate: 'input'"></td>
+    </tr>
+</tbody></table>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+if (!viewer.scene.postProcessStages.ambientOcclusion.isSupported(viewer.scene)) {
+    console.log('This browser does not support the ambient occlusion post process.');
+}
+
+// Power Plant design model provided by Bentley Systems
+var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3837) });
+tileset.readyPromise.then(function(tileset) {
+    viewer.scene.primitives.add(tileset);
+}).otherwise(function(error) {
+    console.log(error);
+});
+
+var viewModel = {
+    show : true,
+    ambientOcclusionOnly : false,
+    intensity : 3.0,
+    bias : 0.1,
+    lengthCap : 0.03,
+    stepSize : 1.0,
+    blurStepSize : 0.86
+};
+
+Cesium.knockout.track(viewModel);
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.applyBindings(viewModel, toolbar);
+for (var name in viewModel) {
+    if (viewModel.hasOwnProperty(name)) {
+        Cesium.knockout.getObservable(viewModel, name).subscribe(updatePostProcess);
+    }
+}
+
+function updatePostProcess() {
+    var ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
+    ambientOcclusion.enabled = Boolean(viewModel.show) || Boolean(viewModel.ambientOcclusionOnly);
+    ambientOcclusion.uniforms.ambientOcclusionOnly = Boolean(viewModel.ambientOcclusionOnly);
+    ambientOcclusion.uniforms.intensity = Number(viewModel.intensity);
+    ambientOcclusion.uniforms.bias = Number(viewModel.bias);
+    ambientOcclusion.uniforms.lengthCap = Number(viewModel.lengthCap);
+    ambientOcclusion.uniforms.stepSize = Number(viewModel.stepSize);
+    ambientOcclusion.uniforms.blurStepSize = Number(viewModel.blurStepSize);
+}
+updatePostProcess();
+
+var camera = viewer.scene.camera;
+camera.position = new Cesium.Cartesian3(1234127.2294710164, -5086011.666443127, 3633337.0413351045);
+camera.direction = new Cesium.Cartesian3(-0.5310064396211631, -0.30299013818088416, -0.7913464078682514);
+camera.right = new Cesium.Cartesian3(-0.8468592075426076, 0.1574051185945647, 0.507989282604011);
+camera.up = Cesium.Cartesian3.cross(camera.right, camera.direction, new Cesium.Cartesian3());
+
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Ambient Occlusion.jpg b/Apps/Sandcastle/gallery/Ambient Occlusion.jpg
diff --git a/Apps/Sandcastle/gallery/Bloom.html b/Apps/Sandcastle/gallery/Bloom.html
@@ -0,0 +1,131 @@
+<!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="Add bloom effect to the scene.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, Post Processing">
+    <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">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+    <table><tbody>
+        <tr>
+            <td>Bloom</td>
+            <td><input type="checkbox" data-bind="checked: show"></td>
+        </tr>
+        <tr>
+            <td>Glow only</td>
+            <td><input type="checkbox" data-bind="checked: glowOnly"></td>
+        </tr>
+        <tr>
+            <td>Contrast</td>
+            <td><input type="range" min="-255.0" max="255.0" step="0.01" data-bind="value: contrast, valueUpdate: 'input'"></td>
+        </tr>
+        <tr>
+            <td>Brightness</td>
+            <td><input type="range" min="-1.0" max="1.0" step="0.01" data-bind="value: brightness, valueUpdate: 'input'"></td>
+        </tr>
+        <tr>
+            <td>Delta</td>
+            <td><input type="range" min="1" max="5" step="0.01" data-bind="value: delta, valueUpdate: 'input'"/></td>
+        </tr>
+        <tr>
+            <td>Sigma</td>
+            <td><input type="range" min="1" max="10" step="0.01" data-bind="value: sigma, valueUpdate: 'input'"/></td>
+        </tr>
+        <tr>
+            <td>Step Size</td>
+            <td><input type="range" min="0" max="7" step="0.01" data-bind="value: stepSize, valueUpdate: 'input'"/></td>
+        </tr>
+    </tbody></table>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+function createModel(url, x, y, height) {
+    var position = Cesium.Cartesian3.fromDegrees(x, y, height);
+    viewer.entities.add({
+        name : url,
+        position : position,
+        model : {
+            uri : url
+        }
+    });
+}
+
+var numberOfBalloons = 13;
+var lonIncrement = 0.00025;
+var initialLon = -122.99875;
+var lat = 44.0503706;
+var height = 100.0;
+
+var url = '../../SampleData/models/CesiumBalloon/CesiumBalloon.glb';
+
+for (var i = 0; i < numberOfBalloons; ++i) {
+    var lon = initialLon + i * lonIncrement;
+    createModel(url, lon, lat, height);
+}
+
+var viewModel = {
+    show : true,
+    glowOnly : false,
+    contrast : 128,
+    brightness : -0.3,
+    delta : 1.0,
+    sigma : 3.78,
+    stepSize : 5.0
+};
+
+Cesium.knockout.track(viewModel);
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.applyBindings(viewModel, toolbar);
+for (var name in viewModel) {
+    if (viewModel.hasOwnProperty(name)) {
+        Cesium.knockout.getObservable(viewModel, name).subscribe(updatePostProcess);
+    }
+}
+
+function updatePostProcess() {
+    var bloom = viewer.scene.postProcessStages.bloom;
+    bloom.enabled = Boolean(viewModel.show);
+    bloom.uniforms.glowOnly = Boolean(viewModel.glowOnly);
+    bloom.uniforms.contrast = Number(viewModel.contrast);
+    bloom.uniforms.brightness = Number(viewModel.brightness);
+    bloom.uniforms.delta = Number(viewModel.delta);
+    bloom.uniforms.sigma = Number(viewModel.sigma);
+    bloom.uniforms.stepSize = Number(viewModel.stepSize);
+}
+updatePostProcess();
+
+var target = Cesium.Cartesian3.fromDegrees(initialLon + lonIncrement, lat, height + 7.5);
+var offset = new Cesium.Cartesian3(-37.048378684557974, -24.852967044804245, 4.352023653686047);
+viewer.scene.camera.lookAt(target, offset);
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Bloom.jpg b/Apps/Sandcastle/gallery/Bloom.jpg
diff --git a/Apps/Sandcastle/gallery/Custom Post Process.html b/Apps/Sandcastle/gallery/Custom Post Process.html
@@ -0,0 +1,76 @@
+<!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="Custom post processing effect.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, Post Processing">
+    <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">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    shouldAnimate : true
+});
+
+var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
+var url = '../../SampleData/models/CesiumMan/Cesium_Man.glb';
+viewer.trackedEntity = viewer.entities.add({
+    name : url,
+    position : position,
+    model : {
+        uri : url
+    }
+});
+
+var fragmentShaderSource =
+    'uniform sampler2D colorTexture; \n' +
+    'varying vec2 v_textureCoordinates; \n' +
+    'const int KERNEL_WIDTH = 16; \n' +
+    'void main(void) \n' +
+    '{ \n' +
+    '    vec2 step = 1.0 / czm_viewport.zw; \n' +
+    '    vec2 integralPos = v_textureCoordinates - mod(v_textureCoordinates, 8.0 * step); \n' +
+    '    vec3 averageValue = vec3(0.0); \n' +
+    '    for (int i = 0; i < KERNEL_WIDTH; i++) \n' +
+    '    { \n' +
+    '        for (int j = 0; j < KERNEL_WIDTH; j++) \n' +
+    '        { \n' +
+    '            averageValue += texture2D(colorTexture, integralPos + step * vec2(i, j)).rgb; \n' +
+    '        } \n' +
+    '    } \n' +
+    '    averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH); \n' +
+    '    gl_FragColor = vec4(averageValue, 1.0); \n' +
+    '} \n';
+viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
+    fragmentShader : fragmentShaderSource
+}));
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Custom Post Process.jpg b/Apps/Sandcastle/gallery/Custom Post Process.jpg