WebGPU Tile Field —— 鼠标驱动的刚性金属瓦片场

原作者：aengel 原始 Link：https://mesh3d.gallery/experiment/webgpu-tile-field
项目在线地址：https://lab.aengel.io/webgpu-tilefield

WebGPU Tile Field

一、项目简介（编译自原文）

该项目是一面由大量刚性金属瓦片组成的墙体，整体会跟随鼠标光标方向倾斜。它使用 WebGPU 与 Three.js TSL 构建，支持在五种不同的瓦片形状之间切换；当鼠标悬停时，表面会产生局部变形；点击则会从点击点向整个瓦片场发送一圈涟漪扩散。

原页面结构化描述：

A wall of rigid metal tiles that tilts to follow your cursor, built with WebGPU and Three.js TSL. Five tile shapes to switch between, hover deforms the surface and clicking sends a ripple across the field.

项目标签：WebGPU、Shader、Procedural。

WebGPU Currency

二、核心交互与技术栈

项目内容
渲染 APIWebGPU
着色层Three.js TSL（Three.js Shading Language）
主要交互光标跟踪倾斜、悬停变形、点击涟漪扩散
图形类型程序化金属瓦片场，支持 5 种瓦片形状切换
渲染特点大量瓦片组成，需高效处理每片瓦片的姿态变化

需要特别说明：原页面是 Next.js 服务端渲染后的 HTML，没有直接暴露 WGSL/GLSL 着色器源码，因此下文会从项目描述和技术栈出发，推断其核心实现与优化要点。

Magical Canopy

三、3 个核心优化要点

  1. GPU 实例化 + 着色器内程序化变形
    大量瓦片不可能每帧由 CPU 计算并上传矩阵。合理做法是使用 InstancedMesh 或类似实例化方案，将每片瓦片的旋转、位移等变换放在顶点着色器中，根据瓦片网格坐标与鼠标位置实时计算，避免 CPU 侧逐实例更新矩阵带来的带宽和计算瓶颈。

  2. 交互状态以 Uniform 传递，减少 JS 每帧开销
    鼠标悬停变形和点击涟漪的衰减参数（如点击时间、强度、传播半径）只需作为少量 uniform 或存储缓冲写入 GPU。着色器内部通过距离函数（如 smoothstep、指数衰减）将鼠标影响叠加到瓦片法线或偏移上，JavaScript 侧每帧仅更新少量标量，几乎零开销。

  3. 五种瓦片形状共享同一 TSL 材质，减少着色器变体与绘制调用
    五种瓦片形状不应对应五个独立材质。更优方案是在同一个 TSL 着色节点中传入“形状参数”，用程序化 SDF（有符号距离场）或 UV 重映射切换外形。这样既能减少着色器编译次数与 draw call，又能充分利用 WebGPU 的并行计算能力，保持高帧率。

WebGPU Ribbon Carousel

四、GLSL/WebGL 专业术语检查

原始页面并未出现直接的 GLSL 代码，相关术语使用正确，仍需注意以下几点：

  • WebGPU：下一代 Web 图形 API，着色语言为 WGSL，而不是 GLSL。不要将 WebGPU 着色器简单称为 GLSL。
  • Three.js TSL：即 Three.js Shading Language，是 Three.js 的节点式着色语言，可编译为 WGSL（用于 WebGPURenderer）或 GLSL（用于 WebGLRenderer）。中文语境建议保留缩写 TSL，并译为“Three.js 着色语言”。
  • Shader：着色器，英文保留更常见。
  • Procedural：程序化，指通过算法生成形状/纹理，而非依赖外部模型或贴图。
  • SDF（Signed Distance Field）：有符号距离场，常用于程序化形状定义与平滑过渡。
  • InstancedMesh / Instancing：实例化渲染，适合大量相似几何体。
  • Draw Call：绘制调用，越少越利于性能。

如果项目同时兼容 WebGL2，则对应着色器为 GLSL ES；但本项目明确基于 WebGPU，因此核心着色语言应为 WGSL，经由 TSL 抽象后生成。

WebGPU Blob

五、核心代码保留

原页面没有提供可读的 WGSL/GLSL 着色器源码。为了保留有价值的信息，以下是页面结构化数据中嵌入的核心元数据 JSON-LD（已格式化），可用于理解项目归属与描述：

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "WebGPU Tile Field",
  "description": "A wall of rigid metal tiles that tilts to follow your cursor, built with WebGPU and Three.js TSL. Five tile shapes to switch between, hover deforms the surface and clicking sends a ripple across the field.",
  "url": "https://mesh3d.gallery/website/webgpu-tile-field",
  "image": "https://cdn.mesh3d.gallery/previews/1787296337838-kxfbjxj-lab.aengel.io_webgpu-tilefield.webp",
  "datePublished": "2026-08-21T07:13:24.945294+00:00",
  "dateModified": "2026-08-21T07:13:25.134021+00:00",
  "mainEntity": {
    "@type": "WebSite",
    "name": "WebGPU Tile Field",
    "url": "https://lab.aengel.io/webgpu-tilefield",
    "description": "A wall of rigid metal tiles that tilts to follow your cursor, built with WebGPU and Three.js TSL. Five tile shapes to switch between, hover deforms the surface and clicking sends a ripple across the field."
  },
  "author": {
    "@type": "Person",
    "name": "aengel",
    "url": "https://lab.aengel.io/"
  },
  "keywords": "WebGPU, Shader, Procedural"
}

这段元数据完整保留了原作者、项目地址、核心描述与技术关键词，可作为项目溯源依据。

Balloon Text Simulation