Cocos Creator 3D 渲染管線超強解讀！作者對於 3。0 渲染管線的理解非常深入。這篇文章可以幫助開發者快速熟悉 3。0 的渲染管線，儘快熟悉下一代渲染架構。
——Cocos Minggo
作者：Kunkka
大家好！我是一名來自騰訊的 Cocos 開發者，從 Cocos-iPhone，Cocos2d-x lua，Cocos Creator 到 Cocos Creator 3D，算下來我使用 Cocos 引擎有差不多10年了。此前比較少寫部落格，這是第一次在 Cocos 社群寫技術分享，歡迎大家在評論區或社群原帖與我進行交流！
歡迎關注我的 Github
https：//github。com/kunka
前言
剛剛釋出了 3。0 Preview 版，首次將 2D 和 3D 版本合併到了一起，經過多個版本迭代，渲染架構大幅升級與最佳化，非常值得深入學習和研究，以下是官網的介紹：
多渲染後端框架，已支援 WebGL 1。0 和 WebGL 2。0
面向未來的底層渲染 API 設計
基於 Command Buffer 提交渲染資料
目前渲染相關文件並不完善，本文將從原始碼入手分析 Cocos Creator 3D 多渲染後端框架 ，引擎預設的實現，以及如何實現。
目錄
多渲染後端框架 GFX
WebGL 渲染過程
GFX 中的物件
GFX 渲染過程
Cocos Creator 3D 渲染管線
渲染架構 UML
前向渲染管線
自定義渲染管線
多渲染後端框架 GFX
GFX 是針對渲染層做的高階抽象和封裝，以達到編寫一次渲染程式碼，適配不同渲染後端的目的。
目前原始碼中可見引擎已經適配了以下幾種渲染後端：
WebGL
WebGL2
OpenGL ES2
OpenGL ES3
Metal
Vulkan
❝
GFX 可以理解為實現 Cocos Creator 3D 引擎渲染的最基礎介面，實現自定義渲染只能透過 GFX 提供的介面和規則來編寫，以往在 Cocos 引擎中直接編寫 GL 程式碼的方式已經成為過去。
❞
GFX 介面設計更貼近 等下一代渲染介面，為了說明 GFX 如何抽象渲染層，我們透過 渲染做一個對比，然後再用 GFX 介面來實現同樣的功能。
WebGL 渲染過程
下面的示例程式碼展示了一次簡單的 渲染，目的是顯示一張 2D 紋理：
這裡可以把渲染過程簡單分為2個階段：和 ，又可分為和。實際遊戲中中會反覆執行多個 ，直到完成一幀中的所有繪製。
：建立和提交資料到 GPU
建立紋理
建立並編譯 Shader，也就是 WebGLProgram
準備頂點資料，繫結 attributes layout
準備索引資料
：
資料繫結：（Set Pass Call）
繪製呼叫：（Draw Call）
繫結紋理
設定 uniform 引數（Shader 中的固定變數）
呼叫繪製函式
準備畫布，清除顏色/深度緩衝，設定 viewport 等
❝
：可以理解為模型資料（頂點和紋理等）的上傳；
：每一幀都會呼叫，重新整理遊戲畫面；
：一般抽象為材質資料，切換資料繫結則相當於切換不同的材質。
❞
GFX 中的物件
：抽象GFX 渲染裝置，提供與裝置互動的渲染介面，具體例項化為 ， 等。
此外定義了15種渲染物件型別：
其中 （同步訊號）和 在 WebGL 實現中並沒有用到。，，， 比較好理解，跟 GL 物件差異不大，其他9種物件型別分別是：
：抽象 VB，IB，UB 等各種資料緩衝。
：集中管理 VB，IB，Attributes，IndirectBuffer 等各種輸入。
：集中管理 UB，Texture，Sampler 等。
：描述 DescriptorSet 繫結的佈局。（相當於告訴 GPU 如何讀取 DescriptorSet 資料）
：將每一個渲染動作抽象為命令提交到佇列，submit 時統一執行，支援非同步渲染。（為 Vulkan 等下一代渲染介面準備，WebGL 並未實現）
：CommandBuffer 佇列？（WebgGL 實現只有一個空的 Queue，CommandBuffer 只用了一個預設的）
：存放顏色緩衝區和深度緩衝區，也就是畫布。
和其他擴充套件資訊，如 WebGL2 實現中有 WebGL2PipelineLayout 資訊。
：主要由以下狀態動態組建
PipelineLayout
Shader
RenderPass
RasterizerState：CullMode，PolygonMode 等
DepthStencilState：DepthTest，StencilTest等
BlendTarget：Blend 設定
BlendState：BlendTarget集合 等
InputState：Attributes
參考 中的概念：
GFX 渲染過程
基於上述定義的基礎概念，如果使用 實現同樣的功能，程式碼如下：
整理一下 渲染流程：
：建立和提交資料到 GPU
建立 Material，初始化 Effect
建立 Texture 和 Sampler，並繫結 Texture 到 Pass
建立 InputAssembler
建立 GFX Shader
根據 Pass，從物件池獲取 DescriptorSet， 繫結並更新
：準備畫布 beginRenderPass
呼叫繪製函式 draw（WebGL 直接繪製）
獲取 PSO 物件，繫結 PSO
繫結 DescriptorSet
繫結 IA
資料繫結：（Set Pass Call）
繪製呼叫：（Draw Call）
提交併執行 CommandBuffer
對比 可以發現，渲染流程幾乎一模一樣，這有利於我們快速學習，但是細節上卻有很大的區別，這也是號稱面向未來的渲染 API 設計的原因，這裡在 GFX 之上又封裝了一些概念：
：Cocos Creator 3D 獨有語法的 Shader 原始檔案，類似 Unity 的 ShaderLab。
：包含 BlendState，RasterizerState 等所有資訊，全部按位存於 handle 裡面，非常的高效。
：對應一個 Effect，可以有多個 Pass。
（GFX Shader）：結合 pass 指定編譯宏組合動態建立，非常靈活。
顯然 抽象的介面使用起來更加方便和靈活， 狀態機只提供最細粒度的狀態設定介面，如果渲染狀態切換，OpenGL 需要設定一大堆標誌位，現在可以直接切換 ，並且 Cocos Creator 3D 使用了非常多的物件池來最佳化效能。
Cocos Creator 3D 渲染管線
Cocos Creator 3D 渲染管線基於 GFX 介面，再次做了一層封裝，方便應用層靈活使用，大致的渲染流程如下：
其中 數量可以有多個，（內含正交 OrthCamera）也可以有多個。 和 都可以自定義和自由組合， 負責執行具體渲染指令。
Cocos Creator 3D 渲染架構 UML
渲染相關類定義非常多，而且關係錯綜複雜，很多相互引用，這裡列舉一下幾個關鍵類的含義：
：可以理解為渲染大總管，集中管理所有渲染相關的物件，包含 RenderPipeline，RenderWindow，RenderScene，Cameras，UI
：渲染管線，定義一組 RenderFlow 佇列
：渲染視窗，可以是螢幕緩衝也可以是離屏緩衝，可能有多個
：渲染檢視，Camera 物件的渲染層表示
：整個 Scene 場景對應的渲染層物件
：Scene 場景中所有 Canvas 對應的渲染物件，統一由 UI 管理，Cocos Creator 3D 單獨為 UI 建立了一個 RenderScene 用於存放 UI 渲染模型 UIBatchedModel，所以 Root 中一共有2個 RenderScene
：定義一組渲染 Stage
：渲染具體的實現，如 ForwardStage，UIStage
Cocos Creator 3D 前向渲染管線
前向渲染管線是 Cocos Creator 3D 提供的預設渲染管線，實現了3個型別的：
：渲染陰影。
：對應一個 3D Camera，可能有多個。
：對應一個 ui_Canvas，可能有多個。
另外橙色步驟比較關鍵，主要負責效能最佳化：
：UI 動態合批。
：裁剪渲染物件。
：根據裁剪後的物件，填充 Instanced 佇列，Batched佇列 ，不透明佇列，透明佇列。
Cocos Creator 3D 自定義染管線
Cocos Creator 3D 支援自定義渲染管線，我們嘗試在 中新建一個後處理 ，右鍵依次新建 ， 和 。
點選剛才建立的 資源，開啟 ，設定對應的 和 ，將 插入 和 之間。
然後過載 的 方法，實現 的初始化
過載 的 方法，實現自定義渲染邏輯：
最後開啟 ，切換至我們的 ，然後就可以運行了！
結束
Cocos Creator 的 3D 功能正在努力完善，後續會推出更多高階和實用功能，我們將在第一時間體驗。
十分感謝一直免費開源的 Cocos，提供給我們直面原始碼的機會，祝福 Cocos 十週年生日快樂！
下一個十年更精彩！
參考文件
Cocos Creator 3D 使用者手冊：
https：//docs。cocos。com/creator3d/manual/zh/
Mozilla WebGL API：
https：//developer。mozilla。org/zh-CN/docs/Web/API/WebGL_API
learnopengl。com：
https：//learnopengl。com/
Vulkan 資源繫結和狀態管理：
https：//zhuanlan。zhihu。com/p/172479225
