Android视频融合特效播放与渲染

AlphaPlayerPlus

一个有趣且很有创意的视频特效项目。

https://github.com/duqian291902259/AlphaPlayerPlus

前言

直播产品,需要更多炫酷的礼物特效,比如飞机特效,跑车特效,生日蛋糕融特效等,融合了直播流画面的特效。所以在字节开源的alphaPlayer库和特效VAP库的基础上进行改造,实现融合特效渲染。
支持将用户的头像、昵称、当前直播间的直播视频流等元素动态融合进视频特效中,增强用户的交互感和体验感。

Android实现

已经将原有的alphaPlayer进行升级改造,支持将用户的头像、昵称、当前直播间的直播视频流等元素动态融合进视频特效中,增强用户的交互感和体验感。

融合特效的技术原理

自研特效sdk,负责渲染视频特效。
美术负责制作特效视频,制作时将特效的颜色信息通过等分的视频区域存储,视频的左半边存放了特效原始的RGB信息,视频的右半边存放了特效的透明度和遮罩的透明度等信息。

透明视频的渲染

特效渲染时,读取左半部分纹理的RGB值,作为原始视频的主体颜色,右半部分纹理的R通道值作为Alpha值,得到视频纹理的rgba值,进行着色渲染,得到带透明度的特效纹理,如下图所示:


基于RGBA通道的透明视频融合特效渲染.png

视频融合遮罩素材

通常特效中的融合区域,会随着场景的变换,产生近大远小的透视3D效果,而不是维持标准的矩形形状。在图形渲染技术中,对于渲染的顶点坐标组成非平行四边形形状,GPU默认对组成四边形的两个三角形分别采用线性纹理插值的方式,渲染的结果可以看到两个三角形虽然在接缝处是连续的,单其导数(切线和双线向量)在此处不连续,效果无法达到预期,如图2所示。为解决这一问题,需要使用投影插值的方式,将融合纹理渲染的2D顶点坐标,通过透视变换的到贴合特效的形状,从而模拟3D的视觉效果。可以将这一过程抽象成将一个矩形,经过透视变换,得到一个非平行四边形的过程。

将带透明度的特效纹理,与融合元素的纹理,根据资源右侧部分的G值进行融合渲染。融合渲染的RGB= (特效纹理RGB)(1-右侧G)+(融合纹理RGB)(右侧G),融合渲染的Alpha值=(右侧R)(1-右侧G)+(右侧G)(右侧G)。得到融合后的特效纹理,最终渲染到设备屏幕上。

融合特效的数据管理

原始视频与遮罩素材的融合过程以及而遮罩的渲染,是在原有右边灰色视频的基础上,采用G通道值表示遮罩的区域,后续遮罩渲染需要根据G通道的值作为融合的透明度。
因视频数据帧比较多,里面的遮罩位置、个数、文字内容、文字颜色、图片展示形式,千差万别,渲染时直接处理,有很多东西是程序未知的,所以需要对素材预处理,提前得到这些信息,生成一份渲染专用的json配置文件。这份文件要么放在视频中,要么服务器下发(目前我们这两种方式都会采用,遮罩相关的信息放视频中,与用户相关的信息接口提供)。

1,预处理工具

负责获取特效渲染所需的资源数据和遮罩数据。遮罩素材,需要专门导出一个视频(右侧部分)用于识别遮罩的区域和色值。

2,Mp4播放渲染。

其中对遮罩的识别、坐标位置的确定、变换矩阵的生成,由工具识别素材视频,最终导出json格式,写入进mp4容器的自定义box中。
我们端上需要解析出json,然后封装成对应的实体类,方便渲染时读取遮罩信息,并替换成实际的文字、图片、直播帧数据。

融合特效渲染步骤

1,原有的特效视频渲染,支持带alpha通道的mp4视频。我们可以得到视频纹理id:mVideoTextureId,包含左右灰色和透明区域。
2,使用FBO,对文字,图片,直播流的数据进行二次处理,确定渲染的顶点位置和纹理坐标,渲染成屏幕大小的纹理:fboTextureId
3,将mVideoTextureId和fboTextureId传入最终融合的着色器处理,得到最终的展示效果。
以上三个步骤,面涉及到很多细节,需要了解OpenGL的坐标体系,绘制步骤和基本原理。具体可以参看项目代码。

流程图

融合渲染流程图.png

实现的效果

画中画效果.png

图片和文字渲染

接入说明

