作者：星隕
來源：
音視訊開發進階在群裡面有人提到了這麼一個實作：現有一段素材視訊，想要對視訊中的某個内容進行替換，換成自己的圖檔，這個怎麼用 OpenGL 去實作呢？
首先要明确的是，視訊是由一幀一幀圖像組成的，它利用了人眼的視覺暫留效應，一秒内播放足夠幀數的圖檔才會感覺到是連續的。
而想要對視訊的内容進行替換，也就是要将每一幀圖像的内容都進行替換了，一般來說這應該是屬于視訊後期處理了，用專業的 AE （Adobe After Effects）軟體來處理會比較好。
處理思路
如果用 OpenGL 來處理，有這樣的一個思路：
首先通過 MediaCodec 對每一幀圖像内容進行解碼，然後再通過 OpenGL 對目前解碼的一幀圖像進行處理，在原圖像上加一個透明的遮罩層，遮罩層的要求就是對于要替換的内容區域是非透明的，其他區域透明，将遮罩層和原圖像進行融合，最後得到的就是一幀被替換過内容圖像了，再将處理過的一幀圖像進行編碼，重新編碼成新的視訊内容。
一直重複 解碼 -> 處理 -> 編碼這個過程，直到視訊的每一幀内容都處理完了，就實作了對視訊内容替換。
當然這僅僅是個思路，難點在于如何找到合适的遮罩層，如果視訊圖像内容是變動的，要替換的内容不是固定的，那麼對于遮罩層要求更高了，每一幀處理都得有個合适的遮罩。
下面會針對視訊的一幀圖像内容進行處理，如何将一幀的圖像内容替換了。
直接效果
效果如下：
Sketch 設計圖
代碼實作的效果，左上方的内容被右上方内容替換了，最後成了右下角的圖檔。
軟體實作圖
準備工作
不會做設計的開發不是好碼農
是時候掏出我的大寶石軟體 Sketch 切個圖了：
準備一張待替換内容：
待替換圖檔
然後再切一張同等大小，并把中間圓形位置的圖檔替換成想要的圖檔，其他周邊内容設定透明度為 0 。
帶透明度的遮罩圖
接下來的事情就是将兩張圖檔融合，分别介紹基于着色器和顔色混合來替換内容。
這兩個方案都有一個共同點，就是要将帶遮罩的圖檔覆寫在原圖上，不同的是如何處理兩個圖檔之間的覆寫，透明度就是一個比較好的切入點。
使用着色器進行替換
在 OpenGL 的渲染管線中，會先建構圖形，然後進行光栅化，光栅化後對每一個片元着色，在這個着色過程中可以根據需要對片元進行處理，包括抛棄某些片元等，簡單說在 OpenGL 中就是先有形後有色，而在有形有色的過程中可以搞點小操作~~
對片元進行處理就是我們的片元着色器腳本了。
1precision mediump float;
2varying vec2 vTextureCoord; //接收從頂點着色器過來的參數
3uniform sampler2D sTexture;//紋理内容資料
4void main() {
5 vec4 bcolor = texture2D(sTexture, vTextureCoord);//給此片元從紋理中采樣出顔色值
6 if(bcolor.a<0.6) {
7 discard;
8 } else {
9 gl_FragColor=bcolor;
10}} 我們的遮罩圖除了要替換的内容，其他地方都是透明的，根據采樣出的透明度值小于門檻值，就抛棄該片元，直接就不顯示了。
而透明度滿足要求的就會顯示，并且在最後映射到視口上時，直接覆寫了原有的顔色。
通過這種方式就實作了内容替換。
使用顔色混合進行替換
使用顔色混合的方式不像着色器那樣簡單粗暴，要麼抛棄某些片元，要麼直接覆寫了。
它是根據一定的計算規則，來計算兩個顔色之間的融合。
在 OpenGL 中使用顔色混合要設定合理的混合因子。
1 glEnable(GL_BLEND);
2 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
3 // 繪制
4 glDisable(GL_BLEND) 混合因子的設定使得如果遮罩圖是透明的，使用被遮罩圖的顔色，如果不是透明的，使用遮罩圖的顔色，這樣就不是直接抛棄某些片元了。
代碼實作
在具體的代碼實作中，采用了 EGL 來實作離屏的渲染。
在非主線程中，初始化 EGL 環境，然後準備好繪制的必要工作，接着執行繪制，最後把繪制的結果通過 glReadPixels 讀取出來。
1 Observable.fromCallable {
2 // 初始化 EGL 環境
3 return@fromCallable initEgl()
4 }.map {
5 // 設定各種矩陣
6 prepare(width, height)
7 return@map it
8 }.map {
9 // 執行繪制
10 replaceContent(isBlend)
11 return@map it
12 }.map {
13 // 讀取像素
14 val result = readPixel(width, height)
15 it.destroy()
16 return@map result
17 }.subscribeOn(Schedulers.computation())
18 .observeOn(AndroidSchedulers.mainThread())
19 .subscribe({
20 // 設定效果
21 mResultImage.setImageBitmap(it)
22 }, {
23 showToast("replace failed")
24 }) 具體的繪制過程比較簡單，如果采用了顔色混合就執行顔色混合的繪制，否則采用着色器的繪制，也展現了就是将遮罩圖直接覆寫在原圖上的思想。
1 private fun replaceContent(isBlend: Boolean) {
2 glClearColor(1f, 1f, 1f, 1f)
3 glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT)
4 mOriginImage?.drawSelf(mOriginTextureId)
5 if (isBlend) {
6 glEnable(GL_BLEND);
7 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
8 mReplaceImage?.drawSelf(mReplaceTextureId)
9 glDisable(GL_BLEND)
10 } else {
11 mAlphaTextureRect?.drawSelf(mReplaceTextureId)
12 }
13 } 在最後讀取像素内容時要注意，glReadPixels 讀取的内容是上下颠倒的，需要将它翻轉過來。
1 for (i in 0 until height) {
2 for (j in 0 until width) {
3 pixelMirroredArray[(height - i - 1) * width + j] = pixelArray[i * width + j]
4 }
5 } 具體的實作可以參考我的 Github 項目，求一波 Star 。
https://github.com/glumes/AndroidOpenGLTutorial後續想法
對于視訊内容替換，這裡僅僅是給出了一幀圖像内容的替換，而且還是基于透明度的。
看到好萊塢有些電影場景拍攝時，後面都會給出一塊純色的幕布，然後在後期處理時把幕布内容替換成背景，這種替換通過着色器比較顔色的範圍應該也是可以實作的。
當然了，要是搭配圖像識别來替換内容玩法就更加豐富了。
OpenGL 系列文章「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。