Improving Performance with Explicit Rendering – Cesium

3克拉的Anran 2025-04-30

展開全文

寫的加比·蓋茨2018年1月24日

默認(rèn)情況下，Cesium會(huì)像游戲引擎一樣渲染新幀：以目標(biāo)幀速率定期渲染。雖然這適用于具有動(dòng)態(tài)數(shù)據(jù)或不斷為新視圖傳輸數(shù)據(jù)的Cesium應(yīng)用程序，但許多Cesium應(yīng)用程序可以從較低的渲染頻率中受益。渲染新幀會(huì)使用CPU資源，如果您的應(yīng)用處于空閑狀態(tài)，則通常不需要渲染新幀。通過顯式渲染提高性能意味著您可以運(yùn)行Cesium應(yīng)用程序，而不必?fù)?dān)心將筆記本電腦風(fēng)扇調(diào)到高速檔或耗盡移動(dòng)的設(shè)備的電池壽命。

從Cesium 1.42開始，一個(gè)新的可選顯式渲染模式允許開發(fā)人員根據(jù)應(yīng)用程序的需求精確控制Cesium中的渲染。啟用后，僅在以下情況下渲染新幀：

攝像頭會(huì)隨著用戶輸入或Cesium API而改變。
模擬時(shí)間提前超過指定閾值。
加載地形、影像、3D平鋪或數(shù)據(jù)源，包括每個(gè)單獨(dú)的平鋪加載。在較低的級(jí)別上，當(dāng)通過URI或blob解析Web請(qǐng)求時(shí)，或者當(dāng)從Web worker返回異步進(jìn)程時(shí)，會(huì)觸發(fā)此事件。
添加、刪除或更改地球儀影像圖層。
地球儀地形提供者改變。
場(chǎng)景模式變形。
幀是用Cesium API顯式渲染的。

這涵蓋了Cesium通常使用的許多面包和黃油功能，例如加載地形，圖像和3D Tiles等數(shù)據(jù)。對(duì)于對(duì)場(chǎng)景進(jìn)行更精細(xì)的調(diào)整更改，而不是監(jiān)視可能需要渲染的每個(gè)更新，這將由應(yīng)用程序決定。如果應(yīng)用通過Cesium API對(duì)場(chǎng)景或其內(nèi)容進(jìn)行了更改，而更改的方式不屬于上述情況之一，例如，使用實(shí)體或基元API，則顯式請(qǐng)求新的渲染幀。

啟用顯式渲染模式并對(duì)場(chǎng)景進(jìn)行更改后，渲染將以目標(biāo)幀速率正常進(jìn)行。但是，當(dāng)Cesium空閑時(shí)，CPU使用率會(huì)大大降低。例如，使用Chrome開發(fā)人員工具，空閑Cesium場(chǎng)景中的CPU使用率平均為25.1%，但在啟用性能改進(jìn)后，現(xiàn)在平均為3.0%。這是在一臺(tái)配備英特爾i7處理器的筆記本電腦上測(cè)量的，運(yùn)行谷歌Chrome。

CPU usage timeline

時(shí)間軸顯示正常渲染和請(qǐng)求渲染模式下FPS和CPU使用率隨時(shí)間的變化。在初始加載期間，兩者的性能相似。初始加載后，在請(qǐng)求渲染模式下，不會(huì)渲染新幀。這使得CPU使用率下降到幾乎0%。當(dāng)場(chǎng)景最初加載時(shí)，F(xiàn)PS如預(yù)期的那樣為60，但是當(dāng)空閑時(shí)下降到0 FPS，因?yàn)椴恍枰聨?/font>

要將Cesium應(yīng)用配置為使用顯式渲染，應(yīng)啟用請(qǐng)求渲染模式，并考慮模擬時(shí)間，然后任何未自動(dòng)處理的情況都必須顯式渲染幀。

啟用請(qǐng)求呈現(xiàn)模式

啟用requestRenderMode可以減少Cesium渲染新幀的總時(shí)間，并減少應(yīng)用程序中Cesium的總CPU使用量。

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

