スピードボートで、手続き的に生成された海をどこまでも走る。
ブラウザだけで動くインタラクティブな3D海洋ワールドです。Gerstner 波で生成した海面を、自作の軽量な挙動制御で動くスピードボートが駆け抜けます。物理エンジンは使っていません。チャンネルマーカーを順に抜けるタイムアタックと、海に浮かぶブイ集めが遊べます。
| 操作 | 動作 |
|---|---|
W / ↑ |
前進（スロットル） |
S / ↓ |
後進・減速 |
A D / ← → |
操舵（左右） |
Space |
ブースト🔥 |
R |
リセット |
モバイルは画面下の方向ボタン＋🔥ボタンで操作できます。光るゲートを順に抜けると 1 周のタイムが計測されます。
- 手続き的な Gerstner 波の海 — 数本の波の重ね合わせで海面を生成。同じ波パラメータを GPU の頂点シェーダーと CPU のサンプラーで共有しているので、船は「描かれている水面」に正確に乗ります。
- 物理エンジン不使用 — 船の前進・操舵・浮き・波への傾き・旋回時のバンクはすべて自作の軽量アーケード制御。バンドルが軽い（gzip 約 146KB）。
- 航跡トレイル — 船尾から伸びる泡のリボンを、頂点を毎フレーム更新して描画。速度に応じて広がり、フェードします。
- タイムアタック — 赤緑のチャンネルマーカー 6 ゲートを順に周回。ベストラップは
localStorageに保存。 - ブイ集め＋クリア演出 — 海に浮かぶ 24 個のブイを全部集めるとインスタンス描画の紙吹雪。
- 低ポリの世界 — 灯台のある島、ヤシの木、遠景の岩礁、空のグラデーションと水面に映る太陽のグリッター。
| カテゴリ | 技術 |
|---|---|
| 3D | Three.js (r0.184) |
| 海面 | Gerstner 波 GLSL 頂点シェーダー ＋ CPU 高さ/法線サンプラー（共有パラメータ） |
| 演出 | カスタム GLSL（空グラデ＋太陽ディスク、フレネル水面、太陽グリッター、航跡リボン） |
| 物理 | 自作アーケード制御（物理エンジンなし） |
| ビルド | Vite |
| ホスティング | nginx 静的配信 ＋ Let's Encrypt |
wake/
├── index.html
├── src/
│ ├── main.js # シーン統合・入力・チェイスカメラ・HUD
│ ├── water.js # Gerstner 波の海面（GPU頂点シェーダー＋CPUサンプラー）
│ ├── boat.js # アーケード船操作＋航跡トレイル
│ ├── world.js # 島・灯台・ブイ・チャンネルマーカーのゲート
│ ├── race.js # タイムアタック（周回・ベストラップ）
│ ├── fx.js # 紙吹雪
│ └── style.css
├── docs/ # スクリーンショット
├── vite.config.js
└── package.json
# 依存をインストール
npm install
# 開発サーバを起動（http://localhost:5173）
npm run dev
# dist/ に本番ビルド
npm run build
このプロジェクトは MIT ライセンス のもとで公開しています。
© 2026 masafykun (https://github.com/masafykun)