Real time PBR filtering is coming to Babylon

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.

Image for post
Image for post
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 ?

Image for post
Image for post

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”.

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.

Written by

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

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