Repolode
提交项目
Humpalumps

Humpalumps/Ultra-Water

基于 three.js（WebGL2）的实时海洋渲染器，包含 FFT 海浪、破碎浪、泡沫、焦散与水下效果。

在 GitHub 查看
Star
640
Fork
95
未关闭 Issue
0
最近提交
5天前

这是什么？

Ultra Water 是基于 three.js 和 WebGL2 的实时海洋渲染器，附带一个小岛演示场景。海浪由 Tessendorf 风格的 FFT 模拟生成，使用四级波段并包含表现细小涟漪的毛细波段。水面逐像素着色，包括 GGX 太阳高光、小岛的平面反射、折射以及 Beer-Lambert 吸收。

除开阔海面外，项目还实现了基于等程时间场的近岸破碎浪、波峰与泡沫纹理、海滩冲刷，以及物体入水时的涟漪。焦散通过将折射光投射到多个深度的平面上计算得到。相机位于水面以下时，会呈现水下视角、光束和海洋雪效果。

漂浮的箱子、桶、浮标和小船通过 GPU 读取水面高度来计算浮力与阻力，并拥有独立的阴影贴图。项目内置性能面板和基准测试，并针对手机和平板提供了更轻量的画质配置。

核心功能

  • 01基于 FFT 的四级海浪模拟，包含毛细涟漪。
  • 02近岸破碎浪，支持卷浪、波峰破裂与浅滩变形。
  • 03波峰白浪与花边泡沫，泡沫覆盖率随时间衰减。
  • 04焦散、水下斯涅尔窗与光束效果。
  • 05漂浮箱子、桶、浮标和小船的浮力模拟。
  • 06手机与平板专用画质配置，支持自动分辨率调整。

适用场景

  • 在 three.js 网页场景中加入逼真的海洋或湖面背景。
  • 学习 WebGL2 中 FFT 海洋着色、焦散与泡沫的实现方法。
  • 制作随波浪起伏的船只或漂浮物原型。
  • 在浏览器中测试 GPU 渲染性能。

快速上手

  1. 1

    安装依赖

    npm install
  2. 2

    启动开发服务器并打开终端输出的 localhost 地址

    npm run dev

使用前须知

  • 需要支持 WebGL2 的浏览器和性能较好的 GPU 才能保证流畅帧率。
  • 手机和平板的性能会随温度和设备变化，使用桌面设置时手机上可能掉帧。

标签

#three-js#webgl#graphics#water-simulation#fft#shaders#real-time-rendering#game-dev

常见问题

Ultra-Water 是什么？
基于 three.js（WebGL2）的实时海洋渲染器，包含 FFT 海浪、破碎浪、泡沫、焦散与水下效果。 Ultra Water 是基于 three.js 和 WebGL2 的实时海洋渲染器，附带一个小岛演示场景。海浪由 Tessendorf 风格的 FFT 模拟生成，使用四级波段并包含表现细小涟漪的毛细波段。水面逐像素着色，包括 GGX 太阳高光、小岛的平面反射、折射以及 Beer-Lambert 吸收。
Ultra-Water 可以免费使用吗？用的什么许可证？
Ultra-Water 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
Ultra-Water 还在维护吗？
活跃维护中。Ultra-Water 最近一次提交是在 2026年11月2日。
Ultra-Water 适合用来做什么？
在 three.js 网页场景中加入逼真的海洋或湖面背景。 学习 WebGL2 中 FFT 海洋着色、焦散与泡沫的实现方法。 制作随波浪起伏的船只或漂浮物原型。 在浏览器中测试 GPU 渲染性能。
Ultra-Water 怎么安装和运行？
安装依赖: npm install 启动开发服务器并打开终端输出的 localhost 地址: npm run dev
在哪里获取 Ultra-Water？
源代码和安装说明在 GitHub 上：https://github.com/Humpalumps/Ultra-Water

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目