💍 [WebGL编程指南] 4. 高级变换与动画基础
动画
为了让一个三角形动起来，需要不断擦除和重绘三角形，并在每次重绘时改变角度。
当以一定速度连续绘制图像时，大脑会对影像进行插值，形成流畅的动画。
javascriptCopy
// 入口函数
function main() {
// ...
// 三角形当前角度
let currentAngle = 0.0
function tick () {
// 获取旋转角度
currentAngle = animate(currentAngle)
draw(gl, n, currentAngle, u_ModelMatrix)
requestAnimationFrame(tick) // 请求浏览器调用tick
}
tick()
}
function draw(...args) {
// 设置旋转
// 将旋转矩阵传递给顶点着色器
// 绘制三角形
}
// 记录上一次绘制时间
let g_last = Date.now()
// 选择速度（度/秒）
const ANGLE_STEP = 45.0
function animate(angle) {
const now = Date.now()
const elapsed = now - g_last //
g_last = now
const newAngle = angle + (ANGLE_STEP * elapsed)
return newAngle %= 360
}