Improving Performance with Explicit Rendering

Improve performance through explicit rendering

By default ,Cesium It will render new frames like a game engine （frames）, That is, render regularly at the target frame rate . Although this is for those with dynamic data Cesium Applications or views with continuous data flow are very effective , But a lot of Cesium Applications can benefit from lower rendering frequency . Rendering a new frame takes CPU Resources for , If the application is idle , This is often unnecessary . Improving performance through display rendering means you can run your Cesium Application without worrying about your laptop fan running at high speed , And don't worry about consuming the battery life of mobile devices .
from Cesium 1.42 Start , An optional new feature appears , Explicit rendering mode , This allows developers to accurately control according to the needs of the application Cesium Rendering in . When it is set to available , New frames are rendered only in the following scenes ：

• Camera switching , Whether it's user operation or through Cesium API The control of the ;
• The simulation time exceeds the specified threshold ;
• Loading terrain 、 Images 、3D Tiles Or data source , Including each individual tile loading . At low levels , When a network request passes URI or BLOB solve 、 or web worker When you return to an asynchronous procedure, you trigger ;
• Earth image layer （globe imagery layers） add to 、 Remove or change ;
• Earth terrain data source （globe terrain providers） change ;
• Scene mode （scene mode） change ;
• adopt Cesium API Explicit rendering of a frame .

This covers a lot of Cesium Common seeing functions , Such as loading terrain 、 Images and images 3D Tiles Data like this . For more subtle changes to the scene , Instead of monitoring every update that might need to be rendered , It depends on the application . If the application changes the scene or its content in a way other than the above , For example, use entities （Entity） Or the original type （Primitive） Of API, You need to explicitly request a new rendered frame .
When explicit rendering mode is on and changes are made to the scene , The rendering will appear at the same rate as the target frame as usual . However , When Cesium When idle ,CPU The utilization rate will be greatly reduced . for instance , Use Chrome Browser developer tools for testing , In idle Cesium Scene CPU The average usage rate of is 25.1%, But after turning on explicit rendering mode to improve performance ,CPU The average utilization rate of is 3.0%. This is i7 Processor laptop , use Google Of Chrome Tested by .

Timeline

Timeline This picture shows in normal rendering and in request rendering mode （request render mode） Over time FPS as well as CPU usage . At initial loading , The two performances are close . After initial loading , No new frames are rendered in requested rendering mode , This makes CPU The utilization rate of has dropped to almost 0%. When the scene is initially loaded ,FPS Achieve the expected 60, But in my spare time , Because no new frames are needed , therefore FPS Down to 0.
To configure Cesium The application uses explicit rendering , Request render mode on （request render mode）, Considering the simulation time , After that, all cases that are not automatically processed must explicitly render frames .

Turn on request rendering mode （request render mode）

Turn on requestRenderMode In order to reduce Cesium Total time to render a new frame , And reduce... In application Cesium Total CPU Occupancy rate .

var viewer = new Cesium.Viewer('cesiumContainer', {
    
    requestRenderMode : true
});

You can also create viewer Then the scene （scene） Make these adjustments .

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.requestRenderMode = true;

Process simulated time changes

By default , When requestRenderMode On , The simulation time changes more than 0.0 second , A new frame will be requested . This value can be set by maximumRenderTimeChange Adjustment . If your scene has elements that change over time , Like animation 、 The light changes 、 Water mask or video , Corresponding settings can be considered . If there are no elements in the scene, they will change with the simulation time , You can think about maximumRenderTimeChange Set to a higher value , For example, infinity （Infinity）.

// Create a viewer that will not render frames based on changes in simulation time.
var viewer = new Cesium.Viewer('cesiumContainer', {
    
    requestRenderMode : true,
    maximumRenderTimeChange : Infinity
});
viewer.scene.debugShowFramesPerSecond = true;

Explicitly render frames

In application code , If there is a change not covered in the above list , Then you need to explicitly render a new frame to show the changes immediately . otherwise , This change cannot be seen until a new frame is rendered .
By calling Scene.requestRender Explicitly render frames .

// Hides the stars
scene.skyBox.show = false;
// Explicitly render a new frame
scene.requestRender();

to update / Render cycle events

As part of these changes , We've separated some updates from the rendering logic .Cesium Always update at the same frame rate , This depends on the target frame rate of the application （60 FPS Is the default value , See Viewer.targetFrameRate ）. When using requestRenderMode when , The render function is only called when rendering a new frame . We have reconstructed the order of rendering periodic events , Details can be seen below . Generally speaking , Invoke in an update event Scene.requestRender function （ Or do something like changing the camera position, which can automatically prompt the change of rendering ） The rendering will be added to the queue in time for the next frame .

scene.postUpdate.addEventListener(function() {
    
    // This code will run at 60 FPS
    if (changeToPromptRender) {
    
        scene.requestRender();
    }
}); 

scene.preRender.addEventListener(function() {
    
    // This code will run when a new frame is rendered
    // including when changeToPromptRender is true
}); 

preUpdate

This event is updating / The start of the rendering cycle is triggered , In the scene content （scene contents） Before being updated or rendered . Each update of the target frame rate / This event is triggered during the rendering cycle .

postUpdate

This event is in the scene （scene） After the update , But it is triggered before the new frame is rendered . Each update of the target frame rate / This event is triggered during the rendering cycle .

preRender

This event is triggered before rendering a new frame , But after the update . When requestRenderMode On , This event will only be triggered when a new frame is rendered .

postRender

This event is updating / Raised at the end of the render cycle , After rendering a new frame , Also after the update is complete . When requestRenderMode On , This event will only be triggered when a new frame is rendered .

Use cases and examples

Scene rendering performance （Scene Rendering Performance） Is an example of an official sandbox , It explores some common use cases in the drop-down list , Covers some examples that do not require explicit rendering , Of course, it also includes some examples that need to be explicitly rendered .
Let's improve performance in a sample application , The application uses mouse over selection to adjust the state of the entity . The following code demonstrates how to create a scene , Add entities , Then create a selection function （picking function）. Although we can trigger every time MOUSE_MOVE Event requestRender , But unless the properties of the entity change , Otherwise, there is no need to call requestRender .

// Create a viewer that won't render a new frame unless
// updates to the scene require it.
var viewer = new Cesium.Viewer('cesiumContainer', {
    
    requestRenderMode : true,
    maximumRenderTimeChange : Infinity
});

// Add an entity to the scene.
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
    }
});

// If the mouse is over the billboard, 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);