Garden Eight

「a digital design studio based in Tokyo」と名乗る Garden Eight のサイト。DOM同期型WebGLレイヤーの、現行で最もきれいな実例です。 画面全体に pointer-events: none の固定キャンバスが1枚かぶさっていて、104個のDOM要素が js-gl-dom というフックを持っています。その位置とサイズをGLシーン側にミラーすることで、テキストとレイアウトは本物の選択可能なHTMLのまま、画像と遷移だけをGPUで描いています。schema.org のマークアップでも、専門領域として WebGL / GLSL / 3D Web Experiences / Creative Coding を明示しています。 【参考になるポイント】 ・js-gl-dom ＋ 全画面固定キャンバスという「HTMLがシーングラフを駆動する」構成は、このリストの中でも最も転用しやすいテクニック ・[data-webgl=false] のCSSルールが6つ用意されており、WebGLが使えない場合に #__app やリンク、.js-gl-dom（2pxのボーダーが出る）を作り替える本物のフォールバックがある ・Three.js を含む重いチャンクはアプリシェルからコード分割されている。5つの /_app/ バンドルのうち Three.js を積んでいるのは1つだけで、3Dを使わないルートではその分を読み込まない ・gl_FragColor が56か所、OrthographicCamera（6）と PerspectiveCamera（9）が併存。スクリーン空間の2D効果と本物の透視投影パスが同じサイトに同居している ・Nuxt のSSR＋CloudFront配信という、デモではなく本番運用を前提にした構成