这是 WebGPU Lab 的第一个最小实验：不创建网格、不加载贴图，只用一个覆盖屏幕的三角形和 fragment shader 生成动态图案。鼠标位置会被写入 uniform，并在 shader 中转成局部波纹。

结构

核心文件放在 VuePress 组件目录下：

docs/.vuepress/components/WebGpuDemo.vue
docs/.vuepress/components/webgpu/demos/proceduralField.ts
docs/.vuepress/components/webgpu/shaders/proceduralField.wgsl

WebGpuDemo.vue 负责文章内的展示外壳、懒加载、控制条和错误提示；proceduralField.ts 负责 WebGPU 初始化、pipeline、uniform buffer、resize 和渲染循环；proceduralField.wgsl 负责具体的视觉算法。

还能怎么玩

• compute shader 版本的 reaction diffusion
• GPU particle simulation
• tiled light culling / cluster visualization
• 体渲染或 signed distance field ray marching

贡献者: Astroite, Ubuntu