Babylon.jsでusdz形式のexport (いちおうimportも) を試してみました

Babylon.js 8.0が2025/3/28 にリリースされました。

https://doc.babylonjs.com/whats-new/

この中にはusdz exportという機能が入っています。今回は、この機能について調べてみました。

1. Babylon.jsでは8.0から、シーン全体をusdz形式でexportできるようになった

公式ドキュメントにも書かれています。
https://doc.babylonjs.com/typedoc/functions/BABYLON.USDZExportAsync

ただし、他の機能とは異なり、APIの使い方のみが紹介されています。

このページには、３つのサンプルコードがあります。その中の１つ、"BoomBox"のサンプルコードがこちらです。
https://playground.babylonjs.com/#5N3RWK#5

これを開くと、Boomboxが表示されるシーンが開いて、同時にscene.usdzが自動的にダウンロードされます。

Macの場合、ファイルを選んでスペースキーを押すと、プレビューできます。

2. Babylon.js 8.0にはusdz形式の3Dモデルをimportする機能はない。しかし別のOSSと組み合わせれば可能

Babylon.js 8.0では、あくまで作ったシーンをusdz形式でexportする機能のみが用意されています。usdz形式の3DモデルをBabylon.jsのシーンにインポートする方法は提供されていません。

しかし、tinyusdzというOSSを使うと、Babylon.jsの中でusdz形式の3Dモデルを表示できます。こちらがサンプルです。

https://playground.babylonjs.com/#FCA24A#1

tinyusdzはGitHubで公開されています。 github.com

npm packageとしても公開されています。 www.npmjs.com

3. tinyusdzは、2025/4/20時点ではブラウザで使えるモジュール形式にはなっていない

先ほどのPlaygroundではモジュール形式ではなかったので、npmで提供されているならばということで、ES6以降の書き方で動かそうと試してみました。

しかしどうしてもうまくいかず、ChatGPTに確認したところ、今のnpmパッケージにはブラウザで読み込むために必要なバイナリが入っていないことがわかりました。

tinyusdzはC++で書かれたUSDZローダーをWASM化して、ブラウザでも動かせるようにしたものです。  
なので、ブラウザでUSDZファイルを読む場合は基本WASM必須です。

なぜWASMがいるの？
USDZフォーマットってZIP圧縮+バイナリデータ+USDスクリプト形式みたいになってて、JavaScriptだけでのパースがかなり重たい。  
それをC++→WASM化してブラウザで高速動作するようにしたのがtinyusdz。  

だからブラウザ版tinyusdzは  
・tinyusdz.js（JSインターフェイス）  
・ tinyusdz.wasm（WASMバイナリ）  
この2つセットで動きます。

実際、先ほどのPlaygrpundでは、モジュールではなく直接tinyusdz.jsを呼んでいました。

const myModule = await import("https://lighttransport.github.io/tinyusdz/tinyusdz.js");

このtinyusdz.jsを直接開いて調べると、このような記述があり、tinyusdz.wasmを呼び出して使っていました。

wasmBinaryFile=new URL("tinyusdz.wasm",import.meta.url).href}function getBinarySync(file)

4. おわりに

まとめると、Babylon.jsでusdzをimportする場合は別途提供されているtinyusdzをsrciptタグ読み込みで使う、exportする場合はBabylonjsが提供しているUSDZExportAsyncを使う、となります。