【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】三、OpenGL渲染多視頻，實現畫中畫

【聲明】

首先，這一系列文章均基於自己的理解和實踐，可能有不對的地方，歡迎大家指正。
其次，這是一個入門系列，涉及的知識也僅限於夠用，深入的知識網上也有許許多多的博文供大家學習了。
最後，寫文章過程中，會借鑑參考其他人分享的文章，會在文章最後列出，感謝這些作者的分享。

碼字不易，轉載請註明出處！

教程代碼：【Github傳送門】

本文你可以瞭解到

渲染多視頻畫面，是實現音視頻編輯的基礎，本文將介紹如何將多個視頻畫面渲染到OpenGL中，以及如何對畫面進行混合、縮放、移動等。

寫在前面

距離上次更新已經有兩個星期，由於這段時間事情比較多，還請各位關注本系列文章的小夥伴見諒，一有時間我會加緊碼字，感謝大家的關注和督促。

下面就來看看如何在OpenGL中渲染多視頻畫面。

一、渲染多畫面

在上篇文章中，詳細的講解了如何通過OpenGL渲染視頻畫面，以及對視頻畫面進行比例矯正，基於前面系列文章中封裝好的工具，可以非常容易地實現在OpenGL中渲染多個視頻畫面。

上文的OpenGL Render非常簡單如下：

class SimpleRender(private val mDrawer: IDrawer): GLSurfaceView.Renderer {

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES20.glClearColor(0f, 0f, 0f, 0f)
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
        mDrawer.setTextureID(OpenGLTools.createTextureIds(1)[0])
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES20.glViewport(0, 0, width, height)
        mDrawer.setWorldSize(width, height)
    }

    override fun onDrawFrame(gl: GL10?) {
        mDrawer.draw()
    }
}

只支持一個Drawer，這裏改造一下，把Drawer修改爲列表，以支持多個繪製器。

class SimpleRender: GLSurfaceView.Renderer {

    private val drawers = mutableListOf<IDrawer>()

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES20.glClearColor(0f, 0f, 0f, 0f)
        val textureIds = OpenGLTools.createTextureIds(drawers.size)
        for ((idx, drawer) in drawers.withIndex()) {
            drawer.setTextureID(textureIds[idx])
        }
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES20.glViewport(0, 0, width, height)
        for (drawer in drawers) {
            drawer.setWorldSize(width, height)
        }
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT or GLES20.GL_DEPTH_BUFFER_BIT)
        drawers.forEach {
            it.draw()
        }
    }

    fun addDrawer(drawer: IDrawer) {
        drawers.add(drawer)
    }
}

同樣非常簡單，

增加一個addDrawer方法，用來添加多個繪製器。
在onSurfaceCreated中爲每個繪製器設置一個紋理ID。
在onSurfaceChanged中爲每個繪製器設置顯示區域寬高。
在onDrawFrame中，遍歷所有繪製器，啓動繪製。

接着，新建一個新頁面，生成多個解碼器和繪製器。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.opengl.GLSurfaceView
            android:id="@+id/gl_surface"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</android.support.constraint.ConstraintLayout>

class MultiOpenGLPlayerActivity: AppCompatActivity() {
    private val path = Environment.getExternalStorageDirectory().absolutePath + "/mvtest.mp4"
    private val path2 = Environment.getExternalStorageDirectory().absolutePath + "/mvtest_2.mp4"

    private val render = SimpleRender()

