WORKS
MOTION
PLEXUS BACKGROUND プレクサス背景
- Canvas 2D
- JavaScript
- 3D Math
OVERVIEW
プロジェクト概要
狙い
リファレンス映像にあった「左に偏ったパーティクル雲」を、 Canvas 2Dの自前透視投影だけで再現しました。
技術ポイント
WebGLを使わず、純粋なCanvas 2D APIで130点を3D座標で管理しています。 近接2点には線、近接3点には三角面を薄くフェードイン／アウトさせて浮遊感を出しました。
CRAFT
こだわった点
NO WEBGL
ライブラリ不使用・Canvas 2Dのみです。透視投影とZソートを自前で書くことで、 軽量で背景にそのまま流用できるサイズに収めました。
SHARDS
三角面の透明度を距離ベースで動的に変化させ、 「破片が漂う」ような独特の質感を表現しました。