ギャラリーへ戻る

3Dモーショングラフィック

コードで描く、三次元。

暗闇に浮かぶ光の球体が512個の立方体に砕け、螺旋・格子・波・結び目・渦へと隊形を変えながら、最後に立体の「3D」へ組み上がる抽象3Dモーショングラフィック。Three.js の InstancedMesh と金属・ガラスのマテリアル、ブルームを使い、全フレームをタイムラインの時刻だけから計算してシーク可能にした。隊形の切り替えは BGM の小節頭と強拍に合わせている。

使った技法

  • Three.js(WebGL)を時刻から決定的に描画
  • InstancedMesh で512個の立方体を制御
  • 隊形モーフ(螺旋・格子・波・トーラスノット・渦・ボクセル文字)
  • シード付き乱数と時差(スタッガー)
  • 金属・ガラス(透過)マテリアルと縁の発光シェーダー
  • ブルーム・フォグ・リムライト
  • カメラの一周オービット
  • BGMの拍に合わせた切り替え
  • HTMLの日本語タイトルを重ねる