I wanted to bring this topic over from our previous forum and address the topic of environment maps and how to use them in Babylon.js.
@sebavan and I spent a lot of time working on the implementation of our IBL environments. We reworked how we generate the DDS prefiltered environments so that we aligned with what perceptual ray tracers and popular game engines like Unity and Unreal are doing with their IBL rendering. We use a GGX algorithm that for our lighting calculations which has more of a linear roughness scale which loses clarity in reflections quickly (by around 0.3 roughness).
This doesn’t match up with what our brain expects where a 0.5 roughness value should fall in the middle of the scale so we are using what we are calling a perceptual roughness scale. We are approximating a perceptual roughness model which places what is perceived to be 50% rough in middle of the roughness ramp by adjusting the mip levels on our DDS environments. We adjusted the falloff to mirror what happens in Arnold ray tracing, which is the renderer we chose as our ground truth for this work:
We were able to largely match the perceptual falloff from the Arnold ray tracer, while using a prefiltered MIP chain in the DDS ignoring the last two MIP levels. We have some deviation from the high roughness in the ray traced ground truth, but since fully rough materials don’t really exist in the real world, there is no way to know if Arnold is right in these areas.
To look further into your scene, I recreated it with your code, while adding in the environment from the ground truth as well as our more neutral interior studio environment. I even turned off the directional light in your scene as you don’t really need it anymore, at least not pointing directly at the spheres to light them. I also dropped in the glb of the test spheres from above in with your spheres with a slight modification to your spheres where we are only looking at two rows, one fully metallic and one fully dielectric. Looking at materials that are partially metallic and partially rough are confusing to the eye to determine what looks right, so simplifying it to the extremes for metallic allows us to concentrate only on roughness and values to ensure things look right.
Here are the two environments with your setup (slightly modified):
You can see in these that the directional light is commented out so is not contributing to the scene. Ideally, you want to use an environment IBL to help ground your scene, but also to add more complex lighting without overloading the scene with analytical lights. You will still need the analytical lights for cast shadows, however.
Here is the playground for you to experiment with: http://playground.babylonjs.com/#BGWI46
It has both environment files referenced with one commented out so you can test both of them. Please let me know if you have any questions about anything.