20 KiB
19 | 如何用着色器实现像素动画？
你好，我是月影。
上节课，我们以HTML/CSS为例，讲了三种动画的实现方法，以及标准的动画模型。我们先来回顾一下：
- 固定帧动画：为每一帧准备一张图片，然后把CSS关键帧动画的easing-function设为step-end进行循环播放。
- 增加增量动画：在每帧给元素的相关属性增加一定的量，比如增加一个rotate角度。
- 时序动画：通过控制时间和动画函数来描述动画，首先定义初始时间和周期，然后在update中计算当前经过时间和进度p，最后通过p来更新动画元素的属性。
- 标准动画模型：先定义Animator类，然后使用线性插值实现匀速运动的动画，以及通过缓动函数实现变速运动的动画。
而WebGL实现动画的方式和以上这些方式都有差别。所以这节课，我们就接着来讲怎么用着色器来实现动画。
因为实现固定帧动画最简单，所以我们还是先来说它。
如何用着色器实现固定帧动画
我们完全可以使用在片元着色器中替换纹理坐标的方式，来非常简单地实现固定帧动画。为了方便对比，我还是用上一节课实现会飞的小鸟的例子来讲，那片元着色器中的代码和最终要实现的效果如下所示。
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform sampler2D tMap;
uniform float fWidth;
uniform vec2 vFrames[3];
uniform int frameIndex;
void main() {
vec2 uv = vUv;
for (int i = 0; i < 3; i++) {
uv.x = mix(vFrames[i].x, vFrames[i].y, vUv.x) / fWidth;
if(float(i) == mod(float(frameIndex), 3.0)) break;
}
vec4 color = texture2D(tMap, uv);
gl_FragColor = color;
}
利用片元着色器实现固定帧动画的关键部分，是main函数中的for循环。因为我们的动画只有3帧，所以最多只需要循环3次。
我们还需要一个重要的参数，vFrames。它是每一帧动画的图片起始x和结束x坐标，我们用这两个坐标和vUv.x计算插值，最后除以图片的总宽度fWidth，就能得到对应的纹理x坐标。替换纹理坐标之后，我们就能实现一个会飞的小鸟了。
实现这个固定帧动画对应的JavaScript代码如下：
const canvas = document.querySelector('canvas');
const renderer = new GlRenderer(canvas);
const textureURL = 'https://p.ssl.qhimg.com/t01f265b6b6479fffc4.png';
(async function () {
const texture = await renderer.loadTexture(textureURL);
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.tMap = texture;
renderer.uniforms.fWidth = 272;
renderer.uniforms.vFrames = [2, 88, 90, 176, 178, 264];
renderer.uniforms.frameIndex = 0;
setInterval(() => {
renderer.uniforms.frameIndex++;
}, 200);
const x = 43 / canvas.width;
const y = 30 / canvas.height;
renderer.setMeshData([{
positions: [
[-x, -y],
[-x, y],
[x, y],
[x, -y],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [[0, 1, 2], [2, 0, 3]],
}]);
renderer.render();
}());
实际上WebGL实现固定帧动画的思路，和上一节课的思路是类似的。只不过，上一节课我们直接用CSS的background-image，来切换background-position就可以实现动画。而在这里，我们需要将图片纹理tMap传进去，然后根据不同的frameIndex来计算出对应的纹理坐标，并且这个计算是在片元着色器中进行的。
如何用着色器实现非固定帧动画
好了，知道了怎么实现固定帧动画。接着，我们再来说增量动画和时序动画的实现。由于这两种动画都要将与时间有关的参数传给着色器，处理过程非常相似，所以我们可以将它们统称为非固定帧动画，放在一起来说。
用Shader实现非固定帧动画，本质上和上一节课的实现方法没有太大区别。所以，我们仍然可以使用同样的方法，以及标准动画模型来实现它。只不过，用Shader来实现非固定帧动画更加灵活，我们可以操作更多的属性，实现更丰富的效果。下面，我们详细来说说。
1. 用顶点着色器实现非固定帧动画
我们知道，WebGL有两种Shader，分别是顶点着色器和片元着色器，它们都可以用来实现动画。我们先来看顶点着色器是怎么实现动画的。
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
uniform float rotation;
void main() {
gl_PointSize = 1.0;
vUv = uv;
float c = cos(rotation);
float s = sin(rotation);
mat3 transformMatrix = mat3(
c, s, 0,
-s, c, 0,
0, 0, 1
);
vec3 pos = transformMatrix * vec3(a_vertexPosition, 1);
gl_Position = vec4(pos, 1);
}
在顶点着色器中，我们先绘制出一个红色的正方形，然后用三维齐次矩阵实现旋转。具体来说，就是把顶点坐标进行矩阵运算，再配合下面的JavaScript代码，就能让这个正方形旋转了。
renderer.uniforms.rotation = 0.0;
requestAnimationFrame(function update() {
renderer.uniforms.rotation += 0.05;
requestAnimationFrame(update);
});
当然，我们也可以使用上一节课得到的标准动画模型来实现。具体来说，就是定义一个新的Animator对象，然后在Animator对象的方法中更新rotation属性。使用标准模型能更加精确地控制图形的旋转效果，代码如下：
const animator = new Animator({duration: 2000, iterations: Infinity});
animator.animate(renderer, ({target, timing}) => {
target.uniforms.rotation = timing.p * 2 * Math.PI;
});
总之，WebGL实现非固定帧动画的方法与上节课的方式基本上一样。只不过，前一节课我们直接修改HTML元素的属性，而这一节课我们将属性通过uniform变量传给着色器执行渲染。
2. 用片元着色器实现非固定帧动画
除了用顶点着色器，我们也能用片元着色器实现动画。实际上，我们已经用片元着色器实现了不少动画。比如说，当我们将时间参数uTime通过uniform传给着色器的时候，就是在实现动画。
还是用上面的例子。这次，我们将旋转放到片元着色器中处理，其实也能实现类似的旋转效果。代码如下所示：
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform vec4 color;
uniform float rotation;
void main() {
vec2 st = 2.0 * (vUv - vec2(0.5));
float c = cos(rotation);
float s = sin(rotation);
mat3 transformMatrix = mat3(
c, s, 0,
-s, c, 0,
0, 0, 1
);
vec3 pos = transformMatrix * vec3(st, 1.0);
float d1 = 1.0 - smoothstep(0.5, 0.505, abs(pos.x));
float d2 = 1.0 - smoothstep(0.5, 0.505, abs(pos.y));
gl_FragColor = d1 * d2 * color;
}
你发现了吗，顶点着色器和片元着色器实现的旋转动画方向正好相反。为什么会出现这样的情况呢？因为在顶点着色器中，我们直接改变了顶点坐标，所以这样实现的旋转动画和WebGL坐标系（右手系）的方向一致，角度增大呈逆时针方向旋转。而在片元着色器中，我们的绘制原理是通过距离场着色来实现的，所以这里的旋转实际上改变的是距离场的角度而不是图形角度，最终绘制的图形也是相对于距离场的。又因为距离场逆时针旋转，所以图形就顺时针旋转了。
最后我再补充一点，一般来说，动画如果能使用顶点着色器实现，我们会尽量在顶点着色器中实现。因为在绘制一帧画面的时候，顶点着色器的运算量会大大少于片元着色器，所以使用顶点着色器消耗的性能更少。
但是，在片元着色器中实现非固定帧动画也有优势。我们可以使用片元着色器的技巧，如重复、随机、噪声等等来绘制更加复杂的效果。
比如说，我们把上面的代码稍微修改一下，使用取小数和取整数的函数，再用之前网格化的思路，来利用网格实现了大量的重复动画。这个做法充分利用了GPU的并行效率，比用其他方式把图形一个一个地绘制出来性能要高得多。
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform float rotation;
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
vec3 hsb2rgb(vec3 c){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
rgb = rgb * rgb * (3.0 - 2.0 * rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}
void main() {
vec2 f_uv = fract(vUv * 10.0);
vec2 i_uv = floor(vUv * 10.0);
vec2 st = 2.0 * (f_uv - vec2(0.5));
float c = 0.7 * cos(rotation);
float s = 0.7 * sin(rotation);
mat3 transformMatrix = mat3(
c, s, 0,
-s, c, 0,
0, 0, 1
);
vec3 pos = transformMatrix * vec3(st, 1.0);
float d1 = 1.0 - smoothstep(0.5, 0.505, abs(pos.x));
float d2 = 1.0 - smoothstep(0.5, 0.505, abs(pos.y));
gl_FragColor = d1 * d2 * vec4(hsb2rgb(vec3(random(i_uv), 1.0, 1.0)), 1.0);
}
如何在着色器中实现缓动函数与非线性插值
在前面的例子中，我们使用Shader的矩阵运算实现了旋转动画。同样，轨迹动画也可以用Shader矩阵运算实现。
比如说，我们要在画布上绘制一个红色的方块，利用它实现轨迹动画。首先，我们要实现一个着色器，它通过设置translation来改变图形位置，代码如下：
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
uniform vec2 translation;
void main() {
gl_PointSize = 1.0;
vUv = uv;
mat3 transformMatrix = mat3(
1, 0, 0,
0, 1, 0,
translation, 1
);
vec3 pos = transformMatrix * vec3(a_vertexPosition, 1);
gl_Position = vec4(pos, 1);
}
然后，在JavaScript中，我们将translation依照时间变化传给上面的着色器，就可以让方块移动。那利用下面的代码，我们就让方块沿水平方向向右匀速运动一段距离。
const canvas = document.querySelector('canvas');
const renderer = new GlRenderer(canvas);
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.color = [1, 0, 0, 1];
renderer.uniforms.translation = [-0.5, 0];
const animator = new Animator({duration: 2000});
animator.animate(renderer, ({target, timing}) => {
target.uniforms.translation = [-0.5 * (1 - timing.p) + 0.5 * timing.p, 0];
});
renderer.setMeshData([{
positions: [
[-0.25, -0.25],
[-0.25, 0.25],
[0.25, 0.25],
[0.25, -0.25],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [[0, 1, 2], [2, 0, 3]],
}]);
renderer.render();
此外，我们还可以通过缓动函数来实现非匀速运动。而且我们既可以将缓动函数用JavaScript计算，也可以直接将缓动函数放在Shader中。如果将缓动函数用JavaScript计算，那么方法和上一节课完全一样，也就是给Animator传一个easing函数进去就可以了，这里我就不再重复了。但如果要将缓动函数写在Shader中，其实方法也非常简单。
我们以前面顶点着色器实现非固定帧动画的代码为例，这次，我们不使用Animator，而是直接将时间uTime参数传入Shader，然后在Shader中加入缓动函数。在这里，我们用smooth(0.0, 1.0, p)来让方块做平滑加速、减速运动。除此之外，你也可以替换缓动函数，比如clamp(p * p, 0.0, 1.0)或者clamp(p * (2 - p) * 0.0, 1.0)来实现匀加速、匀减速的运动效果。修改后的代码如下：
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
uniform vec4 uFromTo;
uniform float uTime;
float easing(in float p) {
return smoothstep(0.0, 1.0, p);
// return clamp(p * p, 0.0, 1.0);
// return clamp(p * (2 - p) * 0.0, 1.0);
}
void main() {
gl_PointSize = 1.0;
vUv = uv;
vec2 from = uFromTo.xy;
vec2 to = uFromTo.zw;
float p = easing(uTime / 2.0);
vec2 translation = mix(from, to, p);
mat3 transformMatrix = mat3(
1, 0, 0,
0, 1, 0,
translation, 1
);
vec3 pos = transformMatrix * vec3(a_vertexPosition, 1);
gl_Position = vec4(pos, 1);
}
总之，因为Shader是在GPU中运算的，所以所有顶点都是被并行处理的。因此，通常情况下，我们在顶点着色器中执行缓动函数会更快。
不过，直接用JavaScript计算和放在顶点着色器里计算，差别也不是很大，但如果把它放在片元着色器里计算，因为要把每个像素点都计算一遍，所以性能消耗反而更大一些。那我们为什么还要在着色器中计算easing呢？这是因为，我们不仅可以利用easing控制动画过程，还可以在片元着色器中用easing来实现非线性的插值。
那什么是非线性插值呢？我们依然通过例子来进一步理解。
我们知道，在正常情况下，顶点着色器定义的变量在片元着色器中，都会被线性插值。比如，你可以看我下面给出的顶点着色器、片元着色器，以及JavaScript中的代码。
//顶点着色器
attribute vec2 a_vertexPosition;
attribute vec2 uv;
attribute vec4 color;
varying vec2 vUv;
varying vec4 vColor;
uniform vec4 uFromTo;
uniform float uTime;
void main() {
gl_PointSize = 1.0;
vUv = uv;
vColor = color;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
//片元着色器
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
//JavaScript中的代码
renderer.setMeshData([{
positions: [
[-0.5, -0.25],
[-0.5, 0.25],
[0.5, 0.25],
[0.5, -0.25],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
color: [
[1, 0, 0, 1],
[1, 0, 0, 1],
[0, 0.5, 0, 1],
[0, 0.5, 0, 1],
],
},
cells: [[0, 1, 2], [2, 0, 3]],
}]);
renderer.render();
通过执行上面的代码，我们可以得到一个长方形，它的颜色会从左到右，由红色线性地过渡到绿色。如果想要实现非线性的颜色过渡，我们就不能采用这种方式了，我们可以采用uniform的方式，通过easing函数来实现。
#ifdef GL_ES
precision highp float;
#endif
float easing(in float p) {
return smoothstep(0.0, 1.0, p);
// return clamp(p * p, 0.0, 1.0);
// return clamp(p * (2 - p) * 0.0, 1.0);
}
varying vec2 vUv;
uniform vec4 fromColor;
uniform vec4 toColor;
void main() {
float d = easing(vUv.x);
gl_FragColor = mix(fromColor, toColor, d);
}
比如，我们可以使用smoothstep这种easing函数，来实现如下的插值效果：
另外，我们还可以像利用JavaScript那样，在Shader里实现贝塞尔曲线缓动。
// http://www.flong.com/texts/code/shapers_bez/
// Helper functions:
float slope_from_t (float t, float A, float B, float C){
float dtdx = 1.0/(3.0*A*t*t + 2.0*B*t + C);
return dtdx;
}
float x_from_t (float t, float A, float B, float C, float D){
float x = A*(t*t*t) + B*(t*t) + C*t + D;
return x;
}
float y_from_t (float t, float E, float F, float G, float H){
float y = E*(t*t*t) + F*(t*t) + G*t + H;
return y;
}
float cubic_bezier (float x, float a, float b, float c, float d){
float y0a = 0.00; // initial y
float x0a = 0.00; // initial x
float y1a = b; // 1st influence y
float x1a = a; // 1st influence x
float y2a = d; // 2nd influence y
float x2a = c; // 2nd influence x
float y3a = 1.00; // final y
float x3a = 1.00; // final x
float A = x3a - 3.0 *x2a + 3.0 * x1a - x0a;
float B = 3.0 * x2a - 6.0 * x1a + 3.0 * x0a;
float C = 3.0 * x1a - 3.0 * x0a;
float D = x0a;
float E = y3a - 3.0 * y2a + 3.0 * y1a - y0a;
float F = 3.0 * y2a - 6.0 * y1a + 3.0 * y0a;
float G = 3.0 * y1a - 3.0 * y0a;
float H = y0a;
// Solve for t given x (using Newton-Raphelson), then solve for y given t.
// Assume for the first guess that t = x.
float currentt = x;
const int nRefinementIterations = 5;
for (int i=0; i < nRefinementIterations; i++){
float currentx = x_from_t(currentt, A,B,C,D);
float currentslope = slope_from_t(currentt, A,B,C);
currentt -= (currentx - x)*(currentslope);
currentt = clamp(currentt, 0.0, 1.0);
}
float y = y_from_t(currentt, E,F,G,H);
return y;
}
使用贝塞尔曲线缓动函数，我们能够实现更加丰富多彩的插值效果。
如何在片元着色器中实现随机粒子动画
我们知道，使用片元着色器还可以实现非常复杂的图形动画，包括粒子动画、网格动画以及网格噪声动画等等。网格动画和网格噪声我们前面都详细讲过，这里我们就重点来说说怎么实现粒子动画效果。
#ifdef GL_ES
precision highp float;
#endif
...
float sdf_circle(vec2 st, vec2 c, float r) {
return 1.0 - length(st - c) / r;
}
varying vec2 vUv;
uniform float uTime;
void main() {
vec2 st = vUv;
float rx = mix(-0.2, 0.2, noise(vec2(7881.32, 0) + random(st) + uTime));
float ry = mix(-0.2, 0.2, noise(vec2(0, 1433.59) + random(st) + uTime));
float dis = distance(st, vec2(0.5));
dis = pow((1.0 - dis), 2.0);
float d = sdf_circle(st + vec2(rx, ry), vec2(0.5), 0.2);
d = smoothstep(0.0, 0.1, d);
gl_FragColor = vec4(dis * d * vec3(1.0), 1.0);
}
如上面代码所示，我们可以使用随机+噪声来实现一个粒子效果。首先，我们设置随机数用来生成距离场的初始值，然后设置噪声用来形成位移，最后传入uTime变量来实现动画。
这样一来，我们就能绘制出数量非常多的点，并且让它们沿着随机轨迹运动。最终的视觉效果如下：
像这样流畅的动画效果，因为实现的过程中会涉及非常多点的运算，如果不用shader，我们几乎是无法完成的。
要点总结
这节课我们学习了用WebGL实现动画的方法。
如果是实现固定帧动画，在WebGL中，我们可以把准备好的图片作为纹理，然后动态修改纹理坐标。
如果是实现非固定帧动画，我们可以通过uniform，将变化的属性作为参数传给着色器处理。上节课的标准动画模型在WebGL中依然可以使用，我们可以利用它计算出属性，再传入着色器执行渲染。
实际上，今天讲的方法，与用HTML/CSS、SVG、Canvas2D实现动画的基本原理是一样的。只不过，WebGL中的很多计算，是需要用JavaScript和GLSL，也就是Shader来配合进行的。
这节课的实战例子比较多，我建议你好好研究一下。毕竟，使用片元着色器实现动画效果的思路，我们还会在后续课程中经常用到。
小试牛刀
-
今天，我们在Shader中通过矩阵运算实现了图形的旋转和平移，你能用学到的知识完善矩阵运算，来实现缩放、旋转、平移和扭曲变换，以及它们的组合效果吗？
-
结合今天的内容，你可以试着实现一个粒子效果：让一张图片从中心爆炸开来，炸成碎片并最终消失。
欢迎在留言区和我讨论，分享你的答案和思考，也欢迎你把这节课分享给你的朋友，我们下节课见！
源码
本节课完整示例代码见GitHub仓库