「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

当我们在讨论3D技术时，看到游戏循环、帧循环、渲染循环这三个概念时，其实它们说的都是一个概念-物体运动。但是，我们这里还是要分开来讲述下它们的意义，以便更好地理解物体如何在3D场景中运动。

游戏循环

• 我们小时候都有看过动画片，下面我们用一个"书本动画火柴人"举例。

• 我们最原始的动画，是通过手绘一页一页画出来的，然后快速翻页就有了动画，就像上面那样。
• 在我们的游戏程序中可以这样表示

while (true) {
	upadte - status // 控制人物
  draw() // 清空当前画面，绘制当前画面
}

• 在循环中有 update 来更新游戏的状态。当通过键盘鼠标等输入设备，控制人物的状态，就会执行绘制 draw 方法，绘制方法中执行**清空当前画面，绘制当前画面,**如果不清空画面，会造成画面叠加、混乱
• 这个就是游戏循环啦

帧循环

• 这里用Unity概念来说明，需要理解两个概念
• Unity主线程：为保证数据安全,Unity核心的游戏逻辑全部都是在一个线程里完成，即Unity主线程
• 帧循环：在主线程上运行一次完整的游戏逻辑， 称为完成一次帧循环。
• 游戏运行时候会不断按照游戏逻辑规则重新绘图，反复处理用户输入、处理定时事件、绘图，直到游戏结束。
• 一般电影24帧/s不卡，游戏48-60帧/s不卡

​

举例说明

• 在动画中我们画一个圆，从图一移动到图2的地方，由于圆移动的距离比较长，会有比较大的跳动

• 在电影中，胶片的曝光会有一个延迟，除了有圆以外，还会有圆的虚影，所以我们人眼看到的是圆的缓慢移动，24帧/s不会觉得卡

渲染循环

• 物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。渲染的时候，我们调用的是渲染器的render() 函数。代码如下：

renderer.render( scene, camera );

• 如果不断的改变物体的颜色，那么就需要不断的绘制新的场景，所以我们最好的方式，是让画面执行一个循环，不断的调用render来重绘，这个循环就是渲染循环，在游戏中，也叫游戏循环。
• 为了实现循环，我们需要javascript的一个特殊函数，这个函数是requestAnimationFrame。在我们 js 中代码是这样的

function animate() {
    render()
    requestAnimationFrame( animate );
}

• 这样就会不断的执行animate这个函数。也就是不断的执行render()函数。在render()函数中不断的改变物体或者摄像机的位置，并渲染它们，就能够实现动画了。
• 调用requestAnimationFrame函数 ，这个函数会在下一个动画帧触发 animate()函数
• requestAnimationFrame是当 cpu 空闲的时候会调用渲染函数，一般会达到 60帧/s

总结

这一节我们主要讲了以下内容：

• 游戏循环
• 帧循环
• 渲染循环
• requestAnimationFrame函数