Rendering reflections in real-time can be done using several methods. Each method contains its own pros and cons. For Web technologies, 2 main methods exist:
As an exemple, with SSR enabled (look at the water-tank):
With SSR disabled:
You can find a simple example of the SSR post-process in our playground: https://playground.babylonjs.com/#PIZ1GK -
To render reflections using the SSR post-process, the device must support WebGL 2 or at least the multiple render targets extension for WebGL 1. If not supported, the post-process will just work as a pass-through.
To any reflecting geometry in your scene, the post-process must know what are its "reflectivity" properties. To provide these informations, your reflecting meshes must contain for:
In other words, don't forget to assign a specular texture or a reflectivity texture to you material if you want the reflections enabled on it.
// For a BABYLON.StandardMaterial myMaterial.specularTexture = new BABYLON.Texture("textures/specular.png", scene);
// For a BABYLON.PBRMaterial myMaterial.reflectivityTexture = new BABYLON.Texture("textures/reflectivity.png", scene);
Note: the SSR post-process is a kind of greedy post-process. It is not intended to work smoothly on low-end devices and requires an enough powerful device.
Just create an instance of BABYLON.ScreenSpaceReflectionPostProcess:
var ssr = new BABYLON.ScreenSpaceReflectionPostProcess( "ssr", // The name of the post-process scene, // The scene where to add the post-process 1.0, // The ratio of the post-process camera // To camera to attach the post-process );
The strength is applied on the overall specular/reflectivy informations in the scene and can be customized. The default value for the strength is 1.0 and should be used only if you are looking for a particular result (means that the result will not be realistic).
// Double specular/reflectivity strength. ssr.strength = 2;
Example playground: https://playground.babylonjs.com/#PIZ1GK#3 -
The falloff exponent is used to linearly reduce the reflection's intensities. The default value is "3.0" and works for most cases.
// Reduce more the reflection's intensities ssr.reflectionSpecularFalloffExponent = 4;
Example playground with an almost equal to 0 exponent: https://playground.babylonjs.com/#PIZ1GK#2 -
The reflections quality can be customized to save performances and should be adjusted to each scene type.
The post-process is based on ray-tracing algorithms. That means more the post-process picks samples, more the result looks good.
The quality is defined as:
According to the nature of the scene, the post-process quality can be not necessary perceptible between the medium and high qualities as the ray-tracing algorithm stops once it finds the reflection color. In other words, the high quality will be not be always needed.
High quality playground: https://playground.babylonjs.com/#PIZ1GK#7 -Medium quality playground: https://playground.babylonjs.com/#PIZ1GK#5 - Low quality playground: https://playground.babylonjs.com/#PIZ1GK#6 -