    private val threadPool = Executors.newFixedThreadPool(10)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_opengl_player)
        initFirstVideo()
        initSecondVideo()
        initRender()
    }
    
    private fun initFirstVideo() {
        val drawer = VideoDrawer()
        drawer.setVideoSize(1920, 1080)
        drawer.getSurfaceTexture {
            initPlayer(path, Surface(it), true)
        }
        render.addDrawer(drawer)
    }

    private fun initSecondVideo() {
        val drawer = VideoDrawer()
        drawer.setVideoSize(1920, 1080)
        drawer.getSurfaceTexture {
            initPlayer(path2, Surface(it), false)
        }
        render.addDrawer(drawer)
    }

    private fun initPlayer(path: String, sf: Surface, withSound: Boolean) {
        val videoDecoder = VideoDecoder(path, null, sf)
        threadPool.execute(videoDecoder)
        videoDecoder.goOn()

        if (withSound) {
            val audioDecoder = AudioDecoder(path)
            threadPool.execute(audioDecoder)
            audioDecoder.goOn()
        }
    }
    
    private fun initRender() {
        gl_surface.setEGLContextClientVersion(2)
        gl_surface.setRenderer(render)
    }
}

代碼比較簡單，通過之前封裝好的解碼工具和繪製工具，添加了兩個視頻畫面的渲染。

當然了，你可以添加更多的畫面到OpenGL中渲染。
並且，你應該發現了，渲染多個視頻，其實就是生成多個紋理ID，利用這個ID生成一個Surface渲染表面，最後把這個Surface給到解碼器MediaCodec渲染即可。

由於我這裏使用的兩個視頻都是1920*1080的寬高，所以會發現，兩個視頻只顯示了一個，因爲重疊在一起了。

兩個畫面如下：

二、嘗一下視頻編輯的味道

現在，兩個視頻疊加在一起，看不到底下的視頻，那麼，我們來改變一下上面這個視頻的alpha值，讓它變成半透明，不就可以看到下面的視頻了嗎？

1）實現半透

首先，爲了統一，在IDrawer中新加一個接口：

interface IDrawer {
    fun setVideoSize(videoW: Int, videoH: Int)
    fun setWorldSize(worldW: Int, worldH: Int)
    fun draw()
    fun setTextureID(id: Int)
    fun getSurfaceTexture(cb: (st: SurfaceTexture)->Unit) {}
    fun release()
    
    //新增調節alpha接口
    fun setAlpha(alpha: Float)
}

在VideoDrawer中，保存該值。

爲了方便查看，這裏將整個VideoDrawer都貼出來（不想看的可跳過看下面增加的部分）：

class VideoDrawer : IDrawer {

    // 頂點座標
    private val mVertexCoors = floatArrayOf(
        -1f, -1f,
        1f, -1f,
        -1f, 1f,
        1f, 1f
    )

    // 紋理座標
    private val mTextureCoors = floatArrayOf(
        0f, 1f,
        1f, 1f,
        0f, 0f,
        1f, 0f
    )

    private var mWorldWidth: Int = -1
    private var mWorldHeight: Int = -1
    private var mVideoWidth: Int = -1
    private var mVideoHeight: Int = -1

    private var mTextureId: Int = -1

    private var mSurfaceTexture: SurfaceTexture? = null

    private var mSftCb: ((SurfaceTexture) -> Unit)? = null

    //OpenGL程序ID
    private var mProgram: Int = -1

    //矩陣變換接收者
    private var mVertexMatrixHandler: Int = -1
    // 頂點座標接收者
    private var mVertexPosHandler: Int = -1
    // 紋理座標接收者
    private var mTexturePosHandler: Int = -1
    // 紋理接收者
    private var mTextureHandler: Int = -1
    // 半透值接收者
    private var mAlphaHandler: Int = -1

    private lateinit var mVertexBuffer: FloatBuffer
    private lateinit var mTextureBuffer: FloatBuffer

    private var mMatrix: FloatArray? = null

    private var mAlpha = 1f

    init {
        //【步驟1: 初始化頂點座標】
        initPos()
    }

    private fun initPos() {
        val bb = ByteBuffer.allocateDirect(mVertexCoors.size * 4)
        bb.order(ByteOrder.nativeOrder())
        //將座標數據轉換爲FloatBuffer，用以傳入給OpenGL ES程序
        mVertexBuffer = bb.asFloatBuffer()
        mVertexBuffer.put(mVertexCoors)
        mVertexBuffer.position(0)

        val cc = ByteBuffer.allocateDirect(mTextureCoors.size * 4)
        cc.order(ByteOrder.nativeOrder())
        mTextureBuffer = cc.asFloatBuffer()
        mTextureBuffer.put(mTextureCoors)
        mTextureBuffer.position(0)
    }

