Active Theory

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より前のもの。現行ビルドがどのエンジン世代で動いているかは未確認