How to achieve a blurry effect in the distance

As shown in the picture, I want to achieve the effect of blurring the horizon in the distance. What should I do?
The near point in the picture is a ground, and the boundary between the distant ground and the sky is blurry

You could try to use a distant fog:


Or the Depth of Field post process Depth of Field and Other Lens Effects | Babylon.js Documentation ( :slight_smile:


Or a combination of both :grin:

1 Like

Thank you very much for your answer. This is a great document, but I have one more question. If I only want to blur distant scenery without affecting nearby scenery, what properties should I set in the parameters?


Best way to understand DOF is to load the DefaultRenderingPipeline in your scene or go to the playground and add it to your scene. Open ‘the Inspector’, right-click on ‘Rendering Pipeline’ > Add new default Rendering Pipeline. Change the values from the Inspector.

The important thing to understand here is that it works with the Camera. If you have some experience with a photo camera, you should already have a good understanding of what these parameters are.
Essentially, DOF works with

  1. a lens size
  2. a focus distance
  3. a focal length
    and as an adding to the 3D camera, a parameter that can become important to you to make sure you get no blur from a certain distance: the fstop. And then I guess BlurLevel is self-explicit :smile:
    Here’s an extract. You can get the full version code from the template shared in the link above:
        /* DOF */
        defaultPipeline.depthOfFieldEnabled = true; // false by default
        if (defaultPipeline.depthOfFieldEnabled && defaultPipeline.depthOfField.isSupported) {
            defaultPipeline.depthOfFieldBlurLevel = 0; // 0 by default
            defaultPipeline.depthOfField.fStop = 32; // 1.4 by default
            defaultPipeline.depthOfField.focalLength = 4500; // 50 by default, mm
            defaultPipeline.depthOfField.focusDistance = 2800; // 2000 by default, mm
            defaultPipeline.depthOfField.lensSize = 4; // 50 by default

Now, the point is I cannot tell you which values will work with your scene. It depends on the size of your scene, how you want to set your camera (min and max Z) and how much you want it to blur in the distance.