
EDOLUS
Three.jsではなくPlayCanvasで組まれたAIインフラの巡回体験。軌道上の衛星からデータセンターまでを一続きで辿る。
- サイトURL
- https://edolus.com/
- クレジット
- Yann Trevelot(Vertex3D)
- 使用技術
- PlayCanvasWebGL2GLSLGSAPサウンドデザイン
EDOLUS は AI インフラをテーマにしたシネマティックな WebGL 体験サイト。軌道上の衛星、惑星規模のネットワーク、都市、そしてデータセンターへと、AIを支える物理基盤を上空から地上へ辿っていく構成です。制作は香港拠点の Vertex3D、作者は Yann Trevelot。GSAP の Site of the Week、FWA、CSS Winner の Site of the Day(8.0/10、2026年7月29日)を獲得しています。
エンジンは Three.js ではなく PlayCanvas。WebGL 2 を使い WebGL 1 へのフォールバックを持ち、powerPreference には high-performance を指定しています。ソーラーパネル付きの衛星モデル、テクニカルなオーバーレイ、発光するデータストリームは、カスタムの GLSL 頂点シェーダとフラグメントシェーダで描かれます。映像に連動して変化するサウンドが最初から設計に組み込まれている点も特徴です。
【参考になるポイント】
・Awwwards の3Dカテゴリでは Three.js が大半を占めるなか、PlayCanvas を選んでいる数少ない事例
・WebGL 2 を前提にしつつ WebGL 1 のフォールバックを残す構成。powerPreference: high-performance を明示している
・インフラの図解ではなく巡回できる空間に置き換える、という設計方針を作者自身が掲げている
・作者は PlayCanvas 公式フォーラムに本作を投稿しており、エンジンの選択は本人の申告による
・※サムネイルは Awwwards の投稿画像を使用
