移形換影 - 短視頻色彩特效背後的故事

做者：常青 | 2008 年畢業加入騰訊，一直從事客戶端研發相關工做，前後參與過 PC QQ、手機QQ、QQ物聯 等產品項目，目前在騰訊視頻雲團隊負責音視頻終端解決方案的優化和落地工做，幫助客戶在可控的研發成本投入之下，得到業內一流的音視頻解決方案，目前咱們的產品線包括：互動直播、點播、短視頻、實時視頻通話，圖像處理，AI 等等。

從眼睛的進化提及

大約在5億4千萬年前的寒武紀，地球上一部分生物體開始進化出了感光細胞，這種細胞能夠感應光線的強弱，而且直接驅動本體的運動細胞採起必要的規避動做，以確保脆弱的細胞不被紫外線所傷。

後來單個的感光細胞開始扎堆彙集而且造成了凹陷，隨着凹陷程度的逐步加深，這些感光細胞也就漸漸地匯聚成了一個前部有孔隙的球狀結構，「眼球」的雛形也就由此造成了。

隨着球形的眼睛結構漸漸成型，中學物理課本中的「小孔成像」原理也就愈來愈能發揮做用：只要開孔足夠小，光線就能準確地到達這些彙集的感光細胞進而成像，眼前的物體也就開始變得邊界清晰。表明騰訊文化吉祥物之一的鸚鵡螺，就是採用了這種「以小爲美」的進化策略，並且一直堅持到如今。

可是這種愈來愈小的策略也會致使光線進入量愈來愈小，因此鸚鵡螺們的世界想必是很昏暗的。咱們的祖先可不但願放棄一個光明的世界，因此，咱們給本身的眼睛安裝了一個足夠高級的光學部件 —— 晶狀體，以期擁有一個光明而清晰地世界。

然而，當你們都能把世界看得很清楚的時候，色彩分辨能力也就演變成了新一輪的軍備競賽。

當咱們的祖先踩着那些堅稱「我就想健健康康地當個素食主義者」的同類屍體艱難前行的時候，他們並不知道，讓本身活得更久的緣由，居然是由於那雙能區分樹葉是嫩葉仍是成熟葉片的眼睛。由於成熟的葉片經常包含大量的植物性毒素，會讓進食者身體遭受很大的傷害。因此，咱們都是那一波「好色的」猴子的後代。

而眼睛對色彩的分辨能力，不只在遠古時代讓咱們活了下來，也讓今天衣食無憂的咱們，能看到更多色彩斑斕的效果。好比短視頻的移形換影特效，其本質原理就是一個充分利用色彩的小把戲。

三原色的修改和組合

人體有三種視覺錐細胞，因此咱們看到的顏色都是由三原色組成的，並非說世界上就只有這些顏色，而是更加絢麗的色彩空間咱們也感知不到。

所以，液晶顯示器的成像原理上也就是基於 R（紅）G（綠）B（藍） 三原色的組合而實現的，騰訊雲短視頻（UGSV）的移形換影特效，就是在這三種顏色空間上作了一些文章：

先以一幅靜態的圖片來舉例:

如今把圖片中紅色的份量去掉,放大10%,再移動一些距離

再把藍色的份量去掉,放大10%,並移動一些距離

再把綠色的份量去掉,放大10%,並移動一些距離

而後將這三副圖片以33%的透明度和源圖疊加到一塊兒，造成一種移形幻影的效果

交給計算機來實現

上面這些圖片是我用圖片處理軟件簡單處理後獲得的，但若是是視頻文件，顯然要交給計算機自動解決，如何作到呢？

首先咱們先給這幅圖片定義座標，爲了方便處理咱們將圖片的中心點定義爲 (0,0)，圖片的XY軸最大值爲 1，以下圖所示:

座標定義

而後開始處理上面提到的兩個變換，一個是放大，一個是移動。

• 放大 若是定義圖片上的任意象素座標是(x,y)，放大 s倍後的座標就是 (x',y') = s(x,y) = (sx, sy)
• 移動 若是定義圖片上的任意象素座標是(x,y)，將其移動(?x,?y)，移動後的座標就是(x',y') = (x+?x, y+?y)
• 合併 將上面兩個公式進行合併，獲得的新座標點就是 (x',y') = (s(x+?x), s(y+?y))
• 疊加 而後咱們要將修改過的圖片疊加到原圖上，alpha疊加的公式是 src * (1 - alpha) + overlay * alpha。