也可以在創(chuàng)建查看器后對(duì)場(chǎng)景進(jìn)行這些調(diào)整。

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

處理模擬時(shí)間更改

默認(rèn)情況下，當(dāng)啟用requestRenderMode時(shí)，當(dāng)模擬時(shí)間變化超過0.0秒時(shí)，將請(qǐng)求新幀。可以通過設(shè)置maximumRenderTimeChange來調(diào)整此值。如果場(chǎng)景包含隨時(shí)間變化的元素（如動(dòng)畫、照明變化、水遮罩或視頻），請(qǐng)考慮這一點(diǎn)。如果場(chǎng)景中沒有元素隨模擬時(shí)間而更改，請(qǐng)考慮將maximumRenderTimeChange設(shè)置為較高的值，例如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;

解釋性渲染幀

在您的應(yīng)用代碼中，發(fā)生上述列表中未涵蓋的更改后，顯式呈現(xiàn)一個(gè)新框架以立即顯示更改。否則，在渲染新幀之前，更改將不可見。

通過調(diào)用Scene.requestRender顯式渲染幀。

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

例如，應(yīng)用可以具有設(shè)置場(chǎng)景或場(chǎng)景中的對(duì)象的屬性的UI。在這種情況下，當(dāng)UI的狀態(tài)改變時(shí)顯式呈現(xiàn)。

更新/渲染周期事件

作為這些更改的一部分，我們已經(jīng)分離了一些更新和渲染邏輯。Cesium始終以相同的速率更新，具體取決于應(yīng)用的目標(biāo)幀速率（默認(rèn)為60 FPS，請(qǐng)參閱Viewer.targetFrameRate）。使用requestRenderMode時(shí)，僅在渲染新幀時(shí)才會(huì)調(diào)用渲染函數(shù)。我們重新構(gòu)造了渲染周期事件的順序，如下所述。通常，在其中一個(gè)更新事件中調(diào)用Scene.requestRender（或進(jìn)行其他自動(dòng)提示渲染的更改，如相機(jī)位置）將及時(shí)為下一幀排隊(duì)渲染。

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之前

此事件在更新/渲染周期開始時(shí)（更新或渲染場(chǎng)景內(nèi)容之前）引發(fā)。此事件在每個(gè)更新/渲染周期以目標(biāo)幀速率觸發(fā)。

后更新

此事件在場(chǎng)景更新之后但在可能呈現(xiàn)新幀之前引發(fā)。此事件在每個(gè)更新/渲染周期以目標(biāo)幀速率觸發(fā)。

PreRender的

此事件在呈現(xiàn)新幀之前但在進(jìn)行更新之后引發(fā)。當(dāng)啟用requestRenderMode時(shí)，僅當(dāng)呈現(xiàn)新幀時(shí)才觸發(fā)此事件。

postrender的

此事件在呈現(xiàn)新幀后的更新/呈現(xiàn)周期結(jié)束時(shí)引發(fā)，但必須在進(jìn)行更新之后。當(dāng)啟用requestRenderMode時(shí)，僅當(dāng)呈現(xiàn)新幀時(shí)才觸發(fā)此事件。

使用案例和示例

場(chǎng)景渲染性能Sandcastle示例探索了下拉列表中常見用例的一些示例，并涵蓋了不需要顯式渲染的一些示例，以及如果需要顯式渲染，在何處顯式渲染的示例。

讓我們?cè)谝粋€(gè)示例應(yīng)用程序中改進(jìn)性能，該應(yīng)用程序使用鼠標(biāo)懸停拾取來調(diào)整實(shí)體的狀態(tài)。下面的代碼演示了創(chuàng)建場(chǎng)景，添加實(shí)體，然后創(chuàng)建拾取函數(shù)。雖然我們可以在每次觸發(fā)MOUSE_MOVE事件時(shí)調(diào)用requestRender，但除非實(shí)體的屬性發(fā)生更改，否則沒有必要這樣做。

// 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);

開始使用銫離子

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： 3克拉的Anran > 《Cesium》

舉報(bào)/認(rèn)領(lǐng)