海を部品ごとに組み立てる

大きな波、小さな波、反射、泡、奥行き

読む目安：約8分。教材としての制作提案です。生成・性能・料金の比較実験は実行していません。

この章で身につけること

• 海の見た目を別々の要素へ分解する
• 美しさと物理的正しさを区別する
• Webの負荷と画面の用途を両立する

必要な入力をそろえてから効果を足す

1. 1位置と時間
2. 2波の高さ
3. 3変形した水面
4. 4対応する法線
5. 5光と色

1. 1水面と岸の深さ
2. 2接触条件
3. 3泡のマスク
4. 4泡の見え方

自作の依存関係図です。波の経路と岸との接触の経路を分けています。反射、屈折、泡にはそれぞれ入力が必要です。付属の入門実習は波と近似照明を扱い、それら全てを実装してはいません。

仕事の役割

• リアルタイムVFX担当：水や泡などの動的効果
• グラフィックスエンジニア：描画と性能
• Webデザイナー：読みやすさと視線の誘導

入力

• 海を使う目的と画面
• 対象端末と性能目標
• 波の振幅・波長・速度
• 反射や泡を必要とする範囲

制作工程

1. 単色の平面とカメラを表示する
2. 頂点を単一の波で変形する
3. 複数波と法線を整える
4. 色、反射、微細な波を一つずつ足す
5. 必要なら岸と泡を追加する
6. 画面UIと同時に実端末で測定する

出力

• 操作できる海のシーン
• 設定値と段階別比較
• 性能記録と静止画フォールバック

海の一枚絵を五つに分ける

大きなうねりは形、小さなさざ波は法線、空や太陽の映り込みは反射、水中が歪んで見える表現は屈折、岸や波の頂点の白さは泡として分けます。どれも一度に実装すると、問題がどの要素にあるか分からなくなります。最初は単色の平面から始めます。

一つの波を理解する

教育用の最小モデルは、位置と時間を使ったsinの波です。高さは振幅、山の間隔は波長、進む速さは速度で変えられます。異なる向きの波を少数重ねると一方向のカーテン状の動きが減ります。これは見え方を学ぶための簡略モデルで、流体シミュレーションや正確な海洋現象の再現ではありません。

反射を増やす前に法線を確かめる

頂点を動かしても照明に使う法線が元の平面のままだと、形と光の関係がちぐはぐになります。法線の可視化を用意し、変形に対応しているかを先に見ます。海岸の泡を「浅い所で白くする」と近似するなら、水面と岸の深さ関係などの追加情報が必要です。白いノイズを載せただけでは岸との接触を表せません。

LPの海に必要な品質

背景の海が主役の文章やボタンを読みにくくしては目的を果たせません。停止操作、動きを減らす設定、静止画への切り替えを設けます。描画解像度、メッシュ分割、反射用描画、影、後処理は負荷へ影響するので、実端末で一つずつ測ります。パソコンで滑らかに見えるだけではモバイル対応の証拠になりません。

品質チェック

• 停止しても一枚の絵として成立
• 法線と形の動きが一致
• 文字と操作部が読める
• カメラ変更で継ぎ目や端が露出しない
• 端末・解像度・測定時間を記録

失敗を切り分ける

症状	原因	次にすること
水がゼリーに見える	振幅と速度が用途に対して大きすぎる	大きな波と微細な波を分け、基準スケールから調整する
泡が空中に浮く	岸や水面との関係が定義されていない	深さ、座標、接触条件を可視化して確認する
スマホで重い	高解像度や追加描画が負荷を増やす	解像度や反射などを一項目ずつ下げて測り、静止画出口を用意する

実験課題：三段階の海

状態：未実行（not-run）。実測結果ではなく、これから取り組む課題です。

課題：平面→波→反射ありの3状態を切り替えるデモを設計する。各状態で見た目とフレーム時間を分けて記録する。

成果物：海の段階比較と測定表

完了条件：どの追加要素が何を良くし、何を重くしたか実測または未実測で示す

関連するCatalog候補と実践

先に読む章：シェーダーと見え方の仕組み

• 波が動く海のヒーロー背景 (Catalog候補: three-ocean-hero)
• 浅瀬と泡のある海岸シェーダー (Catalog候補: three-shore-foam)
• 反射と屈折のある透明な水面 (Catalog候補: three-water-refraction)
• 水中の光と浮遊粒子 (Catalog候補: three-underwater)

ブラウザ内で動く海のシェーダー実習は、ローカル配布のThree.js 0.186.1とWebGLRendererを使い、モデルAPIを呼び出しません。平面、頂点の波、近似した光と色の三段階を扱います。物理的な海洋シミュレーション、実際の反射・屈折、岸の泡は実装していません。開いただけでは比較課題の完了にも、別端末の性能確認にもなりません。

海のシェーダー実習を開く

原本のWebGL水面デモも利用できます。振幅と速度を変え、格子を表示し、動きを止めて、実際に行った観察を記録として書き出せます。水面の近似を学ぶデモなので、端末の性能やモデル比較は別に測定します。

WebGLの水面デモを開く

実験記録表で計画と証拠を残す

実験ノートを開く

一次資料

• Three.js ShaderMaterial — 確認日: 2026-10-03
• Three.js Water — 確認日: 2026-10-03
• MDN Lighting in WebGL — 確認日: 2026-10-03
• MDN requestAnimationFrame — 確認日: 2026-10-03

2026-10-04に確認した出典の範囲

Three.js Water はWebGLRenderer向けの平面の反射表現で、WebGPURenderer向けにはWaterMeshが案内されています。名前だけで流体シミュレーションや、この章の岸の課題まで実装済みとは判断しません。

リンク先の海の実習は独立した実践素材です。後で測るときは版、端末、実際の段階名を記録します。この章の課題と総合制作課題は未実行のままです。