轉(zhuǎn)載請注明出處：http://www.olinone.com/
前言
PAG特效框架是騰訊開源的一套完整的動效工作流解決方案，相較于傳統(tǒng)特效渲染框架，其支持更豐富的組合樣式，網(wǎng)上已有詳細(xì)介紹，在此不再贅述
PAG框架是如何實現(xiàn)特效渲染？本文結(jié)合預(yù)合成視頻序列幀特效，通過分析其源碼來展示其完整的渲染流程。開始之前，先問大家一個問題：
渲染一個視頻類型的PAG特效文件，一般需要經(jīng)歷哪些流程？
渲染流程
通常情況下，加載一個PAG文件，到最終展示到屏幕上，一般會經(jīng)過以下幾個階段：
1. 文件解碼：加載PAG源文件，解析數(shù)據(jù)流，轉(zhuǎn)化為可識別的數(shù)據(jù)模型
2. 獲取幀數(shù)據(jù)：獲取播放時間戳對應(yīng)的視頻幀數(shù)據(jù)，比如H264編碼數(shù)據(jù)
3. 視頻解碼：解碼視頻幀數(shù)據(jù)，獲取解碼后對應(yīng)的紋理數(shù)據(jù)，并交給GPU以供給渲染
4. 幾何階段（GPU）：渲染頂點(diǎn)矩陣計算，齊次空間坐標(biāo)轉(zhuǎn)換等
5. 光柵化渲染（GPU）：片元著色，深度測試之后，與幀緩沖混合后，最終渲染到屏幕上
前三個階段可以看做應(yīng)用程序階段（CPU），后兩個階段為渲染階段（GPU）
渲染渲染階段，以O(shè)penGL為例，通過API 創(chuàng)建用于在 GPU 上運(yùn)行的 shader，然后將通過 CPU 獲取到的圖形點(diǎn)信息傳入給 GPU 中的 Shader ，在 Vertex Shader 中通過矩陣變換，將頂點(diǎn)坐標(biāo)從模型坐標(biāo)系轉(zhuǎn)換到世界坐標(biāo)系，再到觀察坐標(biāo)系，最后投影到屏幕坐標(biāo)系中，計算出顯示屏幕上各頂點(diǎn)的坐標(biāo)
然后，通過光柵化得到所有像素點(diǎn)信息，并在 Fragment Shader 中計算出所有像素點(diǎn)顏色。最后，將得到的像素信息進(jìn)行depth/stencil test、blend，得到最終的圖像并顯示到屏幕上
在了解完渲染流程后，大家可以再思考一個問題：
設(shè)計一個類似于PAG動效框架，如何分層？
框架層級
通常情況下，一個動效框架大致可以分為四層：
1. 應(yīng)用框架層：負(fù)責(zé)應(yīng)用程序階段的邏輯處理，包括文件、視頻解碼，播放處理等
2. 渲染引擎層：對外提供圖形渲染服務(wù)，負(fù)責(zé)圖形對象的繪制渲染工作
3. 圖形接口層：位于應(yīng)用程序和驅(qū)動程序之間，提供GPU驅(qū)動的標(biāo)準(zhǔn)接口，常見的如OpenGL
4. 硬件接口層：橋接圖形接口與Native硬件平臺視窗系統(tǒng)，比如EGL
PAG框架
瀏覽PAG iOS項目目錄，可以看到其大致包括兩部分：
一、src目錄
PAG應(yīng)用程序框架目錄，處于應(yīng)用程序階段，包括PAG文件的解碼、播放處理等
各目錄職責(zé)如下圖所示：
二、tgfx目錄
特效渲染引擎包括渲染流程處理、GPU對象管理等，對外提供圖形渲染服務(wù)
據(jù)網(wǎng)友描述，該渲染引擎名有可能參考自 bgfx 框架，有興趣的同學(xué)也可以學(xué)習(xí)參考
該部分代碼位于tgfx目錄下，主要包括以下幾個模塊：：
總結(jié)
PAG特效框架的應(yīng)用程序框架和渲染引擎分別承擔(dān)著不同的職責(zé)，通過合理的設(shè)計和組織解決了實現(xiàn)復(fù)雜動效的難題
本章以整體視角介紹了一個渲染框架應(yīng)有的流程以及PAG工程目錄概況，讓各位讀者特別新人有一個整體認(rèn)知，接下來結(jié)合項目源碼，分析PAG框架代碼設(shè)計思路及詳細(xì)的渲染流程
