Added USDZExporter

[mrdoob]

Related issue: #14219

Description

First version of the USDZ exporter:

• Generates a USDA file and zero-compresses it into a USDZ.
• Exports all meshes in the scene and materials but no textures yet.
• It's pretty hacky.

I've also added it to the editor so it's easier to try different models.

[mrdoob]

@101arrowz I had to add the full fflate.module.js into the repo because I needed methods that were not available in the custom builds.

[101arrowz]

Alright, let me know if you want a custom build and I'll make another one.

[mrdoob]

I think it'll be best to remove the custom builds and just have the build that has everything.

[101arrowz]

Sounds good. For people using in production, you might want to make a script for creating a minified build by running through terser (or a bundler if you use the same minification script with all libraries). At the cost of creating slightly larger builds than hand minification, it's automatic.

[kolodi]

I've tried different models but after exporting in USDZ they all look too dark in Quick View. Adding metallic map (all black or white) does not solve the problem. Do you experience the same "too dark" problem?

[mrdoob]

@kolodi Can you share the files you're having issues with?

[kolodi]

@kolodi Can you share the files you're having issues with?

https://tinyurl.com/yh6y649y
simple cubes: https://tinyurl.com/yzmvvcsu or https://tinyurl.com/ydvxg9u9

pure white appears as a grey one, and all materials are darker, like there is some bias for all them.

[mrdoob]

@qeeqez any chance you can investigate the issue?

[theqeeqez]

@mrdoob I'll have a look on it. I have an opposite problem - my materials are too bright in Quick Look 😅

[kolodi]

@qeeqez

Did you have a chance to look at the models?

[mrdoob]

Having a look at it today.

[mrdoob]

Unrelated...

Seems like USD doesn't support doubleSided at material level.
It only supports it at geometry level, which means that we would need to duplicate geometries?

[mrdoob]

@kolodi

simple cubes: https://tinyurl.com/yzmvvcsu or https://tinyurl.com/ydvxg9u9

These export correctly. We're matching Apple's own usdzconvert:

[theqeeqez]

@kolodi sorry for long answer, pretty busy this week.

I've checked yours models. Looks like this "grayish" is not a problem of the model but of the lighting in AR QuickLook which we couldn't change.

For my issue (too light color): it seems to be that I've used SRGB colors instead of Linear ones for the models. And also lighting changes my colors a little bit. I'm further investigating this issue.

[kolodi]

I've checked yours models. Looks like this "grayish" is not a problem of the model but of the lighting in AR QuickLook which
we couldn't change.

I have checked everything we can do in QuickLook and, yes, we can't control anything like lighting, there is a reflection (environment) map created dynamically (which is pretty cool) but overall it makes models darker.

For my issue (too light color): it seems to be that I've used SRGB colors instead of Linear ones for the models. And also lighting > changes my colors a little bit. I'm further investigating this issue.

Very interesting. I was playing around :sourceColorSpace:
token inputs:sourceColorSpace = "auto" or "sRGB"
but see no changes.
Also I don't see how colorspace of a texture can be transferred to the exported texture. Is this information maintained when we draw image to the temporary canvas, here:

three.js/examples/jsm/exporters/USDZExporter.js

Lines 110 to 118 in d379666

	const canvas = document.createElement( 'canvas' );
	canvas.width = image.width * Math.min( 1, scale );
	canvas.height = image.height * Math.min( 1, scale );
	const context = canvas.getContext( '2d' );
	context.drawImage( image, 0, 0, canvas.width, canvas.height );
	const blob = await new Promise( resolve => canvas.toBlob( resolve, 'image/jpeg', 1 ) );
	return new Uint8Array( await blob.arrayBuffer() );

[mrdoob]

@kolodi

https://tinyurl.com/yh6y649y

The issue with this file is the fact that we don't export aoMap properly yet.

[kolodi]

These export correctly. We're matching Apple's own usdzconvert:

I was also using usdzexport tool to compare results. materials and texture definitions are structured differently (I'm currently working to change the structure for USDZExporter as well) but the visual result is the same. When opening in xCode converted usdz looks fine, but in QuickLook lighting makes them too dark. I was trying on 2 devices. On older iPad they are just darker, but on latest and greatest iPhone with lidar models look even more darker.