[webgl]使用regl对视频使用gl-transitions中的转场效果
0、介绍
regl 是一个简化 WebGL 编程的库，可以更轻松地编写 WebGL 程序。GL Transitions (github: gl-transitions) 是收集写好的 WebGL GLSL 程序的网站，用来实现转场效果。
有的视频剪辑软件，比如剪映，已经在浏览器中实现了视频转场特效的预览，其原理就是利用 WebGL 运行 GLSL 来实现的。GLSL 是一种运行在 GPU 中的语言，虽然不是很难，但想要在短时间内掌握也是不太现实的。
利用开头提到的两个工具，我们也可以实现一样的效果。目前 GL Transitions 网站上有六十多个转场效果，基本上能够满足常见需求。网站上还提供了在线编辑器，可以实现你自己想要的效果。
下面我们就一步一步实现视频转场。
1、准备视频资源
转场肯定是在多个视频之间进行的。使用 Promise.all 可以同时下载多个视频。
首先准备一个 canvas 元素：
<canvas id="canvas"></canvas>之后需要一个创建 video 的函数：
const createVedio = src => {
if (!src) return Promise.resolve(null);
return new Promise((resolve, reject) => {
try {
let video = document.createElement('video');
video.src = src;
video.preload = true;
video.autoplay = true;
video.muted = true;
video.controls = false;
video.loop = false;
video.crossOrigin = 'anonymous';
video.oncanplaythrough = () => {
resolve(video);
};
} catch (err) {
reject(err);
}
});
};在上面的函数中，如果视频资源是跨域的，即使服务器允许跨域，也需要为 video 设置 crossOrigin = 'anonymous'，以允许 canvas 使用跨域资源。
另外，如果视频没有处于播放状态，regl 获取到的视频纹理是全黑的画面，但如果同时加载很多个视频，并让它们都播放的话，可能会影响浏览器甚至是你的电脑的性能。所以，如果视频的数量比较多，最好是在用到视频作为纹理之前再播放它，用不到的视频如果没有自动停止播放，需要手动停止播放。
在本文中，我们假设只有两个视频，所以上面的代码设置了 video.autoplay = true。如果视频没有播放，还需要手动调用 play 方法。
假如我们有两个视频地址：
const url1 = 'https://xxx.xxx.xxx/xxx1.mp4';
const url2 = 'https://xxx.xxx.xxx/xxx2.mp4';接下来就加载它们：
const videos = [];
Promise.all([createVedio(url1), createVedio(url2)]).then(r => {
videos = r;
})2、使用 regl.frame 渲染
未完待续
