https://amatsuzero.github.io/LastStand/tags/%E5%9B%BE%E5%BD%A2%E6%B8%B2%E6%9F%93/Recent content in 图形渲染 on Last StandHugozh-cnWed, 08 Jul 2026 19:00:15 +0800https://amatsuzero.github.io/LastStand/posts/cocosengine-ios-rendering/Wed, 08 Jul 2026 19:00:15 +0800https://amatsuzero.github.io/LastStand/posts/cocosengine-ios-rendering/<h1 id="cocos-引擎-ios-渲染管线深度解析从-cadisplaylink-到屏幕呈现">Cocos 引擎 iOS 渲染管线深度解析：从 CADisplayLink 到屏幕呈现</h1> <h2 id="引言">引言</h2> <p>在移动端图形开发中，理解渲染管线的底层实现是走向高级工程师的必经之路。Cocos Creator 作为主流的跨平台游戏引擎，其 iOS Metal 后端的渲染实现采用了现代化的 FrameGraph 架构，结合脏状态追踪、资源池化等优化手段，是一份极佳的学习样本。</p> <p>本文基于对 Cocos 引擎 <code>gfx-metal</code> 模块的源码分析，梳理从 <code>CADisplayLink</code> 帧回调触发到最终 GPU 呈现的完整渲染链路，并深入解读各阶段的关键实现细节。</p> <h2 id="整体架构概览">整体架构概览</h2> <p>在深入时序之前,先理清核心模块的职责分工：</p> <table> <thead> <tr> <th>模块</th> <th>文件</th> <th>职责</th> </tr> </thead> <tbody> <tr> <td><strong>IOSPlatform</strong></td> <td><code>IOSPlatform.mm</code></td> <td>iOS 平台入口，持有 <code>CADisplayLink</code> 驱动渲染循环</td> </tr> <tr> <td><strong>RenderPipeline</strong></td> <td><code>RenderPipeline.cpp</code></td> <td>管线编排器，遍历相机并调度 Flow/Stage</td> </tr> <tr> <td><strong>ForwardFlow</strong></td> <td><code>ForwardFlow.cpp</code></td> <td>前向渲染流程，决定渲染策略</td> </tr> <tr> <td><strong>ForwardStage</strong></td> <td><code>ForwardStage.cpp</code></td> <td>前向渲染阶段，收集渲染对象并填充 UBO</td> </tr> <tr> <td><strong>RenderQueue</strong></td> <td><code>RenderQueue.cpp</code></td> <td>渲染队列，对可渲染对象排序</td> </tr> <tr> <td><strong>FrameGraph</strong></td> <td><code>FrameGraph.cpp</code></td> <td>帧图调度器，负责 Pass 编译、排序、合并和执行</td> </tr> <tr> <td><strong>CCMTLDevice</strong></td> <td><code>MTLDevice.mm</code></td> <td>Metal 设备抽象，管理 Swapchain 和 Queue</td> </tr> <tr> <td><strong>CCMTLSwapchain</strong></td> <td><code>MTLSwapchain.mm</code></td> <td>交换链，管理 <code>CAMetalLayer</code> 和 drawable</td> </tr> <tr> <td><strong>CCMTLCommandBuffer</strong></td> <td><code>MTLCommandBuffer.mm</code></td> <td>命令缓冲区封装，核心渲染编码入口</td> </tr> <tr> <td><strong>CCMTLRenderCommandEncoder</strong></td> <td><code>MTLRenderCommandEncoder.h</code></td> <td>渲染编码器，含脏状态追踪优化</td> </tr> </tbody> </table> <h2 id="完整渲染时序图">完整渲染时序图</h2> <p>以下 Mermaid 时序图展示了从屏幕刷新信号到最终呈现的五个阶段：</p>