YYEVA動效播放器--動態元素完美呈現新方案

語言: CN / TW / HK

圖片 作者 | 龍捲風

導讀:伴隨著計算機視覺領域的發展,動畫也變得越來越炫酷。各種動效解決方案在畫質提升時,也要兼顧檔案體積和效能。透明MP4方案,能讓設計師製作動畫所見即所得,充分發揮了設計師的想象力和創造力。百度YYEVA動效播放器是基於透明MP4的基礎,自研的一套輕量級、高效能、跨平臺的動效方案,支援插入動態元素,提供完善的工具鏈,一站式解決從設計側的資源匯出、線上預覽,到客戶端渲染SDK。

全文3736字,預計閱讀時間10分鐘。

01 YYEVA介紹

YYEVA實現了一整套完整的工具鏈,包括:資源輸出端的AE外掛、線上預覽工具、客戶端渲染SDK, 實現了透明MP4資源,可插入動態的業務元素等功能。

  • YYEVA是一個 輕量級、高效能、跨平臺、動態的MP4資源解決方案

  • YYEVA包含一套從設計工具AE外掛、線上預覽工具、客戶端渲染SDK的完整工具鏈

  • 基於仿射矩陣運算,得到圖層每一幀的位置資訊

  • 集成了MP4(avc/hevc)封裝協議等相關功能

  • 高度可擴充套件性,可還原設計師的全部細節

  • 支援 Web、Android、iOS等

YYEVA目前已經在多個專案中使用,其中YY、貼吧、百度、好看等多個場景使用YYEVA實現複雜的動效效果, 還提供給外部公司的專案組使用

案例Demo影片可點選連結檢視:https://mp.weixin.qq.com/s/bXgauBqtwUlT8IRXPLr45w

開源專案地址:https://github.com/yylive/yyeva

YYEVA官網:https://yyeva.netlify.app/

02 YYEVA探索之路

2.1 動畫的集中實現方案

圖片

1.面向結果的記錄方式

該方式是通過記錄動畫每一幀的影象,播放時根據影象的RGBA,還原出動畫效果。且只記錄了最終結果,還原不出設計的動畫元素,所以難以去修改動畫元素,插入元素也比較複雜

  • 優點:

所見即所得,可還原所有設計效果;不用再針對具體特效進行開發支援;元素個數和運動複雜度對播放效能影響小

  • 缺點:

檔案體積較大;不易支援動態插入或替換元素

2.面向過程的記錄方式

該方式是通過記錄動畫創作過程,在播放端,根據過程計算各元素運動軌跡,還原效果;還原動畫需要實時計算,越複雜的動畫計算量越大,比如濾鏡和貝塞爾曲線相關的計算非常消耗效能。

  • 優點:

體積較小,可以隨意拉伸不影響質量;方便動態插入元素

  • 缺點:

效能差,耗CPU和GPU;對複雜動畫支援差,越複雜動畫越容易卡頓

對比以上2種動畫的實現原理,為了達到所見即所得的效果,充分發揮設計師的想象力,YYEVA採用的是面向結果的動畫方式---透明MP4方案

相比序列幀方案,透明MP4具有更高的壓縮率的優點,從而解決檔案體積大的問題。我們開發了一套YYEVA工具鏈,支援動態插入或替換元素

2.2 影片動畫

以H264編碼,MPEG-4的顏色取樣標準是YUV,YUV是亮度和色度的分量疊加,不支援alpha通道,因此,如何讓MP4影片支援透明度,業界常用的方式是使用兩個通道分別進行 儲存影片的RGB資料和Alpha資料。由於影片動畫所見即所得,支援更多複雜特效等優點,目前廣泛應用在YY各個場景中,成為了YY動效播放的首選方案。

圖片

如動畫解析度為500x500, 則Mp4的解析度為1000x500, 其中左邊500x500為RGB資料, 右邊500x500為Alpha資料。Player組合成RGBA紋理再進行渲染顯示。

2.3 混合MP4動效

在MP4動效裡,新增一些如暱稱,頭像,圖片等業務元素,常用的做法是在MP4播放的時候,再疊加一個原生的View,或者使用 MP4 + SVGA/Y2A的方式來實現。這樣往往存在資源下載、同步播放、維護多套資源等問題。

圖片

2.4 YYEVA方案

將影片幀和描述資訊合到一個MP4資源,同步渲染, 解決了資源下載、同步播放、維護多套資源的問題。

圖片

YYEVA的Json描述資訊如下所示:

圖片

  • descript: 解析度 、外掛版本、rgb區域位置、alpha區域位

  • effect: 型別、key

  • datas: renderFrame、outputFrame

1、YYEVA描述動態元素

描述一個動畫的幾大要素:時間、位置、形變

  • 時間:通過Json的frameIndex描述需要出現的幀索引

  • 位置:通過Json的RenderFrame描述元素在畫布上的位置和大小

  • 形變:通過Json的OutputFrame獲取元素形變的遮罩

2、遮罩mask的演示

形狀可以通過2種方式來記錄

  • 記錄圖形的形狀描述

  • 將圖形完整儲存下來

圖片

圖片

