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

百家号基于AE的视频渲染技术探索
文章图片

作者 | 金展

导读:百家号作为百度为创作者打造的集创作、发布、变现于一体的内容创作平台,在图文、短视频方面已经深耕多年,基于百度基础AI能力,通过视觉、语音、 NLP等技术将图文内容智能合成视频是目前主要的探索方向,目前每天帮助创作者制作数千条接近于真人制作水平的视频。视频渲染合成作为内容视频化的最后一个制作环节,决定着视频内容质量、时效性等关键指标,本文将带你了解百家号视频渲染合成的技术实现,详细介绍AE在视频渲染方面的独特优势。。
【百家号基于AE的视频渲染技术探索】全文8634字,预计阅读时间22分钟。
01 背景 短视频作为近年来移动互联网兴起的重要内容形式,市场规模持续增长,根据2021年12月CNNIC的数据报告,短视频用户规模就已达9.34亿,占互联网用户的90.5%。如何高效智能地进行短视频合成来满足用户的视频内容消费,越来越成为内容创作者的一个挑战。百家号作为百度为创作者打造的集创作、发布、变现于一体的内容创作平台,在图文、短视频方面已经深耕多年,如何基于百度基础AI能力,通过视觉、语音、 NLP等技术将图文内容智能合成视频是目前主要的探索方向。
早期,百家号是基于VidPress(https://ai.baidu.com/creativi...) ,通过五大步骤实现图文自动转视频;VidPress的工作原理和剪辑师制作视频的步骤类似:先准备文字脚本,然后收集媒体素材,再将素材处理成视频片段,将脚本配音和视频进行对齐,最后进行编辑和检查。通过 AI 技术,VidPress 可以实现文字分析和摘要、视频内容搜索、素材智能化处理、音视频对齐,以及智能剪辑等5个步骤的自动化。这不仅保证了视频生成质量接近于真人制作水平,同时也大幅提升视频创作的效率。
基于该技术,百家号已服务数十家媒体,在热点资讯、媒体报道等多个领域开展了多次应用,每天帮助创作者自动生产数千条视频内容。整体的业务功能如下:
百家号基于AE的视频渲染技术探索
文章图片

而随着百家号的业务迭代,更多的个性化需求为智能合成视频带来了一些挑战,例如:度晓晓播报天气,在视频中添加虚拟人等,在完成了文字分析和摘要提取、视频素材智能化处理、音视频合成之后,视频的呈现效果是百家号业务要解决的核心问题之一,视频创作不仅需要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 插件提供的酷炫的光剑效果
百家号基于AE的视频渲染技术探索
文章图片

△motionbro 插件提供的运镜效果
不过值得注意的是,AE的插件只是针对于AE的软件,在命令行模式下(详见下文)运行则需要一些额外的开发工作。
2.2 强大的脚本能力
百家号基于AE的视频渲染技术探索
文章图片

△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的视频渲染技术探索
文章图片

我们将AE渲染技术方案分为3个方面的工作:
3.1 模板的标准化
脚本要操作模板,我们希望更简单、更高效地操作模板,负责脚本开发的工程师无需打开AE文件,就能实现模板的修改,这样就要保证AE文件中需要被动态修改的图层名和项目中资源名保持一致,另外,图层不能被锁定。
百家号基于AE的视频渲染技术探索
文章图片

我们通过对模板的解构,定义了以下模板图层规范:
1、文本层:Text前缀命名,按照出场顺序命名为:Text1、Text2、Text3;
2、图片层:Photo前缀命名,按照出场顺序命名为:Photo1、Photo2、Photo3;
3、背景层:统一命名为Background,只能有一个;
4、前景层:统一命名为Foreground,只能有一个;
5、效果层:统一命名为Effect,只能有一个。
这里,大家一定会想,为什么模板的背景层,前景层,效果层只能有一个呢,视频过程中切换背景是怎么实现的呢?这里就涉及到一个「微模板」的概念。把一个图文转化为视频,需要考虑合成效率和模板成本。我们的视频其实是由多个视频片段组成的。
百家号基于AE的视频渲染技术探索
文章图片

一个完整视频的背后其实对应着多个AE模板文件,这样我们就可以按照需要去组合,实现多种不同的效果。甚至,可以这么组合:
百家号基于AE的视频渲染技术探索
文章图片

除了模板本身的规范以外,我们还要对模板的效果进行描述,否则,对于视频合成pipeline来说,它无法判断应该使用哪个AE模板。因此,我们需要对模板的风格,以及模板所需要的素材视频和图片素材进行尺寸上的标注。
百家号基于AE的视频渲染技术探索
文章图片

模板的标注和模板的规范化命名是一件非常繁琐的事情,而且一旦出错,整个视频合成就会出现问题。因此,我们需要通过工具去做一个检查。首先将AE文件转化为JSON格式的文件,再去验证图层命名的正确性,AE转换后的JSON文件非常庞大,这里面需要做一些裁剪。将AE文件转化为结构化的JSON数据是一件很麻烦的事情,这里社区推荐了一种方案(https://github.com/Jam3/ae-to...) ,虽然代码没怎么更新,但思路值得借鉴。
百家号基于AE的视频渲染技术探索
文章图片

△AE转换为JSON后的代码片段
3.2 自动化渲染
要实现自动化渲染,我们就不能再用AE的软件界面了,AE 提供的可执行文件 aerender(Windows 下是 aerender.exe) 是具有命令行接口的程序,可用于自动执行渲染。该可执行文件与主应用程序位于同一文件夹中,无需购买 AE 软件,就能直接免费使用(详细说明见Adobe官网,https://helpx.adobe.com/after...)。
百家号基于AE的视频渲染技术探索
文章图片

我们来看一些使用命令行,来执行渲染的示例:
将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的视频渲染技术探索
文章图片

在AE程序的的根目录Scripts 文件夹下的 Startup目录和Shutdown目录,为用户提供了2类钩子方法,即在AE程序启动后和关闭前要执行的方法,aerender能在命令行实现渲染工作就离不开AE为我们默认提供的 commadLineRenderer.jsx 文件。
所以,我们只需要在 Startup 目录,通过脚本获取命令行中AE脚本文件的地址,然后执行脚本文件,这样一来,aerender命令行的渲染能力就能媲美GUI界面了。
百家号基于AE的视频渲染技术探索
文章图片

3.3 AE脚本建设
在前面的章节中,我们提到了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文件相应的图层中。限于篇幅,这里就不在赘述了。
当我们有了足够的背景素材,文本样式,文本动画,转场效果以及氛围素材的积累,我们就可以极大的丰富模板效果,而且我们可以指数级降低模板文件的数量。
百家号基于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 渲染合成的速度提升如下表所示:
百家号基于AE的视频渲染技术探索
文章图片

4.3 网络渲染
百家号基于AE的视频渲染技术探索
文章图片

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左右,视频时长越长,这个比值数据就越小。
百家号基于AE的视频渲染技术探索
文章图片

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的持续集成实践

    推荐阅读