
# How To Use the SSAO rendering pipeline

BABYLON.SSAORenderingPipeline is a rendering pipeline (chained post-processes) that computes the ambient occlusion of a given scene from screen space.
You can find an example in our playground:

<Playground id="#N96NXC#106" title="SSAO Rendering Pipeline Example" description="Simple example of using the SSAO rendering pipeline." isMain={true} category="Post-processing"/>

The post-processes chain is defined by:

- Original scene color post-process: saves the original scene color
- SSAO post-process
- Horizontal blur post-process
- Vertical blur post-process
- Combine post-process: blends the Vertical blur post-process output with the original scene color

Using it is pretty straightforward:

```javascript
const ssao = new BABYLON.SSAORenderingPipeline("ssaopipeline", scene, 0.75);
```

The third argument is the ratio used by the SSAO, Horizontal blur, and Vertical blur post-processes.
You can also set an array of cameras as the fourth argument. The constructor will then automatically attach the rendering pipeline to the given cameras:

```javascript
const ssao = new BABYLON.SSAORenderingPipeline('ssaopipeline', scene, 0.75, [camera1 etc.]);
```

If you want to attach the rendering pipeline manually, use the scene rendering pipeline manager:

```javascript
const ssao = new BABYLON.SSAORenderingPipeline("ssaopipeline", scene, 0.75);
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssaopipeline", cameras);
```

**Warning: To improve performance, you should compute the SSAO/blurH/blurV with a ratio lower than 1.0.**

If you want to detach and destroy the rendering pipeline, you can just call the `dispose()` method.

```javascript
ssao.dispose();
```

You can see the SSAO post-process output by detaching the combine post-process like this:

```javascript
scene.postProcessRenderPipelineManager.disableEffectInPipeline("ssaopipeline", ssao.SSAOCombineRenderEffect, cameras);
```

**Note: SSAO uses the depth map renderer and activates it by default. You can disable the depth map renderer by passing `true` as the argument to the `dispose()` method.**

For more customization, you can specify the SSAO and Combine post-process ratios like this:

```javascript
const ssao = new BABYLON.SSAORenderingPipeline('ssaopipeline', scene, { ssaoRatio: 0.5, combineRatio: 1.0 }, [camera1 etc.]);
```



## The standard pipeline is no longer maintained.

[Default pipeline](/features/featuresDeepDive/postProcesses/defaultRenderingPipeline) should be used going forward, but the standard pipeline will be kept for backward compatibility.

## Introduction

This rendering pipeline simulates a chain of well-known post-process effects such as:

-   Lens imperfections (overexposed surfaces are highlighted)
-   Dirty lens effect
-   Depth of field
-   Motion Blur
-   Volumetric Lights

Simple playground: <Playground id="#FRUD8#2" title="Standard Rendering Pipeline Example" description="Simple example of the standard rendering pipeline."/>
Full playground: <Playground id="#X3XD2C#1" title="Standard Rendering Pipeline Example (full example)" description="Full example of the standard rendering pipeline."/>

## Creating the rendering pipeline

Just create an instance of BABYLON.StandardRenderingPipeline

```
var pipeline = new BABYLON.StandardRenderingPipeline(
    "standard", // The name of the pipeline
    scene, // The scene instance
    1.0, // The rendering pipeline ratio
    null, // The original post-process that the pipeline will be based on
    [camera] // The list of cameras to be attached to
);
```

## Customizing

## Bright threshold

Highlighted surfaces follow a configured numeric threshold.
Each pixel whose intensity is above the given threshold creates lens imperfections.
Just set the ".brightThreshold" property:

```
pipeline.brightThreshold = 0.8;
```

## Change exposure

To globally intensify the highlighted surfaces result before it is merged with the final scene color, you can change the `.exposure` property:

```
pipeline.exposure = 1.0; // which multiplies the final scene color with the highlighted surfaces result
```

## Blur width

The blur width (or kernel size) can be customized and is equal to 512 by default.