可以参看demo项目,暂未开放。demo只提供图片和文字融合效果的实现。
1,可以实现图片、视频流融合效果
2,图片+文字的融合效果
3,配置入口:PlayerController.get(configuration, mediaPlayer)
4,VideoGiftView,只是封装了PlayerController和播放容器。
5,音视频播放器可以自定义,也可以用现有的实现。AlphaMediaPlayer便于控制解码、渲染次数。
6,其他的播放器( DefaultSystemPlayer、ExoPlayerImpl)播放的话,渲染遮罩的帧索引需要将json中的index-1,否则无法对齐原始素材效果
7,ALog:内部log输出接口,外部可以自行实现打印。
8,IFetchResource:资源接口:外部传入文本、图片等资源给遮罩帧使用。

Android API说明

初始化配置信息、PlayerController

val configuration = Configuration(context,owner)
        //  GLTextureView supports custom display layer, but GLSurfaceView has better performance, and the GLSurfaceView is default.
        configuration.alphaVideoViewType = AlphaVideoViewType.GL_SURFACE_VIEW
        // AlphaMediaPlayer便于控制解码、渲染次数,其他的播放器,渲染帧索引需要将json中的数字-1,否则无法对齐
        //val mediaPlayer = DefaultSystemPlayer()
        //val mediaPlayer = ExoPlayerImpl(context)
        val mediaPlayer = AlphaMediaPlayer(context)
        mPlayerController = PlayerController.get(configuration, mediaPlayer)
        .//设置监听
        mPlayerController?.let {
            it.setPlayerAction(playerAction)
            it.setFetchResource(fetchResource)
            //it.setMonitor(monitor)
        }

设置流数据监听

    mPlayerController.setOnRenderLiveFrameListener(() -> {
        //通知外部,有遮罩需要用到视频流画面,开始渲染直播画面,自定实现监听流,本demo无流数据来源,暂不提供实现。
        // 然后将流里面的直播画面的数据共享到surfaceTexture,通过以下调用传回给sdk内部渲染:
    });
 

IPlayerAction接口

private val playerAction = object : IPlayerAction {
        override fun onVideoSizeChanged(videoWidth: Int, videoHeight: Int, scaleType: ScaleType) {
            Log.i(TAG, "视频实际的宽高改变,用户改变渲染容器size:onVideoSizeChanged,videoWidth=$videoWidth, videoHeight=$videoHeight,scaleType=$scaleType")
        }
        override fun startAction() {
            Log.i(TAG, "开始播放")
        }
        override fun endAction(status: Int, mVideoPath: String?) {
            Log.i(TAG, "结束播放,错误码和出错的url,方便做重新播放逻辑")
        }
    }

资源接口说明

interface IFetchResource {
    // 获取图片 (暂时不支持Bitmap.Config.ALPHA_8 主要是因为一些机型opengl兼容问题)
    fun fetchImage(resource: Resource, result: (Bitmap?) -> Unit)
    // 获取文字
    fun fetchText(resource: Resource, result: (String?) -> Unit)
    // 资源释放通知
    fun releaseResource(resources: List<Resource>)
}

自定义Log

回调中使用自己的log实现

