用 WebGPU 把 FFT 海浪、大气散射、程序化树做进了浏览器

NervLand Adventures 是开发者 roche-emmanuel 的 WebGPU 图形编程实验集，包含程序化树生成、预计算大气散射、FFT 海浪渲染和若干 GPU 计算实验，每个项目都配有在线可运行的 Demo 和 YouTube 视频教程系列。

需要先说清楚一件事：仓库里大部分代码依赖作者私有的 NervLand 引擎，克隆下来无法直接构建和运行。这个仓库的价值主要在两个地方——一是在线 Demo，任何人都可以直接打开体验；二是 WGSL 着色器和算法实现，可以作为参考代码。唯一可以独立构建的是实验 003，一个不依赖私有引擎的跨平台 WebGPU 框架示例。

NervForge：浏览器里的程序化 3D 树生成

NervForge 是其中最完整、最可以直接上手的工具，在浏览器里运行，不需要安装任何东西。

它用程序化方法生成 3D 树模型，从主干到多级分支，控制参数包括：每级分支的密度和分布、枝条的弯曲度（gnarliness）、叶片纹理和颜色、吸引/排斥点控制自然分布。调整完成后可以直接导出为 glTF/GLB 格式，在 Blender、Three.js 或任何支持 glTF 的工具里使用。

内置了枫树、柳树等几个预设配置，柳树配置附带了一套完整的叶片渲染方法——通过捕捉树冠某一角度生成自定义叶片纹理，再用 U/V 细分和弯曲参数实现叶片自然下垂的效果。配置可以保存为 JSON 文件，管理自己的树模型库。

技术上，NervForge 用 Emscripten 编译成 WASM 在浏览器里运行，底层是 C++ 实现的生成逻辑配合 WebGPU 渲染管线。教程系列有 7 集，从基本操作到 glTF 实现细节都有覆盖，包括一集专门讲如何用 Emscripten 源码映射在浏览器开发者工具里调试 C++ 代码。

在线地址：https://nervtech.org/nervforge/ (opens in a new tab)

TerrainView 系列：大气散射与 FFT 海浪

TerrainView7：预计算大气散射

大气散射（Atmospheric Scattering）是模拟光线穿过大气层时发生散射的物理过程，正确实现后天空颜色会随太阳位置变化——日出时偏红橙、正午偏蓝、日落时大面积暖色。TerrainView7 用预计算方式实现这套效果，避免了实时计算的开销，配合昼夜循环和地形 LOD 系统。

需要 WebGPU 支持（Chrome 113+ 或 Edge 113+ 默认开启）。

在线 Demo：https://nervtech.org/terrainview7 (opens in a new tab)

TerrainView8：FFT 海浪渲染

TerrainView8 基于 Eric Bruneton 的海浪渲染研究论文实现，是这个仓库技术含量最密集的部分。

FFT 海浪的核心思路：真实海浪可以看作大量不同频率、方向和振幅的正弦波叠加。用 Elfouhaily 波谱模型生成海浪频谱（描述各频率的能量分布），再用 FFT（快速傅里叶变换）把频域数据转成时域的波形高度场，每一帧更新一次，得到随时间变化的波面。这整套计算在 WebGPU Compute Shader 里完成。

除波形之外，还实现了：波峰和近岸的泡沫动态渲染、Beer-Lambert 定律模拟水下光衰减（深水区看不到海底，浅水区透明）、风向和波浪参数可调。

在线 Demo：https://nervtech.org/terrainview8 (opens in a new tab)

GPU 计算实验

仓库里还有几个专门研究 WebGPU Compute Shader 性能的实验，每个都配有教程视频：

• 实验 001：GPU 并行归约（Reduction Algorithm）——多种 WGSL 变体对比，含带宽监测和性能分析
• 实验 002：并行前缀和（Prefix Sum）——在归约基础上实现 scan 算法
• 实验 003：跨平台 WebGPU 框架——唯一不依赖私有引擎、可以独立构建的实验，同一套代码编译成原生应用和 WASM
• 实验 004：FFmpeg 视频播放——用 DirectX 11 硬件解码视频，通过 Dawn 的 Shared Texture API 传给 WebGPU 渲染，仅 Windows
• 实验 005：Voronoi 纹理生成——用 Compute Shader 程序化生成 Voronoi 图，从基础实现逐步优化，配有文字教程

如何访问和使用

直接使用在线 Demo（无需任何安装）

参考代码

克隆仓库查看 WGSL 着色器和算法实现：

git clone https://github.com/roche-emmanuel/nervland_adventures.git

实验代码在 experiments/ 目录下，着色器文件为 .wgsl 后缀。大部分 C++ 代码依赖私有引擎无法运行，但计算着色器的逻辑可以独立阅读和参考。

独立构建（仅实验 003）

实验 003 没有私有引擎依赖，可以独立构建。需要安装 CMake、C++ 编译器和 Emscripten 工具链（用于编译 WASM）。

写在最后

NervLand Adventures 定位是作者的图形编程实验记录，不是面向最终用户的工具库。对于 Web 3D 开发者，实际价值集中在两处：TerrainView8 的 FFT 海浪和 TerrainView7 的大气散射 WGSL 实现，这两个是浏览器端实现物理海浪和天空效果的参考代码，同类开源实现并不多；NervForge 则是一个可以直接使用的工具，如果你的项目需要大量不同形态的树模型，它能跳过从头建模的过程，直接导出用于 Three.js 或其他引擎的 glTF 文件。

代码本身因为依赖私有引擎，直接复用的可行性有限，更适合作为算法思路的参考而不是即插即用的模块。

GitHub 地址：https://github.com/roche-emmanuel/nervland_adventures (opens in a new tab)