转载请注明出处：http://www.olinone.com/
前言
PAG特效框架是腾讯开源的一套完整的动效工作流解决方案，相较于传统特效渲染框架，其支持更丰富的组合样式，网上已有详细介绍，在此不再赘述
PAG框架是如何实现特效渲染？本文结合预合成视频序列帧特效，通过分析其源码来展示其完整的渲染流程。开始之前，先问大家一个问题：
渲染一个视频类型的PAG特效文件，一般需要经历哪些流程？
渲染流程
通常情况下，加载一个PAG文件，到最终展示到屏幕上，一般会经过以下几个阶段：
1. 文件解码：加载PAG源文件，解析数据流，转化为可识别的数据模型
2. 获取帧数据：获取播放时间戳对应的视频帧数据，比如H264编码数据
3. 视频解码：解码视频帧数据，获取解码后对应的纹理数据，并交给GPU以供给渲染
4. 几何阶段（GPU）：渲染顶点矩阵计算，齐次空间坐标转换等
5. 光栅化渲染（GPU）：片元着色，深度测试之后，与帧缓冲混合后，最终渲染到屏幕上
前三个阶段可以看做应用程序阶段（CPU），后两个阶段为渲染阶段（GPU）
渲染渲染阶段，以OpenGL为例，通过API 创建用于在 GPU 上运行的 shader，然后将通过 CPU 获取到的图形点信息传入给 GPU 中的 Shader ，在 Vertex Shader 中通过矩阵变换，将顶点坐标从模型坐标系转换到世界坐标系，再到观察坐标系，最后投影到屏幕坐标系中，计算出显示屏幕上各顶点的坐标
然后，通过光栅化得到所有像素点信息，并在 Fragment Shader 中计算出所有像素点颜色。最后，将得到的像素信息进行depth/stencil test、blend，得到最终的图像并显示到屏幕上
在了解完渲染流程后，大家可以再思考一个问题：
设计一个类似于PAG动效框架，如何分层？
框架层级
通常情况下，一个动效框架大致可以分为四层：
1. 应用框架层：负责应用程序阶段的逻辑处理，包括文件、视频解码，播放处理等
2. 渲染引擎层：对外提供图形渲染服务，负责图形对象的绘制渲染工作
3. 图形接口层：位于应用程序和驱动程序之间，提供GPU驱动的标准接口，常见的如OpenGL
4. 硬件接口层：桥接图形接口与Native硬件平台视窗系统，比如EGL
PAG框架
浏览PAG iOS项目目录，可以看到其大致包括两部分：
一、src目录
PAG应用程序框架目录，处于应用程序阶段，包括PAG文件的解码、播放处理等
各目录职责如下图所示：
二、tgfx目录
特效渲染引擎包括渲染流程处理、GPU对象管理等，对外提供图形渲染服务
据网友描述，该渲染引擎名有可能参考自 bgfx 框架，有兴趣的同学也可以学习参考
该部分代码位于tgfx目录下，主要包括以下几个模块：：
总结
PAG特效框架的应用程序框架和渲染引擎分别承担着不同的职责，通过合理的设计和组织解决了实现复杂动效的难题
本章以整体视角介绍了一个渲染框架应有的流程以及PAG工程目录概况，让各位读者特别新人有一个整体认知，接下来结合项目源码，分析PAG框架代码设计思路及详细的渲染流程
写在文后：
许久未更新博客，新建微信公众号 olinoneDev，欢迎大家关注交流~
第一次尝试 ChatGPT 辅助写作，以下是借助ChatGPT生成的PAG项目目录介绍，因版权问题放到最后
1.codec 此文件夹存放了PAG特效文件解码相关的代码，包括PAG文件格式定义，解码工具类，解码器类等。其中，PAG文件格式定义包括PAG动画文件头信息、帧动画信息、图片信息、特效元素信息等，这些信息都是通过解码器读取后转化为可识别的数据结构。
2.player 此文件夹存放了PAG动效播放相关的代码，包括PAG动效视图、播放管理器等。PAG动效视图负责接收PAG特效文件数据并进行视频解码、渲染等操作，播放管理器则负责对PAG动效进行播放控制，如开始、暂停、停止等操作。
3.renderer 此文件夹存放了PAG动效的渲染处理相关的代码，包括PAG渲染视图、图像渲染工具类、图形对象管理器等。PAG渲染视图负责处理渲染流程，如初始化渲染环境、读取PAG数据、创建纹理、绘制等操作，图像渲染工具类负责提供图像的渲染操作，如镜像、旋转等操作，图形对象管理器则负责管理图形对象，包括坐标对象、颜色对象、纹理对象等。
TGFX
1.gpu 此文件夹存放了与GPU相关的代码，主要负责提供GPU对象和操作函数，包括纹理、着色器、缓冲区、渲染管线等。通过使用OpenGL ES技术，可以通过这些GPU对象和操作函数来实现图形渲染。
2.render 此文件夹存放了渲染引擎相关的代码，包括渲染器、顶点格式、顶点缓冲、纹理贴图等。渲染器负责维护所有渲染状态，包括渲染参数、纹理贴图参数、混合模式等，并提供绘制顶点缓冲数据的方法。
3.util
博主终于更新了，
ChatGPT这么强大
是的，科技革命