Exported GLTF Scene does not have Material Color in Blender

[Cedric]

Do you have some cycles to test it with Maya and/or Max @PatrickRyan ?

[PatrickRyan]

Unfortunately, Max and Maya do not import glTF files. Our exporter is the only current way to get a glTF out of Max and Maya and we did not attempt an importer for them. Blender is the one DCC tool that I know imports glTF files. I think Houdini also imports and maybe Modo… outside Blender, it’s not very common.

[Cedric]

@bghgary
I’ve open this PG :

Babylon.js Playground

Exported .glb with the Inspector.
Then, open a new playground and load the glb using SceneLoader.Append.
In each playground, I add an axes viewer

const axes = new BABYLON.AxesViewer(scene, 0.5);

I get the same display in both PG.

[bghgary]

I looked at this again. I’m not sure what I was thinking when I thought I could repro the problem. I thought I was reproducing the problem without using Blender, but I can’t seem to do it now. Sorry about that.

I think it might be useful to check the output model in vscode using the glTF Tools extension. Then, you can see that all the importers render with similar results.

[bghgary]

@ecoin

Upon further investigation, it seems that relative rotations of nested Mesh/Nodes are preserved, only the top level Node (in PG, it is called root ) is not rotated correctly. Camera and Light also have incorrect rotation, so I guess for the purpose of using Blender Cycles to take snapshot should not be a problem.

I think mixing this problem into this thread has caused a lot of confusion. After reading this again, it sounds like you are saying the coordinate system differences isn’t an issue anymore. Compound that with my mistake of thinking it was reproducing with just Babylon.js, we were going down the wrong path.

@ecoin

However, even using PBR material does not produce consistent result for Textures with transparent areas (turned back) - or is it a setting in Blender that needs to change?

I think we should focus on this now. Let me see if I can spot what is happening with this one.

[bghgary]

Ok, I figured out why it’s black.

Short-version: I don’t know if this is fixable and will investigate, but realistically speaking, you should just not use a texture with alpha in it for opaque materials.

Long-version: The problem is that when we export, we use the HTML Canvas element to get a PNG. The canvas apparently drops the color information (i.e. changes all the RGB values to zero) for pixels with alpha because it premultiplies the alpha. Thus, any pixel with non-zero RGB values with a zero alpha value will have zero RGB values. Concretely with this specific PNG, the incoming values for the pixels that have alpha 0, are white (255, 255, 255). After going through the export process, these values all still have alpha 0, but are black (0, 0, 0).

[ecoin]

I see, great explanation! Thank you for taking time to drill down this issue.

So the solution to this problem would be to pre-sanitize PNG files on load to convert all alpha 0 RGB values to black.

[bghgary]

I found a way to convert ImageBitmap to a PNG without loosing information. Maybe it’s possible to incorporate into the code base.

JSFiddle: https://jsfiddle.net/2pef0t75/4/

[bghgary]

Filed an issue to track, but I don’t know if can fix this by 5.0.

Export PNG from serializers without loosing color information due to premultiplied alpha · Issue #11967 · BabylonJS/Babylon.js (github.com)

[ecoin]

Please note though, that in case it is sanitized to black, the material.diffusedColor/albedoColor should take over for areas with alpha 0, because diffused Texture with transparent area is the only way to overlay logo for product configurators, without resorting to decal or custom shader code.

This is the use case I have, and many people have been asking questions about similar logo feature in the forum.

@bghgary

Filed an issue to track, but I don’t know if can fix this by 5.0.

No hurry at all

[bghgary]

@ecoin

Please note though, that in case it is sanitized to black, the material.diffusedColor/albedoColor should take over for areas with alpha 0, because diffused Texture with transparent area is the only way to overlay logo for product configurators, without resorting to decal or custom shader code.

That is not per glTF spec, so we can’t do that.

You can use alpha mask to create decals.

[bghgary]

One thing to note about alpha mask is that we don’t follow glTF spec by default. You have to set this flag on the loader for it to behave per spec: https://doc.babylonjs.com/typedoc/classes/babylon.gltffileloader#transparencyascoverage

You can also use https://3dcommerce.babylonjs.com/ instead of the sandbox to get this behavior.

[ecoin]

@bghgary

You can also use https://3dcommerce.babylonjs.com/

What is the difference between this and default sandbox?

[bghgary]

This page is intended to be 3dcommerce certified. Currently, it set the flag that I mentioned earlier, disables antialiasing, and forces srgb buffers.

[jeremy-coleman]

This seems to explain the issue, but kind of a difficult set of mutually exclusive properties to account for. If pbrSpecularGlossiness bail, if unlit bail, if metalic = 1 bail, etc.

.glTF/extensions/2.0/Khronos/KHR_materials_transmission at main · KhronosGroup/glTF · GitHub

I see seb and you are contributors to the follow on volume spec, cool.

I saw this issue on three’s issue tracker, seems related
.MeshPhysicalMaterial should use the thin surface model when thickness is zero · Issue #23448 · mrdoob/three.js · GitHub

[labris]

Does it mean that Babylon Viewer should also have a kind of 3dcommerce configuration? The default Viewer configuration uses antialiasing, at least.

[bghgary]

Antialiasing should probably be re-enabled. It only needs to be off for the image submissions. I’ll need to fix that.

I think it makes sense to have something for 3dcommerce, but we haven’t made any decisions on it yet.

[bghgary]

@jeremy-coleman

This seems to explain the issue, but kind of a difficult set of mutually exclusive properties to account for. If pbrSpecularGlossiness bail, if unlit bail, if metalic = 1 bail, etc.

I’m not sure I follow you. What are you referring to?