动画纹理可以借助canvas
的能力绘制较复杂的动画,兼容性较好;同时,也是目前常用的直播透明礼物动效制作的前置基础;
动画纹理
绘制动画纹理和图片纹理的基本过程是一致的,只是以视频作为纹理数据来源;
视频的本质是由一系列的图片序列构成,因此本质上动画纹理和图片纹理并没有区别
使用图片纹理时,我们需要等待图片加载完成然后将图形信息绘制到纹理;同理,绘制动画纹理时,我们需要获取到视频的每一帧信息,然后进行 绘制;为了提高性能,使用requestAnimationFrame
循环获取每帧图片的信息;updateTexture
方法去获取视频的每一帧信息,传入的像素源变为video
,webgl会自动获取对应的帧;
在setupVideo
中,创建了一个不可见的video
,同时设置其静音自动循环播放;为了不必要的重复渲染,监听了视频的play
和timeupdate
(音视频的播放位置发生变化时触发)事件;
render
方法循环调用绘制序列帧纹理,形成动画纹理;