    private fun initDefMatrix() {
        if (mMatrix != null) return
        if (mVideoWidth != -1 && mVideoHeight != -1 &&
            mWorldWidth != -1 && mWorldHeight != -1) {
            mMatrix = FloatArray(16)
            var prjMatrix = FloatArray(16)
            val originRatio = mVideoWidth / mVideoHeight.toFloat()
            val worldRatio = mWorldWidth / mWorldHeight.toFloat()
            if (mWorldWidth > mWorldHeight) {
                if (originRatio > worldRatio) {
                    val actualRatio = originRatio / worldRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -actualRatio, actualRatio,
                        -1f, 1f,
                        3f, 5f
                    )
                } else {// 原始比例小於窗口比例，縮放寬度會導致寬度度超出，因此，寬度以窗口爲準，縮放高度
                    val actualRatio = worldRatio / originRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -1f, 1f,
                        -actualRatio, actualRatio,
                        3f, 5f
                    )
                }
            } else {
                if (originRatio > worldRatio) {
                    val actualRatio = originRatio / worldRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -1f, 1f,
                        -actualRatio, actualRatio,
                        3f, 5f
                    )
                } else {// 原始比例小於窗口比例，縮放高度會導致高度超出，因此，高度以窗口爲準，縮放寬度
                    val actualRatio = worldRatio / originRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -actualRatio, actualRatio,
                        -1f, 1f,
                        3f, 5f
                    )
                }
            }

            //設置相機位置
            val viewMatrix = FloatArray(16)
            Matrix.setLookAtM(
                viewMatrix, 0,
                0f, 0f, 5.0f,
                0f, 0f, 0f,
                0f, 1.0f, 0f
            )
            //計算變換矩陣
            Matrix.multiplyMM(mMatrix, 0, prjMatrix, 0, viewMatrix, 0)
        }
    }

    override fun setVideoSize(videoW: Int, videoH: Int) {
        mVideoWidth = videoW
        mVideoHeight = videoH
    }

    override fun setWorldSize(worldW: Int, worldH: Int) {
        mWorldWidth = worldW
        mWorldHeight = worldH
    }

    override fun setAlpha(alpha: Float) {
        mAlpha = alpha
    }

    override fun setTextureID(id: Int) {
        mTextureId = id
        mSurfaceTexture = SurfaceTexture(id)
        mSftCb?.invoke(mSurfaceTexture!!)
    }

    override fun getSurfaceTexture(cb: (st: SurfaceTexture) -> Unit) {
        mSftCb = cb
    }

    override fun draw() {
        if (mTextureId != -1) {
            initDefMatrix()
            //【步驟2: 創建、編譯並啓動OpenGL着色器】
            createGLPrg()
            //【步驟3: 激活並綁定紋理單元】
            activateTexture()
            //【步驟4: 綁定圖片到紋理單元】
            updateTexture()
            //【步驟5: 開始渲染繪製】
            doDraw()
        }
    }

    private fun createGLPrg() {
        if (mProgram == -1) {
            val vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, getVertexShader())
            val fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, getFragmentShader())

            //創建OpenGL ES程序，注意：需要在OpenGL渲染線程中創建，否則無法渲染
            mProgram = GLES20.glCreateProgram()
            //將頂點着色器加入到程序
            GLES20.glAttachShader(mProgram, vertexShader)
            //將片元着色器加入到程序中
            GLES20.glAttachShader(mProgram, fragmentShader)
            //連接到着色器程序
            GLES20.glLinkProgram(mProgram)

            mVertexMatrixHandler = GLES20.glGetUniformLocation(mProgram, "uMatrix")
            mVertexPosHandler = GLES20.glGetAttribLocation(mProgram, "aPosition")
            mTextureHandler = GLES20.glGetUniformLocation(mProgram, "uTexture")
            mTexturePosHandler = GLES20.glGetAttribLocation(mProgram, "aCoordinate")
            mAlphaHandler = GLES20.glGetAttribLocation(mProgram, "alpha")
        }
        //使用OpenGL程序
        GLES20.glUseProgram(mProgram)
    }

    private fun activateTexture() {
        //激活指定紋理單元
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
        //綁定紋理ID到紋理單元
        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTextureId)
        //將激活的紋理單元傳遞到着色器裏面
        GLES20.glUniform1i(mTextureHandler, 0)
        //配置邊緣過渡參數
        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR.toFloat())
        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR.toFloat())
        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE)
        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE)
    }

    private fun updateTexture() {
        mSurfaceTexture?.updateTexImage()
    }

    private fun doDraw() {
        //啓用頂點的句柄
        GLES20.glEnableVertexAttribArray(mVertexPosHandler)
        GLES20.glEnableVertexAttribArray(mTexturePosHandler)
        GLES20.glUniformMatrix4fv(mVertexMatrixHandler, 1, false, mMatrix, 0)
        //設置着色器參數， 第二個參數表示一個頂點包含的數據數量，這裏爲xy，所以爲2
        GLES20.glVertexAttribPointer(mVertexPosHandler, 2, GLES20.GL_FLOAT, false, 0, mVertexBuffer)
        GLES20.glVertexAttribPointer(mTexturePosHandler, 2, GLES20.GL_FLOAT, false, 0, mTextureBuffer)
        GLES20.glVertexAttrib1f(mAlphaHandler, mAlpha)
        //開始繪製
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)
    }

    override fun release() {
        GLES20.glDisableVertexAttribArray(mVertexPosHandler)
        GLES20.glDisableVertexAttribArray(mTexturePosHandler)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)
        GLES20.glDeleteTextures(1, intArrayOf(mTextureId), 0)
        GLES20.glDeleteProgram(mProgram)
    }

    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;" +
                "void main() {" +
                "  vec4 color = texture2D(uTexture, vCoordinate);" +
                "  gl_FragColor = vec4(color.r, color.g, color.b, inAlpha);" +
                "}"
    }

    private fun loadShader(type: Int, shaderCode: String): Int {
        //根據type創建頂點着色器或者片元着色器
        val shader = GLES20.glCreateShader(type)
        //將資源加入到着色器中，並編譯
        GLES20.glShaderSource(shader, shaderCode)
        GLES20.glCompileShader(shader)

        return shader
    }
}

