[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nm0WWHSi-1657593629762)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7d36d704c4740cdb0c5e63d617f0d35~tplv-k3u1fbpfcp-zoom-1.image)]

作者 | 金展

導讀：百家號作為百度為創作者打造的集創作、發布、變現于一體的內容創作平臺，在圖文、短視頻方面已經深耕多年，基于百度基礎AI能力，通過視覺、語音、 NLP等技術將圖文內容智能合成視頻是目前主要的探索方向，目前每天幫助創作者制作數千條接近于真人制作水平的視頻。視頻渲染合成作為內容視頻化的最后一個制作環節，決定著視頻內容質量、時效性等關鍵指標，本文將帶你了解百家號視頻渲染合成的技術實現，詳細介紹AE在視頻渲染方面的獨特優勢。。

全文8634字，預計閱讀時間22分鐘。

01 背景

百家號視頻怎么算原創。短視頻作為近年來移動互聯網興起的重要內容形式，市場規模持續增長，根據2021年12月CNNIC的數據報告，短視頻用戶規模就已達9.34億，占互聯網用戶的90.5%。如何高效智能地進行短視頻合成來滿足用戶的視頻內容消費，越來越成為內容創作者的一個挑戰。百家號作為百度為創作者打造的集創作、發布、變現于一體的內容創作平臺，在圖文、短視頻方面已經深耕多年，如何基于百度基礎AI能力，通過視覺、語音、 NLP等技術將圖文內容智能合成視頻是目前主要的探索方向。

早期，百家號是基于VidPress（https://ai.baidu.com/creativity/index） ，通過五大步驟實現圖文自動轉視頻；VidPress的工作原理和剪輯師制作視頻的步驟類似：先準備文字腳本，然后收集媒體素材，再將素材處理成視頻片段，將腳本配音和視頻進行對齊，最后進行編輯和檢查。通過 AI 技術，VidPress 可以實現文字分析和摘要、視頻內容搜索、素材智能化處理、音視頻對齊，以及智能剪輯等5個步驟的自動化。這不僅保證了視頻生成質量接近于真人制作水平，同時也大幅提升視頻創作的效率。

基于該技術，百家號已服務數十家媒體，在熱點資訊、媒體報道等多個領域開展了多次應用，每天幫助創作者自動生產數千條視頻內容。整體的業務功能如下：

而隨著百家號的業務迭代，更多的個性化需求為智能合成視頻帶來了一些挑戰，例如：度曉曉播報天氣，在視頻中添加虛擬人等，在完成了文字分析和摘要提取、視頻素材智能化處理、音視頻合成之后，視頻的呈現效果是百家號業務要解決的核心問題之一，視頻創作不僅需要AI的加持，同樣離不開視頻合成這個關鍵環節；視頻渲染合成作為內容視頻化的最后一個制作環節，決定著視頻內容質量、時效性等關鍵指標。

ae怎么選擇部分渲染？所以，百家號從今年3月份開始致力于渲染部分的優化工作，本文我們將重點聊聊視頻渲染合成這個環節。

△度曉曉播報天氣視頻效果

02 為什么選擇AE

談到視頻合成，我們會想到 FFmpeg、OpenGL、Shader 這些基礎庫，以及建立在這些基礎庫之上的Adobe After Effects（簡稱 AE） 、UE4、Unity 3d等視頻處理軟件和渲染引擎。

FFmpeg 在視頻處理方面功能十分強大，被譽為多媒體領域的瑞士軍刀，在視頻合成方面（https://ffmpeg.org/ffmpeg.html）和轉場效果（一個例子：https://trac.ffmpeg.org/wiki/Xfade） 方面都有著出色的表現，FFmpeg 的命令比較強大，可以實現視頻轉碼，視頻拼接、圖片合成、音頻合成，也是我們業務中視頻合成的基礎依賴之一。

百家號視頻素材網站。例如：你只需要準備 img01.png，img02.png兩張尺寸相同的圖片，在安裝FFmpeg以后，執行以下代碼就能生成一個帶有過渡效果的視頻。

