Android 视频编辑系列-视频转场(下)

Android 视频编辑系列-视频转场(上)

上一篇介绍了最简单的闪白转场的实现，最关键的部分就是着色器代码的实现。对于淡入淡出转场，跟闪白转场不同的部分就是，淡入淡出过程中，每一帧都有两个视频的图像，根据播放时间控制每个视频的图像的透明度，在视觉上看起来就是淡入淡出。简单的来说就是上一个视频的图像帧变得愈来越透明，下一个视频的第一帧变得愈来越清晰。

1.两个图像数据同时渲染

    首先，要实现在每一帧上有两个视频的图像，这里就需要用到一个特殊的滤镜实现。可以参考一个比较出名的开源库：https://github.com/cats-oss/android-gpuimage.git， 里面有一个滤镜GPUImageTwoInputFilter

GPUImageTwoInputFilter滤镜

GPUImageTwoInputFilter中setBitmap方法

    这里可以看到GPUImageTwoInputFilter的顶点着色器代码，它可以同时接收两个纹理。其中setBitmap方法就是设置第二个纹理输入的。在实际应用场景中：第一个纹理是正常的视频流，第二个纹理就是用于转场视频的第二个视频的第一帧图像。接下来就需要实现片着色器代码来控制两个纹理数据的透明程度了。

2.淡入淡出着色器代码实现

    由于对opengl es不熟悉，自己尝试了来写，但是效果不理想。于是就只能用别人的轮子啦。

https://gl-transitions.com/gallery这个网站上提供了60种左右的转场效果，并且有现成的实现代码。例如淡入淡出的实现如下：

fade

    虽然实现代码很简单，但是并不能直接用，因为在opengl es种没有transition、getFromColor、getToColor这些方法，怎么办呢？其实它在github上也提供了解决方法（https://github.com/transitive-bullshit/ffmpeg-gl-transition），里面有个vf_gltransition.c文件实现了getFromColor和getToColor方法。

transition.c

    到这里可以说就已经看见曙光了，下面我们先来改造GPUImageTwoInputFilter的着色器代码了。

    首先是顶点着色器代码：

顶点着色器代码

    然后是片段着色器代码：    

片段着色器代码

    可以看到，上图中第35行有个“%s”， 这里就是用来嵌入gl-transition网站中的转场代码啦。

淡入淡出

    到这里淡入淡出的转场就基本完成了，注意在使用的时候一定要设置第二个视频的的图像帧

淡入淡出转场使用

    最后预览效果：

淡入淡出转场预览

    成品视频效果：

淡入淡出转场成品视频

    好了，到这里淡入淡出的转场就介绍完了，gl-transition上所有的转场效果都可以按照这种方式来做，足够用的了。当然如果是对opengl es很熟悉的话，也可以原创一些炫酷的转场效果，到时候别忘了开源出来大家一起学习下哦。

本文作者：周秦瑶（scott）

本文为原创作品，未经允许不得转载。