WebGPU 入门交互演示

粒子系统模拟（Canvas 2D）

粒子数量 5,000 0 FPS 0

此演示使用 Canvas 2D 模拟 WebGPU 的并行计算粒子系统。WebGPU 使用计算着色器（Compute Shader）在 GPU 上并行更新粒子位置，而本演示使用 CPU+Canvas 2D 模拟相同的效果。真实 WebGPU 实现可轻松处理数十万粒子。

数据基于标准粒子渲染场景模拟。WebGPU 凭计算着色器和更低 API 开销在大量粒子场景下保持高帧率。

Vertex Shader

顶点处理

光栅化

固定功能

Fragment Shader

像素着色

Output

帧缓冲区

Compute Shader

并行计算

Storage Buffer

结果写入

渲染管线流程：顶点缓冲 → Vertex Shader（坐标变换）→ 光栅化（片元生成）→ Fragment Shader（像素着色）→ 帧缓冲输出

计算管线：Dispatch → Compute Shader（并行计算）→ Storage Buffer（数据存储），独立于渲染管线运行

关键特点：WebGPU 允许在渲染管线中使用计算着色器，实现粒子更新和渲染一体化的高效流水线。

Chrome

完全支持

Edge

完全支持

Firefox

Nightly 开发中

Safari

实验性功能

检测中...