19 | 如何用着色器实现像素动画？

月影



该思维导图由 AI 生成，仅供参考

你好，我是月影。
上节课，我们以 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 次。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文深入介绍了如何使用着色器实现像素动画，通过详细讲解固定帧动画和非固定帧动画的实现方法，为读者提供了实用的技术指导。作者首先回顾了使用HTML/CSS实现动画的方法和标准动画模型，然后详细讲解了如何利用着色器实现动画效果。在固定帧动画部分，作者通过片元着色器中的for循环和计算纹理坐标的方式实现了一个会飞的小鸟动画，并给出了相应的JavaScript代码。在非固定帧动画部分，作者介绍了如何使用顶点着色器和片元着色器实现动画效果，并提供了相应的代码示例。文章还探讨了顶点着色器和片元着色器实现旋转动画的不同方向，以及在片元着色器中实现非固定帧动画的优势。最后，作者通过修改代码示例，展示了如何利用片元着色器的技巧来实现更加复杂的动画效果，充分利用了GPU的并行效率。文章还介绍了如何在着色器中实现缓动函数与非线性插值，通过示例代码展示了如何利用着色器实现轨迹动画和非线性的颜色过渡，以及如何使用贝塞尔曲线缓动函数实现更加丰富多彩的插值效果。这些技术特点使得本文成为了一篇深入探讨着色器动画实现方法的精华文章。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(3)

最新
精选

有一种踏实
利用顶点着色器实现图片中心爆炸，基本思路就是给每一个粒子分配 4 个顶点坐标、4 个纹理坐标，不过需要启用 Uint32Array 存储 cells 数据，另外很好奇如何利用片元着色器实现？
2024-02-01归属地：上海


kaimo
使用return clamp(p * (2 - p) * 0.0, 1.0);执行报错
2022-11-10归属地：广东
1

Geek3340
if(float(i) == mod(float(frameIndex), 3.0)) break; 第一个例子没看到
2021-07-01



收起评论