https://amatsuzero.github.io/LastStand/tags/gpu-instancing/Recent content in GPU Instancing on Last StandHugozh-cnSun, 31 May 2026 09:00:00 +0800https://amatsuzero.github.io/LastStand/posts/cocostennis/part-six/Sun, 31 May 2026 09:00:00 +0800https://amatsuzero.github.io/LastStand/posts/cocostennis/part-six/<p><a href="../part-five/">3D球场项目 (五)</a> 把客户端的核心业务流 讲完了：Native 推送 → DataManager 队列 → ScenePlayer 章节调度 → GameController 状态机 → Handler → 渲染层。功能闭环跑通之后，真正的硬仗是 <strong>&ldquo;工程化&quot;和&quot;性能&rdquo;</strong>——前者保证 项目能稳定上线（编译跑通、退出不崩、Swift 调用顺手），后者保证在中低端机上画面流畅。</p> <p>第一版上线时遇到了两类问题：</p> <ul> <li><strong>稳定性 / 工程化</strong>：modulemap 编译报错、lipo 架构冲突、A11 设备启动 crash、 Cocos 退出期 OpenAL 资源竞争 crash……这些都不是&quot;画面卡&quot;，但每一个都能让用户体验 归零；</li> <li><strong>性能</strong>：中端 iPhone 在比赛回合渲染期间，GPU 和 CPU 都偶尔抖到 80%+，帧率掉到 30 fps 出头。</li> </ul> <p>本篇按这两类拆成两部分，所有改动都遵循一条原则：<strong>不动玩法，只把工程问题和帧时间 解决掉</strong>。</p> <h2 id="架构改动一览">架构改动一览</h2> <p><a href="../part-two/">3D球场项目 (二)</a> 介绍过弹幕引擎的四层 架构（腾讯视频 APP / MagicDanmakuiOS / MagicDanmaku / cocos-engine）。这一阶段 <strong>每一层都动了</strong>——3D 球场不是单点改造，而是一次自上而下的纵贯。下面这张图是把 PartTwo 那张原始架构图重画一遍，<strong>改动的节点用蓝色</strong>、<strong>新增的节点用绿色</strong>， 没动的节点保持白色：</p> <div class="arch-diagram arch-diff"> <style> .arch-diff { font-size: 13px; color: #222; margin: 1.2em 0; max-width: 100%; overflow-x: auto; background: #f0f4f8; border: 1.5px solid #aab4c2; border-radius: 8px; padding: 14px 16px 16px; } .arch-diff .layer { background: #f0f4f8; border: 1.5px solid #aab4c2; border-radius: 8px; padding: 14px 16px 16px; margin: 10px 0; position: relative; } .arch-diff .layer-title { font-weight: 600; color: #334155; margin-bottom: 10px; font-size: 14px; } .arch-diff .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .arch-diff .node { background: #fff; border: 1px solid #8b8b8b; border-radius: 18px; padding: 6px 14px; min-width: 60px; text-align: center; box-shadow: 0 1px 1px rgba(0,0,0,0.03); flex: 1 1 auto; white-space: nowrap; } .arch-diff .node.changed { background: #dbeafe; border-color: #2563eb; color: #1e3a8a; } .arch-diff .node.added { background: #dcfce7; border-color: #16a34a; color: #14532d; font-weight: 600; } .arch-diff .node.wrap { white-space: normal; line-height: 1.35; padding: 8px 12px; } .arch-diff .group { background: #fafbfc; border: 1px dashed #9aa4b2; border-radius: 8px; padding: 12px; flex: 1; min-width: 200px; display: flex; flex-direction: column; } .arch-diff .group-title { font-weight: 600; color: #475569; margin-bottom: 8px; font-size: 13px; } .arch-diff .inner { background: #fff; border: 1px solid #c5ccd6; border-radius: 6px; padding: 10px; margin-bottom: 8px; } .arch-diff .inner:last-child { margin-bottom: 0; } .arch-diff .inner-title { color: #475569; font-size: 12px; text-align: center; margin-bottom: 6px; } .arch-diff .arrow { text-align: center; color: #94a3b8; font-size: 18px; line-height: 1; margin: 4px 0; user-select: none; } .arch-diff .app-row { display: flex; justify-content: center; } .arch-diff .app-row .node { flex: 0 0 auto; min-width: 120px; padding: 8px 24px; } .arch-diff .md-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .arch-diff .md-row > .group:first-child { flex: 2.4 1 360px; } .arch-diff .md-row > .group:last-child { flex: 1 1 200px; } .arch-diff .ce-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .arch-diff .ce-row .nodes { display: flex; gap: 10px; flex: 1 1 280px; flex-wrap: wrap; } .arch-diff .ce-row .ext-group { flex: 1 1 38%; min-width: 220px; } .arch-diff .legend { display: flex; gap: 14px; justify-content: center; align-items: center; margin-bottom: 10px; font-size: 12px; color: #475569; flex-wrap: wrap; } .arch-diff .legend .node { flex: 0 0 auto; min-width: 0; padding: 4px 12px; font-size: 12px; } <pre><code>@media (max-width: 900px) { .arch-diff { font-size: 12px; } .arch-diff .layer { padding: 10px 10px 12px; } .arch-diff .layer-title { font-size: 13px; margin-bottom: 8px; } .arch-diff .row { gap: 6px; } .arch-diff .row &gt; .node { flex: 1 1 calc(33.333% - 6px); padding: 5px 6px; min-width: 0; font-size: 11.5px; white-space: normal; line-height: 1.3; word-break: break-word; } .arch-diff .node.wrap { padding: 6px 8px; line-height: 1.3; } .arch-diff .group { padding: 8px; min-width: 0; } .arch-diff .inner { padding: 8px; } .arch-diff .app-row .node { min-width: 0; padding: 6px 18px; flex: 0 0 auto; white-space: nowrap; } .arch-diff .md-row { flex-direction: column; gap: 8px; } .arch-diff .md-row &gt; .group:first-child, .arch-diff .md-row &gt; .group:last-child { flex: 1 1 auto; width: 100%; } .arch-diff .ce-row { flex-direction: column; gap: 8px; } .arch-diff .ce-row .nodes { flex: 1 1 auto; width: 100%; } .arch-diff .ce-row .ext-group { flex: 1 1 auto; width: 100%; min-width: 0; } } @media (max-width: 420px) { .arch-diff .row &gt; .node { flex: 1 1 calc(50% - 6px); } } @media (prefers-color-scheme: dark) { .arch-diff { color: #e2e8f0; background: #0f172a; border-color: #475569; } .arch-diff .layer { background: #1e293b; border-color: #475569; } .arch-diff .group { background: #0f172a; border-color: #475569; } .arch-diff .inner { background: #1e293b; border-color: #475569; } .arch-diff .node { background: #0f172a; border-color: #94a3b8; color: #e2e8f0; } .arch-diff .node.changed { background: #1e3a8a; border-color: #60a5fa; color: #dbeafe; } .arch-diff .node.added { background: #14532d; border-color: #4ade80; color: #dcfce7; } .arch-diff .layer-title, .arch-diff .group-title, .arch-diff .inner-title { color: #cbd5e1; } .arch-diff .legend { color: #cbd5e1; } } </code></pre> <p></style></p>