Skip to content

Commit

Permalink
Merge pull request #5615 from AnalyticalGraphicsInc/post-processing-1.0
Browse files Browse the repository at this point in the history 
Post processing
  • Loading branch information
@lilleyse
lilleyse authored May 4, 2018
2 parents 3ef506f + 12c79e7 commit 13998f2
Show file tree
Hide file tree
Showing 58 changed files with 5,786 additions and 742 deletions.
122 changes: 122 additions & 0 deletions Apps/Sandcastle/gallery/Ambient Occlusion.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Binary file added Apps/Sandcastle/gallery/Ambient Occlusion.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
131 changes: 131 additions & 0 deletions Apps/Sandcastle/gallery/Bloom.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Binary file added Apps/Sandcastle/gallery/Bloom.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions Apps/Sandcastle/gallery/Custom Post Process.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Binary file added Apps/Sandcastle/gallery/Custom Post Process.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 13998f2

Please sign in to comment.