WORKS
MOTION
RIPPLE GRID リップルグリッド
- Three.js
- WebGL
- InstancedMesh
- Value Noise
OVERVIEW
プロジェクト概要
狙い
正面から見た白いキューブの壁。中心で生まれたうねりが手前にせり出し、 リング状に広がって画面外へ抜け、また静かな壁に戻ります。 動画素材を一切使わず、コードだけでこの質感を出しました。
技術ポイント
Three.jsの InstancedMesh で約1,000個のキューブを1ドローコールで描画しています（16:9時）。
高さは中心からの距離ひとつで決まり、リングの先端速度・遅れ・
進むほど広がる包絡幅の3つだけで形を作っています。1.67秒で完全ループします。
CRAFT
こだわった点
SEAMLESS LOOP
振幅を exp(-(t/LIFE)^4) で落とし、ループが一周する前に完全にゼロへ着地させました。
継ぎ目は「平らな壁」と「平らな壁」の突き合わせになるので、
t=0 と t=LOOP のピクセルが一致します。
FAKE OCCLUSION
リアルタイムのシャドウマップだけではクレーターの底が明るいまま浮いてしまいます。 各キューブが上下左右へ5セル歩いて一番急な稜線を拾う擬似AOを足し、 数セル離れた縁が落とす広い陰りを作りました。