```
pipeline.exposure = 128; // Blur is less expansive and is less spreaded
```

## Setting up the dirty lens effect

To add a dirty lens effect, you can set the ".lensTexture" mask texture (background must be black) which will be applied on the screen following the highlighted surfaces:

```
// Just create a new BABYLON.Texture containing the dirty lens mask
pipeline.lensTexture = new BABYLON.Texture("lensdirt.jpg", scene);
```

A dirty lens mask should look like:

![DirtyLensTexture](/img/how_to/advanced/standardRenderingPipeline/lensdirt.webp)

## Setting up the pseudo lens flare

### Setting up textures

First, to activate the pseudo lens flare effect, just set the ".LensFlareEnabled" to true:

```
// Activating pseudo lens flare effect
pipeline.LensFlareEnabled = true;
```

Now, in order to work properly with the dirty lens effect (above), you can set your own dirt texture, which can be the same as the dirty lens effect. For example:

```
pipeline.lensTexture = pipeline.lensFlareDirtTexture = new Texture("lensdirt.jpg", scene);

// or

pipeline.lensFlareDirtTexture = new Texture("lens_flare_dirt.jpg", scene);
```

Now, you can add a "starbust" texture. This will disturb the final result and make it more realistic:

```
pipeline.lensStarTexture = new Texture("lensstar.jpg", scene);
```

![StarbustTexture](/img/how_to/advanced/standardRenderingPipeline/lensstar.webp)

which gives:

![StarbustTextureResult](/img/how_to/advanced/standardRenderingPipeline/lensstarresult.webp)

Finally, you can apply a palette of colors which will be used by the post-processes to disturb the lens flare colors:

```
pipeline.lensColorTexture = new Texture("lenscolor.png", scene);
```

A color texture should look like:

![LensColorTexture](/img/how_to/advanced/standardRenderingPipeline/lenscolor.webp)

### Setting up parameters

Once you added the textures, you can customize some parameters that will allow you to customize the final result:

The strength:

```
// The strength of the final result of the pseudo lens flare effect
pipeline.lensFlareStrength = 5; // By default 1.0
```

The halo width:

```
// Sets the width of the halo used to render the pseudo lens flare effect
pipeline.lensFlareHaloWidth = 1; // By default 0.4;
```

![HaloWidth](/img/how_to/advanced/standardRenderingPipeline/halo_width.webp)

The distortion strength:

```
// The strength related to the lens color texture
pipeline.lensFlareDistortionStrength = 35; // Default 4.0
```

## Setting up Luminance Adaptation

The standard rendering pipeline now allows you to compute luminance adaptation. This process simulates real-life behavior:
if you focus on a highly bright zone, the camera will adapt itself. In other words, this technique allows you to create
glare effects, and it is also linked to what we call "_HDR_".

### Customizing luminance adaptation

First, let's activate the luminance adaptation:

```
pipeline.HDREnabled = true;
```

That's all! Now, let's customize some properties:

```
// 1.0 is the default value. In dark zones, the camera will tend to adapt luminance
// and get the global image less dark. More the value is near 0.0, more the image will be bright
pipeline.hdrMinimumLuminance = 1.0;

// 0.5 is the default value. This simply sets the speed when the camera adapts the luminosity
// in bright zones
pipeline.hdrDecreaseRate = 0.5;

// 0.5 is the default value. This simply sets the speed when the camera adapts the luminosity
// in dark zones
pipeline.hdrIncreaseRate = 0.5;
```

## Setting up the depth of field

### Activating the depth of field

To activate the depth of field, simply set the property ".DepthOfFieldEnabled" to true:

```
// Active depth of field
pipeline.DepthOfFieldEnabled = true;
```

### Customizing depth of field distance

To manipulate depth of field, you can set the distance to blur by setting the ".depthOfFieldDistance" property. This property represents the distance to focus on:

```
// Focus on 20 units
pipeline.depthOfFieldDistance = 20;
```