實際上，相比較之前的繪製器，改變的地方很少：


class VideoDrawer : IDrawer {
    // 省略無關代碼......
    
    // 半透值接收者
    private var mAlphaHandler: Int = -1
    
    // 半透明值
    private var mAlpha = 1f
    
    override fun setAlpha(alpha: Float) {
        mAlpha = alpha
    }
    
    private fun createGLPrg() {
        if (mProgram == -1) {
        
            // 省略無關代碼......
            
            mAlphaHandler = GLES20.glGetAttribLocation(mProgram, "alpha")
            
            //......
        }
        //使用OpenGL程序
        GLES20.glUseProgram(mProgram)
    }
    
    private fun doDraw() {
    
        // 省略無關代碼......
    
        GLES20.glVertexAttrib1f(mAlphaHandler, mAlpha)
        
        //......
    }
    
    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;" +
                "void main() {" +
                "  vec4 color = texture2D(uTexture, vCoordinate);" +
                "  gl_FragColor = vec4(color.r, color.g, color.b, inAlpha);" +
                "}"
    }
}

重點關注兩個着色器的代碼：

在頂點着色器中，傳入了一個alpha變量，該值由java代碼傳入，然後頂點着色器將該值賦值給了inAlpha，最後給到了片元着色器。

簡單講一下如何傳遞參數到片元着色器。
要把Java中的值傳遞到片元着色器中，直接傳值是不行的，需要通過頂點着色器，間接傳遞。

