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

語言: CN / TW / HK

作者 | 龍捲風

導讀 

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

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

GEEK TALK

01

YYEVA介紹

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

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

  • YYEVA包含一套從設計工具AE插件、在線預覽工具、客户端渲染SDK的完整工具鏈

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

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

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

  • 支持 Web、Android、iOS等

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

案例Demo視頻

  • 通過YYEVA導出的原始素材

  • 客户端渲染上屏效果

開源項目地址:https://github.com/yylive/yyeva

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

GEEK TALK

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種方式來記錄

  • 記錄圖形的形狀描述

  • 將圖形完整保存下來

GEEK TALK

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、渲染圖解

GEEK TALK

04

結語

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

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

  • 開源地址:

      https://github.com/yylive/YYEVA

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

推薦閲讀:

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

從零到一瞭解APP速度測評

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

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

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

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

超大模型工程化實踐打磨,百度智能雲發佈雲原生 AI 2.0 方案

前後端數據接口協作提效實踐

一鍵三連,好運連連,bug不見 :point_down: