上一篇介绍了最简单的闪白转场的实现，最关键的部分就是着色器代码的实现。对于淡入淡出转场，跟闪白转场不同的部分就是，淡入淡出过程中，每一帧都有两个视频的图像，根据播放时间控制每个视频的图像的透明度，在视觉上看起来就是淡入淡出。简单的来说就是上一个视频的图像帧变得愈来越透明，下一个视频的第一帧变得愈来越清晰。
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）
本文为原创作品，未经允许不得转载。
网友评论