ffmpeg -loop 1 -t 5 -i img01.png -loop 1 -t 5 -i img02.png -filter_complex "[0][1]xfade=transition=fade:duration=1:offset=4,format=yuv420p" output.mp4

• OpenGL方案

OpenGL是著名的圖形庫，支持各種豐富的圖形動畫，在轉場動畫方面也能實現非常酷炫的效果（https://gl-transitions.com/），而且是跨平臺的。但是要定制個性化效果，有一定的學習成本和開發成本。

• AE 的視頻合成

設計師使用 Adobe After Effects（AE） 做好一個模板，開發者使用Adobe Extension Scripts（AES）腳本方式替換掉模板中占位的內容（包括視頻、圖片和文本），基于內容數據驅動和AE模板來創建視頻。

當時在百度內部也有一些團隊在使用這個方案，在我們看來，基于AE合成視頻，能以較低的研發成本提升視頻效果的豐富度，保證視頻合成的質量。在百家號目前業務場景，我們覺得 AE 是一個值得選擇的方案之一，也是目前主要的渲染方案。基于 AE 作為視頻渲染引擎有 3 大優勢，分別是豐富的特效插件生態、強大的腳本能力、設計師的效果無損還原。

2.1 豐富的特效插件

AE渲染視頻。AE 作為強大的視頻后期制作軟件，AE的三大功能，視頻合成、特效制作、圖形動畫，能幫助創作者快速實現一些多樣化的視覺效果。從廣告短片到網頁動畫再到電影特效，都有它的身影。AE 有著豐富的插件生態，我們來看一些簡單例子：

△使用 aeinfographics 插件生成的圖表動畫，幾乎能媲美我們熟悉的 echarts 的常用效果

△particular 插件提供的酷炫的光劍效果

百家號視頻畫質要求。

△motionbro 插件提供的運鏡效果

不過值得注意的是，AE的插件只是針對于AE的軟件，在命令行模式下（詳見下文）運行則需要一些額外的開發工作。

2.2 強大的腳本能力

生物探索網百家號、△AE腳本對象的層次結構圖

AE腳本是基于ECMA262標準的第三版JavaScript語言（即ES3），同時它提供了project、item、compositions（合成）, layers和renderQueue（渲染隊列）等對象模型；熟悉這些對象模型是寫好腳本的關鍵，就像寫Web端的JS腳本要了解DOM和BOM一樣；AE腳本能實現AE軟件可以實現的大部分功能，讓開發者能夠實現精細化效果控制，例如：不定長的文本內容的垂直居中、視頻長度的靈活處理等這些AE軟件不太好動態調整的工作；AE腳本提供的 File 對象，能方便的讀取到系統的其它文件，比如Adobe全家桶之一的 PhotoShop 文件制作的 .psd 文件，也可以將其它AE文件作為素材導入到項目中。同時，AE 以及與之集成的其它 Adobe 軟件為自動化各種過程提供了許多途徑，例如：我們可以使用 AE 提供的命令行工具 aerender、網絡渲染和渲染后動作來自動化渲染，可以在 Adobe Bridge 中使用工作流腳本自動化一些任務，AE 完全可以充當一個渲染引擎來支持基于 .aep 文件的視頻合成。

另一方面，我們可以使用AE的表達式，當我們創建復雜的動畫，但想避免手動創建數十乃至數百個關鍵幀時，表達式能讓我們通過代碼來控制效果；腳本告訴應用程序要做什么，而表達式則是說一個屬性包含了什么效果。例如，您在屏幕上從左到右移動了一個形狀，AE內置了大量的表達式，比如：擺動、淡入、淡出等。值得注意的是，雖然AE的表達式語言和AE腳本語言都是基于JavaScript的，但二者功能上是分開的，表達式無法訪問腳本的信變量和函數。

2.3 設計師的效果無損還原

△很流行的張表情圖，懂的人都會會心一笑

