【Android 音视频开发-OpenGL渲染视频画面篇】5.OpenGL FBO数据缓冲区

音视频流媒体技术

专注于提高流媒体开发水平

本文你可以了解到

本文将介绍如何使用 FBO ， FBO 可以实现什么效果，以及如何在着色器中使用多个纹理单元。

先来看看利用 FBO 实现的“灵魂出窍”效果：

一、FBO与EGL的离屏渲染的区别
上一篇文章，讲解了如何使用EGL，并且提到EGL可以建立一个离屏渲染的缓冲区，这种离屏渲染的方式通常用于模拟整个渲染窗口，比如可以用于FFmpeg软编码，将显示在虚拟窗口中的画面编码成H264。
与此同时，OpenGL也提供另外一种离屏渲染方式，即FBO。FBO不仅可以实现离屏渲染整个OpenGL窗口，也可以用于处理碎片画面，即窗口中的小画面。
关于EGL的离屏渲染，将会在后面关于FFmpeg的文章中使用到，这里暂且不论。
而在视频编辑当中，FBO离屏渲染扮演着很重要的角色，许多的视频滤镜都会用到，接下来就来看看FBO如何使用吧。
二、FBO简介
OpenGL 在渲染到系统窗口之前，都会将数据送到 FBO 上，也就是说， FBO 其实一直在默默的为我们服务。
所以， OpenGL 在一开始就创建了一个默认的 FBO 。

FBO：Frame Buffer Object，帧缓存对象。
从名字上看，往往很容易让人误解这是一个缓存空间，但实际上，FBO很重要的在最后面的Object上。这是一个缓存对象，包含了多个 缓冲索引 ，分别为 颜色缓冲（Color buffers） , 深度缓冲（Depth buffer） , 模板缓冲（Stencil buffer） 。
之所以说是缓冲索引，是因为FBO并不包含这些缓冲数据，仅仅保存了缓冲数据的索引地址。
FBO和这些缓冲区则通过附着点进行连接。

可以看到FBO中包含了：

1. 多个颜色附着点（GL_COLOR_ATTACHMENT0、GL_COLOR_ATTACHMENT1...）
2. 一个深度附着点（GL_DEPTH_ATTACHMENT）
3. 一个模板附着点（GL_STENCIL_ATTACHMENT）

可以划分为两类：
纹理附着(颜色附着) ：主要用于将颜色渲染到纹理中。
渲染缓冲对象RBO（Render Buffer Objecgt） ：主要用于渲染深度信息和模板信息。
在 2D 中，通常只用到了颜色附着，另外两种附着通常在 3D 渲染中使用。

上面说了，FBO可用于离屏渲染，下面就来看看如何通过FBO将画面渲染到一个“后台”的纹理中。
这里的后台，指不用于显示到窗口的纹理。

三、如何使用FBO
1. 新建纹理

fun createFBOTexture(width: Int, height: Int): IntArray {
    // 新建纹理ID
    val textures = IntArray(1)
    GLES20.glGenTextures(1, textures, 0)
    // 绑定纹理ID
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[0])
    // 根据颜色参数，宽高等信息，为上面的纹理ID，生成一个2D纹理
    GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
        0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null)
    // 设置纹理边缘参数
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST.toFloat())
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR.toFloat())
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE.toFloat())
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE.toFloat())
    // 解绑纹理ID
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,0)
    return textures
}

生成一个用于FBO的纹理和普通的纹理其实差不多。
首先，生成一个纹理ID，并绑定到OpenGL中。
其次，给这个纹理ID生成对应的纹理。
这里使用的是 GLES20.glTexImage2D ，在渲染图片纹理的时候，使用的是 GLUtils.texImage2D 。

关于创建纹理的宽高问题，这里说明一下：
FBO创建的是一个虚拟的窗口，所以，大小是可以根据自己的需求设置的，可以比实际系统窗口大。为了视频画面比例正常，可以把OpenGL的窗口宽高，以及纹理的宽高都设置为视频的宽高。因此，OpenGL在渲染的时候，我们也把无需再通过矩阵变换来矫正比例，直接拉伸就可以。

