Apps/Sandcastle/gallery/Scene Rendering Performance.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="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>