3D引擎构建:Update生命周期的实现

很多引擎内部都封装了自己的Update函数，比如Unity的Update生命周期，并传递了一个deltaTime，如果还有人不太了解deltaTime的作用的话，这里做下解释：首先deltaTime是引擎运行上一帧所花费的时间(以秒为单位)，为什么需要这么个东西？因为引擎的每一帧的运行都不能确保运行的时间都能相同(硬件与软件层面的限制都可能对其影响且不同机器的运行效率也不同)，我们以用户机器的不同运行效率举例，当我们把所有速度去乘以deltaTime值时结果会是：如果乘上的deltaTime很大，就意味着上一帧的渲染花费了更多时间，所以这一帧的速度需要变得更高来平衡渲染所花去的时间。使用这种方法时，无论你的电脑快还是慢，速度都会相应平衡，这样每个用户的体验就都一样了。那么Update函数内部又如何实现的呢？

因为最近在搭建Webgl版的3D引擎，所以以js相关api举例。通过思维导图，我们一步步分析，首先定义isActive来决定当前是否重复执行Update函数，msLastFrame代表上一帧的开始时间（毫秒为单位）, 通过requestAnimationFrame来开启帧运行run函数，run函数中通过是否手动设置fps来区分run的运行逻辑，当手动设置了fps时，通过msFpsLimit = 1000/fps来记录一秒内每运行一帧所花费的毫秒数，通过msCurrent = performance.now()来记录这一帧开始的时间(确切的说它是一个时间戳)，再通过msDelta = (msCurrent - msLastFrame)来记录上一帧结束的毫秒数时间间隔,再计算deltaTime = msDelta / 1000.0把毫秒数间隔规范化为秒数间隔。通过判断msDelta >= msFpsLimit来判定上一帧经历的时间是否超过规定的时间间隔，如果是的话就先计算fps = Math.floor(1/deltaTime)代表一秒内总共又多少帧数，再重置msLastFrame = msCurrent，调用Update回调，传递deltaTime，最后判断isActive是否处于激活状态，如果是，继续重复执行run函数。如果不设置fps那就不需要对比上一帧经过的时间与规定时间的大小。

示例代码如下：

class RenderLoop {
    constructor(callback,fps) {
        this.msLastFrame = null;
        this.callback = callback;
        this.isActive = false;
        this.fps = 0;

        if(fps && fps > 0) {
            this.msFpsLimit = 1000/fps;

            this.run = ()=> {
                let msCurrent = performance.now(),
                    msDelta = (msCurrent - this.msLastFrame),
                    deltaTime = msDelta/1000.0;

                if(msDelta >= this.msFpsLimit) {
                    this.fps = Math.floor(1/deltaTime);
                    this.msLastFrame = msCurrent;
                    this.callback(deltaTime);
                }
                if(this.isActive) window.requestAnimationFrame(this.run);
            }
        } else {
            this.run = ()=> {
                let msCurrent = performance.now(),
                    deltaTime = (msCurrent - this.msLastFrame) / 1000.0;
                this.fps = Math.floor(1/deltaTime);
                this.msLastFrame = msCurrent;

                this.callback(deltaTime);
                if(this.isActive) window.requestAnimationFrame(this.run);
            }
        }
    }

    start() {
        this.isActive = true;
        this.msLastFrame = performance.now();
        window.requestAnimationFrame(this.run);
        return this;
    }

    stop() {
        this.isActive = false;
    }
}