最后，设置纹理边缘参数，然后解绑。
2. 新建FrameBuffer

fun createFrameBuffer(): Int {
    val fbs = IntArray(1)
    GLES20.glGenFramebuffers(1, fbs, 0)
    return fbs[0]
}

新建FrameBuffer类似新建纹理ID，最后返回FBO索引

【相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

【纯干货免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击 788280672 加群免费领取哦~

3. 绑定FBO

fun bindFBO(fb: Int, textureId: Int) { GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fb) GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0) }

先绑定上面创建的FBO，接着将FBO和上面创建的纹理通过颜色附着点 GLES20.GL_COLOR_ATTACHMENT0 绑定起来。

4. 解绑FBO

fun unbindFBO() { GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_NONE) GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0) }

解绑FBO比较简单，其实就是将FBO绑定到默认的窗口上。

这里的 GLES20.GL_NONE 其实就是 0 ，也就是系统默认的窗口的 FBO 。

5. 删除FBO

fun deleteFBO(frame: IntArray, texture:IntArray) { //删除Frame Buffer GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_NONE) GLES20.glDeleteFramebuffers(1, frame, 0) //删除纹理 GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0) GLES20.glDeleteTextures(1, texture, 0) }

以上，其实就是使用FBO的流程了：

新建纹理

新建FBO

绑定将纹理附着到FBO的颜色附着点上

【渲染】

解绑FBO

删除FBO

除了第4步以外，其他都是上面的封装好的方法。
那么接下就来看看，如何将画面渲染到FBO连接的纹理上。
为了更好的理解整个渲染的过程，下面通过一个非常经典的滤镜来演示这个渲染的流程。
三、使用FBO实现“灵魂出窍”滤镜
1. 如何实现灵魂出窍

静态图灵魂出窍

这个效果可以拆分为3个效果：

底层静态图

上层放大

上层半透明

进而拆分为2个组合：

底层静态图

上层不断放大，并且随着放大增加透明度

视频灵魂出窍

根据静态图的灵魂出窍效果，可以知道， 上层的灵魂出窍效果是根据原图而来的 ，就是说，灵魂的基础图片是不会变化的。
而视频的每一帧都是在变化的。
所以，为了使上层的“灵魂”达到比较平滑的放大效果，需要把一帧保持住一段时间，让这一帧完成完整的放大过程。
这里就遇到了一个问题：如何保存视频的某一帧？

FBO 就是解决这个问题的关键。
2. 封装FBO工具
为了可以方便的使用FBO相关的方法，我们将上面的方法都封装在一个静态工具中 OpenGLTools 。

object OpenGLTools { fun createFBOTexture(width: Int, height: Int): IntArray { // 新建纹理ID val textures = IntArray(1) GLES20.glGenTextures(1, textures, 0) // 绑定纹理ID GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[0]) // 根据颜色参数，宽高等信息，为上面的纹理ID，生成一个2D纹理 GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null) // 设置纹理边缘参数 GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST.toFloat()) GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR.toFloat()) GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE.toFloat()) GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE.toFloat()) // 解绑纹理ID GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,0) return textures fun createFrameBuffer(): Int { val fbs = IntArray(1) GLES20.glGenFramebuffers(1, fbs, 0) return fbs[0] fun bindFBO(fb: Int, textureId: Int) { GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fb) GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0) fun unbindFBO() { GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_NONE) GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0) fun deleteFBO(frame: IntArray, texture:IntArray) { //删除Frame Buffer GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_NONE) GLES20.glDeleteFramebuffers(1, frame, 0) //删除纹理 GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0) GLES20.glDeleteTextures(1, texture, 0) }

3. 在视频渲染器中，接入FBO

新建渲染器 SoulVideoDrawer

这里将之前的VideoDrawer直接复制过来，如果大家阅读过之前的文章，相信对VideoDrawer应该不会陌生了。所以这里就不再贴完整代码了。详情请查看之前的文章，或者直接看源码： VideoDrawer 。
其实 SoulVideoDrawer 大部分代码和 VideoDrawer 一致，这里查看完整源码： SoulVideoDrawer 。
这次，不再像之前那样一次性贴出完整的代码，一步步来看下如何使用 FBO 。

class SoulVideoDrawer : IDrawer { // ...... // 省略和VideoDrawer一样成员变量 // ...... //-------------灵魂出窍相关的变量-------------- /**上下颠倒的顶点矩阵*/ private val mReserveVertexCoors = floatArrayOf( -1f, 1f, 1f, 1f, -1f, -1f, 1f, -1f private val mDefVertexCoors = floatArrayOf( -1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f // 顶点坐标 private var mVertexCoors = mDefVertexCoors // 灵魂帧缓冲 private var mSoulFrameBuffer: Int = -1 // 灵魂纹理ID private var mSoulTextureId: Int = -1 // 灵魂纹理接收者 private var mSoulTextureHandler: Int = -1 // 灵魂缩放进度接收者 private var mProgressHandler: Int = -1 // 是否更新FBO纹理 private var mDrawFbo: Int = 1 // 更新FBO标记接收者 private var mDrawFobHandler: Int = -1 // 一帧灵魂的时间 private var mModifyTime: Long = -1 override fun draw() { if (mTextureId != -1) { initDefMatrix() //【步骤1: 创建、编译并启动OpenGL着色器】 createGLPrg() // -------【步骤2:新增FBO部分】----- //【步骤2.1: 更新灵魂纹理】 updateFBO() //【步骤2.2: 激活灵魂纹理单元】 activateSoulTexture() // --------------------------- //【步骤3: 激活并绑定纹理单元】 activateDefTexture() //【步骤4: 绑定图片到纹理单元】 updateTexture() //【步骤5: 开始渲染绘制】 doDraw() // ...... }

增加了和FBO、实现灵魂出窍效果相关的成员变量。

重点关注 draw 方法，有5个步骤，但真正增加的其实就是第2个步骤：

步骤2: 新增FBO部分 - 2.1: 更新灵魂纹理【updateFBO】 - 2.2: 激活灵魂纹理单元【activateSoulTexture】

先来看2.1。

更新附着在FBO上的纹理

class SoulVideoDrawer : IDrawer { // ...... private fun updateFBO() { //【1，创建FBO纹理】 if (mSoulTextureId == -1) { mSoulTextureId = OpenGLTools.createFBOTexture(mVideoWidth, mVideoHeight) // 【2，创建FBO】 if (mSoulFrameBuffer == -1) { mSoulFrameBuffer = OpenGLTools.createFrameBuffer() // 【3，渲染到FBO】 if (System.currentTimeMillis() - mModifyTime > 500) { mModifyTime = System.currentTimeMillis() // 绑定FBO OpenGLTools.bindFBO(mSoulFrameBuffer, mSoulTextureId) // 配置FBO窗口 configFboViewport() //--------执行正常画面渲染，画面将渲染到FBO上-------------- // 激活默认的纹理 activateDefTexture() // 更新纹理 updateTexture() // 绘制到FBO doDraw() //--------------------------------------------------- // 解绑FBO OpenGLTools.unbindFBO() // 恢复默认绘制窗口 configDefViewport() * 配置FBO窗口 private fun configFboViewport() { mDrawFbo = 1 // 将变换矩阵回复为单位矩阵（将画面拉升到整个窗口大小，设置窗口比例和FBO纹理比例一致，画面刚好可以正常绘制到FBO纹理上） Matrix.setIdentityM(mMatrix, 0) // 设置颠倒的顶点坐标 mVertexCoors = mReserveVertexCoors //重新初始化顶点坐标 initPos() GLES20.glViewport(0, 0, mVideoWidth, mVideoHeight) //设置一个颜色状态 GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f) //使能颜色状态的值来清屏 GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT) * 配置默认显示的窗口 private fun configDefViewport() { mDrawFbo = 0 mMatrix = null // 恢复顶点坐标 mVertexCoors = mDefVertexCoors initPos() initDefMatrix() // 恢复窗口 GLES20.glViewport(0, 0, mWorldWidth, mWorldHeight) private fun activateDefTexture() { activateTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTextureId, 0, mTextureHandler) private fun activateSoulTexture() { activateTexture(GLES11.GL_TEXTURE_2D, mSoulTextureId, 1, mSoulTextureHandler) private fun activateTexture(type: Int, textureId: Int, index: Int, textureHandler: Int) { //激活指定纹理单元 GLES20.glActiveTexture(GLES20.GL_TEXTURE0 + index) //绑定纹理ID到纹理单元 GLES20.glBindTexture(type, textureId) //将激活的纹理单元传递到着色器里面 GLES20.glUniform1i(textureHandler, index) //配置边缘过渡参数 GLES20.glTexParameterf(type, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR.toFloat()) GLES20.glTexParameterf(type, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR.toFloat()) GLES20.glTexParameteri(type, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE) GLES20.glTexParameteri(type, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE) // ...... }

看 updateFBO 方法，3个步骤：

创建纹理

创建FBO

将图像渲染到FBO的纹理上

前面2个步骤，在之前已经介绍过，不再赘述。
重点看第3步。
这里让一帧图像保持500ms，我们用一个变量 mModifyTime 来记录当前这一帧渲染时候的时间，只要过了500ms，就刷新一次画面。
来看渲染FBO的过程：

if (System.currentTimeMillis() - mModifyTime > 500) { // 记录时间 mModifyTime = System.currentTimeMillis() // 绑定FBO OpenGLTools.bindFBO(mSoulFrameBuffer, mSoulTextureId) // 配置FBO窗口 configFboViewport() //--------执行正常画面渲染，画面将渲染到FBO上-------------- // 激活默认的纹理 activateDefTexture() // 更新纹理 updateTexture() // 绘制到FBO doDraw() //--------------------------------------------------- // 解绑FBO OpenGLTools.unbindFBO() // 恢复默认绘制窗口 configDefViewport() }

i. 绑定FBO
当调用了 OpenGLTools.bindFBO 之后，所有对于OpenGL的操作都将影响到我们自己创建的FBO。也就是说，在调用 OpenGLTools.unbindFBO() 解绑FBO之前，下面所有的操作，都将作用在FBO上。

ii. 重新配置FBO窗口大小
将OpenGL窗口设置为视频大小，并且将矩阵变化重置（画面拉升到窗口大小），然后清屏。

至于为什么要重新设置窗口大小，前面设置纹理大小的时候已经说过了。

还有一点要注意的是，这里将纹理坐标 mVertexCoors 做了上下颠倒（其实就是恢复为OpenGL默认的坐标），这样渲染到FBO绑定的纹理上后，在片元着色器里面才能正常取色。

代码如下：

private fun configFboViewport() { mDrawFbo = 1 // 将变换矩阵恢复为单位矩阵 //（将画面拉升到整个窗口大小， // 设置窗口宽高和FBO纹理宽高一致， // 画面刚好可以正常绘制到FBO绑定的纹理上） Matrix.setIdentityM(mMatrix, 0) // 设置颠倒的顶点坐标 mVertexCoors = mReserveVertexCoors //重新初始化顶点坐标 initPos() // 设置窗口大小 GLES20.glViewport(0, 0, mVideoWidth, mVideoHeight) //设置一个颜色状态 GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f) //使能颜色状态的值来清屏 GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT) }

iii. 激活和更新视频原来的纹理
注意，这里是激活原来的渲染视频的纹理

iv. 渲染绘制
也就是说，在绑定了FBO以后，按照正常的渲染流程，就可以将画面渲染到FBO上了。

v. 解除FBO绑定，将窗口大小、纹理坐标、矩阵都恢复回原来的配置。
将渲染重新切换到原来的系统窗口上，画面将重新显示到系统窗口上。

通过以上步骤，就将画面渲染到FBO绑定的纹理 mSoulTextureId 上面了。
4. 实现灵魂出窍效果
前面，我们将一帧画面渲染到了 mSoulTextureId 这个纹理上，接下来就要利用这个纹理，将画面放大、透明渐变实现灵魂效果。
回到draw方法中，来到2.2步骤。

override fun draw() { if (mTextureId != -1) { //【步骤1: 创建、编译并启动OpenGL着色器】 // -------【步骤2:新增FBO部分】----- //【步骤2.1: 更新灵魂纹理】 //【步骤2.2: 激活灵魂纹理单元】 activateSoulTexture() // --------------------------- //【步骤3: 激活并绑定纹理单元】 activateDefTexture() //【步骤4: 绑定图片到纹理单元】 updateTexture() //【步骤5: 开始渲染绘制】 doDraw() }

看下激活如何激活“灵魂”的纹理。

传递多个纹理到着色器中

private fun activateSoulTexture() { activateTexture(GLES11.GL_TEXTURE_2D, mSoulTextureId, 1, mSoulTextureHandler) private fun activateTexture(type: Int, textureId: Int, index: Int, textureHandler: Int) { //激活指定纹理单元 GLES20.glActiveTexture(GLES20.GL_TEXTURE0 + index) //绑定纹理ID到纹理单元 GLES20.glBindTexture(type, textureId) //将激活的纹理单元传递到着色器里面 GLES20.glUniform1i(textureHandler, index) //配置边缘过渡参数 GLES20.glTexParameterf(type, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR.toFloat()) GLES20.glTexParameterf(type, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR.toFloat()) GLES20.glTexParameteri(type, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE) GLES20.glTexParameteri(type, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE) }

和之前文章稍微有点不同，以前参数都是直接写死的。这次改造了一下 activateTexture 将 纹理类型 ， 纹理ID ， 纹理单元索引 ，以及着色器对应的 纹理接收器 ，作为参数传递进来。
有2点要注意的：

关于纹理类型 。在 activateSoulTexture 中，需要注意的是，纹理的类型为普通纹理类型 GLES11.GL_TEXTURE_2D ，而非扩展纹理 GLES11Ext.GL_TEXTURE_EXTERNAL_OES ，因为经过之前的渲染以后，画面已经是普通纹理了。

关于纹理单元 。在 1.初步了解OpenGL ES 基础中说过，OpenGL内置了多个纹理单元，并且可以同时使用。所以这里，正常画面的纹理单元设置为默认的 GLES20.GL_TEXTURE0 ， “灵魂”的纹理单元为 GLES20.GL_TEXTURE1 = GLES20.GL_TEXTURE0 + 1 。

接着，激活默认的正常画面纹理 updateTexture() ，这样就可以在片元着色器中，同时接收这两个纹理单元。

private fun activateDefTexture() { activateTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTextureId, 0, mTextureHandler) }

渲染绘制

最后，启动渲染绘制，进入到着色器中。

“灵魂出窍”着色器

前面做了这么多的铺垫，其实都是为了将一帧固定的视频画面传递到着色器中。真正实现“灵魂出窍”的效果，也是在片元着色器中。

着色器代码如下：

private fun getVertexShader(): String { return "attribute vec4 aPosition;" + "precision mediump float;" + "uniform mat4 uMatrix;" + "attribute vec2 aCoordinate;" + "varying vec2 vCoordinate;" + "attribute float alpha;" + "varying float inAlpha;" + "void main() {" + " gl_Position = uMatrix*aPosition;" + " vCoordinate = aCoordinate;" + " inAlpha = alpha;" + private fun getFragmentShader(): String { //一定要加换行"\n"，否则会和下一行的precision混在一起，导致编译出错 return "#extension GL_OES_EGL_image_external : require\n" + "precision mediump float;" + "varying vec2 vCoordinate;" + "varying float inAlpha;" + "uniform samplerExternalOES uTexture;" + "uniform float progress;" + "uniform int drawFbo;" + "uniform sampler2D uSoulTexture;" + "void main() {" + // 透明度[0,0.4] "float alpha = 0.6 * (1.0 - progress);" + // 缩放比例[1.0,1.5] "float scale = 1.0 + (1.5 - 1.0) * progress;" + // 放大纹理坐标 "float soulX = 0.5 + (vCoordinate.x - 0.5) / scale;\n" + "float soulY = 0.5 + (vCoordinate.y - 0.5) / scale;\n" + "vec2 soulTextureCoords = vec2(soulX, soulY);" + // 获取对应放大纹理坐标下的像素(颜色值rgba) "vec4 soulMask = texture2D(uSoulTexture, soulTextureCoords);" + "vec4 color = texture2D(uTexture, vCoordinate);" + "if (drawFbo == 0) {" + // 颜色混合默认颜色混合方程式 = mask * (1.0-alpha) + weakMask * alpha " gl_FragColor = color * (1.0 - alpha) + soulMask * alpha;" + "} else {" + " gl_FragColor = vec4(color.r, color.g, color.b, inAlpha);" + "}" + }

可以看到， 顶点着色器 的代码和普通的渲染是一样的。

修改的都在 片元着色器中 。

简单分析一下：

i. 除了正常画面渲染需要的参数，另外新增了3个参数：

// 动画进度 uniform float progress; // 是否绘制到FBO uniform int drawFbo; // 一帧固定的纹理 uniform sampler2D uSoulTexture;

ii. 跳过中间关于“灵魂”动画的部分，先看最后一个 if/else

if (drawFbo == 0) { // 颜色混合默认颜色混合方程式 = mask * (1.0-alpha) + weakMask * alpha gl_FragColor = color * (1.0 - alpha) + soulMask * alpha;" + } else { gl_FragColor = vec4(color.r, color.g, color.b, inAlpha); }

当一帧的时间超过500ms的时候，会重新获取一帧新的视频画面。
这里通过外部传进来的标记 drawFbo 如果为 1 时，渲染普通的画面，此时由于已经绑定了FBO，所以这一帧画面会渲染到FBO的 mSoulTextureID 上。
在下一次渲染的时候，这一帧纹理将传递给片元着色器的 uSoulTexture 。
iii. 中间的部分，关于“灵魂出窍”的核心。

// 透明度[0,0.4] float alpha = 0.6 * (1.0 - progress); // 缩放比例[1.0,1.5] float scale = 1.0 + (1.5 - 1.0) * progress; // 放大纹理坐标 float soulX = 0.5 + (vCoordinate.x - 0.5) / scale; float soulY = 0.5 + (vCoordinate.y - 0.5) / scale; vec2 soulTextureCoords = vec2(soulX, soulY); // 获取对应放大纹理坐标下的像素(颜色值rgba) vec4 soulMask = texture2D(uSoulTexture, soulTextureCoords);

首先，计算透明度。根据外面计算得到的 progress ，慢慢降低透明度，最大透明度为0.6。
然后，计算缩放后的坐标。随着 progress 的增加， scale 越大。最大放大1.5倍。利用 scale 分别计算 X，Y 的缩放。可以看到， scale 越大， soulX/soulY 反而更小 。这是因为要达到放大的效果，当前要渲染的点，应该取更小的坐标对应的颜色（像素）。
最后，通过 soulX soulY ，到“灵魂”纹理 uSoulTexture 取到颜色。
iv. 混合底层正常画面和上层“灵魂”画面，采用常用的混合算法。

gl_FragColor = color * (1.0 - alpha) + soulMask * alpha;

5. 在页面中接入绘制器

class SoulPlayerActivity: AppCompatActivity() { val path = Environment.getExternalStorageDirectory().absolutePath + "/mvtest.mp4" lateinit var drawer: IDrawer override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_opengl_player) initRender() private fun initRender() { // 使用“灵魂出窍”渲染器 drawer = SoulVideoDrawer() drawer.setVideoSize(1920, 1080) drawer.getSurfaceTexture { initPlayer(Surface(it)) gl_surface.setEGLContextClientVersion(2) val render = SimpleRender() render.addDrawer(drawer) gl_surface.setRenderer(render) private fun initPlayer(sf: Surface) { val threadPool = Executors.newFixedThreadPool(10) val videoDecoder = VideoDecoder(path, null, sf) threadPool.execute(videoDecoder) val audioDecoder = AudioDecoder(path)