頂點着色器輸入與輸出

輸入

build－in變量，此類變量爲opengl內建參數，可以看成是opengl的繪製上下文信息

uniform變量：一般用於Java程序傳入變換矩陣，材質，光照參數和顏色等信息。如：uniform mat4 uMatrix;

attribute變量：一般用來傳入一些頂點的數據，如：頂點座標，法線，紋理座標，頂點顏色等。

輸出

build-in變量：即glsl的內建變量，如：gl_Position。

varying變量：用於頂點着色器向片元着色器傳遞數據。需要注意的是：這種變量必須在頂點着色器和片元着色器中，聲明必須一致。比如上面的inAlpha。

片元着色器輸入與輸出

輸入

build－in變量：同頂點着色器。

varying變量：用於作爲頂點着色器數據的輸入，與頂點着色器聲明一致

輸出

build-in變量：即glsl的內建變量，如：gl_FragColor。

知道了如何傳值，其他的就一目瞭然了。

獲取頂點着色器的alpha，然後在繪製前把值傳遞進入。
在片元着色器中，修改從紋理中取出的顏色值的alpha。最後賦值給gl_FragColor進行輸出。

接着，在MultiOpenGLPlayerAcitivity中，改變上層畫面的半透值


class MultiOpenGLPlayerActivity: AppCompatActivity() {

    // 省略無關代碼...
    
    private fun initSecondVideo() {
        val drawer = VideoDrawer()
        // 設置半透值
        drawer.setAlpha(0.5f)
        drawer.setVideoSize(1920, 1080)
        drawer.getSurfaceTexture {
            initPlayer(path2, Surface(it), false)
        }
        render.addDrawer(drawer)
    }

    //...
}

當你以爲可以完美的輸出一個半透明的畫面時，會發現畫面依然不是透明的。爲啥？

因爲沒有開啓OpenGL混合模式，回到SimpleRender中。

在onSurfaceCreated中開啓混合模式；
在onDrawFrame中開始繪製每一幀之前，清除屏幕，否則會有畫面殘留。

class SimpleRender: GLSurfaceView.Renderer {

    private val drawers = mutableListOf<IDrawer>()

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES20.glClearColor(0f, 0f, 0f, 0f)
        
        //------開啓混合，即半透明---------
        // 開啓很混合模式
        GLES20.glEnable(GLES20.GL_BLEND)
        // 配置混合算法
        GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA)
        //------------------------------

        val textureIds = OpenGLTools.createTextureIds(drawers.size)
        for ((idx, drawer) in drawers.withIndex()) {
            drawer.setTextureID(textureIds[idx])
        }
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES20.glViewport(0, 0, width, height)
        for (drawer in drawers) {
            drawer.setWorldSize(width, height)
        }
    }

    override fun onDrawFrame(gl: GL10?) {
        // 清屏，否則會有畫面殘留
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT or GLES20.GL_DEPTH_BUFFER_BIT)
        drawers.forEach {
            it.draw()
        }
    }

    fun addDrawer(drawer: IDrawer) {
        drawers.add(drawer)
    }
}

這樣，就可以看到一個半透明的視頻，疊加在另一個視頻上面啦。

怎麼樣，是不是嗅到一股視頻編輯的騷味？

這其實就是最基礎的視頻編輯原理了，基本上所有的視頻編輯都是基於着色器，去做畫面的變換。

接下來再來看下兩個基本的變換：移動和縮放。

2) 移動

接下來，來看看如何通過觸摸拖動，來改變視頻的位置。

前面文章講過，圖片或視頻的移位和縮放，基本都是通過矩陣變換完成的。

Android在Matrix中提供了一個方法用於矩陣的平移：

/**
 * Translates matrix m by x, y, and z in place.
 *
 * @param m matrix
 * @param mOffset index into m where the matrix starts
 * @param x translation factor x
 * @param y translation factor y
 * @param z translation factor z
 */
