Noniv/abyssal-garden

项目介绍

Abyssal Garden 是一个能直接在浏览器里探索的水下场景：摇曳的海带林、水面透下的光束、沉船、岩石拱门、魔鬼鱼和一处分紫色洞窟，全部由代码生成，没有图片、3D 模型或音频文件。整个体验装在一个 96 KB 的 HTML 文件里，直接使用 WebGPU 绘制，不依赖游戏引擎或 3D 库；声音由 Web Audio API 实时合成。它适合想快速体验一段氛围场景的读者，也适合研究原生 WebGPU 程序化渲染的开发者。

快速使用

1. 下载 index.html。
2. 在桌面版 Chrome 或 Edge 中打开，等待几秒让世界生成完成。
3. 点击 Dive in 进入，鼠标控制视角，W A S D 游动，E/Q 上下移动，按住 Shift 加速。数字键 1–6 跳到六个截图视角，Esc 打开菜单，M 开关声音，H 显示性能数据。

也可以访问在线页面直接体验。触屏操作已支持但标注为实验性：单指按住向前游并滑动转向，第二指按下加速。

细节等级与兼容性

场景需要 WebGPU，如果页面提示 "This scene needs WebGPU"，需要更新浏览器或改用 Chrome / Edge。菜单中可选 Low、Medium、High 三档画质：首次访问时电脑默认 High，8 GB 内存手机默认 Medium，其余设备默认 Low；若加载导致标签页崩溃，页面会降一档重试，并在浏览器中记住所选等级与分辨率。较慢硬件上，场景会先降低分辨率、再缩短绘制距离，目标维持 60 fps。作者给出的参考是 RTX 5070 Ti 在 2560×1440 下约 180 fps，Samsung Galaxy A16 在 Low 档 670×372 下约 20 fps。

修改与构建

可读源码位于 source 目录。修改世界并重新构建 index.html 需要 Node.js 18 或更高版本：

cd source
npm install
npm run build

构建会在 README 旁生成新的 index.html；npm run build:readable 生成未压缩版本便于在开发者工具中调试，npm run build:dev 生成单独的 dev.html，其中 F 键沿一分钟路径飞行穿越整个场景，B 键运行该飞行并报告帧与 GPU 耗时。世界布局是推荐的入手点，shaders 负责水色、雾和光照等观感，main.js 包含渲染器、相机与操作。容易上手的修改包括 WCOL 与 PCOL 水色、SUNC 阳光颜色、EXPO 与 RAYS 亮度与光束，以及 26 : 7 附近的游动速度。

代码以 MIT 许可证发布，可用于自己的项目并自由修改和分享。

HotRepo 点评

该项目于 2026-11-14 出现在 JavaScript 新项目榜单上，在约一小时的统计窗口内增加 58 个 Star 和 9 个 Fork。这只是单个短窗口的记录，不足以说明趋势，也没有全部语言日榜名次。技术上值得关注的是交付形态本身：一个完整的程序化 WebGPU 场景被压进单个 HTML 文件，构建流程还能输出可读版本或带调试工具的版本。读者应把帧率数字视为作者在特定硬件上的说明，而不是独立实测结果。