乐趣区

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

jiezi

作者 | 金展

导读：百家号作为百度为创作者打造的集创作、公布、变现于一体的内容创作平台，在图文、短视频方面曾经深耕多年，基于百度根底 AI 能力，通过视觉、语音、NLP 等技术将图文内容智能合成视频是目前次要的摸索方向，目前每天帮忙创作者制作数千条靠近于真人制作程度的视频。视频渲染合成作为内容视频化的最初一个制作环节，决定着视频内容品质、时效性等要害指标，本文将带你理解百家号视频渲染合成的技术实现，具体介绍 AE 在视频渲染方面的独特劣势。。

全文 8634 字，预计浏览工夫 22 分钟。

01 背景

短视频作为近年来挪动互联网衰亡的重要内容模式，市场规模持续增长，依据 2021 年 12 月 CNNIC 的数据报告，短视频用户规模就已达 9.34 亿，占互联网用户的 90.5%。如何高效智能地进行短视频合成来满足用户的视频内容生产，越来越成为内容创作者的一个挑战。百家号作为百度为创作者打造的集创作、公布、变现于一体的内容创作平台，在图文、短视频方面曾经深耕多年，如何基于百度根底 AI 能力，通过视觉、语音、NLP 等技术将图文内容智能合成视频是目前次要的摸索方向。

晚期，百家号是基于 VidPress（https://ai.baidu.com/creativi…），通过五大步骤实现图文主动转视频；VidPress 的工作原理和剪辑师制作视频的步骤相似：先筹备文字脚本，而后收集媒体素材，再将素材解决成视频片段，将脚本配音和视频进行对齐，最初进行编辑和查看。通过 AI 技术，VidPress 能够实现文字剖析和摘要、视频内容搜寻、素材智能化解决、音视频对齐，以及智能剪辑等 5 个步骤的自动化。这不仅保障了视频生成品质靠近于真人制作程度，同时也大幅晋升视频创作的效率。

基于该技术，百家号已服务数十家媒体，在热点资讯、媒体报道等多个畛域发展了屡次利用，每天帮忙创作者自动生产数千条视频内容。整体的业务性能如下：

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

所以，百家号从往年 3 月份开始致力于渲染局部的优化工作，本文咱们将重点聊聊视频渲染合成这个环节。

△度晓晓播报天气视频成果

02 为什么抉择 AE

谈到视频合成，咱们会想到 FFmpeg、OpenGL、Shader 这些根底库，以及建设在这些根底库之上的 Adobe After Effects（简称 AE）、UE4、Unity 3d 等视频处理软件和渲染引擎。

FFmpeg 在视频解决方面性能非常弱小，被誉为多媒体畛域的瑞士军刀，在视频合成方面（https://ffmpeg.org/ffmpeg.html）和转场成果（一个例子：https://trac.ffmpeg.org/wiki/…）方面都有着杰出的体现，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 有着丰盛的插件生态，咱们来看一些简略例子：

△应用 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 的环节。

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…），尽管代码没怎么更新，但思路值得借鉴。

△AE 转换为 JSON 后的代码片段

3.2 自动化渲染

要实现自动化渲染，咱们就不能再用 AE 的软件界面了，AE 提供的可执行文件 aerender（Windows 下是 aerender.exe）是具备命令行接口的程序，可用于主动执行渲染。该可执行文件与主应用程序位于同一文件夹中，无需购买 AE 软件，就能间接收费应用（具体阐明见 Adobe 官网，https://helpx.adobe.com/after…）。

咱们来看一些应用命令行，来执行渲染的示例：

将 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 左右，视频时长越长，这个比值数据就越小。

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 的继续集成实际

退出移动版