CPU Usage

Apps/CesiumViewer/CesiumViewer.js

@@ -55,7 +55,8 @@ define([
         viewer = new Viewer('cesiumContainer', {
             imageryProvider : imageryProvider,
             baseLayerPicker : !defined(imageryProvider),
-            scene3DOnly : endUserOptions.scene3DOnly
+            scene3DOnly : endUserOptions.scene3DOnly,
+            requestRenderMode : true
         });
     } catch (exception) {
         loadingIndicator.style.display = 'none';

Apps/Sandcastle/gallery/Camera.html

@@ -173,7 +173,7 @@
     viewer.camera.flyHome(0);
 
     clock.multiplier = 3 * 60 * 60;
-    scene.preRender.addEventListener(icrf);
+    scene.postUpdate.addEventListener(icrf);
     scene.globe.enableLighting = true;
 }
 
@@ -387,7 +387,7 @@
     viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
 
     clock.multiplier = 1.0;
-    scene.preRender.removeEventListener(icrf);
+    scene.postUpdate.removeEventListener(icrf);
     scene.globe.enableLighting = false;
 };
 

Apps/Sandcastle/gallery/Cardboard.html

@@ -99,7 +99,7 @@
 camera.up = new Cesium.Cartesian3(0.0, 0.0, 1.0);
 camera.right = new Cesium.Cartesian3(0.0, -1.0, 0.0);
 
