轉場介紹
轉場效果是什么？
轉場效果，簡單來說就是兩段視頻之間的銜接過渡效果。
現在拍攝 vlog 的玩家越來越多，要是視頻沒有一兩個炫酷的轉場效果，都不好意思拿出來炫酷了。
那么如何在視頻編輯軟件中實現轉場效果呢？
這里提供使用 OpenGL 實現視頻轉場的一個小示例，我們可以通過自定義 GLSL 來實現不同的轉場效果。
以在 Android 平台上作為演示，但其實不管是 Android 還是 iOS，實現的原理都是一樣的。
首先要有兩段視頻，視頻 A 和視頻 B，先播放視頻 A 后播放視頻 B，中間有一段過程稱為 C ，C 就是視頻 A、B 做轉場動畫的時間段。
如下所示：
播放器按照時間順序，從 A -> C -> B 的播放，這樣就有了轉場的效果。
視頻轉場，首先就得有視頻，直接從視頻 A、B 中解碼出當前幀並通過 OpenGL 顯示到屏幕上就好了，如果你對這個操作不熟悉的話，可以查看我的公眾號【紙上淺談】歷史文章，都有寫過相關內容。
這里以圖片來替代視頻 A、B 中解碼出來的幀。
最終效果如下：
實現講解
模擬視頻渲染播放
模擬 fps 為 30 的視頻，用 RxJava 每間隔 30 ms 就觸發一次 OpenGL 渲染。
Observable
.interval(30, TimeUnit.MILLISECONDS)
.subscribeOn(AndroidSchedulers.mainThread())
.subscribe {
mGLSurfaceView.requestRender()
}
另外，如果在視頻 A 播放階段不斷地改變圖片，也就是更新紋理內容，就相當於在真實的解碼視頻進行播放了。
當然這些操作只是為了讓這個小例子更加貼近真正的視頻轉場，重要的還是在於如何實現轉場的 Shader 效果。
首先轉場的時候要有兩個紋理作為輸入，那么肯定要定義兩個 sampler2D 進行采樣了。
varying vec2 vTextureCoord;//接收從頂點着色器過來的參數
uniform sampler2D sTexture1;
uniform sampler2D sTexture2;
其中 sTexture1 對應於視頻 A 內容，sTexture2 對應於視頻 B 內容。
vTextureCoord 對應於頂點着色器傳遞過來的紋理坐標，視頻 A 和 視頻 B 都需要用到這個紋理坐標。
這個時候，只要調用 texture2D 方法就能得到視頻 A 和 視頻 B 的內容了。
// 得到視頻 A 的內容
texture2D(sTexture1,vTextureCoord)
// 得到視頻 B 的內容
texture2D(sTexture2,vTextureCoord)
要注意的是這里說得到視頻 A/B 的內容，是得到紋理坐標對應的圖像內容。也就是說如果紋理坐標是 [0,1] 范圍內，那么可以得到視頻 A/B 的全部圖像內容。如果坐標是 [-0.5,0.5] 那么只能采樣得到一半內容了。
轉場效果實現
混合函數 mix
由於轉場效果是需要視頻 A 和視頻 B 進行疊加混合的，而 GLSL 內嵌了 mix 函數進行調用。
對於 GLSL 中有哪些內嵌的函數可以直接調用的，可以參考寫過的文章記錄：
mix 函數的聲明如下：
genType mix(genType x,genType y,float a) // 其中 genType 泛指 GLSL 中的類型定義
它的主要功能是使用因子 a 對 x 與 y 執行線性混合，既返回 x * (1-a) + y * a 。
現在，通過 texture2D 能得到視頻幀內容，通過 mix 能進行視頻幀混合疊加，那么就可以得到最后轉場視頻幀了。
vec4 color = mix(texture2D(sTexture1,vTextureCoord),texture2D(sTexture2,vTextureCoord),a);
渲染進度控制
似乎到這里就可以大功告成了，實際上才剛剛完成了一半~~~
要知道轉場效果是隨着時間來播放的，就上面的例子中，轉場時間內，一開始都是視頻 A 的內容，然后視頻 A 逐漸減少，視頻 B 逐漸增多，到最后全是視頻 B 內容，在我們的 Shader 中也要體現這個時間變化的概念。
在 Shader 中定義 progress 變量，代表轉場的播放進度，進度為 0 ~ 1.0 之間。
uniform float progress;
同時在每一次渲染時更新 progress 變量的值。
GLES20.glUniform1f(muProgressHandle, mProgress);
當 progress 為 0 時代表轉場剛剛開始，當 progress 為 1 時代表轉場已經結束了。
if (mProgress >= 1.0f) {
mProgress = 0.0f;
} else {
mProgress += 0.01;
}
這里 progress 每次遞增 0.01，完成一次轉場就需要 100 次渲染，每次渲染間隔 30ms，那么一次轉場動畫就是 3000ms 了，當然這個可以自己調節的。
畫面繪制
再回到 mix 函數的參數 a ，這個參數起到了隨時間調節轉場混合程度的作用。當 a = 0 時，全是視頻 A 的內容， 當 a = 1 時，全是視頻 B 的內容。
如上圖所示，在轉場動畫的某一幀，左側是視頻 A 的內容，因為此時 a = 0，右側是視頻 B 的內容，此時 a = 1 。
可以看到在一次渲染繪制內 a 既要能等於 0 ，還要能等於 1 ，這個是怎么實現的呢?
事實上我們說的一次渲染繪制，通常指 OpenGL draw 方法的一次調用，但是在這一次調用里，還是有很多步驟要執行的。
OpenGL 渲染管線會先執行頂點着色器，然后光柵化，再接着就是片段着色器，片段着色器會根據紋理坐標采樣紋理貼圖上的像素內容進行着色，因此片段着色器在管線中會多次執行，針對每個像素都要進行着色。
上面圖像的小方塊就好比一個像素，每個像素都要執行一個片段着色器。
首先，肯定所有的像素都要進行着色的。左側方塊采樣視頻 A 的紋理進行着色，右側方塊采樣視頻 B 的紋理進行着色。
回到如下代碼：
mix(texture2D(sTexture1,vTextureCoord),texture2D(sTexture2,vTextureCoord),a);
只要保證繪制左側時 a = 0，繪制右側時 a = 1 就行了。這里可以通過移動紋理坐標來控制 a 的值。
vec2 p = vTextureCoord + progress * sign(direction);
float a = step(0.0,p.y) * step(p.y,1.0) * step(0.0,p.x) * step(p.x,1.0);
OpenGL 中定義紋理坐標范圍是 [0 ~ 1] ，可以將范圍右移 0.5 ，從而變成 [0.5 ~ 1.5] ，此時紋理坐標一半位於規定范圍內，一半超出界外了。
這樣就可以通過對當前像素小方格對應的紋理坐標的 x，y 值運用 step 函數進行判斷是否在界內，就可以決定是采樣視頻 A 還是視頻 B 的圖像了。
當每次刷新 progress 時，就向右移一小段距離，視頻 A 隨着右移而變少，視頻 B 變多，這樣就是實現了轉場效果。
不知道這個簡單的例子有沒有讓你想到些什么？
對的，沒錯，就是升職加薪，走向巔峰必備的 PPT 技能，這種視頻轉場的實現效果就和我們在編輯 PPT 動畫時添加的一樣。
而且這還是比較簡單的，想要做一些花里胡哨的轉場特效，缺少靈感就可以參考 PPT 里面的動畫了。
另外，我們還可以對轉場效果做一些總結分類，比如示例中用的是圖片，可以理解成視頻 A 的最后一幀顯示與視頻 B 的第一幀顯示做轉場效果，這種轉場效果實際使用的人比較少，大多數是視頻 A 的最后一幀與視頻 B 的前一段時間的視頻做轉場效果。
因此也可以對轉場效果做個分類：
- 視頻 A 最后一幀與視頻 B 第一幀做轉場動畫
- 視頻 A 最后一幀與視頻 B 前一段時間視頻做轉場動畫
- 視頻 A 最后一段時間視頻 與視頻 B 第一幀做轉場動畫
- 視頻 A 最后一段時間視頻 與視頻 B 前一段時間視頻做轉場動畫
這四個分類的實現原理其實都差不多，如果是一段視頻的話，那么就在視頻播放時更新對應紋理。
以上就在關於使用 OpenGL 在視頻編輯中實現轉場效果的講解，通過這篇文章希望大家可以掌握轉場的基本實現原理。
文中用到的代碼示例，可以關注我的微信公眾號【紙上淺談】，回復 “轉場” 即可~~~
推薦閱讀
技術交流，歡迎加微信好友~~
歡迎關注微信公眾號【紙上淺談】，看更多音視頻、OpenGL、多媒體開發文章
