3D Gaussian Splatting に対応した Luma WebGL Library でお手軽 WebXR を実現する！
2023/12/07 未明、みんな大好き NeRF そして 3D Gaussian Splatting でお馴染みの Luma AI 社が Luma WebGL Library を公開しました。この Luma WebGL Library を Three.js と連携することで、これまではいくつか手順を踏む必要があった WebXR な 3D Gaussian Splatting を簡単に実現できるようになりました 🎉
Luma WebGL Library
Luma WebGL Library は npm package として公開されています。使い方がデモとともにドキュメントとしてまとめられています。
基本的な使い方は、公開されている https://lumalabs.ai/capture/ で始まるページの URL を source として指定するだけです。 Getting Started のデモでは https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff を読み込んでいます。
Luma WebGL Library はただ読み込んで表示するだけでなく、次の機能が含まれています。ドキュメントにはそれぞれの機能に対してデモが用意されているので、実際に挙動を確認してみてください。
- Background Removal
- Three Fog
- Scene Lighting
- Custom Shaders
- React Three Fiber
- Transmission
- VR
Background Removal は『背景除去』のオプションです。何も指定しない場合はすべてのレイヤーが表示されますが、semanticsMask に FOREGROUND を指定することで、前景のみを表示、つまり背景を除去できます。デモに用いられている像のような scene に対しては非常に有効的ではないでしょうか。
WebXR (WebVR) 対応！
本記事で伝えたいことは VR として記載されています。シンプルに VRButton.js を import して設置し、そのボタンをクリックすることで 3D Gaussian Splatting な scene を WebXR (WebVR) として表示できます。
WebXR Device API を呼び出す形になるので、もちろん WebXR Device API に対応しているハードウェアとブラウザの組み合わせが必要です。例えば iPhone の Safari では WEBXR NOT AVAILABLE になります。これは Mac の Safari や Chrome も同様です。
iPhone の Safari は WebXR Device API に対応していないので WEBXR NOT AVAILABLE と表示され動作しない
Android の Chrome の他、Windows PC の Chrome では正常に動作します。
Android の Chrome は WebXR Device API に対応しているので ENTER VR と表示され動作する
もちろん Meta Quest 系であれば Meta Quest Browser や Wolvic で確認できます。
ENTER VR をクリックすると、3D Gaussian Splatting の中心地から世界を眺められるようになります。残念ながら 3D Gaussian Splatting の世界を歩き回ることはできません。
It will work best on PC VR, standalone VR tends to struggle with splats presently
公式ドキュメントでは PC VR が推奨されていますが、手元の Meta Quest 3 で確認した限り、酷い違和感はありませんでした。
本記事では公式ドキュメントをもとに Luma WebGL Library でできること、とりわけ WebXR に対応していることを紹介しました。別記事で実際にコードを書いた事例を紹介します。
現場からは以上です！
明日 Day 10 の担当は再び @wakufactory san です！よろしくお願いします！
Discussion