public static void translateM(
        float[] m, int mOffset,
        float x, float y, float z) {
    for (int i=0 ; i<4 ; i++) {
        int mi = mOffset + i;
        m[12 + mi] += m[mi] * x + m[4 + mi] * y + m[8 + mi] * z;
    }
}

其實就是改變了4x4矩陣的最後一行的值。

其中，x，y，z分別是相對於當前位置移動的距離。

這裏需要注意的是：平移的變化值，被乘上了縮放的比例。具體大家可以用筆在紙上算一下就知道了。

如果原始矩陣是單位矩陣，直接使用以上translateM方法進行移動變換即可。

但是爲了矯正畫面的比例，上篇文章詳細的介紹過，視頻畫面是經過縮放的，因此當前畫面的矩陣並非單位矩陣。

爲此，要平移畫面，就需要對x，y，z進行相應的縮放處理（否則移動的距離將被原矩陣中的縮放因子改變）。

那麼，有兩種辦法可以使畫面按照正常的距離移動：

將矩陣還原爲單位矩陣->移動->再縮放
使用當前矩陣->縮放移動距離->移動

很多人都是使用第一種，這裏使用第二種。

記錄縮放比例

在上一篇文章中，介紹瞭如何計算縮放係數：

ratio = videoRatio * worldRatio 
或
ratio = videoRatio / worldRatio

分別對應寬或者高的縮放係數。在VideoDrawer中，分別把寬高的縮放係數記錄下來。

class VideoDrawer : IDrawer {
    
    // 省略無關代碼......
    
    private var mWidthRatio = 1f
    private var mHeightRatio = 1f
    
    private fun initDefMatrix() {
        if (mMatrix != null) return
        if (mVideoWidth != -1 && mVideoHeight != -1 &&
            mWorldWidth != -1 && mWorldHeight != -1) {
            mMatrix = FloatArray(16)
            var prjMatrix = FloatArray(16)
            val originRatio = mVideoWidth / mVideoHeight.toFloat()
            val worldRatio = mWorldWidth / mWorldHeight.toFloat()
            if (mWorldWidth > mWorldHeight) {
                if (originRatio > worldRatio) {
                    mHeightRatio = originRatio / worldRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -mWidthRatio, mWidthRatio,
                        -mHeightRatio, mHeightRatio,
                        3f, 5f
                    )
                } else {// 原始比例小於窗口比例，縮放高度度會導致高度超出，因此，高度以窗口爲準，縮放寬度
                    mWidthRatio = worldRatio / originRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -mWidthRatio, mWidthRatio,
                        -mHeightRatio, mHeightRatio,
                        3f, 5f
                    )
                }
            } else {
                if (originRatio > worldRatio) {
                    mHeightRatio = originRatio / worldRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -mWidthRatio, mWidthRatio,
                        -mHeightRatio, mHeightRatio,
                        3f, 5f
                    )
                } else {// 原始比例小於窗口比例，縮放高度會導致高度超出，因此，高度以窗口爲準，縮放寬度
                    mWidthRatio = worldRatio / originRatio
                    Matrix.orthoM(
                        prjMatrix, 0,
                        -mWidthRatio, mWidthRatio,
                        -mHeightRatio, mHeightRatio,
                        3f, 5f
                    )
                }
            }

            //設置相機位置
            val viewMatrix = FloatArray(16)
            Matrix.setLookAtM(
                viewMatrix, 0,
                0f, 0f, 5.0f,
                0f, 0f, 0f,
                0f, 1.0f, 0f
            )
            //計算變換矩陣
            Matrix.multiplyMM(mMatrix, 0, prjMatrix, 0, viewMatrix, 0)
        }
    }
    
    // 平移
    fun translate(dx: Float, dy: Float) {
        Matrix.translateM(mMatrix, 0, dx*mWidthRatio*2, -dy*mHeightRatio*2, 0f)
    }
    
    // ......
}

代碼中，根據縮放寬或高，分別記錄對應的寬高縮放比。

