これは「Babylon.js アドベントカレンダー2024」の23日目の記事です。
今回は公式ドキュメントで紹介されているBabylon Viewerについて解説します。
1. Babylon Viewerとは
"<babylon-viewer> " というタグを使って3Dモデルを表示する仕組みです。
Xや公式ドキュメントで紹介されています。
Did you know that the new Babylon lightweight viewer has a newly added, fully customizable progress bar!https://t.co/QcG1bF2s2N #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs pic.twitter.com/KgUDAmJfF9
— Babylon.js (@babylonjs) 2024年12月22日
https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/
説明よりも見ていただいた方がはやいです。
このように"<babylon-viewer>"というタグの中で、sourceとenvironmentに3Dモデルや環境テクスチャを指定できます。
2.サポートしているファイルフォーマット
以下のドキュメントに書かれているファイルフォーマットをサポートしています。
https://doc.babylonjs.com/features/featuresDeepDive/importers/loadingFileTypes
具体的にはこちらです。
.gltf (also used for binary version .glb)
.obj
.stl
.splat
3. WebGPUが有効な場合、snapshot renderingが最初からサポートされている
WebGPUが有効な場合、snapshot renderingという仕組みが有効になっています。snapshot renderingは、動きが少ない環境であればパフォーマンス向上が見込める仕組みです。
こちらにsnapshot renderingの簡単な検証結果を書いているので、ご参考ください。
4. おわりに
ちょっと3Dモデルを表示したいとき、canvasとかengineの宣言が不要になるので便利ですね。
