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

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/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Path tracing with babylonjs // Part 1 : Solids

Introduction to Angular —NgRx

Ports are not available: listen tcp 0.0.0.0:3000:

[ReactJS]Front End Developer Interview Questions

Build a REST API Using Node.js, Express.js, and MongoDB, and Test It on Postman

API Testing with Postman — Build a Dynamic Test Suite

Remote debug node js application using Visual Studio Code

How To Load CSS or SASS Styles Into Single SPA Framework Using Style-Loader

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

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

More from Medium

Capturing Motion

Image Processing with WebGL

Tracked Dolly Virtual Camera Explained in Unity’s Cinemachine

Simulating Refraction in Three.js