private fun initLog() {
        ALog.isDebug = BuildConfig.DEBUG
        ALog.log = ALogImp()

class ALogImp : IALog {
        override fun i(tag: String, msg: String) {
            Log.i(tag, msg)
        }
        override fun d(tag: String, msg: String) {
            Log.d(tag, msg)
        }
        override fun e(tag: String, msg: String) {
            Log.e(tag, msg)
        }
    }

测试demo,资源的路径

1,进入gift/demoRes/目录.
2,adb push demoRes /sdcard/alphaVideoGift/
3,build-->run.

注意事项:

demo的可以配置外部json
dataSource.configJsonPath = "/sdcard/alphaVideoGift/xxx.json"
也可以将json数据写入mp4视频,自定义一个box,播放视频前解析出json即可以不配置外部json

技术实现,部分代码

1,顶点、纹理坐标array

 val array = FloatArray(8)
private var floatBuffer: FloatBuffer = ByteBuffer
            .allocateDirect(array.size * 4)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer()
            .put(array)
            
fun setVertexAttribPointer(attributeLocation: Int) {
        if (attributeLocation < 0) {
            EGLUtil.checkGlError("return setVertexAttribPointer $attributeLocation")
            return
        }
        floatBuffer.position(0)
        GLES20.glVertexAttribPointer(attributeLocation, 2, GLES20.GL_FLOAT, false, 0, floatBuffer)
        GLES20.glEnableVertexAttribArray(attributeLocation)
        EGLUtil.checkGlError("setVertexAttribPointer $attributeLocation")
    }

2,设置坐标数组

  // 顶点坐标,遮罩渲染rect
        val rect = config.rgbPointRect
        vertexArray.setArray(
                VertexUtil.create(
                        config.renderWidth,
                        config.renderHeight,
                        rect,
                        vertexArray.array
                )
        )
        vertexArray.setVertexAttribPointer(shader.aPositionLocation)

3,顶点坐标的转换

    fun create(width: Int, height: Int, rect: PointRect, array: FloatArray): FloatArray {
        // x0
        array[0] = switchX(rect.x.toFloat() / width)
        // y0
        array[1] = switchY(rect.y.toFloat() / height)
        // x1
        array[2] = switchX(rect.x.toFloat() / width)
        // y1
        array[3] = switchY((rect.y.toFloat() + rect.height) / height)
        // x2
        array[4] = switchX((rect.x.toFloat() + rect.width) / width)
        // y2
        array[5] = switchY(rect.y.toFloat() / height)
        // x3
        array[6] = switchX((rect.x.toFloat() + rect.width) / width)
        // y3
        array[7] = switchY((rect.y.toFloat() + rect.height) / height)
        return array
    }
    
    private fun switchX(x: Float): Float {
        return x * 2f - 1f
    }
    private fun switchY(y: Float): Float {
        return -y * 2f + 1 //((y * 2f - 2f) * -1f) - 1f
    }

4,纹理坐标的转换

    fun create(width: Int, height: Int, rect: PointRect, array: FloatArray): FloatArray {
        // x0
        array[0] = rect.x.toFloat() / width
        // y0
        array[1] = rect.y.toFloat() / height
        // x1
        array[2] = rect.x.toFloat() / width
        // y1
        array[3] = (rect.y.toFloat() + rect.height) / height
        // x2
        array[4] = (rect.x.toFloat() + rect.width) / width
        // y2
        array[5] = rect.y.toFloat() / height
        // x3
        array[6] = (rect.x.toFloat() + rect.width) / width
        // y3
        array[7] = (rect.y.toFloat() + rect.height) / height
        return array
    }

部分融合的顶点、片元着色器

class FinalMixShader {
    companion object {
        private const val NO_POSITION = -1

        private const val VERTEX = """
                attribute vec4 a_Position;  
                attribute vec2 a_TexCoordinateSrc;
                attribute vec4 a_TexCoordinateRgb;
                attribute vec4 a_TexCoordinateAlpha;
                varying vec2 v_TexCoordinateSrc;
                varying vec2 v_TexCoordinateRgb;
                varying vec2 v_TexCoordinateAlpha;
                void main()
                {
                    v_TexCoordinateAlpha = vec2(a_TexCoordinateAlpha.x, a_TexCoordinateAlpha.y);
                    v_TexCoordinateRgb = vec2(a_TexCoordinateRgb.x, a_TexCoordinateRgb.y);
                    v_TexCoordinateSrc = a_TexCoordinateSrc;
                    gl_Position = a_Position;
                }
        """

        private const val FRAGMENT = """
                #extension GL_OES_EGL_image_external : require
                precision mediump float; 
                uniform sampler2D u_TextureSrcUnit;
                uniform samplerExternalOES u_TextureVideoUnit;
                varying vec2 v_TexCoordinateSrc;
                varying vec2 v_TexCoordinateRgb;
                varying vec2 v_TexCoordinateAlpha;
                void main()
                {
                    vec4 alphaColor = texture2D(u_TextureVideoUnit, v_TexCoordinateAlpha);
                    vec4 rgbColor = texture2D(u_TextureVideoUnit, v_TexCoordinateRgb);
                    vec4 srcRgba = texture2D(u_TextureSrcUnit, v_TexCoordinateSrc);
                    if (srcRgba.rgb == vec3(0.0, 0.0, 0.0) || srcRgba.a == 0.0) {
                        gl_FragColor = vec4(rgbColor.rgb,alphaColor.r);
                    } else {
                         mediump float green = alphaColor.g;
                         mediump float percent = green;
                         gl_FragColor = vec4(mix(rgbColor.rgb, srcRgba.rgb, percent), mix(rgbColor.a, green, percent));
                    }
                }
        """
    }
}

部分OpenGL渲染

 // 传入遮罩纹理和视频纹理
        if (fboTextureId >= 0) {
            GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, fboTextureId)
            GLES20.glUniform1i(shader.uTextureSrcUnitLocation, 0)
        }
        if (mVideoTextureId >= 0) {
            GLES20.glActiveTexture(GLES20.GL_TEXTURE1)
            GLES20.glBindTexture(VideoRender.GL_TEXTURE_EXTERNAL_OES, mVideoTextureId)
            GLES20.glUniform1i(shader.uTextureMaskUnitLocation, 1)
        }

        EGLUtil.enableBlend()
        // draw
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)
        EGLUtil.checkGlError("final mix render")

其他说明

本文主要是Android端的实现,是技术预研阶段的设计思想和某些实现,实际应用中的会有更多拓展和优化。仅供学习交流,是在已有开源项目的基础上的拓展和学习。文章如有侵权,可以留言联系杜小菜。
早期sdk版本可参看:
https://github.com/duqian291902259/AlphaPlayerPlus

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容