阶段 5 · 进阶进阶24 分钟

间接绘制：让 GPU 决定绘制参数

drawIndirect 与 GPU-driven Rendering

计算着色器写入绘制参数缓冲区，随后渲染 pass 用 drawIndirect 消费，无需 CPU 读取。

LEARNING GOALS

先明确本课目标

创建 INDIRECT usage 缓冲区

由 compute 写入参数

在同一提交中执行 drawIndirect

MENTAL MODEL · 再建立心智模型

普通 draw 的数量来自 JavaScript；indirect draw 从 GPUBuffer 读取参数，使可见性、粒子数量和 LOD 能留在 GPU 端决定。

MINIMAL EXAMPLE

GPU 怎样自己决定绘制多少实例？

Indirect Draw 从带 INDIRECT usage 的 Buffer 读取绘制参数。Compute Shader 可以先写入可见数量，Render Pass 随后消费，而 CPU 不必把结果读回。

最小例子javascript

// Buffer 内连续四个 u32：
// vertexCount, instanceCount, firstVertex, firstInstance

computePass.dispatchWorkgroups(cullGroupCount);
renderPass.drawIndirect(indirectBuffer, 0);

固定二进制布局 drawIndirect 参数是四个 u32；drawIndexedIndirect 使用五个字段。
Compute 写数量 剔除、LOD 或压缩阶段可更新 instanceCount。
留在 GPU 避免 mapAsync 读回造成 CPU/GPU 同步。

GPU 计算结果直接控制后续绘制规模，这是 GPU-driven rendering 的基本闭环。

本课概念

Indirect Draw GPU-driven Rendering Indirect Buffer firstInstance +1 个

●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄

光栅化Face Culling根据三角形绕序与 frontFace/cullMode 丢弃正面或背面图元，减少不可见片元工作。GPU 驱动Indirect DrawdrawIndirect 从 GPUBuffer 读取绘制参数，使计算着色器可决定顶点或实例数量。GPU 驱动GPU-driven Rendering剔除、LOD、压缩和绘制参数尽量留在 GPU 内完成，减少 CPU/GPU 往返。GPU 驱动Indirect Buffer带 INDIRECT usage、按固定二进制布局保存 Draw 或 Dispatch 参数的 GPUBuffer。绘制firstInstance实例化 Draw 的起始实例编号，会加到着色器读取的 @builtin(instance_index) 上。

LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

实现按材质分桶的多组间接绘制。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

参数布局

drawIndirect 读取四个 u32：vertexCount、instanceCount、firstVertex、firstInstance；drawIndexedIndirect 还包含 baseVertex。

GPU 驱动的价值

计算阶段可做剔除或压缩可见对象，再直接决定后续 draw，避免 CPU/GPU 往返。

●OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄

API COMPARISON

WebGL2 核心 API 没有 GPU 生成参数的间接绘制；WebGPU 能让 Compute 决定后续 draw。

WebGL

绘制数量通常由 CPU 参数决定；扩展可能提供 multi-draw，但不是 Storage→Indirect 的同一模型。

WebGPU

Compute 写入带 INDIRECT usage 的 Buffer，RenderPass 用 drawIndirect 消费。

不要把 WEBGL_multi_draw 当作 drawIndirect；前者仍由 CPU 提供数组参数。