
Immersive Garden
Awwwards Studio of the Year 2024。浅浮き彫りのような3D表現と、KTX圧縮を軸にしたアセットパイプラインが見どころ。
- サイトURL
- https://immersive-g.com
- クレジット
- Immersive Garden(Paris)
- 使用技術
- Three.jsWebGLNuxtLenisKTX2gltf-transform
ルイ・ヴィトン、カルティエ、ディオール、オメガなどを手がけるパリのデジタルプロダクションスタジオ Immersive Garden のサイト。Awwwards Studio of the Year 2024 を受賞しています。
ビジュアルの核は「バ・ルリーフ(浅浮き彫り)」的な3D。よくある光沢のあるオブジェクトが宙に浮くタイプではなく、彫り込まれた石のような手触りを持たせているのが特徴です。デザイン方針として掲げているのは「ミニマリズム対複雑さ」で、機能を足すのではなく要素を引くこと。
実装はNuxtのSSRアプリで、ハイドレーション用のペイロードの中に Lenis が24回登場します。スクロール状態をひとつの真実の源としてWebGLシーンに流し込む構成です。
【参考になるポイント】
・テクスチャをサーバー側でKTX圧縮し、GPUがそのまま扱える形で配信する(デコードしてからアップロードする際のストールを消す)
・チャンネルパッキングで複数のグレースケールマップを1枚のRGBに詰め、ファイル数とVRAMを同時に削っている
・gltf-transform をJSとBlenderスクリプトで自動実行し、モデルのバリエーション反復を高速に回せるようにしている。重い3Dサイトをリニューアルサイクルに耐えさせるための要
・3D自体は Blender / Houdini / ZBrush で彫ってからWeb用に焼き込む。あの質感はシェーダの小技ではなくオフラインの造形で決まっている
・※パイプラインまわりの記述はスタジオ自身のケーススタディに基づく。Nuxt と Lenis は現行ページで確認済み
