计算机图形学 · 第3章
交互与动画演示
动画循环显微镜 The Animation Loop Microscope
v3.2 Demo
动画画布 / Scene (WebGL)
60.0 FPS
顶点缓冲 (VBO):
固定不变
Uniform (u_theta):
1.84 rad
原点 (0, 0) | 坐标空间 [-1.0, 1.0]
当前物体：旋转几何四边形
变换机制：
x' = x·cosθ - y·sinθ
y' = x·sinθ + y·cosθ
动画循环流程 (Animation Loop)
01
数据源
State
（程序内存状态）
保存当前物理/逻辑变量：
theta, direction, speed
02
CPU计算
Update
（计算下一时刻状态）
按时间步长递增：
theta += speed * dt
03
GPU渲染
Render
（提交着色器重绘）
更新 Uniform 并执行绘制：
gl.drawArrays(...)
04
精准调步
requestAnimationFrame
（浏览器同步）
对齐显示器刷新率（V-Sync），注册下一帧回调
核心洞察：
动画并非不可控跳跃，而是每秒60次的因果闭环
状态监视 (State Inspector)
累计帧数 (Frame)
#
328
当前角度 (theta)
θ
1.84 rad
帧间隔 (Delta time)
Δt
16.7 ms
循环状态 (Status)
●
running
显微镜洞察：图形管线通信特征
教学重点
顶点缓冲区 (VBO)
unchanged
显存无重复上传
Uniform 变量
updated
每帧极轻量传递
为什么高效？
顶点数据停留在 GPU，CPU 仅传输微小的浮点标量
theta，开销极低。