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

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

[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]

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