Playground example: <Playground id="#LB63T#1" title="Custom Depth of Field Example" description="Simple example of custom depth of field distance."/>

**note: Activating the depth of field will activate the depth renderer of Babylon.js, which can have an impact on performances**

## Setting up the Motion Blur

As a demo, have a look at this video:

<Youtube id="14Ejsj1_ywM"/>

Motion Blur simply tries to blur the overall image when the camera moves fast.

## Customizing Motion Blur

```
// Enable motion blur in the pipeline
pipeline.MotionBlurEnabled = true;

// Default value is 1.0. More the motion strength is high, more the blur will be high
pipeline.motionStrength = 0.5;

// Default value is 64.0. This property represents the quality of the effect. More the value is high
// more the blur will be high quality. 64.0 is enough to have a beautiful result
pipeline.motionBlurSamples = 32.0;
```

**note: Activating the Motion Blur will activate the depth renderer of Babylon.js, which can have an impact on performances**

## Setting up volumetric lights

Volumetric Lights, as seen in the playground available in the introduction, can be computed with a post-process.

**note: Volumetric Lights require to have the multiple render targets support, basically WebGL 2 support**

<Youtube id="UKdWPj7VRu0"/>

## Customizing volumetric lights

```
// Enable Volumetric Lights computation in the pipeline
pipeline.VLSEnabled = true;

// First, give the source light to the pipeline which must be a spot light or a directional light
// The volumetric lights post-process needs a shadow map in order to work: it is used to test obstacles for the light rays
// Then, the source light mush have a shadows generator:
pipeline.sourceLight = <SpotLight> scene.getLightByName("spotLight");

// This represents the intensity of fog in the air. In other words, the light rays intensity in the shadow
pipeline.volumetricLightPower = 4;

// This represents the overall quality of the volumetric lights post-process in interval [0, 100].
// The default value is 50.0 and is enough for a good result
pipeline.volumetricLightStepsCount = 50;
```



# How to use PostProcessRenderPipeline
Post process render pipelines allow you to create a chain of post processes and attach it to a camera.
A render pipeline can be managed by enabling and disabling some effects and displaying a specific pass for debugging.


## Base Render Pipeline

![](/img/PPArchitecture.webp)

Render pipelines are composed of several classes.

| Class | Description |
|--------|--------|
|**`BABYLON.PostProcessRenderPipelineManager`**|Manages all pipelines and allows you to enable or disable an effect, or display a post-process pass for debugging.|
|**`BABYLON.PostProcessRenderPipeline`**|Set of effects that can be ordered.|
|**`BABYLON.PostProcessRenderEffect`**|A render effect contains one or more post processes.|
|**`BABYLON.PostProcess`**|A render pass that applies a shader.|

## Let's Work with a Render Pipeline

### Simple Pipeline
Create a pipeline:
```javascript
var standardPipeline = new BABYLON.PostProcessRenderPipeline(engine, "standardPipeline");
```

Create post processes. Note: the camera parameter is set to `null` when using a pipeline, and the post process will be enabled when the pipeline is added to the camera.
```javascript
var blackAndWhite = new BABYLON.BlackAndWhitePostProcess("bw", 1.0, null, null, engine, false);
var horizontalBlur = new BABYLON.BlurPostProcess("hb", new BABYLON.Vector2(1.0, 0), 20, 1.0, null, null, engine, false);
```

Create an effect with multiple post processes:
```javascript
var blackAndWhiteThenBlur = new BABYLON.PostProcessRenderEffect(engine, "blackAndWhiteThenBlur", function() { return [blackAndWhite, horizontalBlur] });
standardPipeline.addEffect(blackAndWhiteThenBlur);
```

Add the pipeline to the scene's manager and attach it to the camera:
```javascript
scene.postProcessRenderPipelineManager.addPipeline(standardPipeline);
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("standardPipeline", camera);
```

<Playground id="#QCGFI6" title="Post Process Render Pipeline Example" description="Simple example of using a post process render pipeline."/>

Using the SSAO Rendering Pipeline