GLTF to USDZ exporter issues

Questions
, , , , ,
1

I have encountered issue when I’am trying to use USDZ exporter.
My application require support for exporting scene to USDZ and GLTF.
GLTF exporter works as expected(screenshot, code and file below):
example-scene (2).gltf (6.3 MB)

image
image1541×912 53.4 KB

const scene = this._prepareSceneForExport(lt, false, true);

    this._gltfExporter.parse(scene, (gltf) => {
      const output = JSON.stringify(gltf, null, 2);
      const blob: Blob = new Blob([output]);
      const link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link);

      link.href = URL.createObjectURL(blob);
      link.download = 'scene.gltf';
      link.click();
    }, () => {})

Note: method prepareSceneForExport simply deep clones existing scene and removes some unnecessary objects.
As I understood example from library, first I need to convert scene to gltf and then export it as usdz, so I tried this:

this._gltfExporter.parse(
      scene,
      (gltf) => {
        const output = JSON.stringify(gltf, null, 2);
        const blob: Blob = new Blob([output]);
        const link = URL.createObjectURL(blob);

        const gltfLoader = new GLTFLoader();
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('/examples/jsm/libs/draco/');
        gltfLoader.setDRACOLoader(dracoLoader);
        gltfLoader.load(link, (gltf) => {
          const exporter = new USDZExporter();
          exporter.parse(gltf.scene).then((uintArray) => {
            const blob = new Blob([ uintArray ], { type: 'application/octet-stream' });
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            link.download = 'scene.usdz';
            link.click();
          });
        }, 
        );

      },
      (error) => console.log(error)
    );

When I load exported USDZ scene to threejs editor, I get this:

image
image1015×611 18.6 KB

However, if I will upload GLTF exported scene to threejs editor, export it as USDZ, and then upload it to threejs editor again, I will get this:
image
image1045×829 32 KB

file:
model (2).usdz (4.1 MB)
Question is, how to update my code, to get same result as if I used threejs editor, and if it possible, how to fix coloring of USDZ result scene?

2

@evgenyshaikovskiy maybe try doing both exports in a single code and slightly change terminology, similar to this:

	this._gltfExporter.parse( scene.clone(), json => {
		const string = JSON.stringify( json, null, 2 );
		const blob = new Blob( [ string ], { type: 'text/plain' } );
		const url = URL.createObjectURL(blob);

		// save GLTF file and then proceed with loading url with GLTF Loader and export with USDZ Exporter

		URL.revokeObjectURL(blob);
	}, function( error ) { console.log( error ); }, { binary: false } );

Your final scene should already have some lighting in order to improve the looks of the model.

Another option might be to also parse the scene.clone() directly with USDZ Exporter instead of loading it with GLTF Loader.

1 Like
3

Thank you for idea. I removed cloning and directly exported scene to USDZ and received some result. However I found that very odd, because cloning before exporting doesn’t affect gLTF exporter, but does affect USDZ exporter.
Basically, if I clone scene and then export it with USDZ - I receive empty file, if I don’t clone scene and then export it - I receive normal scene(some objects are removed, but that’s due to the fact that USDZ exporter doesn’t support some materials)
Here is my cloning mechanism:

 let sceneClone: Scene = _.cloneDeep(this._config.scene);