PBR material vanishing texture

Hi. I faced a problem setting up PBR material. When baseColor is dark, occlusion Texture gets vanished on faces perpendicular to camera.

Here is a PG: https://playground.babylonjs.com/#N4T555#1

Right after start, front face of cube has very unnoticable texture on it. But if we rotate camera, texture will become more visible. Same effect we can see on sphere where front area has almost no texture.

This effect becomes less noticable if baseColor will be brighter, like gray or white.
But I need to have an ability to change baseColor in a wide range from black to white (material color is changing via UI in my app).

So I’m interesting is it possible to setup material so texture do no vanish in front of the camera.

PS: In my scenes I’m using only IBL. I tried different ones (from PG samples and custom maded) but this doesn’t help to solve my problem.

Hello and welcome!

Pinging @sebavan (but please be patient as seb is out for the week)

Regarding your question, it does not vanish but it behaves as expected from a PBR material. The angle where the light touches the cube surface makes it very dark because of fresnel.

You can add a dynamic light to help: https://playground.babylonjs.com/#N4T555#2

1 Like

David, thanks for reply. Is there any way to disable this fresnel effect? I’m ok if final image will not be 100% physically accurate, but will look as I needed.

Here is an example of how my model is rendered in ThreeJS vs BabylonJS.
In ThreeJS occlusion texture appears uniformly and doesn’t depend on camera angle.
In Babylon front panel looks washed out due to fresnel and I want to find a way to get final render closer to ThreeJS version.

Maybe I need to use custom ShaderMaterial to disable fresnel effect? Any ideas?

What is your setup in Three? Are you using PBR as well?

Seb will definitely be able to guide you (Maybe you want to use PBRMaterial to get more control and then use the inspector to play with properties?)
https://playground.babylonjs.com/#N4T555#4

Yes, I’m using PBR material in Three + HDR image for IBL. In Babylon I use same textures and PBR settings.
There was minor difference in texture contrast between Three and Babylon but I solved it by adding custom shader to Babylon.

Thanks for the link to PG with PBRMaterial but unfortunately I can’t find any material property that affects on fresnel effect.

Babylon.js is correct from the spec standpoint regarding PBR (And I bet 3js as well) so with the same parameters we should be really close.

Can you share your scene in 3js as well? Maybe there is an additional light?

Here is a test scene page: three.js test (please give it some time to load, it uses a 4.5MB hdr cubemap)

As you may notice both black and white panels have occlusion texture without any “missing” areas at any view angle. Especially it is noticeable on a black panel.

will wait for @sebavan to get back from vacations :wink:

It is mainly because Occlusion should only occlude indirect lighting (diffuse harmonics) and in your scene as the material is having a black albedo it barely reflects indirect lightning.

The kind of occlusion you see is only environment occlusion you can try to turn it off through its respective parameters: useRadianceOcclusion.

It diiffers quite a lot form your three setup, could your repro your threejs material setup in the playground ? would be amazing to work on it :slight_smile:

Here is the PG: bjs test scene

It uses same gltf file and environment map as the threejs scene.

Interesting effect: if I select “Panel-Front_Right-Fabric” material (it’s a “black” panel) in Inspector and disable “Ambient in grayscale” option, I will see occlusion texture in front of camera (where it wasn’t visible before), but it will dissapear outside that area.

And I’m wondering, how I can setup material/textures/environment be able to see my occlusion texture on black panel all over that panel.

Hi @sebavan,

seems there was a CORS issue in my test scenes - .gltf didn’t load. Now it should work fine and textured panels should be visible on scene.

Unfortunately the 3js example seems to be down at the moment, at least I can see the babylon one and looking into it it all seems correct, Occlusion should only occlude indirect lighting (diffuse harmonics) and in your scene as the material is having a black albedo it barely reflects indirect lightning.

The kind of occlusion you see at grazing angle is only environment occlusion you can try to turn it off through its respective parameters: useRadianceOcclusion helping to deem a bit radiance based on the occlusion usually happening due to geometry changes and works pretty well when a normal map is in.

I guess the easiest would be to bake the pattern inside the albedo to make it look as you wish. I look into what 3 does to see if there are any easy hacks you could do to make it look closer.