ae渲染文件太大？在Web、App的開發過程中，設計師無論是用Sketch、PhotoShop還是其它設計軟件，我們最終都需要把設計稿轉化為Web或Native上實現的效果，而AE文件，在通過規范化以后（通常只需要修改圖層的命名），即可直接用于生產環境，基本上 100% 還原設計師效果。我們幾乎可以省掉視覺效果review的環節。

03 基于AE的圖文轉視頻技術方案

我們已經了解到AE具備強大的渲染能力，腳本能力，能為研發提效，但是具體如何真正落地到生產環境中呢，畢竟在項目開發過程中，需要模板設計、腳本開發、內容編排、視頻渲染等多個角色的配合。百家號基于AE的圖文轉視頻渲染技術方案如下：

我們將AE渲染技術方案分為3個方面的工作：

3.1 模板的標準化

探索宇宙說百家號、腳本要操作模板，我們希望更簡單、更高效地操作模板，負責腳本開發的工程師無需打開AE文件，就能實現模板的修改，這樣就要保證AE文件中需要被動態修改的圖層名和項目中資源名保持一致，另外，圖層不能被鎖定。

我們通過對模板的解構，定義了以下模板圖層規范：

1、文本層：Text前綴命名，按照出場順序命名為：Text1、Text2、Text3；

2、圖片層：Photo前綴命名，按照出場順序命名為：Photo1、Photo2、Photo3；

3、背景層：統一命名為Background，只能有一個；

4、前景層：統一命名為Foreground，只能有一個；

5、效果層：統一命名為Effect，只能有一個。

這里，大家一定會想，為什么模板的背景層，前景層，效果層只能有一個呢，視頻過程中切換背景是怎么實現的呢？這里就涉及到一個「微模板」的概念。把一個圖文轉化為視頻，需要考慮合成效率和模板成本。我們的視頻其實是由多個視頻片段組成的。

一個完整視頻的背后其實對應著多個AE模板文件，這樣我們就可以按照需要去組合，實現多種不同的效果。甚至，可以這么組合：

除了模板本身的規范以外，我們還要對模板的效果進行描述，否則，對于視頻合成pipeline來說，它無法判斷應該使用哪個AE模板。因此，我們需要對模板的風格，以及模板所需要的素材視頻和圖片素材進行尺寸上的標注。

模板的標注和模板的規范化命名是一件非常繁瑣的事情，而且一旦出錯，整個視頻合成就會出現問題。因此，我們需要通過工具去做一個檢查。首先將AE文件轉化為JSON格式的文件，再去驗證圖層命名的正確性，AE轉換后的JSON文件非常龐大，這里面需要做一些裁剪。將AE文件轉化為結構化的JSON數據是一件很麻煩的事情，這里社區推薦了一種方案（https://github.com/Jam3/ae-to-json） ，雖然代碼沒怎么更新，但思路值得借鑒。

△AE轉換為JSON后的代碼片段

3.2 自動化渲染

要實現自動化渲染，我們就不能再用AE的軟件界面了，AE 提供的可執行文件 aerender（Windows 下是 aerender.exe） 是具有命令行接口的程序，可用于自動執行渲染。該可執行文件與主應用程序位于同一文件夾中，無需購買 AE 軟件，就能直接免費使用（詳細說明見Adobe官網，https://helpx.adobe.com/after-effects/using/automated-rendering-network-rendering.html）。

我們來看一些使用命令行，來執行渲染的示例：

將Composition_1渲染到指定文件：

aerender -project c:\projects\project_1.aep -comp "Composition_1" -output c :\output\project_1\project_1.avi

使用多計算機渲染模式，將 project_1.aep 中的 Composition_1 的第 1 到第 10 幀進行渲染，并保存到帶編號的 Photoshop 文件序列中：

