Procedural Terrains0.11.0

Procedural Terrains 详解

作者/开发者：ZyFou
核心亮点：完全 GPU 驱动的开源程序化地形生成器，三种世界模式自由切换，支持高度/生态笔刷绘制、体积云、真实水面与 GLB 导出

Procedural Terrains 是由开发者 ZyFou 创建并开源在 GitHub 上的基于浏览器的程序化地形生成器与编辑器。该项目采用 React + Vite + Three.js (WebGL2) 技术栈构建，所有地形高度、法线和生态颜色均在 GPU 端实时计算——无需预烘焙的 CPU 高度图即可驱动实时预览。项目提供三种可自由切换的世界模式（Tile 瓦片模式、Infinite World 无限世界模式、Planet 星球模式），覆盖从固定场景编辑到无限探索和程序化行星生成的完整地形创作需求。项目采用 MIT 开源协议，目前已有 276 Stars 和 37 Forks，并可通过 terrains.zyfod.dev 直接在线体验。

一、资源概述

二、作者/开发者介绍

ZyFou 是一名专注于 WebGL 和程序化生成技术的独立开发者。Procedural Terrains 是其主力开源项目，展现了深厚的图形编程、着色器开发和 Web 三维应用架构能力。项目代码质量高，架构清晰——WebGL 引擎层完全框架无关（位于 src/engine/），UI 层使用 React 实现，两者通过 Engine 方法与回调对象通信，体现了良好的软件工程实践。项目持续活跃维护，近期仍在推进性能优化与新功能迭代。

三、资源核心内容

Procedural Terrains 的核心理念是“在浏览器中实现专业级程序化地形创作全流程”。与传统依赖预烘焙高度图的工具不同，该项目所有地形生成完全在 GPU 着色器中完成，通过可序列化的分层噪声栈实现无限变化的地形形态。三种世界模式覆盖不同使用场景：Tile 模式适合精细编辑和导出、Infinite World 模式适合开放世界探索、Planet 模式适合天体级场景创作。

四、详细内容分阶段/分模块

模式 1：Tile（瓦片模式）

• 固定地形板编辑：基于 per-chunk LOD 的固定尺寸地形板，最适合精细绘制和多瓦片布局
• 多瓦片装配：在网格上放置多个瓦片以构建更大规模地形，支持合并导出或逐瓦片导出
• 方形/圆形布局：圆形模式将地形裁剪为圆盘，支持环状扩展，并渲染跟随地形轮廓的径向墙体
• 绘制模式：笔刷绘制高度、河流、生态群落和程序化植被道具
• 真实世界高程数据导入：导入基于地理位置的真实高程数据进行预览、替换或混合
• 近景细节层：在 Tile 模式下为相机附近区域添加额外的表面细节

模式 2：Infinite World（无限世界模式）

• 流式区块网格：围绕相机动态流式加载地形区块，实现真正的无限探索体验
• FPS 行走与飞行探索：支持 Walk（第一人称行走）和 Plane（飞行穿越）两种探索模式
• 三角形预算控制：可配置的网格预算上限，确保不同性能设备上的流畅运行
• 相机后方裁剪：智能剔除相机视野后方不可见区块，优化渲染性能

模式 3：Planet（星球模式）

• Cube-Sphere 程序化星球：基于六面体投影的球面地形生成，支持完整的行星尺度场景
• 大气层渲染：物理感的大气散射效果
• 体积云系统：基于 PlanetCloudChunks 的体积云渲染
• 轨道相机控制：专用的 PlanetOrbitControls 实现环绕行星的流畅观测
• 立方体贴图高度烘焙导出：专用星球导出器，支持立方体贴图格式的高度数据导出

模块 4：噪声与地形生成系统

• 确定性生成：地形是世界坐标 XZ、种子和参数的纯函数，种子通过 mulberry32 PRNG 驱动域偏移，从不使用 Math.random()
• 分层噪声栈：可堆叠的多种噪声层（叠加 add、雕刻 carve、替换 replace 等），序列化后编译为 GLSL 着色器代码
• 无裂缝技术：区块几何体在顶点着色器中携带裙摆环（skirt rings），确保不同 LOD 的相邻区块永不出现裂缝
• 实时编辑：大多数滑块直接映射到着色器 uniform，仅区块数量/尺寸、瓦片布局、星球半径等少量结构参数会触发几何体重建
• 相机不塑造地形：LOD 是视角相关的，高度场本身不受相机位置影响

模块 5：水面与天空系统

• 真实水面材质：具有焦散效果的真实感水面渲染（RealisticWaterMaterial），近期版本强化了焦散表现
• 水下效果：完整的 UnderwaterEffect 水下视觉处理
• 程序化天空：ProceduralSky 实现动态天空渲染
• 体积云层：CloudSlabLayer 体积云实现，近期优化了云性能表现
• 时间系统：TimeOfDay 支持动态昼夜变化与光照调节

模块 6：导出功能

• 截图导出：PNG 格式当前视口截图
• 高度图烘焙：正交投影灰度高度图烘焙
• 完整导出（ZIP）：包含地形网格（GLB/GLTF 或 OBJ，可配置分辨率/裙摆/基底）、烘焙颜色/法线/高度纹理、生态 splat 贴图、碰撞网格、水面网格、水遮罩（深度/ shoreline/泡沫）和预设 JSON

五、涉及软件与工具

六、配套资源

该项目作为开源项目，提供以下配套内容：

• 完整源代码：GitHub 仓库提供完整的 JavaScript 源代码，共 134+ 次提交记录
• 在线演示站点：terrains.zyfod.dev 可直接在浏览器中体验全部功能
• 开发文档：README 中详细的架构说明、文件组织、快捷键列表和性能优化建议
• MIT 开源协议：允许自由使用、修改和商业应用
• 性能面板：内置 GPU 层级检测、质量预设、LOD 预算和渲染器选项，适配不同性能设备

七、前置要求

使用 Procedural Terrains 前，请确保满足以下条件：

• 现代浏览器并支持 WebGL2
• 安装 Node.js 和 npm 以进行本地开发
• 具备 React 和 JavaScript 基础（用于二次开发或自定义）
• 了解基础 Three.js 和 GLSL 着色器 概念将有助于深入定制
• 推荐配备独立显卡的设备以获得最佳性能体验

八、适用人群

• Web 开发者 / 技术美术：希望学习或集成 GPU 驱动程序化地形生成到自己的 Web 应用或游戏中的开发者
• 程序化生成爱好者：对噪声算法、地形生成、行星渲染等技术感兴趣的学习者和研究者
• 独立游戏开发者：需要快速原型化地形系统或导出地形资产用于游戏项目的独立开发者
• Three.js 学习者：希望深入学习 Three.js 高级用法、自定义着色器和引擎架构的进阶学习者
• 开源社区贡献者：项目持续活跃维护，欢迎提交 Issue 和 Pull Request