百家 基于AE的视频渲染技术探索

导读

introduction

全文8634字，预计阅读时间22分钟。

GEEK TALK

01

背景

而随着百家 的业务迭代，更多的个性化需求为智能合成视频带来了一些挑战，例如：度晓晓播 天气，在视频中添加虚拟人等，在完成了文字分析和摘要提取、视频素材智能化处理、音视频合成之后，视频的呈现效果是百家 业务要解决的核心问题之一，视频创作不仅需要AI的加持，同样离不开视频合成这个关键环节；视频渲染合成作为内容视频化的最后一个制作环节，决定着视频内容质量、时效性等关键指标。

△度晓晓播 天气视频效果

GEEK TALK

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 丰富的特效插件

△使用 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 设计师的效果无损还原

△很流行的张表情图，懂的人都会会心一笑

在Web、App的开发过程中，设计师无论是用Sketch、PhotoShop还是其它设计软件，我们最终都需要把设计稿转化为Web或Native上实现的效果，而AE文件，在通过规范化以后（通常只需要修改图层的命名），即可直接用于生产环境，基本上 100% 还原设计师效果。我们几乎可以省掉视觉效果review的环节。

GEEK TALK

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:projectsproject_1.aep -comp "Composition_1" -output c :outputproject_1project_1.avi

使用多计算机渲染模式，将 project_1.aep 中的 Composition_1 的第 1 到第 10 帧进行渲染，并保存到带编 的 Photoshop 文件序列中：

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

以上脚本展示了AE命令行的基本用法，要让AE命令行具备更强大的功能离不开我们上文中提到的 AE 脚本，aerender 默认并不支持直接调用 AE脚本，要使用脚本则需要一些额外的工作。

在AE程序的的根目录Scripts 文件夹下的 Startup目录和Shutdown目录，为用户提供了2类钩子方法，即在AE程序启动后和关闭前要执行的方法，aerender能在命令行实现渲染工作就离不开AE为我们默认提供的 commadLineRenderer.jsx 文件。

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',                value: 0            },            {                time: '0::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:projectsproject_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和classmainClass = "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左右，视频时长越长，这个比值数据就越小。

GEEK TALK

04

AE的不足

AE在视频渲染方面有着独特的优势，基于脚本也有着比较强大的扩展能力。但基于AE渲染也存在难以解决的缺陷：

1. AE 只支持下在 Mac OS 和 Windows 上运行，因此我们需要搭建 Window 运行环境，这使得我们不能使用 GDP（Go Develop Platform，百度 Go 业务开发平台）等面向全业务线的基础设施。虽然上文也介绍了 络渲染方案，但这对硬件又有了一定的要求。

GEEK TALK

06

小结