WORKS
MOTION
RIPPLE GRID リップルグリッド
- Three.js
- WebGL
- InstancedMesh
- GLSL
OVERVIEW
プロジェクト概要
狙い
64×38 = 2,432個のキューブを真上から俯瞰し、 中心から放射状に広がるリップル（さざ波）を、ループの継ぎ目が見えないように設計する。
技術ポイント
Three.jsの InstancedMesh で2,432個のキューブを1ドローコールで描画。
半周期ずらした2本のパルスをガウシアン包絡で交互に放出し、
4.8秒で完全ループする「途切れない波」を実現。
CRAFT
こだわった点
SEAMLESS LOOP
パルスが画面外に出る前に次のパルスが生まれるよう PULSE_SPEED と LOOP_PERIOD をチューニング。
フィールドが必ず元の状態に戻る数学的なループにした。
EDGE FADE
リップルが画面端で唐突に切れないよう、距離に応じて振幅を減衰させる FADE_LENGTH を導入。
中央のうねりがフチに溶けていく余韻を作った。