PBR Material: how to make roughness work as in Blender 2.80?


I am playing around with PBR materials, but I do not succeed to get something similar to what I’ve got in Blender while using the same HDR image for the environment lighting.

It seems that the roughness in BabylonJS is not making the reflection on the surfaces more diffuse as it seems to do in Blender. Is there a way to “activate” the roughness parameter? maybe it is deactivated by default for performance purposes?

Here is what the roughness parameter does in Blender:
Roughness = 0:
Roughness = 0.5:
To increase the roughness is making the reflection blurry basically, because the light is reflected in many directions because of the “roughness” of the surface.

Now here is what is happening in BabylonJS:
Roughness = 0:
Roughness = 0.5:

The roughness does not do much in terms of “blurring” the reflection.

I just don’t understand how to get it to work :confused:

Hey @Nodragem,

Just curious how you’re getting your asset to Babylon.js. Are you using the built-in gltf exporter in Blender 2.8?

I am using the Blender Exporter.
Good idea, I am going to try the GLTF exporter.

Still the same problem:

To be honest, there is another issue: the trees can appear black at first, and it is only when I move the roughness slider (or any other sliders related to PBR) that the trees’ material starts to be rendered…

Any way you’d be willing to share a playground and your blender file?

Sure thing.
Here is the blender file with the babylon file: tileset-level0.zip (410.4 KB)

Also here is a repro in the playground:
The scene will start with the objects totally black (that is either part of the bug, or it’s something I don’t understand…).
Go in the Inspector, go in Textures, click on the last texture (should be the only https texture that is not blurred).
Go to the Sampling dropdown list, change to Nearest & linear, the Image Based Lighting will “switch on” and the bug will appear.
Then change back to Nearest, to see that it would do the same with the default sampling setting.

If you change m.roughness to 0 in my code, the Image Based Lighting seems to work out-of-the-box; HOWEVER, if you go to the inspector then Materials/Leaves and change its roughness to 0.5, the trees become black again.

So it seems that there is no way to get the roughness to 0.5 :confused:

Your env texture does not look like it has been correctly generated. The data inside looks really strange. Did you follow the guide: Use a HDR environment (for PBR) - Babylon.js Documentation ?

Here is an example with a proper env: https://www.babylonjs-playground.com/#JUKXQD#207

1 Like

Yep, so I saw this tutorial. But here the thing, I wanted to use one of the HDR images from Blender, which led me to make a lot of “conversion”.

First the HDR image from Blender are saved in .exr format.
Hence what I had to save it in .hdr with Gimp.
Then I used cmftStudio to save it in .dds cube map format.
Then I used the Babylon Sandbox to save it in .env format.

As you can see the conversion pipeline was complicated and there are many points at which the proccess could have gone wrong…

What would be the best way to convert a .exr file to .env file?

You could load them directlyb in iblbaker or lys and prefilter + convert to dds in the tool.

Then you can directly use this dds during your tests or convert to env to rduce the file size before shipping.

I wanted to have a try, but IBLBaker requires to use Visual Studio ^^
Would it be possible that you walk me through how to do it properly with cmftStudio, which is simpler to install/use?
I am going to try different things on my side.

EDIT: I tried to convert directly from an .hdr image to .dds with cmftStudio, then use the .dds in the sandbox; I still get the same problem. Hence, it might be that I don’t know how to set up cmftStudio properly. @sebavan Can you give me more details on “Your env texture does not look like it has been correctly generated”? Thank you :slight_smile:

The result with cmft are usually not as good than IBL Baker which is less good as well from Lys.

You should be able to use : IBLBaker/bin64 at master · derkreature/IBLBaker · GitHub to not manually compile IBLBaker.

Ok, so here I used the Lys generated sunset of the Blender exporter, and I still get the issue that some of my objects are black until I go in the Inspector and move any parameters of the PBR material (let’s say metallic) to another value and back. Here a demo:

One thing I do not understand is that some other objects are fine (you can see in the background that other parts of the forest are well rendered). Any idea what it could be?

NOTE: I am using the mergeMeshes() function to create chunks of my world, the part in the background that renders well is another chunk of the world.

Can you put by code metallic = 0.01 just to see if it changes anything ? I have got a feeling it is using a spec gloss workflow va metallic one here for some reasons ?

Just tried with metallic = 0.01, does not work :confused:

This is extremely weird we would need a repro to go further as it definitely looks like like being linked to your project.

For context, my game world consist of 3d tiles. I clone and put them together and then I merge them into big chunks. Each tiles was made of several objects; hence BabylonJS was having a hard time to loop through all the tiles and all the objects within the tiles to merge them.

I reduced the number of objects within each tiles to 2 objects (i.e. 2 objects per tile) by combining (i.e. merging) them in Blender.

That solved the problem of the black material objects!

Of course, that also reduces the loading time in BabylonJS as mergeMeshes() do not need to loop through so many objects anymore.

So the issue is kind of resolved, although I don’t know why merging too many objects would have a consequence on the material…

1 Like

Glad to know it works but still no idea what could have caused it in the first place :frowning:

If this can help, using Blender 2.8 and exporting in .glb, and just drop it into sandbox doesn’t give black materials.

Ok it does not work quite well in fact, I still have the problem.

Would it be possible that this is related to the fact the materials of my merged chunks do not appear in the material list?

See below my material ground, which I opened in the inspector, does not appear in the materials list in the scene explorer.

To be more precise, it seems that right now the PBR material and IBR are working in Chrome but not in Firefox: