Real time PBR filtering is coming to Babylon

Babylon.js
2 min readJun 25, 2020

--

As you might know, in Babylon.js, we are always trying to push the rendering limits of our materials. One of our most powerful materials is the PBR material which stands for Physically Based Rendering. In short, it tries to mimic how light works in real life. In order to make it shine (pun intended), we rely on a technique called Image Based Lighting. You can think about it as a 360 picture from the surrounding environment around an object where every single “pixel” acts like a source of light (this wonderful article explains all about it). It works great with a static picture pre-filtered offline: you can see all the reflections as if the object was real. For example, you can see the static environment reflecting in the Christmas ball bellow.

I think we are the furthest as we can be from this season ;-)

This is all perfect but what about the moving objects in your scene? How can we see them in reflection or through refraction? More importantly, how can we keep the roughness of the material consistent ?

This is exactly what we are adding into the framework today: Real Time Light Probe Filtering !!!

Follow this link for the live demo.

Look at the caustics reflecting on the blade and refraction of the fish in the big gem :-)

The real exciting part is how simple it could be to setup. You first need to create a light probe to “capture” the surrounding environment around the object in real time.

As you can see below, setting up a light probe is pretty straightforward. You instantiate it and then provide its position (think about it as the location of a 360 video camera) in the scene along with the list of meshes it should “see”.

Be careful not to include the meshes relying on the probe itself or you will basically end up with a chicken and egg issue… You first need the material that needs the probe that needs the material…

Finally, after setting up your probe, you can switch the PBR material to use and filter it in real time:

For more information, you can consult the dedicated documentation.

That is it, and despite not looking like much, the amount of code and physics/maths behind it is quite impressive. Thanks a lot to Romain Guy from the filament team for all the support and @euphoben for the Babylon.js implementation.

--

--

Babylon.js

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