
# How To Use the SSAO rendering pipeline

BABYLON.SSAORenderingPipeline is a rendering pipeline (chained post-processes) that will compute the ambient occlusion of a given scene from the screen space.
You can find an example in our playground:

<Playground id="#N96NXC" title="SSAO Rendering Pipeline Example" description="Simple example of using the SSAO rendering pipeline."/>

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
var ssao = new BABYLON.SSAORenderingPipeline('ssaopipeline', scene, 0.75);
```

The third argument is the ratio used by SSAO, Horizontal blur and Vertical blur post-processes
You can also set an array of Camera as fourth argument, then the constructor will automatically attach the rendering pipeline to the given cameras like:

```javascript
var ssao = new BABYLON.SSAORenderingPipeline('ssaopipeline', scene, 0.75, [camera1 etc.]);
```

If you want to attach manually the rendering pipeline, just use the scene rendering pipeline manager like:

```javascript
var ssao = new BABYLON.SSAORenderingPipeline('ssaopipeline', scene, 0.75);
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssaopipeline", cameras);
```

**Warning: To save your performances, you should compute the SSAO/blurH/blurV with a lower ratio than 1.0 **

If you want to detach and destroy the rendering pipeline, you can just call `dispose()` method
```javascript
ssao.dispose();
```

You can see the SSAO post-process output by detaching the combine post-process like:

```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 argument in the dispose() method **

For more customization, you can specify the SSAO and Combine post-processes ratios like:

```javascript
var 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 backwards compatibility.

## Introduction

This rendering pipeline tends to simulate a chain of famous post-process effects such as

-   Lens imperfections (surexposed 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 are following a configured threshold which is a number.
Each pixel intensity above the given threshold is creating 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 by default equal to 512

```
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.jpg)

## 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.png)

which gives:

![StarbustTextureResult](/img/how_to/advanced/standardRenderingPipeline/lensstarresult.png)

Finally, you can apply a palette of colors which will be used by the post-processes to disburb the lens flare colors:

```
pipeline.lensColorTexture = new Texture("lenscolor.png", scene);
```

Color texture like:

![LensColorTexture](/img/how_to/advanced/standardRenderingPipeline/lenscolor.png)

### 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.png)

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 tends to simulate real life events:
it means that if you focus on a higly brighted zone, the camera will adapt itself. In another 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 adatation:

```
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 active 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, you 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 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 Renders 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.png)

Renders Pipelines are composed of several classes.

| Class | Description |
|--------|--------|
|**`BABYLON.PostProcessRenderPipelineManager`**| Managing all pipelines, allow you to enable or disable an effect, displaying a pass of post process 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 which will apply a shader.|

## Let's play with Render Pipeline

### Simple Pipeline
Create pipeline
```javascript
var standardPipeline = new BABYLON.PostProcessRenderPipeline(engine, "standardPipeline");
```

Create post processes. Note: Camera parameter is set to when using a pipeline and 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 pipeline to the scene's manager and attach 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