THREE.JS · 手を動かす実習 01

平面から、海をつくる。

シェーダーは、GPU で動く小さなプログラムです。まず頂点を動かす。次に、表面が光をどう受けるかを決めます。

同じメッシュを、3つの段階で

GLSL / WebGL 2

ローカルの描画を準備しています…

描画エラーの詳細

t = 0.00 s

最初は停止しています。1コマずつ進めると、連続して動かさずに観察できます。

予測 → 変更 → 観察

段階 02 または 03 を選び、t = 2 秒の基準を記録します。予測を書き、スライダーをひとつ変えて、同じ時刻で比べましょう。

2. 何が変わると予想しますか？

4. 何が変わり、何が変わりませんでしたか？

メモはこのページのメモリ内だけにあります。リセット・再読み込みすると消えます。

01 / GEOMETRY

ジオメトリは点と三角形の集まりです。分割数を増やすと波の形が滑らかになります。シェーダーが頂点を増やすわけではありません。

02 / VERTEX SHADER

頂点シェーダーは x・z・時間から高さを計算します。uniform は、JavaScript から1回の描画全体へ渡す共通の値です。

y = A · sin(k · x − s · t)

03 / FRAGMENT SHADER

フラグメントシェーダーは、面の向き・光・見る方向から色を計算します。白い波頭は色のマスクで、泡のシミュレーションではありません。

これは小さな手続き型の波と、光の近似です。海の物理、砕ける波、浮力、物理ベースの描画を解いてはいません。