腾讯研发出新招,从此动画制作就用PAG

2020年开始,突如其来的疫情让线上生活形式飞速发展,短视频平台成了广大网民休闲娱乐、学习技能、分享生活的重要途径。
根据CNNIC发布第48次《中国互联网络发展状况统计报告》显示,截至 2021 年 6 月,我国网络视频用户规模达 9.44 亿,其中短视频用户规模为 8.88 亿,占网民整体的 87.8%,人均单日使用时长为 125 分钟。
腾讯研发出新招,从此动画制作就用PAG
文章图片

在日益壮大的短视频用户基数下,短视频平台为了吸引更多流量,动画设计师和开发需要不断高效各类创意的特效,以满足用户多元的内容需求。
动画是影响用户交互很重要的一环,现在各平台实现动画很少会采用原生代码实现,那样开发成本太高,周期太长。目前业界常用的动画工作流解决方案有Lottie和SVGA,都可以将Adobe After Effects(简称AE)制作的动画导出成一个文件,在终端APP中加载渲染使用,在一定程度上提升了动画开发上线的效率。
基于以上背景,再给大家推荐一款腾讯研发的优秀动画制作组件:开源动画渲染库PAG。
一、什么是PAG
官方定义:PAG(Portable Animated Graphics) 是一套完整的动画工作流。提供从AE导出插件,到桌面预览工具PAGViewer,再到各端的跨平台渲染 SDK。
下图为PAG工作流示意,流程类似Lottie,设计师使用AE设计好动画以后,通过PAGExporter插件读取AE工程文件,根据具体需求选择矢量导出、BMP预合成、混合导出方式中的一种导出一个PAG二进制文件,客户端对该PAG二进制文件进行解码、渲染,各端共享一套C++实现,平台端只做接口封装。
腾讯研发出新招,从此动画制作就用PAG
文章图片

二、PAG的优势
对比市面上动画组件SVGA和Lottie,PAG具有以下几个特性:

  • 动画文件小,解码速度快
  • 可实现所有的AE效果
  • 配套工具完善,支持实时预览效果
  • 运行时可保留动画效果并实时编辑文字或内容
1、动画文件小,解码速度快 PAG 方案从设计之初就把文件格式摆在了最重要的位置,目标是打造成为 AE 动画内容的标准承载格式。
相比 Lottie 方案采用的 JSON 数据结构,PAG 借鉴了经历数十年行业考验的 SWF 开源文件格式,采用了更加严谨的二进制数据结构。天然的具有压缩率更高, 解码速度更快,以及可单文件交付(不外挂图片)的优势。
另外在文件大小上,PAG 通过利用动画文件本身的特点,获得了极高的压缩率。通过跳过大量默认值的存储,使用比特位来紧凑存储,相同动画内容可以比同类型方案平均减少50%左右的文件大小。在性能方面,PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。
腾讯研发出新招,从此动画制作就用PAG
文章图片

2、全AE特性支持 Lottie 仅支持矢量的导出方式,但矢量方式主动只能实现 AE 特性的一个较小子集。PAG
不仅在矢量导出方式上支持更多的 AE 特性,还引入了视频序列帧结合矢量的混合导出能
力,实现支持所有 AE 特性的同时,又能保持动画运行时的可编辑性。
3、配套工具完善,支持实时预览效果 不同于Lottie、SVGA,PAG关于动画的渲染绘制是在C++层实现的,通过自研的2D图形渲染库,不依赖平台端渲染接口,可以实现各平台的渲染一致性。
桌面预览工具PAGViewer确保了渲染结果跟移动端完全一致,这样设计师可以直观地看到移动端的展示效果,而不需要上线来回确认。同时提供性能检测面板,帮助开发工程师根据素材量化的性能指标进行优化。
腾讯研发出新招,从此动画制作就用PAG
文章图片

三、PAG的技术能力详解 接着介绍下PAG优势对应的技术解决方案:
1、BMP预合成 为了实现AE特性的全面支持,PAG采用了 AE的SDK 截图文件导出的形式,这样可以导出任意AE效果,但也有两个显著缺点:1、导出文件过大;2、图片不可编辑
文件大问题解决方案
针对截图后文件过大的问题,PAG组件通过扩展视频格式,将原图片序列帧压缩到近百分之一的大小,再通过支持透明通道,如下图所示,左边为RGAB的视频内容,右边为Alpha通道的灰度图,最终渲染的时候再合并回RGBA的图片,从而实现对透明通道的支持。渲染的过程中,由于启用了硬件加速解码,可以直接得到一个YUV的纹理。而且为了避免纹理在CPU和GPU之间来回拷贝,自定义了Shader脚本,利用硬件加速在一次绘制过程中,同时完成YUV转换和Alpha通道合并。平均提高了10%的渲染性能。
腾讯研发出新招,从此动画制作就用PAG
文章图片

