You can find an example of the motion blur post-process in our playground: https://www.babylonjs-playground.com/#E5YGEL#2 -
You just have to create an instance of BABYLON.MotionBlurPostProcess
var motionblur = new BABYLON.MotionBlurPostProcess( "mb", // The name of the effect. scene, // The scene containing the objects to blur according to their velocity. 1.0, // The required width/height ratio to downsize to before computing the render pass. camera // The camera to apply the render pass to. );
The blur is based on objects velocities. More the object's transformation is changing fast, more the blur is high for the object. Velocity is affected by each object position, rotation and scale:
By default, the post-process will blur the scene using a coefficient named
motionStrength. Its default value is equal to
1 and can be customized:
motionblur.motionStrength = 2; // double the blur effect
For performances/quality reason, you can also customize the blur quality. To blur an image, the effect
takes, for the current pixel, some samples around the current pixel one. More you take samples, more the quality of the blur is high. So, you can customize the number of samples using the property
motionBlurSamples. Its default value is equal to
motionblur.motionBlurSamples = 16; // divide quality by 2
To save performances, the motion blur's velocity map is rendered at the same time than depth buffer and normal buffer using the geometry render buffer.
The clear color of the render buffer collides with the needed clear color of the velocity map and can generate glitchs like this: https://www.babylonjs-playground.com/#E5YGEL#3 -
The Motion Blur post-process needs at least support of WebGL 2 or WebGL 1 with multiple render targets support. If not available, the post-process will work as a passthrough.