Cesium自定义帧率显示

Cesium 提供了不少用于调试的工具,特别方便在开发的时候使用。其中帧率显示特别方便我们对性能调试。因为帧率到了30以下就基
本会开始卡顿了。如果想一直显示帧率,直接用 Cesium 默认的话,有时候会跟我们的界面的整体风格不搭配。那么就得自定义来实现
了。

结果对比

看个动态的

因为用的是 Cesium 中的 postRender 监听事件,所以多少会跟自带的毫米值(ms)有点区别, 但是跟PFS值基本保持一致。而有参考价
值的主要是 FPS值,在实际使用中,这一点点的差距不会影响判断。

实现

代码的实现很简单,我也是在源代码中查找的,然后改了一下。

  • 源代码 Source\Scene\PerformanceDisplay.js

  • 代码修改

    class CesiumFPSUtil {
    constructor(containerId) {
    this.id = containerId || "fpsdiv";
    this._lastFpsSampleTime = getTimestamp();
    this._lastMsSampleTime = getTimestamp();
    this._fpsFrameCount = 0;
    this._msFrameCount = 0;
    this.createDiv();
    }

    createDiv() {
    const parent = document.getElementById(this.id);
    const fpsDiv = document.createElement("div");
    fpsDiv.className = "info-content";

    this._fpsText = document.createElement("span");
    this._msText = document.createElement("span");
    fpsDiv.append(this._fpsText);
    fpsDiv.append(this._msText);
    parent.append(fpsDiv);
    }


    update() {
    let time = getTimestamp();
    this._fpsFrameCount++;
    let updateDisplay = true;
    let fpsElapsedTime = time - this._lastFpsSampleTime;
    if (fpsElapsedTime > 1000) {
    var fps = "N/A";
    if (updateDisplay) {
    fps = ((this._fpsFrameCount * 1000) / fpsElapsedTime) | 0;
    }

    this._fpsText.innerText = fps + " FPS";
    this._lastFpsSampleTime = time;
    this._fpsFrameCount = 0;
    }
    this._msFrameCount++;
    let msElapsedTime = time - this._lastMsSampleTime;
    if (msElapsedTime > 200) {
    let ms = "N/A";
    if (updateDisplay) {
    ms = (msElapsedTime / this._msFrameCount).toFixed(2);
    }

    this._msText.innerText = ms + " MS";
    this._lastMsSampleTime = time;
    this._msFrameCount = 0;
    }
    }
    }
  • 相关函数getTimestamp

    function getTimestamp() {
    var getTime;

    if (
    typeof performance !== "undefined" &&
    typeof performance.now === "function" &&
    isFinite(performance.now())
    ) {
    getTime = function () {
    return performance.now();
    };
    } else {
    getTime = function () {
    return Date.now();
    };
    }
    return getTime();
    }
  • 使用

    //帧率显示
    const fpsInfo = new CesiumFPSUtil('fpsdiv')
    var fpsPostEvent = function (){
    fpsInfo.update()
    }
    viewer.scene.postRender.addEventListener(fpsPostEvent)

代码

完整代码都放到 github 上,需要的移步Cesium-demo-view

音乐小憩