图片编辑问题解决方案
针对BMP预合成无法编辑的特点,PAG将BMP预合成支持的粒度由文件延伸到合成,支持矢量和BMP预合成混合导出,从而实现了支持所有的AE特性又能保持运行时的可编辑性。
2、图层编辑 在智能模板时代,如一键出片、王者战报,模板不再是单个PAG文件,而是由多个PAG文件随机组合而成,根据业务需求去控制组合的规则。由此PAG引入了图层渲染数的编辑架构,不仅支持文本和占位图比编辑,还支持图层级别的编辑。
如下图,一个文件就是一棵渲染树,支持图层级别的任意修改位置甚至增删图层,也支持将其他PAG文件添加到这棵渲染树中作为子树。在时间轴的组合上,PAG具有时间伸缩的能力,包含循环,变速,定格等多种自适应模式。每个图层又提供了起始时间的调整能力,能够自由设置在时间轴上的相对位置。
腾讯研发出新招,从此动画制作就用PAG
文章图片

3、整体视频渲染 Lottie的动画方案之所以无法应用在视频合成中,主要是因为依赖了平台相关的UI框架,开发成本低,,但也导致了它只能渲染到UI视图上,并且无法在子线程中使用。
腾讯研发出新招,从此动画制作就用PAG
文章图片

为了支持离屏渲染绘制、子线程渲染,PAG直接基于C++跨平台架构研发,一直从最底层的动画插值器,还原到上层的时间轴和图层渲染树系统,虽然开发成本较高,但是所有端共享同一套代码,天然的能保障跨端渲染一致性。最重要的是能直接渲染到离屏纹理上,并完美支持子线程动画渲染。
4、服务端渲染 前面提到,PAG的渲染是基于C++层实现,平台侧仅提供渲染环境和接口的封装。在实际使用中,出于成本的考虑,大部分的服务器仍然是CPU的服务器,GPU的服务器大多应用于AI计算等场景。
AE中的部分特效如高斯模糊、边角定位等都是通过OpenGL实现的,使用skia的CPU渲染模式无法渲染;除了Linux端,其它平台都可以很好的使用GPU渲染进行加速,如果服务端采用CPU渲染模式,在代码层面需要做一系列的兼容处理。为了能兼顾渲染性能和使用成本,PAG通过CPU模拟GPU的方式来提供OpenGL渲染环境,并且通过主流Mesa和Swiftshader两种方案的性能对比,采用了Swiftshader的渲染方案。
腾讯研发出新招,从此动画制作就用PAG
文章图片

GPU渲染方面,外部只需要提供EGL环境,就可以完成GPU渲染。
四、总结
PAG提供了一套简化并完善的动画工作流,在缩小文件体积的情况下,仍然支持所有 AE 特性,并保留了动画运行可编辑的灵活性。仅需接入一次,设计师就可以快速上手使用所有高效组件,不再因研发成本削弱呈现效果。
目前,PAG方案已经广泛应用于腾讯公司内外几十款产品中,涵盖了众多的国民级应用,如微信、QQ、腾讯视频、QQ音乐、王者荣耀、QQ空间等。
腾讯研发出新招,从此动画制作就用PAG
文章图片

并且腾讯PAG在1月14日正式开源,现在可以介入SDK使用,设计师和开发小哥哥们可以妥妥的用起来了!
在官网就可以下载体验,附上官网链接:https://pag.io
附录——简要使用介绍
如何安装PAG :
目前PAG支持mac(macOS 10.9以上)和windows操作系统,安装和使用都很简单,以mac系统为例,首先需要安装PAGViewer,选择图形化安装即可;然后打开 PAGViewer,PAGViewer 将自动检测是否需要安装/更新 AE 导出插件,按提示安装即可。也可查看使用链接:https://pag.io/docs/install.html
腾讯研发出新招,从此动画制作就用PAG
文章图片

接着就可以安装AE导出插件:
腾讯研发出新招,从此动画制作就用PAG
文章图片

如何导出PAG文件?
a.导出全矢量预合成的PAG文件
点击选中需要导出的合成(Composition),然后点击菜单“文件” -> “导出” -> “PAG File...”,选择要保存的路径即可导出。导出成功后双击导出的PAG文件可以直接预览动画。
腾讯研发出新招,从此动画制作就用PAG
文章图片

b.导出全BMP预合成的PAG文件
将需要导出的合成(Compostion)修改为后缀为"_bmp""_BMP"的名字,标记总合成为「BMP预合成」,其他操作同上矢量导出模式。(注:BMP预合成后缀可以更改,详见《插件选项配置面板)》
c.导出矢量和BMP预合成混合的PAG文件
可将总合成(Composition)命名为不带"_bmp""_BMP"后缀的名字,它所引用的部分子合成命名为带"_bmp"或"_BMP"后缀的名字,然后按正常流程导出PAG文件即可。
【腾讯研发出新招,从此动画制作就用PAG】总体来说,PAG的安装和操作都十分简单,无论是设计师和开发工程师都能快速上手。

    推荐阅读