你知道微视背后的视频特效技术是怎么做出来的吗？

作者 : 开心源码本文共3094个字，预计阅读时间需要8分钟发布时间： 2022-05-12 共50人阅读

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由腾讯视频云终端团队发表于云+社区专栏

常青, 2008 年毕业加入腾讯，一直从事用户端研发相关工作，先后参加过 PC QQ、手机QQ、QQ物联等产品项目，目前在腾讯视频云团队负责音视频终端处理方案的优化和落地工作，帮助用户在可控的研发成本投入之下，取得业内一流的音视频处理方案，目前我们的产品线包括：互动直播、点播、短视频、实时视频通话，图像解决，AI 等等。

从眼睛的进化说起

大约在5亿4千万年前的寒武纪，地球上一部分生物体开始进化出了感光细胞，这种细胞可以感应光线的强弱，并且直接驱动本体的运动细胞采取必要的规避动作，以确保脆弱的细胞不被紫外线所伤。

后来单个的感光细胞开始扎堆聚集并且形成了凹陷，随着凹陷程度的逐渐加深，这些感光细胞也就渐渐地汇聚成了一个前部有孔隙的球状结构，“眼球”的雏形也就由此形成了。

img

随着球形的眼睛结构渐渐成型，中学物理课本中的“小孔成像”原理也就越来越能发挥作使用：只需开孔足够小，光线就能精确地到达这些聚集的感光细胞进而成像，眼前的物体也就开始变得边界清晰。代表腾讯文化吉祥物之一的鹦鹉螺，就是采使用了这种“以小为美”的进化策略，而且一直坚持到现在。

但是这种越来越小的策略也会导致光线进入量越来越小，所以鹦鹉螺们的世界想必是很昏暗的。我们的祖先可不希望放弃一个光明的世界，所以，我们给自己的眼睛安装了一个足够高级的光学部件 —— 晶状体，以期拥有一个光明而清晰地世界。

然而，当大家都能把世界看得很清楚的时候，色彩分辨能力也就演变成了新一轮的军备竞赛。

当我们的祖先踩着那些坚称“我就想健健康康地当个素食主义者”的同类尸体艰难前行的时候，他们并不知道，让自己活得更久的起因，竟然是由于那双能区分树叶是嫩叶还是成熟叶片的眼睛。由于成熟的叶片常常包含大量的植物性毒素，会让进食者身体遭受很大的伤害。所以，我们都是那一波“好色的”猴子的后代。

而眼睛对色彩的分辨能力，不仅在远古时代让我们活了下来，也让今天衣食无忧的我们，能看到更多色彩斑斓的效果。比方短视频的移形换影特效，其本质原理就是一个充分利使用色彩的小把戏。

视频内容

三原色的修改和组合

人体有三种视觉锥细胞，所以我们看到的颜色都是由三原色组成的，并不是说世界上就只有这些颜色，而是更加绚丽的色彩空间我们也感知不到。

因而，液晶显示器的成像原理上也就是基于 R（红）G（绿）B（蓝）三原色的组合而实现的，腾讯云短视频（UGSV）的移形换影特效，就是在这三种颜色空间上做了少量文章：

先以一幅静态的图片来举例:

img

Doloris

现在把图片中红色的分量去掉,放大10%,再移动少量距离

img

Doloris-strip-red

再把蓝色的分量去掉,放大10%,并移动少量距离

img

Doloris-strip-blue

再把绿色的分量去掉,放大10%,并移动少量距离

img

Doloris-strip-green

而后将这三副图片以33%的透明度和源图叠加到一起，形成一种移形幻影的效果

img

Doloris-blend

交给计算机来实现

上面这些图片是我使用图片解决软件简单解决后得到的，但假如是视频文件，显然要交给计算机自动处理，如何做到呢？

首先我们先给这幅图片定义坐标，为了方便解决我们将图片的中心点定义为 (0,0)，图片的XY轴最大值为 1，如下图所示:

img

坐标定义

而后开始解决上面提到的两个变换，一个是放大，一个是移动。

放大假如定义图片上的任意象素坐标是(x,y)，放大 s倍后的坐标就是 (x',y') = s(x,y) = (sx, sy)
移动假如定义图片上的任意象素坐标是(x,y)，将其移动(?x,?y)，移动后的坐标就是(x',y') = (x+?x, y+?y)
合并将上面两个公式进行合并，得到的新坐标点就是 (x',y') = (s(x+?x), s(y+?y))
叠加而后我们要将修改过的图片叠加到原图上，alpha叠加的公式是 src * (1 - alpha) + overlay * alpha。

基于OpenGL的版本

短视频的特效解决，每秒钟要解决几十张甚至更多的视频画面，所以简单的 C 语言解决算法并不能满足性能上的要求，我们需要用手机的硬件加速能力，目前除了常见的 OpenGL 等 API 之外，还有如 Vulkan, DirectX, Metal 等可选方案。就目前而言，OpenGL 在各平台上通使用性最好，网上的资料也比较丰富，不管是桌面平台还是移动平台都有支持，本文就以 OpenGL 来讲讲特效的实现。

实现移形换影特效的时候，我们会使用到 OpenGL 的 Fragment Shader, Fragment Shader 作使用就是返回图像各点的色值，Fragment Shader也有一套自己的编程语言，叫 Shading Language 简称GLSL, GLSL 和 C 很像，添加了少量向量的数据类型，和少量图像相关的解决函数。Shading 和 C 比起来有一个比较特殊的地方是不支持隐含的类型转换，比方浮点点整型的转换（在用浮点数时，肯定要加上小数点，如 1.0）。

篇幅起因，我不在这里把所有的特效代码都逐个列举了，仅附上放大和位移的部分实现：

varying vec2 textureCoordinate;uniform sampler2D inputImageTexture;void main() {    vec2 offset = vec2(0.05, 0.05);    float scale = 1.1;    vec2 coordinate;    coordinate.x = (textureCoordinate.x - offset.x) / scale;    coordinate.y = (textureCoordinate.y - offset.y) / scale;    gl_FragColor = texture2D(inputImageTexture, coordinate);}

考虑到不是所有读者都学过 Shading Language，这里做一个简单的解读：

我们在这里定义了一个变量 coordinate，这个就是前面提到的(x,y)，它的值就是 ((x - ?x)/s, (y-?y)/s)。
函数 texture2D 的作使用就是从图片中获取某个坐标的颜色。这里从 inputImageTexture 中的 coodinate 坐标点获取了颜色。
gl_FragColor, 这是 Fragment Shader 的输出的值， gl_FragColor是一个GLSL预约义的全局变量，类型是vec4既 (r,g,b,a) 这四个量，也就是一个 RGBA 颜色。
程序运行后在textureCoordinate这个坐标就会显示gl_FragColor这个颜色。