Active Theory
body の中身が noscript だけ。UIもテキストもレイアウトも自社製3Dエンジンで描画する、極端なフルWebGLサイト。
- サイトURL
- https://activetheory.net
- クレジット
- Active Theory
- 使用技術
- WebGL自社製3Dエンジン HydraGLSLWebXRMSDFテキスト
2012年設立のクリエイティブテクノロジースタジオ Active Theory のポートフォリオ。現在は v6 で、Awwwards では2024年2月にSite of the Dayを受賞しています。
このサイトが特異なのは、DOMの上にキャンバスを乗せているのではないという点。配信されるHTMLの <body> の中身は <noscript> の警告だけで、インラインCSSは #Stage,body,html に overflow:hidden; touch-action:none を当てています。スクロールもレイアウトもタイポグラフィも、すべてGL側で作り直されているということです。
同社は独自3Dエンジン Hydra（Mesh-Geometry-Shader パラダイム、Three.jsの影響を公言）と、同じWebGLコードをiOS/Android/デスクトップ/VRで動かす Project Aura について技術記事を公開しています。
【参考になるポイント】
・フルWebGLサイト最大の弱点であるアクセシビリティに、.GLA11y（position:absolute; clip:rect(0 0 0 0)）という視覚的に隠したDOMミラーで答えている。キャンバス主体サイトへの一番の反論に対する、そのまま真似できる回答
・重い処理をWebWorkerに逃がし、変化のないオブジェクトの行列計算をスキップするなど、CPU側の節約をエンジンレベルで設計している
・公開リポジトリには、独自動画フォーマット activeframe（WebCodecsでフレーム精度再生、video要素を使わない）、GLテキストを鮮明に出す svg2msdf など、キャンバス主体のサイトに必要な部品が自作で並んでいる
・※Hydra と Project Aura の記述は同社の技術記事に基づくもので、v6より前のもの。現行ビルドがどのエンジン世代で動いているかは未確認