跳到正文
网页珍奇柜Web Curio

WebGPU 融球

WebGPU Metaballs，Brandon Jones (toji)，2021 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

本柜的现场复刻：按原作的技术思路从零编写，不含原作的代码和素材。为什么不直接展出原作：原作代码按 package.json 为 MIT，但没有 LICENSE 文件、且依赖 WebGPU（多数浏览器尚不可用），收录价值有限；这里用 WebGL 光线步进重做：平滑并集的有符号距离场让融球相互鼓胀、融合，表面以流动噪声做出发光裂纹的岩浆壳，每个球同时是光源，照亮并倒映在抛光石地板上，附带软阴影与近似泛光。指针是一颗额外的融球（按住变大），拖拽旋转视角。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步融球场值在 3D 网格上用计算着色器求和
  2. 第 2 步Marching Cubes 在 GPU 上生成三角形并写入间接绘制缓冲
  3. 第 3 步可切换场景（熔岩灯、地牢）与点光源
  4. 第 4 步间接绘制避免 CPU 回读顶点数

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Evaluate a scalar field (sum of r^2/d^2 for moving balls) on a 3D voxel grid in a WebGPU compute shader. Run a second compute pass implementing marching cubes with lookup tables in storage buffers, appending triangles via an atomic counter. Write the vertex count into an indirect draw buffer and render with drawIndirect so the CPU never reads back geometry. Animate ball centers with sine motion and shade with a few point lights.

定制成完整的实现提示词

档案

技术

能不能拿来用

原作以 MIT (package.json; no LICENSE file) 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Demo loads (200, requires WebGPU); repo exists, package.json declares MIT, no LICENSE file.