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を足し、 数セル離れた縁が落とす広い陰りを作った。