webgl动画纹理

动画纹理可以借助canvas的能力绘制较复杂的动画，兼容性较好；同时，也是目前常用的直播透明礼物动效制作的前置基础；

动画纹理

绘制动画纹理和图片纹理的基本过程是一致的，只是以视频作为纹理数据来源；

视频的本质是由一系列的图片序列构成，因此本质上动画纹理和图片纹理并没有区别

使用图片纹理时，我们需要等待图片加载完成然后将图形信息绘制到纹理；同理，绘制动画纹理时，我们需要获取到视频的每一帧信息，然后进行 绘制；为了提高性能，使用requestAnimationFrame循环获取每帧图片的信息；updateTexture方法去获取视频的每一帧信息，传入的像素源变为video，webgl会自动获取对应的帧；

在setupVideo中，创建了一个不可见的video，同时设置其静音自动循环播放；为了不必要的重复渲染，监听了视频的play和timeupdate（音视频的播放位置发生变化时触发）事件；

render方法循环调用绘制序列帧纹理，形成动画纹理；

参考文献

1. 动画纹理
2. HTML Audio/Video DOM timeupdate 事件