aerender -project c:\projects\project_1.aep -comp "Composition_1" -s 1 -e 10 
-RStemplate "Multi-Machine Settings" -OMtemplate "Multi-Machine Sequence" 
-output c:\output\project_1\frames[####].psd

以上腳本展示了AE命令行的基本用法，要讓AE命令行具備更強大的功能離不開我們上文中提到的 AE 腳本，aerender 默認并不支持直接調用 AE腳本，要使用腳本則需要一些額外的工作。

在AE程序的的根目錄Scripts 文件夾下的 Startup目錄和Shutdown目錄，為用戶提供了2類鉤子方法，即在AE程序啟動后和關閉前要執行的方法，aerender能在命令行實現渲染工作就離不開AE為我們默認提供的 commadLineRenderer.jsx 文件。

所以，我們只需要在 Startup 目錄，通過腳本獲取命令行中AE腳本文件的地址，然后執行腳本文件，這樣一來，aerender命令行的渲染能力就能媲美GUI界面了。

3.3 AE腳本建設

在前面的章節中，我們提到了AE腳本強大的能力，因此我們就圍繞著AE進行一系列的腳本庫和素材的建設 場、前景效果等效果元素。

• 通過腳本實現背景替換

下面的代碼演示了如何進行背景的素材替換，這里限于篇幅省掉了各種異常的處理，以及背景（圖片、視頻）針對不同模板尺寸的縮放，對于gif形式的動畫圖片，或者過短的視頻還需要進行循環播放的邏輯代碼。

var newBackgroundPath = '...';
var item = findCompByName('Background');
replaceAVLayerSource(item.layer(1), newBackgroundPath);function findCompByName(name) {var project = app.project;var numItems = project.numItems;for (var i = 1; i <= numItems; i++) {var item = project.item(i);if (item instanceof CompItem && item.name === name) {return item;}}
}function replaceAVLayerSource(curLayer, newFilePath) {var importOptions = new ImportOptions();importOptions.file = new File(newFilePath);var newItem = app.project.importFile(importOptions);curLayer.replaceSource(newItem, false);
}  

• 通過腳本實現文字漸入的效果：

下面的代碼演示了如何利用圖層的透明度屬性，實現一個文字漸入動畫。

var config = [{name: 'Opacity',setType: 'keyValue',values: [{time: '0:00:00:00',value: 0},{time: '0:00:00:14',value: 100}]}
];var layer = findCompByName('Text1');
setProperties(layer, config);function setKeyframes(propertySpec, keyframes) {keyframes.forEach(function(keyframe, index) {var time = keyframe.time;if (typeof time === 'string') {time = currentFormatToTime(keyframe.time, keyframe.fps);}propertySpec.setValueAtTime(keyframe.time, keyframe.value);});
}function setProperties(layer, config) {var propertyGroup = layer.property('Text').property('Animators');layer.selected = true;traverseProperties(propertyGroup, config);layer.selected = false;
}function findCompByName {// ...同上
}

通過腳本在AE中實現轉場效果則略微復雜，大概思路是通過AES腳本載入另外一個插件AE文件，將插件中定義的效果層復制并應用在當前AE文件相應的圖層中。限于篇幅，這里就不在贅述了。

當我們有了足夠的背景素材，文本樣式，文本動畫，轉場效果以及氛圍素材的積累，我們就可以極大的豐富模板效果，而且我們可以指數級降低模板文件的數量。

GEEK TALK

04

AE的渲染速度優化

在生產環境下，AE 的合成速度是一個需要重點關注的問題，在不經過任何優化的情況下，視頻的時長和渲染合成時間比甚至能達到驚人的 1:10。這個顯然在一些對時效性要求比較高的場景下是不能接受的。要讓AE實現FFMpeg的視頻渲染速度，我們需要做一些優化處理，目前主要的手段有窗口復用、多幀渲染、網絡渲染等手段。

4.1 窗口重復使用

AE在啟動程序時，是一個比較耗時的操作，在 renderonly模式下，經測試平均70%的時間資源消耗在 AE 應用程序初始化上。渲染可以由已經運行的AE實例或新啟動的實例執行。默認情況下，aerender會啟動AE的新實例，即使其中一個實例已經在運行。通過窗口復用可以實現AE渲染速度的大幅提升，只需要在命令行中提供"-reuse "參數，aerender將要求已經在運行的AE實例來執行渲染。

aerender -project c:\projects\project_1.aep -reuse

4.2 多幀渲染

多幀渲染是 After Effects 2022版本中的新增功能，可并行利用 CPU 中的所有內核。通過運行多個 After Effects 實例來加快某些流程。多幀渲染提升了 After Effects 的運行速度。 多幀渲染會提升您的項目在計算機上的渲染速度，具體取決于 CPU 內核數、可用內存和顯卡計算能力。After Effects 2022 渲染合成的速度提升如下表所示：

4.3 網絡渲染

A. 安裝有 After Effects 完整版的計算機

B. 將一個項目和所有源文件保存到服務器上的一個文件夾

C. 安裝有渲染引擎的計算機

D. 打開項目，將靜止幀序列渲染到服務器上的指定輸出文件夾

開發者可以使用任意數量的計算機進行渲染；通常，計算機越多，渲染速度越快。不過，如果跨繁忙的網絡使用太多計算機，網絡通信可能會降低整個進程的速度。

4.4 異常處理

基于AE命令行模式實現渲染的過程中，經常會出現一些卡死的情況，這是困擾我們工程師好幾天的問題，最后我們不得不通過GUI下的AE來模擬整個渲染鏈路。最終定位到的原因是AE命令行中出現了我們看不到的彈窗，它阻塞后續一切腳本的執行，故無法執行渲染任務。解決的方案是通過檢查AE窗口，如果有異常彈窗，就關閉異常彈窗保留主窗口，基于Python核心的代碼如下。

# AE主進程窗口title和class
mainClass = "AE_CApplication_22.2"# 窗口名稱
targetTitle = "After Effects"
hWndList = []
win32gui.EnumWindows(lambda hWnd, param: param.append(hWnd), hWndList)
for hd in hWndList:title = win32gui.GetWindowText(hd)clsname = win32gui.GetClassName(hd)if -1 != str(title).find(targetTitle) and mainClass != clsname:win32gui.PostMessage(hd, win32con.WM_CLOSE, 0, 0)

最終，純渲染耗時和視頻時長比在1:1左右，視頻時長越長，這個比值數據就越小。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RljveCfE-1657593629773)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80a15bb55d67475397107cb87cfa27d9~tplv-k3u1fbpfcp-zoom-1.image)]

