3Dモーショングラフィック
コードで描く、三次元。
暗闇に浮かぶ光の球体が512個の立方体に砕け、螺旋・格子・波・結び目・渦へと隊形を変えながら、最後に立体の「3D」へ組み上がる抽象3Dモーショングラフィック。Three.js の InstancedMesh と金属・ガラスのマテリアル、ブルームを使い、全フレームをタイムラインの時刻だけから計算してシーク可能にした。隊形の切り替えは BGM の小節頭と強拍に合わせている。
使った技法
- Three.js(WebGL)を時刻から決定的に描画
- InstancedMesh で512個の立方体を制御
- 隊形モーフ(螺旋・格子・波・トーラスノット・渦・ボクセル文字)
- シード付き乱数と時差(スタッガー)
- 金属・ガラス(透過)マテリアルと縁の発光シェーダー
- ブルーム・フォグ・リムライト
- カメラの一周オービット
- BGMの拍に合わせた切り替え
- HTMLの日本語タイトルを重ねる