ABYSSAL 

ABYSSAL 是一个令人惊叹的 Web 图形学项目，它完全通过数学算法在浏览器中实时生成电影级的海洋与极端天气场景。整个项目仅由约 400 KB 的 JavaScript 和 GLSL 代码组成，仓库中没有任何纹理、网格模型、HDRI 环境贴图或音频文件。每一道波浪、每一朵云、每一滴雨和每一道闪电，都是在 GPU 上于加载时或逐帧通过程序化生成的。

核心亮点：纯数学构建的视觉奇观

1. 物理真实的海洋模拟

• 多级联 FFT 波浪：基于 JONSWAP 频谱，通过 GPU 上的蝶形 IFFT 实时计算涌浪、风浪和涟漪的演化，具有精确的方向扩散。
• 动态泡沫系统：根据表面雅可比矩阵和波浪陡度随时间积累和消退，确保白浪只在海水实际破碎的地方生成，而非简单的贴图叠加。
• 屏幕空间投影网格：保持三角形密度在屏幕空间中均匀，并通过视射线步进与二分相交处理地平线，使海啸墙等巨浪能够正确细分而不撕裂。
• 基于物理的水面着色：包含 GGX 高光、菲涅尔效应、次表面散射（逆光波峰透射）、深度衰减水体颜色及各向异性足迹驱动的粗糙度。

2. 沉浸式的大气与天空

• 预计算大气散射 LUT：采用 Bruneton / Hillaire 风格，确保海洋、云层和水雾在低角度阳光下同步泛红，实现光照一致性。
• 体积云光线步进：基于程序化 Perlin-Worley 体积，由天气图塑造出跨越数十公里的云团簇，涵盖层状云、积云及带有砧状云顶的积雨云。
• 动态云影：水面上的移动云影直接从同一天气图中采样，增强真实感。

3. 极端的天气与灾害

• 多样化灾害：支持暴雨、风驱水雾、带分支几何体的体积闪电、水龙卷（带凝缩漏斗）、漩涡、飓风（带风眼和眼壁）、巨浪及具有不对称浅化剖面的海啸。
• 物理交互：所有灾害都会实时变形实际水面，产生真实的物理反馈。

4. 电影级渲染管线

• 后期处理全套：时间抗锯齿（TAA）、EV100 自动曝光、泛光、景深、运动模糊、AgX/ACES 色调映射、对比度自适应锐化、色差、胶片颗粒和暗角。
• 自适应质量：运行时根据帧预算自动调整渲染质量，确保流畅体验。

两种体验模式

1. 自动电影序列：自行播放一个完整的风暴周期，按幕编排，展示从平静到极端天气的全过程。
2. 沙盒模式：用户可自由控制摄像机视角，并在注视位置触发各种自然灾害。

快速开始

在线体验

直接访问项目的在线构建版本，无需安装即可体验。

本地运行

需要 Node.js 20.19+ 或 22.12+。

git clone https://github.com/Token-Gremlin/natural-disasters.git
cd natural-disasters
npm install
npm run dev

打开浏览器访问 http://localhost:5173。

静态部署

npm run build     # 输出到 dist/
npm run preview   # 本地预览

dist/ 目录下的文件无任何运行时依赖，可托管在任何静态服务器上。

🕹️ 沙盒模式控件

触发事件 (在摄像机注视位置生成)

此外，沙盒面板还提供环境预设（晴天、暴风、夜间风暴等）及实时滑块，用于微调太阳角度、云层、风力、波浪等参数。