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
三角面の透明度を距離ベースで動的に変化させ、 「破片が漂う」ような独特の質感を表現。