Updating texture using scene graph does not apply for usdz models in AR

[pzyu]

Description

I'm trying to update a texture on runtime based on this example: https://modelviewer.dev/examples/scenegraph/#swapTextures

This works perfectly in the browser and in AR mode for GLB models, however, the texture is not reflected for USDZ models in QuickLook.

Expected texture applied on the model:

Resulting texture shown in iOS Quick Look:

Is this something that's out of model-viewer's control? I understand that scene graph is only supported for GLTF files, but I'm not sure if it is supposed to work the same for USDZ models.

Version

• model-viewer: v1.6.0

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

No, we don't make any changes to the USDZ file. However, we're working on doing on-the-fly conversion to USDZ which would mean both these kinds of changes would be reflected and also that you wouldn't need to supply a separate file. No ETA yet though.

[pzyu]

Sure, I see. Thanks for the reply. Since model-viewer is built on three.js, I'm thinking of using the USDZ exporter that they have as shown in the example here: https://threejs.org/examples/?q=usdz#misc_exporter_usdz

Would it be possible to export the model as a GLTF and then export it as USDZ using three.js?

[pzyu]

Sure, I see. Thanks for the reply. Since model-viewer is built on three.js, I'm thinking of using the USDZ exporter that they have as shown in the example here: https://threejs.org/examples/?q=usdz#misc_exporter_usdz

Would it be possible to export the model as a GLTF and then export it as USDZ using three.js?

So I did manage to get it to work using three.js' USDZ exporter by doing the following:

1. Export the model as GLTF
2. Load it into another three.js scene as an array buffer
3. Export the scene using the USDZ exporter as a blob
4. Setting the href property of a link as the blob

Working result!

Currently the texture is flipped, but shouldn't be much of a problem to resolve.

[elalish]

Yes, that's exactly how we'd like to enable on-the-fly conversion, nice work! Would you be interested in contributing?

[pzyu]

Sure, will make a fork and send a PR accordingly.

One thing to note is that for my particular use case, I've edited three.js' USDZ convertor to be compatible with .png textures with transparency. By default, only .jpg textures without transparency is supported.

[elalish]

Awesome, thank you! And I bet three.js would be happy to have your fix for .png textures too.