短視訊影象處理 OpenGL ES 實踐

又拍雲發表於2017-09-20

2017年,短視訊正以其豐富的內容表現力和時間碎片化的特點,快速崛起,而短視訊最具可玩性之處就在支援人臉識別的動態貼圖和各種不同效果的美顏、濾鏡等。那短視訊動態貼紙、濾鏡、美顏等功能究竟是如何實現的呢?

為什麼選擇 OpenGL ES

Android 手機在處理 3D 圖形相關的計算時一般都會選擇使用 GPU。相較於 CPU,GPU 在影象動畫處理時能提供更快的速度以達到更高的幀率。 Android 裝置的 GPU 處理提供了兩套不同的 API :Vulkan 和 OpenGL ES。其中 VulKan 只支援 Android 7.0 以上的裝置。OpenGL ES 則支援所有的 Android 版本。

同時 OpenGL ES 作為 OpenGL 的子集,針對手機、PDA 和遊戲主機等嵌入式裝置去除了 glBegin/glEnd,四邊形、多邊形等複雜圖元等許多非絕對必要的特性,消除它的冗餘功能,從而提供了更容易學習和易於在移動圖形硬體中實現的庫。

所以目前,在短視訊影象處理中 OpenGL ES 憑藉它良好的系統支援性和功能的高度精簡性使它成為了最廣泛的 GPU 處理 API 之一。

下文我將以 Android 為例通過繪製一個三角形,簡單介紹一下如何使用 OpenGL ES 2.0。

如何使用 OpenGL ES 繪製一個三角形

建立一個畫布

首先要在 manifest 配置檔案中新增申明使用 OpenGL ES 2.0 介面:

Android 為 3D 圖形提供了兩個可以作為畫布的控制元件,GLSurfaceView 和 TextureView 。其中 GLSurfaceView 使用起來更加簡單方便,只要像普通的 View 一樣在佈局檔案中定義即可。

然後再 Activity 中直接用 findViewById() 獲取 view 即可。

還需要呼叫 setEGLContextClientVersion() 方法來指定使用的 OpenGL ES 版本。

GLSurfaceView 的渲染模式有兩種,預設是幕 RENDERMODE_CONTINUOUSLY 連續不斷的更新屏 ,另外一種是RENDERMODE_WHEN_DIRTY只有在呼叫 requestRender() 在更新螢幕(要在 onSurfaceCreated()方法後調該改方法 )。

建立一個渲染器

上面建立的 GLSurfaceView 控制元件需要一個 GLSurfaceView.Renderer 來進行影象的渲染。使用 setRender() 為 GLSurfaceView 繫結一個渲染器。

GLSurfaceView.Renderer 有三個方法 :

onSurfaceCreated():呼叫一次,用來配置 View 的 OpenGL ES 環境。

onDrawFrame():每次重新繪製 View 時被呼叫。

onSurfaceChanged():如果 View 的幾何形態發生變化時會被呼叫,例如當裝置的螢幕方向發生改變時。

繪製三角形

建立一個 Triangle 類,確定三角形的座標並傳入一個 ByteBuffer 中。

定義 Vertex Shader 和 Fragment Shader 用來渲染圖形頂點和圖形表面。

用一個輔助方法載入 Vertex Shader 和 Fragment Shader 。

建立一個 Program 並傳入 Vertex Shader 和 Fragment Shader 。

建立一個 onDraw() 方法用於繪製圖形。

最後在 GLSurfaceView.Renderer 的 onDrawFrame () 方法中執行繪製方法。

這樣就可以通過 OpenGL ES 2.0 在螢幕上繪製一個三角形了。效果如圖:

上文以使用 OpenGL ES 在螢幕繪製一個三角形為例,展示了  OpenGL ES 的基礎使用方法。感興趣的朋友可以通過  Android 的官網教程(https://developer.android.com/training/graphics/opengl/environment.html)學習瞭解。

短視訊影象處理實現

我們知道了如何在 Android 使用 OpenGL ES,那麼短視訊中濾鏡和美顏等操作又是如何實現的?

首先在短視訊採集過程中,需要提供一個 view 作為攝像頭的預覽畫面展示,Android 中提供了 GLSurfaceView 以及 TextureView 這兩個 API 來實現相機預覽。通過這種方式就可以使用 Android 提供的 OpenGL ES 環境,對影象進行處理。比如美顏是對膚色部分做模糊美白加亮操作,濾鏡貼紙是將素材圖片處理成紋理疊加到原視訊紋理中。

建立 SurfaceTexture 繫結 Camera 之後開啟相機預覽。

 

這裡涉及很多 OpenGL 的操作。有興趣的同學可以 看下這個開源專案(https://github.com/wuhaoyu1990/MagicCamera) 提供了豐富的濾鏡效果示例。

又拍雲最近推出了一站式短視訊解決方案,提供短視訊錄製端、播放端 SDK,上傳加速,不限量儲存以及穩定快速的 CDN服務。短視訊拍攝端 SDK 整合美顏、濾鏡、動態貼紙等眾多功能。一站式短視訊解決方案,即可滿足你的全部需求!

參考內容:維基百科 — OpenGL ES

 

推薦閱讀:

短視訊 SDK 功能點技術實現方式詳解

相關文章