更新于 

动画

实现动画的关键就是：不断擦除并重绘动画图形，并且在每次重绘时轻微的改变动画属性。

Rotating Triangle

RotatingTriangle Code
RotatingTriangle运行效果
RotatingTriangle运行效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../examples/lib/cuon-matrix.js"></script>
  <script src="../examples/lib/cuon-utils.js"></script>
  <script src="../examples/lib/webgl-debug.js"></script>
  <script src="../examples/lib/webgl-utils.js"></script>
  <script src="./RotatingTriangle.js"></script>
</head>
<body onload="main()">
  <canvas id="webgl" width="300" height="300"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
let VSHADER_SOURCE =
  `
  attribute vec4 a_Position;
  uniform mat4 u_ModelMatrix;
  void main(){
    gl_Position = u_ModelMatrix * a_Position;
  }
  `;
let FSHADER_SOURCE =
  `
  void main(){
    gl_FragColor = vec4(0.0,1.0,0.0,0.5);
  }
  `;
let ANGLE_STEP = 45.0;
function main() {
  let canvas = document.getElementById('webgl');
  let gl = getWebGLContext(canvas);
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('着色器初始化失败');
    return;
  }
  let n = initVertexBuffer(gl);
  let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 三角形当前旋转角度
  let currentAngle = 0.0;
  // 模型矩阵 Matrix4对象
  let modelMatrix = new Matrix4();

  // 开始绘制三角形
  var tick = function () {
    // 更新旋转角
    currentAngle = animate(currentAngle);
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);
    // 请求浏览器调用tick
    requestAnimationFrame(tick);
  };

  tick();
} 

function initVertexBuffer(gl) {
  let vertices = new Float32Array([
    0.0, 0.25, -0.25, -0.25, 0.25, -0.25
  ]);
  let vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);
  return vertices.length / 2;
}

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
  // 设置旋转矩阵
  modelMatrix.setRotate(currentAngle, 0, 0, 1);

  // 将旋转矩阵传输给顶点着色器
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  
  // 清除canvas
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, n);
}

// 记录上一次调用函数的时刻
let g_last = Date.now();
function animate(angle) {
  // 计算距离上次调用经过多长时间
  var now = Date.now();
  var elapsed = now - g_last; // 毫秒
  g_last = now;
  // 根据距离上次调用的时间，更新当前旋转角度
  let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
  return newAngle %= 360;
}
步骤分解
反复调用绘制函数 tick()

tick中实现了关键的2个步骤：

  1. 更新角度
  2. 重绘

下图的基本步骤可以用来实现各种动画，是3D图形编程的关键技术。

按照指定旋转角度绘制三角形 draw()

draw一共有四步操作：

step1

设置旋转矩阵。

1
modelMatrix.setRotate(currentAngle,0,0,1);

step2

将旋转矩阵传入Vertex_Shader。

1
gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);

step3

清除canvas。

1
gl.clear(gl.COLOR_BUFFER_BIT);

step4

开始绘制。

1
gl.drawArrays(gl.TRIANGLES,0,n);
请求再次被调用 requestAnimationFrame()
为什么不用setInterval？

如果要实现 重复执行某个特定的任务，
setInterval 是比较常用的方法，
但是它存在一个弊端：
不管其被调用的标签页是否被激活，其中的setInterval()函数都会反复调用。
这会增加浏览器的负荷，
requestAnimation只有在标签页激活时才生效。

也可以通过 cancelAnimationFrame 取消请求：

更新旋转角 aniamte()

要注意的是：调用requestAnimationFrame(),
只是请求浏览器在适当的时机调用参数函数，
因此不能保证每次调用间隔的时间相同，
需要计算时间间隔，并由时间间隔计算这一帧中三角形的旋转角度。

g_last = 上一帧开始的时间
elapsed = 两帧之间时间间隔 = 这一帧开始的时间 - g_last
ANGLE_STEP/1000.0 = 每毫秒旋转度数
旋转变化度数 = ANGLE_STEP / 1000.0 * elapsed

1
let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;

Rotating Translated Triangle

结合本章内容的小动画