基於OpenGL的版本

短視頻的特效處理，每秒鐘要處理幾十張甚至更多的視頻畫面，因此簡單的 C 語言處理算法並不能知足性能上的要求，咱們須要使用手機的硬件加速能力，目前除了常見的 OpenGL 等 API 以外，還有如 Vulkan, DirectX, Metal 等可選方案。就目前而言，OpenGL 在各平臺上通用性最好，網上的資料也比較豐富，不管是桌面平臺仍是移動平臺都有支持，本文就以 OpenGL 來說講特效的實現。

實現移形換影特效的時候，咱們會用到 OpenGL 的 Fragment Shader, Fragment Shader 做用就是返回圖像各點的色值，Fragment Shader也有一套本身的編程語言，叫 Shading Language 簡稱GLSL, GLSL 和 C 很像，增長了一些向量的數據類型，和一些圖像相關的處理函數。Shading 和 C 比起來有一個比較特殊的地方是不支持隱含的類型轉換，好比浮點點整型的轉換（在使用浮點數時，必定要加上小數點，如 1.0）。

篇幅緣由，我不在這裏把全部的特效代碼都一一列舉了，僅附上放大和位移的部分實現：

varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;

void main() {
    vec2 offset = vec2(0.05, 0.05);
    float scale = 1.1;
    vec2 coordinate;
    coordinate.x = (textureCoordinate.x - offset.x) / scale;
    coordinate.y = (textureCoordinate.y - offset.y) / scale;
    gl_FragColor = texture2D(inputImageTexture, coordinate);
}

考慮到不是全部讀者都學過 Shading Language，這裏作一個簡單的解讀：

• 咱們在這裏定義了一個變量 coordinate，這個就是前面提到的(x,y)，它的值就是 ((x - ?x)/s, (y-?y)/s)。
• 函數 texture2D 的做用就是從圖片中獲取某個座標的顏色。這裏從 inputImageTexture 中的 coodinate 座標點獲取了顏色。
• gl_FragColor, 這是 Fragment Shader 的輸出的值， gl_FragColor是一個GLSL預約義的全局變量， 類型是vec4既 (r,g,b,a) 這四個量，也就是一個 RGBA 顏色。
• 程序運行後在textureCoordinate這個座標就會顯示gl_FragColor這個顏色。

上面講了單幅圖的處理，對於視頻咱們能夠作些更有意思的效果，好比咱們能夠把當前幀和上一幀的圖片進行疊加，這樣就能夠做出一些更有意思的效果。

更多特效

本文介紹了騰訊雲短視頻（UGSV）衆多視頻特效中的一種，若是要實現更加複雜的特效，仍是須要繼續深刻研究 OpenGL 和人臉識別等相關領域的知識，這須要一段時間的學習和努力，也不可避免的須要踩不少坑。

那有沒有隻需幾分鐘，就能一馬平川地搭快速搭建建帶有各類神奇特效的短視頻應用速成方案呢？

長按識別下圖中的二維碼，到咱們的騰訊雲的短視頻官網專區瞭解咱們的短視頻產品。

您能夠安裝咱們爲您準備的一個完整版Demo，用來展示咱們的產品特性。值得一提的是，這個Demo的源代碼是徹底免費和開源的，只須要到騰訊雲-視頻服務-短視頻（UGSV）的文檔區官網就能下載到。

騰訊雲短視頻 SDK 是不收取額外費用的，但若是您想要使用，須要購買騰訊雲點播流量資源包旗艦版2（1W/年）、旗艦版3，免費領取一年使用有效期的 license ，同時，您也能夠在不支付任何費用的狀況下得到一個月試用期，歡迎您的指導。更多內容>>短視頻官網

---

問答

短視頻中是如何鑑黃的？

相關閱讀

心隨手動，驅動短視頻熱潮的引擎

從QQ視頻通話到企業級融合音視頻

如何實現無縫切換的主播pk方案

此文已由做者受權騰訊雲+社區發佈，原文連接：https://cloud.tencent.com/developer/article/1148326?fromSource=waitui

歡迎你們前往騰訊雲+社區或關注雲加社區微信公衆號（QcloudCommunity），第一時間獲取更多海量技術實踐乾貨哦~