接着，在translate方法中，對dx和dy分別做了縮放。那麼縮放是如何得出的呢？

計算移動縮放比

首先，來看下普通矩陣平移是如何計算縮放的。

可以看到，一個單位矩陣，在Y方向上放大了2倍以後，經過Matrix.translateM變換，實際平移的距離是原來的2倍。

那麼爲了將移動的距離還原回來，需要把這個倍數除去。

最終得到：

sx = dx / w_ratio
sy = dy / h_ratio

接下來看看，如何計算OpenGL視頻畫面的移動縮放係數。

第一個是矩陣是OpenGL正交投影矩陣，我們已經知道left和right，top和bottom互爲反數，並且等於視頻畫面的縮放比w_ratio，h_ratio（不清楚的，請看上一篇文章），因此可以簡化成爲右邊的矩陣。

經過Matrix.translateM進行轉換以後，得到的平移分別爲：

x方向：1/w_ratio * dx

y方向：1/h_ratio * dy

因此，可以得出正確的平移量爲：

sx = dx * w_ratio

sy = dy * h_ratio

但是，爲何代碼中的平移係數都乘以2呢？即

fun translate(dx: Float, dy: Float) {
    Matrix.translateM(mMatrix, 0, dx*mWidthRatio*2, -dy*mHeightRatio*2, 0f)
}

首先理解一下，這裏的dx和dy指的是什麼呢？

dx = (curX - prevX) / GLSurfaceView_Width

dy = (curY - prevY) / GLSurfaceView_Height

其中，
curX/curY：爲當前手指觸摸點的x/y座標
pervX/prevY：爲上一個手指觸摸點的x/y座標

即dx，dy是歸一化的距離，範圍（0～1）。

對應了OpenGL的世界座標：

x方向爲 (left, right) -> (-w_ratio, w_ratio)

y方向爲 (top, bottom) ->(-h_ratio, h_ratio)

實際上整個OpenGL的世界座標寬爲：2倍的w_ratio；高爲2倍的h_ratio。所以要把實際（0～1）換算爲對應的世界座標中的距離，需要乘以2，才能得到正確的移動距離。

最後，還有一點要注意的是，y方向的平移前面加了一個負號，這是因爲Android屏幕Y軸的正方向是向下，而OpenGL世界座標Y軸方向是向上的，正好相反。

獲取觸摸距離，並平移畫面

爲了獲取手指的觸摸點，需要自定義一個GLSurfaceView。

class DefGLSurfaceView : GLSurfaceView {

    constructor(context: Context): super(context)

    constructor(context: Context, attrs: AttributeSet): super(context, attrs)

    private var mPrePoint = PointF()

    private var mDrawer: VideoDrawer? = null

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mPrePoint.x = event.x
                mPrePoint.y = event.y
            }
            MotionEvent.ACTION_MOVE -> {
                val dx = (event.x - mPrePoint.x) / width
                val dy = (event.y - mPrePoint.y) / height
                mDrawer?.translate(dx, dy)
                mPrePoint.x = event.x
                mPrePoint.y = event.y
            }
        }
        return true
    }

    fun addDrawer(drawer: VideoDrawer) {
        mDrawer = drawer
    }
}

代碼很簡單，爲了方便演示，只添加了一個繪製器，也沒有去判斷手指是否觸摸到實際畫面的位置，只要有觸摸移動，就平移畫面。

然後把它放到頁面中使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <com.cxp.learningvideo.opengl.DefGLSurfaceView
            android:id="@+id/gl_surface"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</android.support.constraint.ConstraintLayout>

最後，在Activity中調用addDrawer，把上面那個畫面的繪製器設置給DefGLSurfaceView。

private fun initSecondVideo() {
    val drawer = VideoDrawer()
    drawer.setVideoSize(1920, 1080)
    drawer.getSurfaceTexture {
        initPlayer(path2, Surface(it), false)
    }
    render.addDrawer(drawer)
    
    //設置繪製器，用於觸摸移動
    gl_surface.addDrawer(drawer)
}

