Lusion

イギリス・ブリストルを拠点にするクリエイティブスタジオ Lusion のポートフォリオサイト。自らを「リアルタイム／開発重視のクリエイティブスタジオ」と説明し、WebGL・フロントエンド・Unity/Unreal・インスタレーション・AR/VRまでを手がけています。 配信されているHTMLを見ると、構成がそのまま読み取れます。Astroで生成された静的ページの上に、意味のあるマークアップを持つ <div id="ui"> のオーバーレイ、その背後に全画面の <canvas id="canvas">、さらにページ遷移専用の <canvas id="transition-overlay"> が別途用意されています。SEOとアクセシビリティのためのDOMを保ったまま、その裏で常駐するGLシーンを回し続けるための、きれいな分離のしかたです。 バンドルは約1.25MBのJSひとつ。中を見ると Three.js の REVISION は 158 で、インラインのGLSLフラグメントシェーダが100か所以上、ShaderMaterial の参照が45か所あります。つまり見た目の個性は既製マテリアルではなく、自作シェーダで作られています。 【参考になるポイント】 ・UI用のDOM、常駐WebGLキャンバス、遷移専用キャンバスを明確に分けるレイヤー設計 ・ビジュアルの主役を ShaderMaterial ＋ 自作GLSLで作り込んでいる ・スタジオ自身が公開したケーススタディでは、布のシミュレーションをHoudiniで事前計算してArrayBufferとPNGに焼き込み、66フレームぶんをわずか11キーフレームに圧縮して実行時に補間する手法を解説している（※これは以前のバージョンの制作記事なので、現行ビルドで同じ手法が使われているかは未確認） ・自己申告で Awwwards 58件（Site of the Year含む）、FWA Site of the Year、CSSDA Site of the Year など受賞多数