WebGPU Blob — 噪声位移的有机体与计算着色器波场

原文作者：Unknown（页面 JSON-LD 内标注制作者为 aengel，原始实验地址 lab.aengel.io/webgpu-blob）
原始链接：https://mesh3d.gallery/experiment/webgpu-blob
发布/更新日期：2026-08-21
技术栈：WebGPU、Three.js TSL、Compute Shader

WebGPU Blob

一、项目概述

WebGPU Blob 是一个持续运动中的 噪声位移二十面体球（noise-displaced icosphere） 交互式 Web3D 实验。其核心视觉是一个被程序化噪声不断扰动的球体，在 WebGPU 渲染管线中实时更新顶点位置。四种材质预设——珠光（nacre）、黄金时刻（golden hour）、深渊（abyss）、岩浆（magma）——共享同一套几何与动画系统，但呈现截然不同的光照与色彩特征。

最值得关注的技术设计，是在材质层面之下加入了一层 计算着色器驱动的波场（compute-shader wave field）：当用户指针划过画面时，波场会像水面一样产生涟漪，并通过噪声位移系统作用于几何体，形成“触摸即形变”的有机反馈。

WebGPU Currency

二、技术机制拆解

1. Icosphere + 噪声位移

与常见的 UV 球体相比，二十面体球（icosphere） 的顶点分布更均匀，适合做顶点级噪声位移，不易在极点附近产生拉伸或聚集。项目使用程序化噪声（如 simplex noise 或 curl noise）对球面顶点沿法线方向进行偏移，从而实现流体般的不规则膨胀与收缩。

概念示意（非原始代码）：

const displacedPosition = position.add(
  normal.mul(noise(position.mul(frequency).add(time))),
);

关键在于：位移计算完全在 GPU 端完成，CPU 不参与逐顶点更新。

2. WebGPU Compute Shader 波场

项目描述中明确提到 compute-shader wave field。在 WebGPU 中，计算着色器与渲染管线分离，可以在每一帧先将波场状态写入 storage buffer（存储缓冲），再由顶点着色器读取该缓冲来偏移顶点。这种设计避免了 CPU 回读，保持交互低延迟。

数据流大致为：

指针位置 → uniform → compute shader → storage buffer (波场)
          → vertex shader (噪声位移) → fragment shader (材质)

3. Three.js TSL 材质系统

Three.js TSL（Three Shading Language） 是 Three.js 提供的节点式着色器编写方式，能自动编译为 WGSL（WebGPU Shading Language）或 GLSL（WebGL 后端）。在本项目中，TSL 很可能是用来定义四种材质外观，并在同一渲染上下文中快速切换。

Magical Canopy

三、核心优化要点

  1. 将顶点位移计算移至 GPU 并行执行
    传统做法是在 JS 中更新 BufferGeometry 的顶点数组，每帧都会产生 CPU→GPU 上传开销。WebGPU Blob 通过计算着色器与存储缓冲在 GPU 内部完成位移，避免 CPU 参与几何更新，显著提升持续形变动画的性能。

  2. 使用计算着色器模拟交互波场，降低渲染与逻辑耦合
    指针涟漪并不是在顶点着色器中临时计算，而是先由专门的 compute pass 更新波场状态。这种分离让波场可以独立演进（如扩散、衰减），同时被多个渲染元素复用，提高系统灵活性。

  3. 选择 Icosphere 作为基础几何，提高顶点位移质量
    相比 UV 球，二十面体球顶点分布均匀、三角面规则，噪声位移更不易产生极性扭曲。配合四套材质预设，在不更换网格的前提下实现了完全不同的视觉表现，降低资源切换成本。

WebGPU Ribbon Carousel

四、GLSL / WebGL 专业术语检查

术语检查说明
WebGPU下一 Web 图形 API，不等于 WebGL。其着色语言为 WGSL，而非 GLSL。本项目明确使用 WebGPU。
Three.js TSLThree.js Shading Language，节点式着色器编写方式。可编译为 WGSL 或 GLSL，具体取决于渲染后端。
Compute Shader计算着色器，GPU 通用并行计算单元，不直接输出像素，适合波场、粒子、物理模拟。
Icosphere二十面体球，顶点分布均匀，适合顶点位移。
Noise-displaced噪声位移，使用噪声函数沿法线偏移顶点，产生有机形态。
Wave field波场，由波动方程或噪声驱动的标量场，常用于顶点偏移或着色。
Storage Buffer存储缓冲，WebGPU/GLSL 中可读写缓冲区，计算着色器写入、顶点着色器读取。
Material looks材质外观/预设，非技术名词，但表示同一着色器管线的不同参数组合。

注意：虽然页面中提到了 “Shader” 标签，但该项目并非 GLSL/WebGL 实现，而是 WebGPU + WGSL 路线。Three.js TSL 作为中间层屏蔽了底层着色语言差异。

WebGPU Tile Field

五、关于核心代码的说明

原文页面（mesh3d.gallery 项目展示页）未内嵌任何 GLSL/WGSL/TSL 着色器源代码，其正文仅为项目元数据、作者信息与分享组件。因此本次深度解读无法“保留核心代码”。如需获取真实着色器实现，建议：

  • 访问原始实验地址：https://lab.aengel.io/webgpu-blob
  • 打开浏览器开发者工具 → Network → 筛选 .wgsl / .js 资源
  • 关注 compute 与 render pipeline 相关字段

若未来有作者公开仓库，再补全实际 GLSL/TSL 片段更为妥当。

延伸阅读：该项目作者 aengel 还发布了若干 WebGPU 实验，包括 WebGPU Tile Field、WebGPU Ribbon Carousel、Magical Canopy，均在探索现代 GPU 驱动的 Web3D 交互形态。

Balloon Text Simulation