-viewer.scene.preRender.addEventListener(function(scene, time) {
+viewer.scene.postUpdate.addEventListener(function(scene, time) {
     var position = entity.position.getValue(time);
     if (!Cesium.defined(position)) {
         return;

Apps/Sandcastle/gallery/HeadingPitchRoll.html

@@ -202,12 +202,7 @@ <h1>Loading...</h1>
 var speedSpan = document.getElementById('speed');
 var fromBehind = document.getElementById('fromBehind');
 
-viewer.scene.preRender.addEventListener(function(scene, time) {
-    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
-    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
-    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
-    speedSpan.innerHTML = speed.toFixed(1);
-
+viewer.scene.preUpdate.addEventListener(function(scene, time) {
     speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
     position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
     pathPosition.addSample(Cesium.JulianDate.now(), position);
@@ -221,6 +216,13 @@ <h1>Loading...</h1>
         camera.lookAt(center, hpRange);
     }
 });
+
+viewer.scene.preRender.addEventListener(function(scene, time) {
+    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
+    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
+    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
+    speedSpan.innerHTML = speed.toFixed(1);
+});
 //Sandcastle_End
     Sandcastle.finishedLoading();
 }

Apps/Sandcastle/gallery/LocalToFixedFrame.html

@@ -212,18 +212,20 @@ <h1>Loading...</h1>
 var pitchSpan = document.getElementById('pitch');
 var rollSpan = document.getElementById('roll');
 
-viewer.scene.preRender.addEventListener(function(scene, time) {
-    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
-    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
-    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
-
+viewer.scene.preUpdate.addEventListener(function(scene, time) {
     for (var i = 0; i < primitives.length; i++) {
         var primitive = primitives[i].primitive;
         var converter = primitives[i].converter;
         var position = primitives[i].position;
         Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter, primitive.modelMatrix);
     }
 });
+
+viewer.scene.preRender.addEventListener(function(scene, time) {
+    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
+    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
+    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
+});
 //Sandcastle_End
     Sandcastle.finishedLoading();
 }

Apps/Sandcastle/gallery/Particle System.html

@@ -306,7 +306,7 @@
     p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
 }
 
-viewer.scene.preRender.addEventListener(function(scene, time) {
+viewer.scene.preUpdate.addEventListener(function(scene, time) {
     particleSystem.modelMatrix = computeModelMatrix(entity, time);
 
     // Account for any changes to the emitter model matrix.

Apps/Sandcastle/gallery/Scene Rendering Performance.html

@@ -0,0 +1,296 @@
+<!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="Use explicit rendering to improve app performance.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, Tutorials">
+    <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 h3, h4 {
+        margin: 0 0 2px 0;
+    }
+
+    #toolbar i {
+        font-size: 85%;
+    }
+
+    #toolbar table {
+        margin: 2px 3px;
+        max-width: 280px;
+    }
+
+    #toolbar td {
+        padding-bottom: 10px;
+    }
+
+    #toolbar .cesium-button {
+        margin: 6px 0 0;
+    }
+
+    #toolbar input {
+        vertical-align: middle;
+    }
+
+    #toolbar input:disabled{
+        color: darkgray;
+    }
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+    <table>
+        <tbody><tr>
+            <td>
+                <h3>
+                    <code><span data-bind="text: lastRenderTime"></span></code>
+                </h3>
+                Simulation time at last render frame
+                <button type="button" class="cesium-button" data-bind="click: requestRender">Render new frame</button>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <h3>
+                    <input value="true" data-bind="checked: requestRenderMode, valueUpdate: 'input'" type="checkbox">
+                    <code>requestRenderMode</code> enabled
+                </h3>
+                <i>When enabled, a new frame is only rendered when scene updates occur, or a new frame is explicitly rendered.</i>
+            </td>
+        </tr>
+        <tr data-bind="visible: showTimeOptions">
+            <td>
+                <h4>
+                    <input value="true" data-bind="checked: timeChangeEnabled, valueUpdate: 'input'" type="checkbox">
+                    Render when simulation time changes
+                </h4>
+                <i>Automatically render when the simulation time changes by "Max delta time". Adjust the simulation time on the animation widget and "Max delta time" value to see their relationship.</i>
+            </td>
+        </tr>
+        <tr data-bind="visible: showTimeOptions">
+            <td>
+                <h4>Max delta time</h4>
+                <input min="0" max="20" step="0.1" data-bind="value: maximumRenderTimeChange, valueUpdate: 'input', enable: timeChangeEnabled" type="range">
+                <input size="2" data-bind="value: maximumRenderTimeChange, valueUpdate: 'input', enable: timeChangeEnabled" type="text">
+            </td>
+        </tr>
+    </tbody></table>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+// Create a viewer that won't render a new frame unless
+// updates to the scene require it to reduce overall CPU usage.
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    requestRenderMode : true,
+    maximumRenderTimeChange : Infinity
+});
+
+var scene = viewer.scene;
+scene.debugShowFramesPerSecond = true;
+
+var viewModel = {
+    requestRenderMode : true,
+    showTimeOptions : false,
+    timeChangeEnabled : false,
+    maximumRenderTimeChange : 0.0,
+    lastRenderTime : '',
+    requestRender : function () {
+        scene.requestRender();
+    }
+};
+
+// Clear scene and set default view.
+var handler;
+function resetScene() {
+    viewer.trackedEntity = undefined;
+    viewer.dataSources.removeAll();
+    viewer.entities.removeAll();
+    viewer.scene.primitives.removeAll();
+    viewer.clock.shouldAnimate = false;
+    handler = handler && handler.destroy();
+    scene.skyBox.show = true;
+    scene.camera.flyHome(0.0);
+    scene.requestRender();
+    viewModel.showTimeOptions = false;
+    viewModel.timeChangeEnabled = false;
+    viewModel.maximumRenderTimeChange = 0;
+}
+
+// Load a tileset and set the view.
+// No need to call scene.requestRender()
+function loadTilesetScenario() {
+    resetScene();
+
+    Cesium.CesiumIon.create3DTileset(1458, { accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmJiNTAxOC1lOTg5LTQzN2EtODg1OC0zMWJjM2IxNGNlYmMiLCJpZCI6NDQsImFzc2V0cyI6WzE0NThdLCJpYXQiOjE0OTkyNjM4MjB9.1WKijRa-ILkmG6utrhDWX6rDgasjD7dZv-G5ZyCmkKg' })
+        .then(function(tileset) {
+            viewer.scene.primitives.add(tileset);
+            viewer.zoomTo(tileset);
+        })
+        .otherwise(function(error) {
+            console.log(error);
+        });
+}
+
+// Load an animated model and set the view.
+// No need to call scene.requestRender()
+// Enable and adjust maximum simulation time change to see
+// animations at desired speed.
+function loadModelScenario() {
+    resetScene();
+    viewModel.timeChangeEnabled = true;
+    viewModel.showTimeOptions = true;
+
+    var entity = viewer.entities.add({
+        name : 'Aircraft',
+        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0),
+        model : {
+            uri : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
+            minimumPixelSize : 128,
+            maximumScale : 20000
+        }
+    });
+
+    viewer.trackedEntity = entity;
+    viewer.clock.shouldAnimate = true;
+}
+
+// Load CZML DataSource with a model and set the trackedEntity.
+// No need to call scene.requestRender()
+// Enable and adjust maximum simulation time change to see
+// animations at desired speed.
+function loadCzmlScenario() {
+    resetScene();
+    viewModel.showTimeOptions = true;
+    viewModel.timeChangeEnabled = true;
+    viewModel.maximumRenderTimeChange = 10.0;
+
+    viewer.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));
+    viewer.clock.shouldAnimate = true;
+}
+
+// Pick an entity, only rendering when needed.
+function pickingScenario() {
+    resetScene();
+
+    var entity = viewer.entities.add({
+        position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
+        box : {
+            dimensions : new Cesium.Cartesian3(1000000.0, 1000000.0, 30000.0),
+            material : Cesium.Color.CORNFLOWERBLUE
+        }
+    });
+
+    scene.requestRender();
+
+    // If the mouse is over the box, change its scale and color,
+    // then request a new render frame.
+    var lastPicked;
+    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    handler.setInputAction(function(movement) {
+        var pickedObject = scene.pick(movement.endPosition);
+        if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
+            if (Cesium.defined(lastPicked)) {
+                return;
+            }
+
+            entity.box.material = Cesium.Color.YELLOW;
+            scene.requestRender();
+            lastPicked = pickedObject;
+        } else if (Cesium.defined(lastPicked)) {
+            entity.box.material = Cesium.Color.CORNFLOWERBLUE;
+            scene.requestRender();
+            lastPicked = undefined;
+        }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+}
+
+// Changes to the scene with the API will require
+// calling requestRender() on change.
+function setScenePropertiesScenario() {
+    resetScene();
+
+    scene.skyBox.show = false;
+    scene.backgroundColor = Cesium.Color.CORNFLOWERBLUE;
+    scene.requestRender();
+}
+
+// BEGIN SANDCASTLE EXAMPLE UI SETUP
+
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.track(viewModel);
+Cesium.knockout.applyBindings(viewModel, toolbar);
+
+Cesium.knockout.getObservable(viewModel, 'requestRenderMode').subscribe(function(value) {
+    scene.requestRenderMode = value;
+});
+
+Cesium.knockout.getObservable(viewModel, 'timeChangeEnabled').subscribe(function(value) {
+    scene.maximumRenderTimeChange = value ? viewModel.maximumRenderTimeChange : Infinity;
+});
+
+Cesium.knockout.getObservable(viewModel, 'maximumRenderTimeChange').subscribe(function(value) {
+    scene.maximumRenderTimeChange = value;
+});
+
+scene.postRender.addEventListener(function() {
+    var time = Cesium.JulianDate.toGregorianDate(scene.lastRenderTime);
+    var value = time.hour + ':' + time.minute + ':' + time.second + ':' + time.millisecond.toFixed(0);
+    Cesium.knockout.getObservable(viewModel, 'lastRenderTime')(value);
+});
+
+var scenarios = [{
+    text : 'Default view',
+    onselect : resetScene
+}, {
+    text : 'Load a 3D tileset and set the view',
+    onselect : loadTilesetScenario
+}, {
+    text : 'Mouseover picking',
+    onselect : pickingScenario
+}, {
+    text : 'Load time-dynamic CZML',
+    onselect : loadCzmlScenario
+}, {
+    text : 'Animated model',
+    onselect : loadModelScenario
+}, {
+    text : 'Scene changes with API',
+    onselect : setScenePropertiesScenario
+}];
+
+Sandcastle.addToolbarMenu(scenarios);
+
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>