Three.js: GLTFExporter: Support spec/gloss PBR materials

[tiancaipipi110]

Hello, I'm using GLTFLoader to import the .gltf models, then use gltf exporter to export them.

However some materials are only able to be displayed, but unable to be exported. It seems like three.js has a couple of built-in materials+ shader materials. gltf loader seems to create shader materials as far as three.js built-in materials do not cover what' s in gltf file. now gltf exporter does not support exportinng shader materials. and from here we have a problem.

Can anyone help with this? Thanks.

[donmccurdy]

glTF has three material modes:

• unlit
• metal/rough PBR
• spec/gloss PBR

GLTFExporter supports the first two, but not the third. Agreed that we should implement that.

ThreeJS also has other material types — lambert, phong, and another PBR model. We approximate those as metal/rough PBR in glTF, but that's the best that we can do I think.

[makc]

I imagine that for th proper fix gltfloader would need to create its own material type, instead of ShaderMaterial. Then exporter could easily export it.

[tiancaipipi110]

@donmccurdy The ones I'm having problems are
https://sketchfab.com/models/c438e81e796d41d9a6ae4cc147ef8d4f
https://sketchfab.com/models/fb847d79fdfa465894f30475c6cfbf05
https://sketchfab.com/models/f5abe05ff2124527a6871060b2809bb2
https://sketchfab.com/models/58e93896d1a14eb9af7b776272a48ed6
These are not spec/glossy materials.

[donmccurdy]

@makc We sort of do, I think we could just check material.isGLTFSpecularGlossinessMaterial and then look for the various properties and textures if it's set. But https://github.com/mrdoob/three.js/pull/14099 would make this feel a bit cleaner.

@tiancaipipi110 - Those are still spec/gloss actually, I think most on Sketchfab are either that or unlit. ThreeJS doesn't have a material type for spec/gloss PBR, so GLTFLoader constructs ShaderMaterials to support them.

[tiancaipipi110]

@donmccurdy ok

[looeee]

glTF has three material modes:

• unlit
• metal/rough PBR
• spec/gloss PBR

Perhaps we should support spec/gloss PBR directly in three.js?

[makc]

@looeee which is what I said, basically, but material.isGLTFSpecularGlossinessMaterial could work, too

[donmccurdy]

I'm certainly not opposed to adding a spec/gloss PBR material to the core materials. We've discussed that a bit in https://github.com/mrdoob/three.js/issues/10985 and https://github.com/mrdoob/three.js/pull/11038, and it would solve the fact that GLTFSpecularGlossinessMaterial can't be cloned (although https://github.com/mrdoob/three.js/pull/14099 might also achieve that?). But the difference between these two PBR materials, and MeshPhysicalMaterial for that matter, is not likely to be obvious to most users. So there is an argument for keeping it 'tucked away' in GLTFLoader, too.

I believe GLTFExporter can be fixed to support spec/gloss either way.

[looeee]

But the difference between these two PBR materials, and MeshPhysicalMaterial for that matter, is not likely to be obvious to most users.

As a counterargument, many users will come to three.js already familiar with PBR, or want to bring in assets authored in Substance Painter or other programs using spec/gloss, and find it frustrating that only one of the standard PBR pathways is supported.

It's not trivial to convert spec/gloss maps to metal/roughness, meaning that many PBR assets cannot be (easily) used in three.js at the moment.

[RemusMar]

There is no perfect workflow, but this one is the probably the best:
https://github.com/BabylonJS/Exporters/issues/269

[donmccurdy]

@takahirox or @fernandojsg would you have time to look at exporting spec/gloss materials from GLTFExporter by any chance?