Humpalumps/Ultra-Water

これは何？

主な機能

• 01毛細波を含む、4つのカスケードにわたるFFTベースの海洋波。
• 02波の前傾を伴う突っ込み砕波、波頭の巻き込み、浅水変形。
• 03時間とともに覆域が侵食される、波頭の白波とレース状の泡。
• 04コースティクス、水中のスネルの窓、太陽光線。
• 05浮遊する木箱、樽、ブイ、ボートの浮力シミュレーション。
• 06解像度を自動調整するモバイル向けプロファイル。

ユースケース

• three.jsのWebシーンにリアルな海や湖の背景を追加する。
• WebGL2でのFFT海洋シェーディング、コースティクス、泡の表現手法を調べる。
• 波に反応するボートや浮遊物体のプロトタイプを作る。
• ブラウザー上でGPUレンダリング性能をベンチマークする。

クイックスタート

1. 1

   依存関係をインストールする

   npm install
2. 2

   開発サーバーを起動し、表示された localhost の URL を開く

   npm run dev

使う前に知っておきたいこと

• !スムーズなフレームレートで動作させるには、WebGL2 対応ブラウザーと十分な性能の GPU が必要です。
• !スマートフォンやタブレットでのパフォーマンスは、温度や端末によって異なります。また、デスクトップ向けの設定ではスマートフォンでフレーム落ちすることがあります。

トピック

よくある質問

Ultra-Water とは？

FFT波、砕波、泡、コースティクス、水中ビュー、浮遊物体に対応したthree.js（WebGL2）向けリアルタイム海洋レンダラー。 Ultra Waterは、three.jsとWebGL2をベースにしたリアルタイム海洋レンダラーで、デモ用の島のシーンが付属します。波はTessendorf方式のFFTシミュレーションで4つのカスケードにわたって生成され、小さなさざ波には毛細波帯を使います。水面はピクセル単位でシェーディングされ、GGX方式の太陽光スペキュラー、島の平面反射、屈折、Beer-Lambert吸収を表現します。

Ultra-Water は無料で使えますか？ライセンスは？

Ultra-Water は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

Ultra-Water は今もメンテナンスされていますか？

活発にメンテナンス中。Ultra-Water の最終コミットは 2026年11月2日 です。

Ultra-Water は何に使えますか？

three.jsのWebシーンにリアルな海や湖の背景を追加する。 WebGL2でのFFT海洋シェーディング、コースティクス、泡の表現手法を調べる。 波に反応するボートや浮遊物体のプロトタイプを作る。 ブラウザー上でGPUレンダリング性能をベンチマークする。

Ultra-Water のインストール方法は？

依存関係をインストールする: npm install 開発サーバーを起動し、表示された localhost の URL を開く: npm run dev

Ultra-Water はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Humpalumps/Ultra-Water