Strange reflection on .glb files on mobiles exported from Babylon JS

[arek3D]

Hi,

I have noticed that there is a difference in displaying .glb files between desktop and mobiles e.g. on Facebook. The files exported from babylonjs.serializers using GLTF2Export.GLBAsync() or 3DS max + Babylon JS plugin has strange reflection despite of specular=0, roughness=1, metallic=0 etc. I have tried many combination with Std and PBR materials and I always have this strange reflection on mobiles.
I decided to try Modo and the effect is much better. So probably you have a bug in babylonjs.serializers and 3DS max plugin. I have noticed that in attached file called "babylonJS.glb" which was exported from 3DS max "roughnessFactor" is 0.9 and should be 1.0 if I use standard material with specular = 0.

GLB files:

babylonJS.glb

Modo.glb

Screenshot from the smartphone (Android/iOS, the effect is the same), 3DS max + Babylon JS plugin and the same effect after using babylonjs.serializers.js GLTF2Export.GLBAsync() method:

Screenshot from the smartphone when Modo was used (on smartphone the box is totally black - so the effect is actually perfect).

 

And the effect which we can see on the desktop web browser (as you can see the file exported from Babylon JS is not totally black, but it should be. However the worst thing is this reflection on mobiles):
 

[Guest]

To disable specular is babylon.js you have to set specularColor = black

Pinging @bghgary for GLB

[Guest]

Also as GLB is only supporting PBR can you share the initial scene you exported to GLB from babylon?

[bghgary]

Yes, the initial scene would help a bunch.

[arek3D]

Quote

To disable specular is babylon.js you have to set specularColor = black

Thanks @Deltakosh but I also tried that and also used PBR materials with roughness=1, metallic=0  etc. I cannot achieve totally black and also totally white color on mobiles without any reflections. This is possible from Modo, so I do not think it is an Facebook's issue, however I reported this also to them. I have not received any response yet.

Here is the playground:
https://playground.babylonjs.com/#QEZVMP

And here is my test scene. I use the newest exporter for 3DS Max 2016 (ver. 1.3.9):

boxScene.zip

Hope it will help

[bghgary]

Because glTF uses PBR (physically based rendering) for materials, a pure black or white material with no reflections does not really fit as they don't exist in the real world. The Modo one that you linked above also has reflections when loaded in Babylon sandbox. The inconsistencies between renderers is something the glTF working group is actively working to fix. I'm not sure why you want a material with no reflections, but I think it might be better to use the unlit extension. Facebook supports the unlit extension as does Babylon's glTF loader. There are not a lot of exporters that create glTF with unlit yet, but it's easy to add the unlit extension manually to the glTF file. I'm not sure if that will work for you scenario.

Here is one that I modified from the glTF box exported from the playground you sent.

scene.glb

[arek3D]

Thanks for your help @bghgary!
Yes, I know that pure black or white with no reflections do not exist in the real world. But Modo also uses PBR materials and the range of colors is wider. Also, the roughness is greater.
The darkest box exported from Babylon JS looks distinctly brighter than e.g. the black frame of my  LCD screen.
Also, I can see a lot of objects around me that are more rough than this box on FB mobile. It is very shiny despite of roughness = 1.

I hope that glTF working group will fix those inconsistencies between the most popular renderers.
Or maybe Facebook developers will allow changing the reflection map from their scene to have more control of the final effect.

What do you mean by " add the unlit extension manually to the glTF file"? I have tried to add those lines to the material in the text editor, but I have noticed before, that every try of editing .glb file causes an error during Facebook upload and I do not know why. Maybe I use incorrect encoding?

 

 

[bghgary]

It'll be difficult to modify the GLB file directly as it is a packed version of a bunch of loose files (like a zip except it's not compressed). You should unpack the GLB into loose files before modifying the glTF and then repack it into a GLB. There are some tools that can do it easily. I've written one for Windows if you're on that platform. If not on Windows, you can use glTF Tools for vscode or something similar.

[bghgary]

9 hours ago, arek3D said:

The darkest box exported from Babylon JS looks distinctly brighter than e.g. the black frame of my  LCD screen.

I tried it earlier and the values that were exported looked correct to me, so I don't think there is an issue with the BabylonJS exporter. I didn't try to export using the 3dsMax exporter, so maybe there is an issue with that. That said, the darkest box representable by core glTF is not going to be totally black because the PBR metallic roughness model that we (the glTF working group) picked for glTF is not capable of representing it.

[arek3D]

15 hours ago, bghgary said:

I don't think there is an issue with the BabylonJS exporter. I didn't try to export using the 3dsMax exporter, so maybe there is an issue with that.

The method in the Babylon JS Serializers "GLTF2Export.GLBAsync()" exports actualy the same visual result like 3dsMax exporter. The only difference I saw in the HEX Editor was the file from 3DS Max has Roughness = 0.99 instead of 1.
The object exported using GLBAsync() is shiny despite of roughness=1, metallic=0 on mobiles on FB. And it is distinctly brighter than e.g. from Modo also on desktop. White color from Modo is closer to #FFFFFF than from Babylon JS, and Modo also uses glTF and PBR metallic roughness model. But of course these reflections from Facebook scene could affect colors on the object and the problem could be only with roughness and metallic part.

