Three.js: GLTFExporter: Exported models not working with Unity/GLTF Loader

[MaartenBreeedveld]

When exporting a GLTF file from Three.js and then loading it with Unity/GLTF Loader. it allways fails with a NulleReferenceException.

It occurred to me that the example files enclosed with the Unity repo are all small GLTF files with an additional .bin file. (i.e. :

• model.gltf (4kb)
• model.bin (1mb) )

Is there a possibility to generate these .bin files as well?
Weirdest part to me is that the Three.js files are loaded OK by Windows MR viewer, but the example files do not load...

[donmccurdy]

When you export a file, what results do you get on:

• http://gltf-viewer.donmccurdy.com/
• http://sandbox.babylonjs.com/
• http://github.khronos.org/glTF-Validator/

THREE.GLTFExporter can provide .gltf or .glb with embedded resources, but can't hand back multiple files. If the exported model passes validation, but UnityGLTF just can't handle embedded resources, I think you'll need to file a bug on UnityGLTF. It may be that it allows embedded .glb but expects .gltf to have a .bin file.

If you just need a quick workflow fix, https://github.com/AnalyticalGraphicsInc/gltf-pipeline can re-pack glTF files in whatever format you need. Use the -s option to split an embedded file into external .bin and textures.

[MaartenBreeedveld]

Thank you very much for your suggestions!

I've done some tests with 3 types of exports:

1. An export with bin file
2. An export without bin file and embedded media
3. An export without bin file and textures not embedded.

@ http://gltf-viewer.donmccurdy.com/:

1. not working (THREE.GLTFLoader: Unexpected light type, "3".)
2. working
3. not working (missing textures error)

@ http://sandbox.babylonjs.com/:

1. working
2. working
3. not working (Failed to execute 'open' on 'XMLHttpRequest': Invalid URL)

@ http://github.khronos.org/glTF-Validator/:

1. valid
2. valid
3. valid, but two warnings (both related to the texture)

It seems that the THREE.Exporter used the path of the texture generated while exporting:
"resources": [ { "pointer": "/buffers/0", "mimeType": "application/gltf-buffer", "storage": "data-uri", "byteLength": 1021824 }, { "pointer": "/images/0", "mimeType": null, "storage": "external", "uri": "blob:http://localhost:3000/cd85cb0d-20fd-4971-92ab-96f4e0f30a67" }, { "pointer": "/images/1", "mimeType": null, "storage": "external", "uri": "blob:http://localhost:3000/023039f7-bb54-40f2-a9f2-99d4debcb0bb" } ],

So it seems there is something wrong with my workflow.
I'm using Three.js to set the texture maps. I'm working with blobs to make shure it all feels responsive. Then I export the scene with the Threejs r97 GLTF exporter version.

I've retried exporting with the Three js Editor, This GLTF is loaded (with emedded media), however, Metallness and Roughness maps are not included.
Also, the file here is notably smaller in size. Is there some compression going on in the editor?

Lastly, I've changed the map from blob to a base64 string. It didn't change anything.

Thank you also for the gltf-pipeline suggestion, maybe this would be a good way to implement draco compression?

[mrdoob]

Also, the file here is notably smaller in size. Is there some compression going on in the editor?

https://github.com/mrdoob/three.js/blob/dev/editor/js/Menubar.File.js#L214-L222

[MaartenBreeedveld]

@mrdoob
The highlighted part belongs to the .glb export:
saveArrayBuffer( result, 'scene.glb' );

After one-on-one comparison of the exports of the Three js Editor and my own environment. I've found out that the base64 string in the editor file is a jpg file. My file was a png file. this occurred here in the gltf file:
"images": [ { "mimeType": "image/jpeg", "uri": "data:image/jpeg;base64,/9j/4AAQSkZJ... " } ],

I guess it's noteworthy that the difference in a single .png or .jpg texture is about 6x the filesize.

Also, I've figured out how to fix the initial problem:

it allways fails with a NulleReferenceException.

It seemed my THREE.Mesh objects had no valid userData, so adding this small piece of code (I'm not using the userData currently) resolves my initial error:
group.userData = {}; group.traverse((child) => { if (child instanceof THREE.Mesh) { child.userData = {}; } });

This issue can be closed. Thank you all for helping!

[donmccurdy]

1. An export with bin file ... not working (THREE.GLTFLoader: Unexpected light type, "3".)

It sounds like this asset has come through an old version of the BabylonJS 3DS Max exporter? It had a bug, but if you update the exporter to the latest version, it should fix this error.

1. An export without bin file and textures not embedded. ... not working (missing textures error)

This export setting is kind of useless unless your textures happen to be externally hosted on a CDN. I think we'll probably want to remove it at some point.

It seemed my THREE.Mesh objects had no valid userData, so [setting userData to empty objects] resolves my initial error:

I'm not sure I understand this ... what userData was there before that you're overwriting?

Thank you also for the gltf-pipeline suggestion, maybe this would be a good way to implement draco compression?

It's a good way to add compression too, yes. :)

Anyway, glad things are working now!