阿里妹導讀：打開盒馬app，相信你跟阿里妹一樣，很難抵抗各種美味的誘惑。顏值即正義，盒馬的圖片視頻技術逼真地還原了食物細節，並在短短數秒內呈現出食物的最佳效果。今天，我們請來阿里高級無線開發工程師萊寧，解密盒馬app裡那些“美味”視頻是如何生產的。

一、前言

圖片合成視頻併產生類似PPT中每頁過渡特效的能力是目前很多短視頻軟件帶有的功能，比如抖音的影集。這個功能主要包括圖片合成視頻、轉場時間線定義和OpenGL特效等三個部分。

其中圖片轉視頻的流程直接決定了後面過渡特效的實現方案。這裡主要有兩種方案：

1. 圖片預先合成視頻，中間不做處理，記錄每張圖片展示的時間戳位置，然後在相鄰圖片切換的時間段用OpenGL做畫面處理。
2. 圖片合成視頻的過程中，在畫面幀寫入時同時做特效處理。

方案1每個流程都比較獨立，更方便實現，但是要重複處理兩次數據，一次合併一次加特效，耗時更長。

方案2的流程是相互穿插的，只需要處理一次數據，所以我們採用這個方案。

下面主要介紹下幾個重點流程，並以幾個簡單的轉場特效作為例子，演示具體效果。

二、圖片合成

1.方案

圖片合成視頻有多種手段可以實現。下面談一下比較常見的幾種技術實現。

I.FFMPEG

定義輸出編碼格式和幀率，然後指定需要處理的圖片列表即可合成視頻。

II.MediaCodec

在使用Mediacodec進行視頻轉碼時，需要解碼和編碼兩個codec。解碼視頻後將原始幀數據按照時間戳順序寫入編碼器生成視頻。但是圖片本身就已經是幀數據，如果將圖片轉換成YUV數據，然後配合一個自定義的時鐘產生時間戳，不斷將數據寫入編碼器即可達到圖片轉視頻的效果。

III.MediaCodec&OpenGL

既然Mediacodec合成過程中已經有了處理圖片數據的流程，可以把這個步驟和特效生成結合起來，把圖片處理成特效序列幀後再按序寫入編碼器，就能一併生成轉場效果。

2.技術實現

首先需要定義一個時鐘，來控制圖片幀寫入的頻率和編碼器的時間戳，同時也決定了視頻最終的幀率。

這裡假設需要24fps的幀率，一秒就是1000ms，因此寫入的時間間隔是1000/24=42ms。也就是每隔42ms主動生成一幀數據，然後寫入編碼器。

時間戳需要是遞增的，從0開始，按照前面定義的間隔時間差deltaT，每寫入一次數據後就要將這個時間戳加deltaT，用作下一次寫入。

然後是設置一個EGL環境來調用OpenGL，在Android中一個OpenGl的執行環境是threadlocal的，所以在合成過程中需要一直保持在同一個線程中。Mediacodec的構造函數中有一個surface參數，在編碼器中是用作數據來源。在這個surface中輸入數據就能驅動編碼器生產視頻。通過這個surface用EGL獲取一個EGLSurface，就達到了OpenGL環境和視頻編碼器數據綁定的效果。

這裡不需要手動將圖片轉換為YUV數據，先把圖片解碼為bitmap，然後通過texImage2D上傳圖片紋理到GPU中即可。

最後就是根據圖片紋理的uv座標，根據外部時間戳來驅動紋理變化，實現特效。

三、轉場時間線

對於一個圖片列表，在合成過程中如何銜接前後序列圖片的展示和過渡時機，決定了最終的視頻效果。

假設有圖片合集{1,2,3,4}，按序合成，可以有如下的時間線：

每個Stage是合成過程中的一個最小單元，首尾的兩個Stage最簡單，只是單純的顯示圖片。中間階段的Stage，包括了過渡過程中前後兩張圖片的展示和過渡動畫的時間戳定義。

假設每張圖片的展示時間為showT(ms)，動畫的時間為animT(ms)。

相鄰Stage中同一張圖的靜態顯示時間的總和為一張圖的總顯示時間，則首尾兩個Stage的有效時長為showT/2，中間的過渡Stage有效時長為showT+animT。

其中過渡動畫的時間段又需要分為：

• 前序退場起始點enterStartT，前序動畫開始時間點。
• 前序退場結束點enterEndT，前序動畫結束時間點。
• 後序入場起始點exitStartT，後序動畫開始時間點。
• 後序入場結束點exitEndT，後序動畫結束時間點。

動畫時間線一般只定義為非淡入淡出外的其他特效使用。為了過渡的視覺連續性，前後序圖片的淡入和淡出是貫穿整個動畫時間的。考慮到序列的銜接性，退場完畢後會立刻入場，因此enterEndT=exitStartT。

四、OpenGL特效

1.基礎架構

按照前面時間線定義回調接口，用於處理動畫參數：

定義幾個通用的片段著色器變量，輔助過渡動畫的處理：

前後序列的混合流程，根據動畫流程計算出的兩個紋理的UV座標混合顏色值：

解析圖片，先讀取Exif信息獲取旋轉值，再將旋轉矩陣應用到bitmap上，保證上傳的紋理圖片與用戶在相冊中看到的旋轉角度是一致的：

在使用圖片之前，還要根據最終的視頻寬高調整OpenGL窗口尺寸。同時紋理的貼圖座標的起始(0,0)是在紋理座標系的左下角，而Android系統上canvas座標原點是在左上角，需要將圖片做一次y軸的翻轉，不然圖片上傳後是垂直鏡像。

