Using High-Contrast, Image-Based Lighting in Babylon.js

The lighting in your 3D environment can mean be the difference between a beautiful scene and one that feels broken or forgettable to your users. With that in mind, we are always looking for ways to improve the rendering in Babylon.js so the pathway to creating beautiful 3D experiences is easy and obvious. Recently, we encountered an issue with some of the high dynamic range images (HDRI) that were being used for image-based lighting (IBL) in the engine. We often reference ray tracers as our ground truth for rendering and actively make course corrections when we find discrepancies. To illustrate the problem, consider the comparison render below.

The spheres on the left (front and rear) is a ray-traced render in Arnold and the spheres on the right is a real-time render in Babylon.js. Both are using the same HDRI source for IBL. The banding artifact in Babylon.js is problematic.
Arnold render using the original high-contrast HDRI.
Babylon.js render using the original high-contrast HDRI showing banding artifacts due to high contrast in the spherical harmonics.
Original, high-contrast HDRI used to calculate IBL.
Irradiance map calculated from original, high-contrast HDRI.
Spherical harmonics data set of nine colors derived from original HDRI.
Arnold ray-traced render on the left and the same HDRI used for IBL in Babylon.js on the right with a clamp in the code for the lighting calculation.
Original, high-contrast HDRI with a 32-bit color picker showing the values of each channel in Photoshop.
Edited, lower-contrast HDRI with a 32-bit color picker showing reduced values of each channel in Photoshop.
The edited HDRI with maximum values clamped to around 1,500 per channel.
Irradiance map calculated from the edited, lower-contrast HDRI.
Spherical harmonics data set of nine colors derived from the edited HDRI. Notice that we have nine distinct values this time with more reasonable results.
Arnold ray-traced render on the left and the edited HDRI used for IBL in Babylon.js on the right which provides the accurate spherical harmonics.
Arnold ray-traced render on the left and the edited HDRI used for IBL in Babylon.js on the right. The accurate spherical harmonics mixed with a directional light returns the Babylon.js render to parity with our target render.
Babylon.js playground to test IBL environments.

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/