04 AE的不足

AE在視頻渲染方面有著獨特的優勢，基于腳本也有著比較強大的擴展能力。但基于AE渲染也存在難以解決的缺陷：

1. 相較于 FFmpeg 和 OpenGL 都提供了 Web 端的解決方案，AE 的模板無法直接在瀏覽器端實現模板的渲染合成，這意味著，當我們在 Web 端編輯視頻素材的時候，用戶無法實時預覽效果；

2. AE 只支持下在 Mac OS 和 Windows 上運行，因此我們需要搭建 Window 運行環境，這使得我們不能使用 GDP（Go Develop Platform，百度 Go 業務開發平臺）等面向全業務線的基礎設施。雖然上文也介紹了網絡渲染方案，但這對硬件又有了一定的要求。

06 小結

本文我們詳細講解了百家號圖文轉視頻的基于AE的渲染方案，相較于FFmepg、OpenGL、Canvas2Video等實現方案，AE渲染方案在自動合成方面有較明顯的優勢，它模板效果豐富，開發新的特效研發成本低；但由于無法做到實時預覽，AE渲染方案在C端用戶產品上又存在一定的短板。隨著百家號業務的發展，我們的渲染引擎會進一步完善，目前基于OpenGL、Unity 3D的渲染引擎也在探索中，但毫無疑問，AE渲染方案會有一席之地。

————————END————————

推薦閱讀：

百度工程師教你玩轉設計模式（觀察者模式）

Linux透明大頁機制在云上大規模集群實踐介紹

超高效！Swagger-Yapi的秘密

百度直播iOS SDK平臺化輸出改造

百度APP 基于Pipeline as Code的持續集成實踐