Inverted normals, metal/gloss not appearing as expected.

[jehinrichs]

Will,

Added an example of a glb I created in Modo. It's a glTF 2.0 file. Tested this at:

https://sandbox.babylonjs.com/
https://gltf-viewer.donmccurdy.com/
and on Facebook and I'm getting pretty consistent results there.

Using the PlayCanvas viewer app the model is appearing but the normals seem to be inverted and the metal/gloss isn't appearing correctly across the various materials in the model. I enclosed the files.

shoe.zip

[willeastcott]

I think I've improved matters.

[cx20]

@willeastcott I made a comparison with the following libraries. PlayCanvas seems to have black shoes. Is it because IBL or light setting is different?

Three.js + shoe.glb result:

Babylon.js + shoe.glb result:

PlayCanvas + shoe.glb result:

@jehinrichs This model is very interesting. If there is no problem with the license, will it be possible to provide it as a sample in Khornos' glTF Sample repository?
https://github.com/KhronosGroup/glTF-Sample-Models

[willeastcott]

The material definition in the glb file is:

As you can see, the baseColorFactor values are tiny - essentially a very dark brown. I don't know why the rendering for Babylon and Three have brought the brightness of the color up. @jehinrichs, as the author of the model (presumably), what result were you aiming for? To be honest, the diffuse texture is a bit weird. Almost looks like an AO map.

[emadurandal]

@willeastcott

Hello, My name is Yuki Shimada, a friend of @cx20 . I'm a 3D developer ( 'GLBoost' WebGL library author).

To be honest, the diffuse texture is a bit weird. Almost looks like an AO map.

You mean the 'Shoe_Shell_Diff.jpg'?
According to glTF2.0 Spec, colors of baseColorTexture and baseColorFactor will be multiplied. So in this shoe data, the creator of this may have controlled the 'color' of albedo by baseColorFactor, and controlled the 'intensity' of albedo by this 'Shoe_Shell_Diff.jpg', I guess.

But, I have no idea why the results of Three.js and Babylon.js looks like so bright. (source code reviews are needed if we want to find out the cause.)
I think that the result of PlayCanvas is rather close to the truth, maybe.

Anyway, at the present time, The world's WebGL libraries are still developing in PBR support.
So It is a good idea to find a reliable reference renderer. (For example, Arnold Renderer, Unreal Engine, etc...)

I think that raising a problem to the dev community of each WebGL library about the reproducibility of PBR is certainly a good thing for the whole. 😉

[emadurandal]

I think that the result of PlayCanvas is rather close to the truth, maybe.

It may be my mere thought. After all, it is necessary to investigate carefully.

[jehinrichs]

cx20,

I have no problem with the shoe being included in the Khronos collection. It was a test I did to show a client how a shoe similar to his product could look.

The shoe data came from a scan. I retopoed it in Modo but I had to handpaint the normal maps, ao maps, and diffuse because the scan data was rough. The shoe I used was a 'Stacy Adams' brand that my boss picked up at a store nearby, so I included the logo into the diffuse maps and a stencil map for the logo inside the shoe. If the logos are a rights issue let me know and I can get you a version without any 'Stacy Adams' text.

P.S. I also used Modo newly included glTF support to export the glTF and glb files.

[jehinrichs]

Will,

Right, Yuki described what I was doing. It's similar to the way PlayCanvas does the 'tint'...I used a greyscale to show where the shoe was meant to be stained darker and then dialed in the diffuse as a RGB value. The idea being if a client wanted to show multiple shades of the same shoe we could do that easier programmatically.

P.S. Facebook's glTF viewer looks a lot like the Babylon version.

[emadurandal]

I'm sorry for overriding my opinion, but the brightness of Three.js and Babylon.js may be more appropriate.

This is a preview in Unreal Engine 4.

And this is the preview of baseColorFactor constant value of the 'Shoe' part.

This is ... contrary to the impression received from the small number, it is much brighter.
I don't know that UE4 handles gamma in material preview. At least, I think that baseColorFactor is linear value, maybe. Actually, linear values are more effective than sRGB (like JPG) values (because after conversion to linear, of course, these sRGB values are evaluated smaller.).

And our human's eyes have some gamma (maybe around 0.45, so we feel dark colors brighter than the truth. This is the cause of confusion.)

About the difference in the result's brightness of each library, one possible cause may be gamma handling.

[emadurandal]

(As reference information)

Due to Humans eyes' gamma, we feel bright from the intensity of (0.5, 0.5, 0.5).

The brightness that we feel it as medium gray is around (0.18, 0.18, 0.18) aka "18% gray".

[cx20]

@jehinrichs If you can cooperate with providing sample models, please PR the following contents to glTF-Sample-Models.
I will confirm the display with other libraries by gltf-test after PR is issued.

1. glTF Model

https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/ ModelName
/README.md
/screenshot/screenshot.jpg ... screenshot
/glTF/ModelName.gltf ... glTF Model
/glTF-Binary/ModelName.glb ... glTF-Binary model

2. Source Model

https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/sourceModels/ ModelName
/README.md

3. glTF Validator

It is recommended that models be verified with glTF-Validator.
http://github.khronos.org/glTF-Validator/

[willeastcott]

OK, the problem was that PlayCanvas' pc.StandardMaterial expects you to set colors in sRGB space, whereas glTF supplies them in linear space. Using Math.pow(colorChannel, 1 / 2.2); fixes the problem:

See: 1c74955