阅读 3453

抖音特效在 Web 端的实现

当下最火的短视频应用莫过于抖音了,凭借着丰富的视频特效,抖音吸引了很多年轻用户的青睐,今天我们来看一下,抖音特效如何在 Web 端实现。

核心原理

实现原理比较简单,总结起来有如下三个步骤:

  • 1、使用预渲染 canvas 绘制 video 的每一帧画面。
  • 2、将预渲染 canvas 作为纹理传到显存中。
  • 3、着色器程序对纹理进行后期处理。

步骤看似简单,但是第二、三步骤牵扯到一些 WebGL 和着色器的相关知识,所以大家看不懂的地方不要着急,可以稍微补充一下相关知识。

主要实现

每一个特效都需要 JS 程序和着色器程序的支持,我会分别从 JS 程序和着色器程序两方面讲解。

下面的特效旨在演示着色器程序的能力和魅力,所以特效主要在着色器端实现,那么JS 程序做了哪些事情呢?

JS 主要是实现读取视频的每一帧画面,渲染到一个临时 Canvas 中,并将临时 Canvas 作为纹理传到显存中,以下特效的 JS 部分基本一样,所以我们先看下 JS 逻辑。

1、首先看下 html 的结构

  <canvas id="canvas"></canvas>
  <canvas id="canvasBg" width="256" height="256"></canvas>
  <video id="video" src="../img/movie.mp4" controls></video>
复制代码

我们放置了两个 Canvas ,其中第一个 Canvas 用来展示特效,第二个 Canvas 用来绘制视频帧画面,比较简单。

2、接着看下 JS 逻辑的核心代码

  • 读取视频帧画面,将其渲染到临时 Canvas 上,并将临时 Canvas 作为纹理传送到显存中。
  ctxBg.drawImage(video, 0, 0, 256, 256);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvasBg);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.uniform1i(u_Texture, 0);
复制代码
  • 启动一个定时器,每次传送一个时间变量到显存。
function loop() {
      if (video.ended) {
        return;
      }
      computeFrame();
      time = time + interval;
      gl.uniform1f(u_Time, time);
      // 清除画布
      gl.clear(gl.COLOR_BUFFER_BIT);
      if (positions.length <= 0) {
        return;
      }
      //绘制图元设置为三角形。
      var primitiveType = gl.TRIANGLES;
      //因为我们要绘制6个点,所以执行6次顶点绘制操作。
      gl.drawArrays(gl.TRIANGLES, 0, positions.length / 3);
      timer = requestAnimationFrame(loop);
    }
复制代码

3、真正实现特效的部分是在着色器程序上,当然着色器源码也是从 JS 中传到显存中,这部分代码我们按下不表,只带大家感受一下各个特效。

图像有些虚,大家可能看不太清楚,不过可以去示例网页上去感受一下~

  • 缩放

  • 闪白

  • 残影

  • 灵魂出窍

  • 毛刺

结语

以上示例的代码实现中包含一些 WebGL 的基本操作,比较冗长,想看示例的同学可以移步到我的 github去查看。

友情提示:最好在 PC 端查看,移动端浏览还是有一些体验问题~

最后的最后,小手点一点,关注一下公众号【前端E栈】呗~

文章分类
前端
文章标签