Since 2020, the sudden outbreak of the epidemic has led to the rapid development of online life forms. Short video platforms have become an important way for netizens to enjoy entertainment, learn skills and share their lives.
According to the 48th Statistical Report on The Development of Internet in China released by CNNIC, as of June 2021, the number of online video users in China has reached 944 million, among which the number of short video users is 888 million, accounting for 87.8% of the total Internet users, and the average daily usage time is 125 minutes.
Under the growing base of short video users, in order to attract more traffic on short video platforms, animators and developers need to continuously and efficiently create all kinds of creative special effects to meet the diverse content needs of users.
Animation is a very important part of user interaction, and now the implementation of animation on various platforms rarely adopts native code, which is too expensive and takes too long to develop. Currently, the commonly used animation workflow solutions in the industry include Lottie and SVGA. Both of them can export the animation produced by Adobe After Effects (AE for short) into a file, which can be loaded and rendered for use in terminal APP, improving the efficiency of animation development online to a certain extent.
Based on the above background, I would like to recommend an excellent animation production component developed by Tencent: open source animation rendering library PAG.
What is PAG
Official definition: A PAG (Portable Animated Graphics) is a complete animation workflow. Provides from AE export plug-in, to desktop preview tool PAGViewer, and then to each end of the cross-platform rendering SDK.
The following figure shows the PAG workflow diagram, which is similar to Lottie. After AE animation is designed, designers can read AE project files through PAGExporter plug-in, and export a PAG binary file according to their specific needs by choosing one of vector export, BMP pre-synthesis or mixed export. The client decodes and renders the PAG binary file, each side shares a set of C++ implementation, and the platform side only does interface encapsulation.
2. Advantages of PAG
Compared to SVGA and Lottie on the market, PAG has the following features:
- Animation file small, fast decoding speed
- All AE effects can be achieved
- Supporting tools perfect, support real-time preview effect
- The runtime preserves animations and edits text or content in real time
1, animation file small, fast decoding speed
The PAG project has put the file format at the forefront from the beginning of its design, aiming to become the standard hosting format for AE animation content.
Compared to the JSON data structure used by Lottie, PAG adopts a more rigorous binary data structure, borrowing from the SWF open source file format that has been tested by the industry for decades. Natural with higher compression rate, faster decoding, and single file delivery (no external pictures) advantages.
In addition, in terms of file size, PAG makes use of the characteristics of animation files themselves to achieve a very high compression rate. By skipping a lot of default value storage and using bits for compact storage, the same animation content can reduce the file size by about 50% ** on average compared to the same type of scheme **. In terms of performance, PAG’s real-time rendering performance can average about 1.5 to 2.5 times that of Lottie.
2. Full AE feature support
Lottie only supports vector export, but vector actively implements only a small subset of AE features. PAG not only supports more AE features in vector export mode, but also introduces the hybrid export power of video sequence frame and vector, which can support all AE features while maintaining the editability of animation running.
3, supporting tools perfect, support real-time preview effect
Different from Lottie and SVGA, PAG’s rendering of animation is realized in C++ layer. The 2D graphics rendering library developed by PAG does not depend on the platform side rendering interface, so the consistency of rendering of various platforms can be realized.
The desktop preview tool PAGViewer ensures that the rendering results are exactly the same as those on mobile, so designers can see what looks like on mobile without having to check back and forth online. At the same time, the performance inspection panel is provided to help the development engineer optimize according to the quantified performance indicators of the material.
Iii. Detailed explanation of PAG’s technical capabilities
Next, the technical solutions corresponding to PAG advantages are introduced:
1. BMP presynthesis
In order to fully support AE features, PAG adopts the form of AE SDK screenshot file export, which can export any AE effects. However, it also has two significant disadvantages: 1. 2. The picture cannot be edited
File big problem solution
To solve the problem of large files after screenshots, PAG component expands the video format to compress the original image sequence frame to nearly 1% of the size, and then supports transparent channel, as shown below. The left side is RGAB video content, the right side is Alpha channel grayscale image, and the final rendering is merged back into RGBA images. Thus achieving support for transparent channels. During rendering, a YUV texture can be obtained directly due to the enabled hardware accelerated decoding. In order to avoid the need for textures to be copied back and forth between CPU and GPU, custom Shader scripts are used to perform YUV conversion and Alpha channel merging simultaneously in a single drawing process using hardware acceleration. Improved rendering performance by an average of 10%.
Picture editing problem solution
In view of the characteristics of BMP precomposition can not be edited, PAG will BMP precomposition support granularity from file to composition, support vector and BMP precomposition mixed export, so as to achieve support for all AE features and maintain the editable runtime.
2. Layer editing
In the era of smart templates, for example, a template is no longer a single PAG file, but a random combination of multiple PAG files to control the combination rules according to business requirements. From this, PAG introduces a layer render count editing architecture that supports not only text and placeholder ratio editing, but also layer level editing.
As shown in the image below, a file is a rendering tree. You can change the position of the rendering tree at the layer level and even add or remove layers. You can also add other PAG files to the rendering tree as subtrees. In terms of the combination of time axis, PAG has the ability of time scaling, including multiple adaptive modes such as cycle, variable speed and freeze frame. Each layer also provides the ability to adjust the start time, and can be freely set relative to the time axis.
3. Overall video rendering
Lottie’s animation scheme cannot be used in video composition mainly because it relies on platform-specific UI frameworks and is cheap to develop, but it can only be rendered to UI views and cannot be used in child threads.
In order to support off-screen rendering and sub-thread rendering, PAG is directly developed based on C++ cross-platform architecture. It has been restored from the animation interpolator at the bottom to the timeline and layer rendering tree system at the top. Although the development cost is high, all ends share the same set of code, which naturally ensures cross-end rendering consistency. The most important thing is the ability to render directly to off-screen textures, and perfect support for sub-thread animation rendering.
4. Server rendering
As mentioned earlier, PAG rendering is implemented based on the C++ layer, and the platform side only provides the encapsulation of the rendering environment and interface. In practice, due to cost considerations, most servers are still CPU servers, while GPU servers are mostly used in AI computing scenarios.
In AE, some special effects such as Gaussian blur and corner positioning are realized through OpenGL, which cannot be rendered using SKia CPU rendering mode. In addition to Linux, other platforms can use GPU rendering for acceleration. If the server uses CPU rendering mode, a series of compatibility processing needs to be done at the code level. In order to balance rendering performance and cost, PAG provides OpenGL rendering environment by CPU simulating GPU, and adopts Swiftshader rendering scheme by comparing the performance of mainstream Mesa and Swiftshader.
In terms of GPU rendering, the external environment only needs to provide EGL environment to complete GPU rendering.
Four,
PAG provides a simplified and refined animation workflow that supports all AE features while reducing file size and preserving the flexibility of editable animation execution. With just one connection, designers can quickly get started using all the efficient components, no longer hamstrung by development costs.
At present, PAG scheme has been widely used in dozens of products inside and outside Tencent, covering a large number of national applications, such as wechat, QQ, Tencent Video, QQ Music, King of Glory, Qzone and so on.
And Tencent PAG officially open source on January 14, now can intervene SDK use, designers and developers can no problem to use! You can download the experience from the official website, with a link to the official website: Pag.io
Appendix – A brief introduction to use
How to install PAG:
At present, PAG supports MAC (macOS 10.9 and above) and Windows operating systems. It is very simple to install and use. Take The MAC system as an example, you need to install PAGViewer first and choose graphical installation. Then open PAGViewer and PAGViewer will automatically detect whether the AE export plug-in needs to be installed/updated. Install as prompted. IO /docs/instal…
Then you can install the AE export plug-in:
How do I export a PAG file?
A. Export the full-vector pre-synthesized PAG file
Click on the Composition you want to export, then go to File > Export > PAG File… To export the file, select a path to save the file. Double-click the exported PAG file to preview the animation.
B. Export the PRE-synthesized PAG file using BMP
Modify the Compostion to be exported to a name with the suffix “_bmp” or “_bmp” and the total tag becomes “BMP pre-compositing”. The other operations are the same as the vector export mode above. (Note: BMP precomposition suffixes can be changed, see Plug-in Options Configuration Panel)
C. Export the PAG file that is a mixture of vector and BMP
You can name the Composition without the suffix “_bmp” or “_bmp”, and the partial Composition it references with the suffix “_bmp” or “_bmp”, and then export the PAG file as normal.
In general, THE PAG is easy to install and operate, and can be picked up quickly by designers and development engineers.