关于逻辑时间与渲染时间的小点子增量时间逻辑与渲染

最新推荐文章于 2023-12-01 22:17:01 发布

towrabbit

最新推荐文章于 2023-12-01 22:17:01 发布

阅读量772

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：渲染与逻辑增量时间

本文链接：https://blog.youkuaiyun.com/towrabbit/article/details/82555382

前端专栏收录该内容

37 篇文章

订阅专栏

本文详细解析了游戏或动画中常见的渲染循环实现方式，重点介绍了如何通过增量时间保持逻辑更新与渲染帧率的一致性，避免因设备性能差异导致的游戏画面错位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在看别人代码的时候看到这么一段：

var delta;
function loop(){
    var now = new Date() - 0;
    var d = (now - delta)/(1000/60);//此处delta为上一帧的时间点
    delta = now;
    update(d);
    render();
    requestAnimationFrame(loop);
}

对此进行整理分析，
这属于一个渲染循环，1000/60为每一帧的时间，此处为每秒60帧的渲染频率。在函数中的d为增量时间，在理想状态下，增量时间为1，但是如果运行过程中需要进行的运算很多，或者其他方面导致了渲染延迟卡顿，这样可以保持渲染层渲染的位置等信息与逻辑层保持一致。
在其中的update 函数接受的变量为增量时间，根据这个增量时间计算逻辑层的变化，
例如：
在逻辑层面每过（1000/60）秒（一个时间增量）物体位置移动了1，假如此时渲染层卡顿了一下，帧数下降了一半也就是经过了(1000/30)秒才渲染，那么这个物体位置实际上移动了2，而渲染位置也移动了2，能够正确渲染。假如把逻辑层与渲染层混起来，那么可能导致渲染层影响了逻辑层，原本在1秒内经过20个单位，而因为机器不行只经过了15个单位，这不是我们想要的，所以要将逻辑层与渲染层分开。而且requestAnimationFrame() 这个函数是非常不稳定的，即便是硬件设备比较好，可能每秒少了一帧，随着时间少的帧会越来越多，导致误差越来越大。
因此在实际情况下，渲染层与逻辑层的时间务必要分开，从而减少时间上导致的差异。