上傳圖片紋理，並記錄紋理的handle：

加載第二張圖片時要開啟非0的其他紋理單元，過渡動畫需要同時操作兩個圖片紋理：

最後是實際繪製的部分，因為用到了透明度漸變，要手動開啟GL_BLEND功能，並注意切換正在操作的紋理：

2.平移覆蓋轉場

I.著色器實現

GLSL中的step函數定義如下，當x<edge>

已知我們有前後兩張圖，將他們覆蓋展示。然後從一個方向逐漸修改這一條軸上的所掃過的像素的intensity值，隱藏前圖，展示後圖。經過時鐘動畫驅動後就有了覆蓋轉場的效果。

再定義一個direction參數，控制掃描的方向，即可設置不同的轉場方向，有PPT翻頁的效果。

II.效果圖

3.像素化轉場

I.著色器實現

首先是定義像素塊的效果，我們需要像素塊逐漸變大，到動畫中間值時再逐漸變小到消失。

通過對progress(0到1)取反向值1-progress，得到distFromEdges，可知這個值在progress從0到0.5時會從0到0.5，在0.5到1時會從0.5到0，即達到了我們需要的變大再變小的效果。

像素塊就是一整個方格範圍內的像素都是同一個顏色，視覺效果看起來就形成了明顯的像素間隔。如果我們將一個方格範圍內的紋理座標都映射為同一個顏色，即實現了像素塊的效果。

squareSizeFactor是影響像素塊大小的一個參數值，設為50，即最大像素塊為50像素。

imageWidthFactor和imageHeightFactor是窗口高寬取倒數，即1/width和1/height。

通過dx * floor(uv.x / dx)和dy * floor(uv.y / dy)的兩次座標轉換，就把一個區間範圍內的紋理都映射為了同一個顏色。

II.效果圖

4.水波紋特效

I.數學原理

水波紋路的週期變化，實際就是三角函數的一個變種。目前業界最流行的簡易水波紋實現，Adrian的博客中描述了基本的數學原理：

水波紋實際是Sombero函數的求值，也就是sinc函數的2D版本。

下圖的左邊是sin函數的圖像，右邊是sinc函數的圖像，可以看到明顯的水波紋特徵。

博客中同時提供了一個WebGL版本的著色器實現，不過功能較簡單，只是做了效果驗證。

將其移植到OpenGLES中，並做參數調整，即可整合到圖片轉場特效中。

完整的水波紋片段著色器如下：

其中最關鍵的代碼就是水波紋像素座標的計算：

vTextureCoord + (curPosition/centerLength)*cos(centerLength*rippleAmplitude-rippleTime*rippleSpeed)*rippleOffset;

簡化一下即：vTextureCoord + A*cos(L*x - T*y)*rippleOffset，一個標準的餘弦函數。

vTextureCoord是當前紋理的歸一化座標(0,0)到(1,1)之間。

curPosition是(-1,-1)到(1,1)之間的當前像素座標。

centerLength是當前點距離波紋中心的距離。

curPosition/centerLength即是線性代數中的單位矢量，這個參數用來決定波紋推動的方向。

cos(centerLength*rippleAmplitude-rippleTime*rippleSpeed)通過一個外部時鐘rippleTime來驅動cos函數生成周期性的相位偏移。

rippleAmplitude是相位的擴大因子。

rippleSpeed調節函數的週期，即波紋傳遞速度。

最後將偏移值乘以一個最大偏移範圍rippleOffset(一般為0.03)，限定單個像素的偏移範圍，不然波紋會很不自然。

II.時間線動畫

設定顏色混合，在整個動畫過程中，圖1逐漸消失(1到0)，圖2逐漸展現(0到1)。

設定畫布透明度，在起始時為1，逐漸變化到0.7，最後再逐漸回到1。

設定波紋的振幅，在起始時最大，過渡到動畫中間點到最小，最後逐漸變大到動畫結束。

設定波紋的速度，在起始時最大，過渡到動畫中間點到最小，最後逐漸變大到動畫結束。

設定波紋的像素最大偏移值，在起始時最大，過渡到動畫中間點到最小，最後逐漸變大到動畫結束。

將本次動畫幀的參數更新到著色器：

其中GLClock是一個與mediacodec編碼時間戳綁定的外部時鐘，用於同步合成時間和動畫時間戳位置。

III.最終效果

圖片展示時長：3s

過渡動畫時長：1.5s

波紋中心為圖片中心點

5.隨機方格

I.噪聲函數

我們想實現的效果是前一個畫面上隨機出現很多方塊，每個方塊中展示下一張圖的畫面，當圖片上每一塊位置都形成方塊後就完成了畫面的轉換。

首先就需要解決隨機函數的問題。雖然Java上有很多現成的隨機函數，但是GLSL是個很底層的語言，基本上除了加減乘除其他的都需要自己想辦法。這個著色器裡用的rand函數是流傳已久幾乎找不到來源的一個實現，很有上古時期遊戲編程代碼的風格，有魔法數，代碼只要一行，證明要寫兩頁。

網上一個比較靠譜且簡潔的說明是StackOverflow上的，這個隨機函數實際是一個hash函數，對每一個相同的(x,y)輸入都會有相同的輸出。

II.著色器實現

首先將當前紋理座標乘以方格大小，用隨機函數轉換後獲取這個方格區域的隨機漸變值。

然後用smoothstep做一個厄米特插值，將漸變的intensity平滑化。

最後用這個intensity值mix前後圖像序列。

III.效果圖

/<edge>