這樣，就可以隨便移動畫面啦。

3）縮放

相對於移動縮放顯得要簡單的多。

Android的Matrix提供一個矩陣縮放方法：


/**
 * Scales matrix m in place by sx, sy, and sz.
 *
 * @param m matrix to scale
 * @param mOffset index into m where the matrix starts
 * @param x scale factor x
 * @param y scale factor y
 * @param z scale factor z
 */
public static void scaleM(float[] m, int mOffset,
        float x, float y, float z) {
    for (int i=0 ; i<4 ; i++) {
        int mi = mOffset + i;
        m[     mi] *= x;
        m[ 4 + mi] *= y;
        m[ 8 + mi] *= z;
    }
}

這個方法也非常簡單，就是將x，y，z對應的矩陣縮放的位置乘以縮放倍數。

在VideoDrawer中添加一個縮放的方法scale：

class VideoDrawer : IDrawer {

    // 省略無關代碼.......
    
    fun scale(sx: Float, sy: Float) {
        Matrix.scaleM(mMatrix, 0, sx, sy, 1f)
        mWidthRatio /= sx
        mHeightRatio /= sy
    }
    
    // ......
}

這裏要注意的一點是，設置完縮放係數的時候，要把該縮放係數累計到原來的投影矩陣的縮放係數中，這樣在平移的時候才能正確縮放移動距離。

注意：這裏是（原來的縮放係數 / 正要縮放的係數），而非“乘”。因爲縮放投影矩陣的縮放比例是“越大，縮的越小”（可以再去看下正交投影的矩陣，left、right、top、bottom是分母）

最後給畫面設置一個縮放係數，比如0.5f。

private fun initSecondVideo() {
    val drawer = VideoDrawer()
    drawer.setAlpha(0.5f)
    drawer.setVideoSize(1920, 1080)
    drawer.getSurfaceTexture {
        initPlayer(path2, Surface(it), false)
    }
    render.addDrawer(drawer)
    gl_surface.addDrawer(drawer)

    // 設置縮放係數
    Handler().postDelayed({
        drawer.scale(0.5f, 0.5f)
    }, 1000)
}

效果如下：

三、後話

以上就是在音視頻開發中使用到的最基礎的知識，但千萬不要小瞧這些知識，許多酷炫的效果其實都是基於這些最簡單的變換去實現的，希望大家有所收穫。

咱們下篇見！

開發的貓

發佈了11 篇原創文章 · 獲贊 0 · 訪問量 2097

私信關注

【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】三、OpenGL渲染多視頻，實現畫中畫

【聲明】

目錄

一、Android音視頻硬解碼篇：

二、使用OpenGL渲染視頻畫面篇

三、Android FFmpeg音視頻解碼篇

本文你可以瞭解到

寫在前面

一、渲染多畫面

二、嘗一下視頻編輯的味道

1）實現半透

頂點着色器輸入與輸出

片元着色器輸入與輸出

2) 移動

3）縮放

三、後話

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

【Android 音視頻開發打怪升級：音視頻硬解碼篇】二、音視頻硬解碼流程：封裝基礎解碼框架

【Android 音視頻開發打怪升級：音視頻硬解碼篇】三、音視頻播放：音視頻同步

【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】五、OpenGL FBO數據緩衝區

【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】一、初步瞭解OpenGL ES

【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】六、Android音視頻硬編碼：生成一個MP4

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

【Android 音視頻開發打怪升級：OpenGL渲染視頻畫面篇】三、OpenGL渲染多視頻，實現畫中畫

【聲 明】

目錄

一、Android音視頻硬解碼篇：

二、使用OpenGL渲染視頻畫面篇

三、Android FFmpeg音視頻解碼篇

本文你可以瞭解到

寫在前面

一、渲染多畫面

二、嘗一下視頻編輯的味道

1）實現半透

頂點着色器輸入與輸出

片元着色器輸入與輸出

2) 移動

3）縮放

三、後話

【聲明】