Thank you @bghgary for the information about unlit extension and your glTF-Shell-Extensions tool. It helped to avoid weird reflections on Facebook on mobiles exported from Babylon JS, but of course it is only workaround, because there is no shading at all.

 

[bghgary]

7 hours ago, arek3D said:

The object exported using GLBAsync() is shiny despite of roughness=1, metallic=0 on mobiles on FB

This is a FB issue. I'm not sure what we can do about that.

7 hours ago, arek3D said:

And it is distinctly brighter than e.g. from Modo also on desktop.

The link you posted originally has both metallicFactor and roughnessFactor of 1.0 which probably explains the difference. I don't have much experience with Modo or how it exports glTF. Both GLTF2Export and 3dsMax exporter should be able to export with metallicFactor of 1 and roughnessFactor of 1 if it is configured to do so. I can help with that if needed.

7 hours ago, arek3D said:

only workaround, because there is no shading at all.

Yes, that is true. I suggested it because it sounded like you didn't want physically-based materials. If you can share your scenario, I might be able to come up with a better solution.

[arek3D]

                function _solveForRoughness(specularPower) {
                    var t = Math.pow(specularPower / P3.x, 0.333333);
                    return _cubicBezierCurve(t, P0.y, P1.y, P2.y, P3.y);
                }
                var diffuse = babylonStandardMaterial.diffuseColor.toLinearSpace().scale(0.5);
                var opacity = babylonStandardMaterial.alpha;
                var specularPower = BABYLON.Scalar.Clamp(babylonStandardMaterial.specularPower, 0,   this._maxSpecularPower);
                var roughness = _solveForRoughness(specularPower);
                var glTFPbrMetallicRoughness = {
                    baseColorFactor: [
                        diffuse.r,
                        diffuse.g,
                        diffuse.b,
                        opacity
                    ],
                    metallicFactor: 0,
                    roughnessFactor: roughness,
                };
                return glTFPbrMetallicRoughness;
            };

Thank you for your answer.
Yes, Modo exports Roughness=1 and Metallic=1 and this is the reason of difference!  I checked that on Facebook and the effect is the same. Thank you!
I noticed that in babylonjs.serializers.js the metallicFactor is always = 0 in _solveForRoughness() function. I need to use StandardMaterials on my objects, so my materials always will use this function (if I use PBR materials in Babylon I exceed the 3MB Facebook limit for the 3D post).
I noticed also that StandardMaterial in Babylon JS has the roughness property (it helps to define how blurry the reflections should appears in the material).
Don't you think that during conversion from Standard Material to PBR it should be like this:

f(specularPower) -> metallicFactor
f(roughness) -> roughnessFactor

Instead of:
0 -> metallicFactor
f(specularPower) -> roughnessFactor

What do you think @bghgary? Thank you very much for help!

[bghgary]

6 hours ago, arek3D said:

f(specularPower) -> metallicFactor

Higher specularPower does not imply that the material is metallic. In some cases it does, but in many other cases it doesn't. There isn't a foolproof way to determine without doing some fancy machine learning and even then it still might be wrong. The original author's intent of whether it is metallic or not is not captured using StandardMaterial.

6 hours ago, arek3D said:

if I use PBR materials in Babylon I exceed the 3MB Facebook limit for the 3D post

I'm confused by this statement. There is nothing in PBR materials that causes the glTF to be bigger. As you already found, the exporter converts the StandardMaterial to a PBR representation anyways.

[arek3D]

18 hours ago, bghgary said:

I'm confused by this statement. There is nothing in PBR materials that causes the glTF to be bigger. As you already found, the exporter converts the StandardMaterial to a PBR representation anyways.

It was like this:
1. I imported .babylon files which were exported from 3DS Max. So they had StandardMaterials.
2. Then I decided to put on them PBRMetallicRoughnessMaterials to try to solve FB issue with strange reflections, and I used dispose() function for all StandardMaterials from the scene.
4. Then I saved to .glb the whole scene and the size of the file was bigger, above 3MB (so maybe dispose() method didn't delete std materials immediately or completely).
5. So I decided to come back to Standard Materials and tried to convert it properly to GLTF.
6. Now I know that this is impossible, because during the conversion metallicFactor -> 0, and to look decently on Facebook it should be 1.0 in my case (Which was not too obvious, because I did not want to have reflections at all).

Unlit extension helped in my project, but it would be great to have the possibility to choose it during the exporting to a .glb file.
As I said I reported this issue to Facebook at 14th Nov, but haven't received any response yet. Their engines display the same file differently on desktop and mobiles.

[bghgary]

If you can set this up in a playground, I can probably tweak it such that it is smaller.