03 YYEVA實現方案

YYEVA框架圖如下:

圖片

工具鏈的流程圖如下:

圖片

3.1 YYEVA外掛

YYEVA解決方案通過在AE上開發的一個擴充套件程式,解析設計師按規範製作好的相關圖層資訊,通過YYConveterMP4外掛的圖層解析模組、h264模組、資源合成模組,匯出一個YYEVA的資源。

圖片

1、圖層解析模組

圖片

  • 規範性檢測

  • 所選合成是否包含透明區域圖層 :目前外掛處理的資源是基於YY透明MP4資源,所以源素材必須是一個透明MP4資源。即 RGB/Alpha左右分離的

  • 所選合成是否包含Mask遮罩區域 :文字遮罩區域是以 mask_text 作為合成的name;圖片遮罩區域是以mask_image作為合成的name

  • 是否包含YYConverterMP4模板,該模板是用於下面的H264模組轉換MP4使用的

  • 圖層處理

  • 計算仿射矩陣:Matrix

  • 計算Mask位置:RenderFrame

  • 提取 Mask (遮罩) 合成

  • 計算 Mask合成下所有圖層每一幀的RenderFrame

  • Copy一份輸出合成,並縮小 Alpha 區域0.5倍後調整位置,同時分為三個部分:rgb 、 alpha 、 mask

  • 將所有的有效遮罩圖層 Copy 到輸出合成,並調整到mask區域,計算OutputFrame

  • 調整輸出合成的區域大小

  • 將上面計算的RenderFrame 、 OutputFrame 組合成一個 Json 資料

  • 拷貝合成

將制定的輸出合成拷貝一份後,並縮小alpha區域0.5倍後調整位置,同時分為三個部分:rgb 、 alpha 、 mask。

圖片

2、H264模組

  • 在AE上建立一個指定的YYConverterMP4模板,統一渲染佇列輸出成avi格式

  • 在外掛內部整合ffmpeg命令列工具,通過child_process,來調起命令列工具,其中 MAC/Windows使用的ffmpeg可執行檔案不同 (.app和.exe檔案)

  • 使用ffmpeg轉換的時候,通過封裝三種檔位的CRF引數,統一輸出的畫質和體積

  • 通過選擇不同的編碼器來實現,來輸出H264/H265資源

3、資源合成模組

  • 打包資料
    根據outputFrame、inputFrame、以及影片的基礎資訊,組成一個json

  • 資料壓縮編碼

    將json打包編碼成base64 ,並加前後綴yyeffectmp4json[[ Json ]] yyeffectmp4json

  • 輸出成AVI

    使用 建立的模板 YYConverterMP4 ,將拷貝後的合成 新增到渲染佇列中 ,輸出avi資源

  • 輸出成MP4

    利用H264模組,編碼成 h264/h265 資源

  • 資料寫入MP4

    將json的資料 利用ffmpeg 寫入h264/h265 資源的metadata段

3.2 YYEVA客戶端渲染

YYEVA渲染SDK整體架構圖如下圖所示:

圖片

客戶端在讀取到一個YYEVA資源後,會通過如下渲染流程:

  • 使用資源解析模組,將整合在Metadata段的Json資料解析出來

  • 然後通過元素解析模組,將動態Json資料模態化成相應的物件。

  • 通過音影片模組,將MP4資源的音影片軌解碼

  • 通過渲染模組,將影片軌 + Mask動態元素一一渲染到螢幕上

整個渲染流程如下所示:

圖片

1、提取描述資訊

圖片

提取MP4的Metadata資訊,有如圖兩種方式

  • ffmpeg解複用MP4資源,解析metadata

  • 字元匹配

我們在外掛寫入json資料到MP4的時候,將資料做了一層包裝 yyeffectmp4json[[jsondata]]yyeffectmp4json, 這樣操作主要是為了能夠快速根據字元匹配,將jsondata提取出來

2、客戶端渲染的實現邏輯

圖片

3、RGB+Alpha混合

圖片

4、Mask混合

圖片

5、渲染圖解

圖片

04 結語

YYEVA目前已經開源,包括AE外掛、客戶端渲染SDK(web/iOS/android),歡迎有其他需求想法的小夥伴在評論區留言或直接到程式碼倉庫中提出寶貴的issue。

歡迎大家積極star ,大家的關注是我們最大的動力 。

在目前直播業務百花齊放的時代,動效播放解決方案也在不斷髮展進步,各種新的動效方案層出不窮,可以預見的是,後續我們仍會不斷進行探索、優化,支援如多圖層混合、動態元素旋轉、支援更多AE特性、結合AI技術, 為使用者提供更優的體驗。

————END————

推薦閱讀:

百度交易中臺之資產系統架構淺析

從零到一瞭解APP速度測評

流日誌輕鬆應對“10億級別IP對”複雜場景,實現超大規模混合雲網絡流量視覺化

百度App Android啟動效能優化-工具篇

數字人技術在直播場景下的應用

百度工程師教你玩轉設計模式(工廠模式)

超大模型工程化實踐打磨,百度智慧雲釋出雲原生 AI 2.0 方案

前後端資料介面協作提效實踐