阶段 6 · 项目高级45–90 分钟

综合项目：可交互 GPU 粒子场

Compute + Render + Ping-Pong + Uniform + Pointer

把本教程核心概念组合成一个可交互粒子系统：计算更新、双缓冲、实例化四边形、颜色映射和鼠标力场。

LEARNING GOALS

先明确本课目标

设计共享数据结构

组织每帧 compute→render 命令

处理输入、尺寸、资源复用和调试

MENTAL MODEL · 再建立心智模型

完整 WebGPU 应用是一张资源与 pass 的数据流图：CPU 只维护少量控制参数，主要状态与工作留在 GPU。

MINIMAL EXAMPLE

怎样把多个 Pass 和资源关系组织成完整一帧？

Frame Graph 用节点表示 Pass，用边表示资源读写依赖。先描述“谁读谁写”，再决定执行顺序、资源复用和同步，比按 API 调用堆代码更容易扩展。

最小例子javascript

// 本项目一帧的数据流
updateInputBuffer();

// Pass 1: particlesA -> Compute -> particlesB
encodeSimulationPass(encoder);

// Pass 2: particlesB -> Render -> canvasTexture
encodeParticleRenderPass(encoder);

device.queue.submit([encoder.finish()]);

输入更新 CPU 只写指针、时间等小型参数。
Compute 节点 读取上一帧粒子状态，写入下一帧状态。
Render 节点 读取新状态并写 Canvas，依赖 Compute 已结束。

当 Pass 增多时，仍能从资源依赖看清执行顺序和 Ping-Pong 角色。

本课概念

Frame Graph Particle System Ping-Pong Instanced Quad +2 个

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

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

展开⌄

模拟Ping-Pong Buffer两个资源轮流作为输入和输出，避免同一 pass 中对同一数据产生非法或不明确的读写。架构Frame Graph描述一帧中 pass、资源读写和依赖关系的数据流图，用于组织复杂渲染与计算。综合项目Particle System用大量独立小元素模拟流体、火花或群体运动的系统，通常分为状态更新与渲染两部分。综合项目Instanced Quad用实例化绘制为每个粒子生成面向屏幕的小四边形，相比 point-list 更易控制形状和材质。综合项目Interactive Uniforms由指针、时间或界面输入实时更新的小型 Uniform 参数，让 GPU 模拟响应用户交互。性能Resource Reuse跨帧复用 Buffer、Texture、BindGroup 和 Pipeline，只更新必要内容，避免重复分配和编译。

LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

加入 GPU 端空间分桶与邻域交互，做一个简化 Boids。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

项目结构

粒子状态常驻两个 storage buffer；compute pass 从 A 读向 B 写；render pass 将 B 解释为实例数据；下一帧交换角色。

可继续扩展

加入空间网格、碰撞、尾迹纹理、Bloom、间接绘制和 Worker 后，它可以成长为更完整的 GPU 模拟框架。

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

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

展开⌄

API COMPARISON

同一个粒子系统能体现两代 API 的核心差异：借用渲染管线，还是直接表达计算图。

WebGL

Transform Feedback 更新粒子 Buffer，Ping-Pong 交换后用 instanced draw 或 POINTS 呈现。

WebGPU

Compute Pass 更新 Storage Buffer，Render Pass 直接消费新状态，统一在 CommandBuffer 中排序。

迁移时可以保留粒子结构与 Ping-Pong，但应重新设计资源绑定和 workgroup 调度。