
# 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." image=""/>

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.]);
```


## Introduction

You can find a complete example of this pipeline in our playground:

<Playground id="#Y3C0HQ#146" title="Default Rendering Pipeline Example" description="Complete example of the default rendering pipeline." image=""/>

![default rendering pipeline example](/img/how_to/defaultRenderingPipeline/defaultRenderingPipeline.jpg)

The default rendering pipeline provides visual improvements to enhance the output of your scene:
* Antialiasing (MSAA and FXAA)
* Bloom
* Chromatic Aberration
* Depth of field
* Image processing including:
 * Color curves
 * Color grading
 * Contrast
 * Exposure
 * Tone mapping
 * Vignette effect
* Glow
* Grain
* Sharpening

## Creating the rendering pipeline

You just have to create an instance of `BABYLON.DefaultRenderingPipeline`:

```javascript
var pipeline = new BABYLON.DefaultRenderingPipeline(
    "defaultPipeline", // The name of the pipeline
    true, // Do you want the pipeline to use HDR texture?
    scene, // The scene instance
    [camera] // The list of cameras to be attached to
);
```

This will actually create a fullscreen post-process texture.

Notes:

1. The HDR value should be `true` as long as possible, unless you're targetting cheap fallback for low end devices. This value allow one of the half float or float texture type, depending on the GPU. Also, some effects (like bloom) will be more accurate.

2. When enabling a pipeline, you may notice that your scene clearColor will not match the color you have set. This can be fixed using `.toLinearSpace()`, as in this <Playground id="#08A2BS#15" title="Clear Color Fix" description="Simple example of fixing the clear color in the default rendering pipeline to match what you have set." image=""/>

## Customizing

## Antialiasing

The MSAA antialiasing (only supported in webGL 2.0 browsers) effect is off by default (set to 1) but can be increased using:

```javascript
pipeline.samples = 4;
```

Your value will be clamped by the maxed values allowed by the hardware (queried from the webgl context).

The FXAA antialiasing effect can be set using:

```javascript
pipeline.fxaaEnabled = true;
```

Note: without using the pipeline, your scene already use a MSAA antialiasing, which is webGL native. As said above, pipeline is running on a post-process texture: unfortunatly, webGL 1.0 devices will not be able to apply MSAA outside of render buffers. Still, FXAA is available but not as powerfull as MSAA.

## Sharpening

Sharpening can be enabled with:

```javascript
pipeline.sharpenEnabled = true;
```
To increase the intensity of the effect modify:

```javascript
pipeline.sharpen.edgeAmount = 0.9;
```

The amount of the original image in the output can be set with (setting this to 0 will produce edge detection output):

```javascript
pipeline.sharpen.colorAmount = 0.0;
```

## Depth of field

You can turn the depth of field effect on and off with:

```javascript
pipeline.depthOfFieldEnabled = true;
```

Set the strength of blur with (higher may affect performance):

```javascript
pipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low;
```

Furthermore, you can control the settings of the effect with the following parameters:

```javascript
pipeline.depthOfField.focusDistance  = 2000; // distance of the current focus point from the camera in millimeters considering 1 scene unit is 1 meter
pipeline.depthOfField.focalLength  = 50; // focal length of the camera in millimeters
pipeline.depthOfField.fStop  = 1.4; // aka F number of the camera defined in stops as it would be on a physical device
```

<Playground id="#8F5HYV#9" title="Depth Of Field Example" description="Simple example of depth of field in the default rendering pipeline." image=""/>

## Bloom

You can turn the bloom effect on and off with:

```javascript
pipeline.bloomEnabled = true;
```

The bloom luminance threshold, impact of the bloom, kernel size and scale can be controlled with the following:

```javascript
pipeline.bloomThreshold = 0.8;
pipeline.bloomWeight = 0.3;
pipeline.bloomKernel = 64;
pipeline.bloomScale = 0.5;
```

## Image processing effect

You can turn the image processing effect on and off with:

```javascript
pipeline.imageProcessingEnabled = true;
```

You can also control individual image processing subeffects. To get more info about the ImageProcessing postprocess, please read the following [tutorial](/divingDeeper/postProcesses/usePostProcesses#imageprocessing).

## Chromatic Aberration

You can turn the effect on and off with:

```javascript
pipeline.chromaticAberrationEnabled = true;
```

Furthermore, you can control the distance of color channel separation with:

```javascript
pipeline.chromaticAberration.aberrationAmount = 300;
```

To modify the strength of the effect based on the distance from the center of the screen:

```javascript
pipeline.chromaticAberration.radialIntensity = 3;
```

To modify the direction the aberration the direction can be set:

```javascript
var rotation = Math.PI;
pipeline.chromaticAberration.direction.x = Math.sin(rotation)
pipeline.chromaticAberration.direction.y = Math.cos(rotation)
```

Note: If both these values are set to 0 the direction will be towards the center of the screen.

## Grain

You can turn the effect on and off with:

```javascript
pipeline.grainEnabled = true;
```

Furthermore, you can control intensity of the grain with:

```javascript
pipeline.grain.intensity = 10;
```

To set grain to animate on every frame set:

```javascript
pipeline.grain.animated = value;
```

## Example

You may be interested by this code example using default values, ready to be copy-pasted into your application:

```javascript
    // https://doc.babylonjs.com/api/classes/babylon.defaultrenderingpipeline
    var defaultPipeline = new BABYLON.DefaultRenderingPipeline(
        "DefaultRenderingPipeline",
        true, // is HDR?
        scene,
        scene.cameras
    );
    if (defaultPipeline.isSupported) {
        /* MSAA */
        defaultPipeline.samples = 1; // 1 by default
        /* imageProcessing */
        defaultPipeline.imageProcessingEnabled = true; //true by default
        if (defaultPipeline.imageProcessingEnabled) {
            defaultPipeline.imageProcessing.contrast = 1; // 1 by default
            defaultPipeline.imageProcessing.exposure = 1; // 1 by default
            /* color grading */
            defaultPipeline.imageProcessing.colorGradingEnabled = false; // false by default
            if (defaultPipeline.imageProcessing.colorGradingEnabled) {
                // using .3dl (best) :
                defaultPipeline.imageProcessing.colorGradingTexture = new BABYLON.ColorGradingTexture("textures/LateSunset.3dl", scene);
                // using .png :
                /*
                var colorGradingTexture = new BABYLON.Texture("textures/colorGrade-highContrast.png", scene, true, false);
                colorGradingTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
                colorGradingTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;                
                defaultPipeline.imageProcessing.colorGradingTexture = colorGradingTexture;
                defaultPipeline.imageProcessing.colorGradingWithGreenDepth = false;
                */
            }
            /* color curves */
            defaultPipeline.imageProcessing.colorCurvesEnabled = false; // false by default
            if (defaultPipeline.imageProcessing.colorCurvesEnabled) {
                var curve = new BABYLON.ColorCurves();
                curve.globalDensity = 0; // 0 by default
                curve.globalExposure = 0; // 0 by default
                curve.globalHue = 30; // 30 by default
                curve.globalSaturation = 0; // 0 by default
                curve.highlightsDensity = 0; // 0 by default
                curve.highlightsExposure = 0; // 0 by default
                curve.highlightsHue = 30; // 30 by default
                curve.highlightsSaturation = 0; // 0 by default
                curve.midtonesDensity = 0; // 0 by default
                curve.midtonesExposure = 0; // 0 by default
                curve.midtonesHue = 30; // 30 by default
                curve.midtonesSaturation = 0; // 0 by default
                curve.shadowsDensity = 0; // 0 by default
                curve.shadowsExposure = 0; // 0 by default
                curve.shadowsHue = 30; // 30 by default
                curve.shadowsDensity = 80;
                curve.shadowsSaturation = 0; // 0 by default;
                defaultPipeline.imageProcessing.colorCurves = curve;
            }
        }
        /* bloom */
        defaultPipeline.bloomEnabled = false; // false by default
        if (defaultPipeline.bloomEnabled) {
            defaultPipeline.bloomKernel = 64; // 64 by default
            defaultPipeline.bloomScale = 0.5; // 0.5 by default
            defaultPipeline.bloomThreshold = 0.9; // 0.9 by default
            defaultPipeline.bloomWeight = 0.15; // 0.15 by default
        }
        /* chromatic abberation */
        defaultPipeline.chromaticAberrationEnabled = false; // false by default
        if (defaultPipeline.chromaticAberrationEnabled) {
            defaultPipeline.chromaticAberration.aberrationAmount = 30; // 30 by default
            defaultPipeline.chromaticAberration.adaptScaleToCurrentViewport = false; // false by default
            defaultPipeline.chromaticAberration.alphaMode = 0; // 0 by default
            defaultPipeline.chromaticAberration.alwaysForcePOT = false; // false by default
            defaultPipeline.chromaticAberration.enablePixelPerfectMode = false; // false by default
            defaultPipeline.chromaticAberration.forceFullscreenViewport = true; // true by default
        }
        /* DOF */
        defaultPipeline.depthOfFieldEnabled = false; // false by default
        if (defaultPipeline.depthOfFieldEnabled && defaultPipeline.depthOfField.isSupported) {
            defaultPipeline.depthOfFieldBlurLevel = 0; // 0 by default
            defaultPipeline.depthOfField.fStop = 1.4; // 1.4 by default
            defaultPipeline.depthOfField.focalLength = 50; // 50 by default, mm
            defaultPipeline.depthOfField.focusDistance = 2000; // 2000 by default, mm
            defaultPipeline.depthOfField.lensSize = 50; // 50 by default
        }
        /* FXAA */
        defaultPipeline.fxaaEnabled = false; // false by default
        if (defaultPipeline.fxaaEnabled) {
            defaultPipeline.fxaa.samples = 1; // 1 by default
            defaultPipeline.fxaa.adaptScaleToCurrentViewport = false; // false by default
        }
        /* glowLayer */
        defaultPipeline.glowLayerEnabled = false;
        if (defaultPipeline.glowLayerEnabled) {
            defaultPipeline.glowLayer.blurKernelSize = 16; // 16 by default
            defaultPipeline.glowLayer.intensity = 1; // 1 by default
        }
        /* grain */
        defaultPipeline.grainEnabled = false;
        if (defaultPipeline.grainEnabled) {
            defaultPipeline.grain.adaptScaleToCurrentViewport = false; // false by default
            defaultPipeline.grain.animated = false; // false by default
            defaultPipeline.grain.intensity = 30; // 30 by default
        }
        /* sharpen */
        defaultPipeline.sharpenEnabled = false;
        if (defaultPipeline.sharpenEnabled) {
            defaultPipeline.sharpen.adaptScaleToCurrentViewport = false; // false by default
            defaultPipeline.sharpen.edgeAmount = 0.3; // 0.3 by default
            defaultPipeline.sharpen.colorAmount = 1; // 1 by default
        }
    }
```

As usual, a playground is available to check out: <Playground id="#ECI2Q0#5" title="Default Rendering Pipeline Template Code" description="Simple playground with cut and paste code for the default rendering pipeline." image=""/>


# How To Use Depth-of-field and other Lens Effects

`BABYLON.LensRenderingPipeline` is a predefined chain of postprocesses that helps achieving photograph-like realism.

![DoF example](/img/how_to/depth-of-field/example01.jpg)  
_An example of what can be achieved with this postprocess pipeline._

You can see a live example of it here:

<Playground id="#DX6AV#4" title="Depth of Field Example" description="Simple example showcasing depth of field." image=""/>

Three post-processes are used in the pipeline:

- First, a _'chromatic aberration'_ post-process, which shifts very slightly red, green and blue channels on screen. This effect is stronger on the edges. 
- Second, a _'highlights enhancing'_ post-process, which keeps only highlights in the scene, to be used in the depth-of-field blur
- Third, a _'depth-of-field'_ post-process, which actually does a bit more than that: 
  - blur on the edge of the lens 
  - lens distortion 
  - depth-of-field blur based on actual optics equation (the simulated lens has an inverse focal length of 0.1) 
  - depth-of-field 'bokeh' effect (shapes appearing in blurred areas) 
  - grain effect (noise or custom texture) 
  - darken out-of-focus objects 

# Usage ##

To use it, you must first define a set of parameters that will impact the actual post-processing performed. This is done by defining an object and setting the desired properties:
```javascript
var parameters = {
  edge_blur: 1.0,
  chromatic_aberration: 1.0,
  distortion: 1.0,
  // etc.
};
```

And then simply create the object with the parameters you've defined earlier, like so:
```javascript
var lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', parameters, scene, 1.0, camera);
```
Note that in the above example, the pipeline is immediately attached to the camera, but this is not mandatory. You can also use it like this:
```javascript
var lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', parameters, scene, 1.0);
// ...
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline('lensEffects', camera);
```

Here is a list of properties you may set on your parameters object:

| Property | Type | Description |
|--------|--------|--------|
|`chromatic_aberration`|number|0 means effect is disabled, 1 is for realism. Defines the spread of the RGB channels in the chromatic aberration shader.|
|`edge_blur`|number|0 means effect is disabled, 1 is for realism. Defines the amount of blur that will appear on the corners of the screen.|
|`distortion`|number|0 means effect is disabled, 1 is for realism. Defines the amount of lens-like distortion.|
|`grain_amount`|number|Varies from 0 to 1. Amount of grain to blend on screen.|
|`grain_texture`|BABYLON.Texture|Texture to use for grain effect; if unset, a random B&W noise is used instead.|
|`dof_focus_distance`|number|The distance at which focus is set. Everything out of focus will be blurred. Note that a focus distance above a few hundred units gives you infinity focus.|
|`dof_aperture`|number|Default: 1. How quickly things outside of focus will become blurred. Set high to give a 'miniature' effect (a.k.a. _tilt shift_).|
|`dof_darken`|number|Default: 0. How much should out-of-focus objects be darkened. This effect should be used lightly! Set to 0 to disable.|
|`dof_pentagon`|boolean|Default: true. Makes a pentagon-like "bokeh" effect. "Bokeh" is a term for artifacts appearing when objects are very blurred: bright spots will often produce sharp geometric shapes, depending on the type of the lens.|
|`dof_gain`|number|Default: 1. How much highlights on blurred objects should be enhanced. Set to 0 to disable highlights enhancing.|
|`dof_threshold`|number|Default: 1. How wide should highlights be on blurred objects.|
|`blur_noise`|boolean|Default: true. Adds a very slight noise on the blur effect for out-of-focus objects.|

The BABYLON.LensRenderingPipeline object created should be saved if you want to tweak the effects after its creation. This can be done with the following, self-explanatory methods:

| Methods |
|--------|
|`setEdgeBlur(amount: number)`|
|`disableEdgeBlur()`|
|`setGrainAmount(amount: number)`|
|`disableGrain()`|
|`setChromaticAberration(amount: number)`|
|`disableChromaticAberration()`|
|`setEdgeDistortion(amount: number)`|
|`disableEdgeDistortion()`|
|`setHighlightsGain(amount: number)`|
|`setHighlightsThreshold(amount: number)`|
|`setFocusDepth(amount: number)`|
|`disableDepthOfField()`|
|`setAperture(amount: number)`|
|`setDarkenOutOfFocus(amount: number)`|
|`enablePentagonBokeh()`|
|`disablePentagonBokeh()`|
|`setAperture(amount: number)`|
|`enableNoiseBlur()`|
|`disableNoiseBlur()`|


# A Word Of Advice ##

These effects are based on general approximations of real world optics phenomenons. As such, some situations may end up looking a bit off or even completely wrong. Tweaking the parameters (including on-the-fly adjustments) will allow you to mitigate these problems, for example by lowering aperture in situations where you know that blurred objects will not render correctly.

Keep in mind that the approximation used does not give good results when an object inside focus is rendered on top of a strongly blurred one, or the other way around. Bleeding around one object or the other will probably occur in this case.

Finally, these effects can be pretty intensive on the GPU. A lower blur effect (i.e. smaller blur radius) will be less demanding, so you can try to lower aperture instead of disabling it altogether. Highlight enhancing is also quite intensive, so be sure that this effect contribute to the quality of your render if you have it active.



## Introduction
You can find an example of the motion blur post-process in our playground: <Playground id="#E5YGEL#2" title="Motion Blur Post Process Example" description="Simple example of the motion blur post process." image=""/>

## Creating the motion blur post-process

You just have to create an instance of BABYLON.MotionBlurPostProcess
```javascript
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:
- Rotation: <Playground id="#9LRA3T#4" title="Rotational Motion Blur" description="Simple example showing rotational motion blur." image=""/>
- Scale: <Playground id="#9LRA3T#6" title="Scaling Motion Blur" description="Simple example of motion blur based on scale." image=""/>
- Position: <Playground id="#9LRA3T#8" title="Positional Motion Blur" description="Simple example of motion blur based on position." image=""/>

## Customizing
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:
```javascript
motionblur.motionStrength = 2; // double the blur effect
```
Example: <Playground id="#9LRA3T#10" title="Customizing Motion Blur" description="Simple example of customizing the motion blur post process." image=""/>

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 `32`:
```javascript
motionblur.motionBlurSamples = 16; // divide quality by 2
```

## Optimizing your application
By default, the post-process will blur all objects that generate a velocity (position, rotation and scale). This includes also skinned meshes animated by its bones.
Sometimes, complex skinned meshes can have too much bones and can generate a drop in framerate. You can decide to exclude a skinned mesh from bones computation while rendering the velocity map and apply blur only on their position/rotation/scale variation. The `MotionBlurPostProcess` provides an helper to add and remove skinned meshes:
```javascript
// Now, the mesh "mySkinnedMesh" will not compute bones velocities and will save performances.
motionblur.excludeSkinnedMesh(mySkinnedMesh);
```

```javascript
// Previously excluded, the mesh "mySkinnedMesh" will now compute bones velocities for a better render.
motionblur.removeExcludedSkinnedMesh(mySkinnedMesh);
```

## Limitations
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: <Playground id="#E5YGEL#3" title="Limitations In The Motion Blur Post Process" description="Simple example showcasing colliding visual artifacts between the clear color of the render buffer and the velocity map." image=""/>. As a limitation, your scene must occur in a closed environment OR have at least a skybox to hide the empty space that causes these glitchs.

# Notes
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.

## Disabling Object-Based Motion Blur
By default, the motion blur post-process is using object-based velocity to calculate blur. In large scenes, it can have a cost to calculate velocity of each object available on the screen. Object-based velocity can be disabled to fallback on screen-based mode. The screen-based mode allows to avoid calculating objects velocities by calculating the velocity based only on the camera's movement.

To enable to screen-based mode, just flag the post-process to disable object-based mode like:
```javascript
// Disable object-based mode in order to enable screen-based mode.
motionblur.isObjectBased = false;
```

Example: <Playground id="#E5YGEL#7" title="Screen-Based Motion Blur" description="Simple example of customizing the motion blur post process to disable object-based mode." image=""/>


# 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." image=""/>


## How to use RenderTargetTexture and run multiple passes

Sometimes it's interesting to render a scene multiple times and compose the generated passes for the final image. There are multiple uses for that: you can generate a texture in real time, to make a car rearview mirror for example, or you can perform complex effects with multiple independent renders that are combined together. 

The PostProcess API doesn't let you render a scene twice. That's where RenderTargetTexture (RTT) comes into play. Several [games use multiple passes for their graphics](http://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/).

## Creating a RenderTargetTexture

You need to create a RenderTargetTexture and attach it to the scene. It's pretty straightforward:

```    
var renderTarget = new BABYLON.RenderTargetTexture(
    'render to texture', // name 
    512, // texture size
    scene // the scene
);
scene.customRenderTargets.push(renderTarget); // add RTT to the scene
```

You also need to pick which objects will be rendered to that texture. This enables you to select only a few objects for a particular effect, or use simpler meshes for faster rendering.

```
let sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene); // create your mesh
renderTarget.renderList.push(sphere); // add it to the RTT
```

## Using the RTT in your scene as a regular texture

You can use the rendered image as the texture of an object in your main render. Just set it as the texture of a material:

```
var mat = new BABYLON.("RTT mat", scene);
mat.diffuseTexture = renderTarget;
```

In the example we only add half of the spheres to the RTT, showing how you can selectively pick the objects rendered there.

Playground example: <Playground id="#69DRZ1" title="Render Target Texture" description="Simple example of using the render target texture." image=""/>

## Making multiple passes and composing them

Another possibility, as mentioned, is making multiple render passes of the main camera and compose them. Let's do that, adding a simple effect on all meshes and compose it with the original material. One interesting effect to simulate with this technique is water caustics. We can render the scene applying a material that simulates caustics with a wave generator and mix it with the base texture.

The trick is to change the texture on the RTT to use our caustic material on all meshes instead of their own material:

```
renderTarget.onBeforeRender = (e) => {
    // Apply the shader on all meshes
    for (const i in renderTarget.renderList) {
        renderTarget.renderList[i]._saved = renderTarget.renderList[i].material;
        renderTarget.renderList[i].material = causticMaterial;
    }
};
renderTarget.onAfterRender = () => {
    // Remove the shader on all meshes
    for (const i in renderTarget.renderList) {
        renderTarget.renderList[i].material = renderTarget.renderList[i]._saved;
    }
};
```

For the final pass we'll create a shader to merge the base render (which will be provided in the GLSL as `textureSampler`) and the caustic texture, which we declare here as `causticTexture`. 

```
// create the final pass composer
var finalPass = new BABYLON.PostProcess(
    'Final compose shader', 
    'final', // shader name
    null, // attributes
    [ 'causticTexture' ], // textures
    1.0,  // options
    null, // camera
    BABYLON.Texture.BILINEAR_SAMPLINGMODE, // sampling
    engine // engine
);
finalPass.onApply = (effect) => {
    effect.setTexture('causticTexture', renderTarget); // pass the renderTarget as our second texture
};
```

We now can [use a pipeline](/divingDeeper/postProcesses/postProcessRenderPipeline) that performs a base render and uses the `finalPass` to compose it with the caustics.

```
// the render pipeline
var pipeline = new BABYLON.PostProcessRenderPipeline(engine, 'pipeline');
var renderPasses = new BABYLON.PostProcessRenderEffect(
    engine, 'renderPasses', function() { return [imagePass, finalPass]; });
pipeline.addEffect(renderPasses);
scene.postProcessRenderPipelineManager.addPipeline(pipeline);
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline('pipeline', camera);
```

Playground example: <Playground id="#TG2B18" title="Multiple Passes Example" description="Simple example showing how to run multiple passes with the render target texture." image=""/>. On the left you'll see the base render, on the middle the caustic render, and on the right both combined together.

## Performance and tips

Remember that you'll be rendering your scene multiple times, one for each pass. This can significantly slow things down if you are not careful. There are a number of strategies to improve performance:

- reduce the RTT size.
- render as few objects as you can on the RTT.
- use a simple shader on the RTT pass.
- prefer simpler meshes.
- use instances. If you have a large amount of copies of the same object, instances are a good optimization. You only change the material of the base mesh.

Replacing materials is an expensive operation on Babylon, as it requires a resync from the CPU. If your meshes use materials, such as ShaderMaterial or a PBRMaterial, this might impact significantly on the FPS rate. The example above is simple to follow and understand the concept, but there's a way to achieve much better performance,by freezing materials before swapping them. Here's how to do it.

First, create objects that will be in the RTT with a clone of the RTT shader material.

```
// helper function to create clones of the caustic material
// we need that because we'll have different transforms on the shaders
let rttMaterials = [];
const getRTTMaterial = () => {
    let c = rttMaterial.clone();
    c.freeze(); // freeze because we'll only update uniforms
    rttMaterials.push(c);
    return c;
};

// some material for the ground.
var grass0 = new BABYLON.StandardMaterial("grass0", scene);
grass0.diffuseTexture = new BABYLON.Texture("textures/grass.png", scene);
    
// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
ground.material = grass0;
// add caustics
ground.rttMaterial = getRTTMaterial();
renderTarget.renderList.push(ground);
```

Swap materials on the RTT before/after callbacks.

```
 // before we render the target, swap materials.
renderTarget.onBeforeRender = (e) => {
    // Apply the shader on all meshes
    renderTarget.renderList.forEach((mesh) => {
        // skip InstancedMesh, we'll handle the original mesh
        if (mesh.getClassName() === 'InstancedMesh') {
            return;
        }
        // the PBR material takes some time to be loaded, it's possible that in the first few frames mesh.material is null...
        if (mesh.material && !mesh.isFrozen && ('isReady' in mesh) && mesh.isReady(true)) { 
            // backup effects
            const _orig_subMeshEffects = [];
            mesh.subMeshes.forEach((submesh) => {
                _orig_subMeshEffects.push([submesh.effect, submesh.materialDefines]);
            });
            mesh.isFrozen = true;
            mesh.material.freeze(); // freeze material so it won't be recomputed onAfter
            // store old material/effects
            mesh._saved_orig_material = mesh.material;
            mesh._orig_subMeshEffects = _orig_subMeshEffects;
        }
        if (!mesh._orig_subMeshEffects) {
            return;
        }
        // swap the material
        mesh.material = mesh.rttMaterial;
        // and swap the effects
        if (mesh._rtt_subMeshEffects) {
            for (let s = 0; s < mesh.subMeshes.length; ++s) {
                mesh.subMeshes[s].setEffect(...mesh._rtt_subMeshEffects[s]);
            }
        }
    });
};
renderTarget.onAfterRender = () => {
    // Set the original shader on all meshes
    renderTarget.renderList.forEach((mesh) => {
        // skip InstancedMesh, we'll handle the original mesh
        if (mesh.getClassName() === 'InstancedMesh') {
            return;
        }
        // nothing to do, early bail
        if (!mesh._orig_subMeshEffects) {
            return;
        }
        // backup sub effects on the rtt shader
        if (!mesh._rtt_subMeshEffects) {
            mesh._rtt_subMeshEffects = [];
            mesh.subMeshes.forEach((submesh) => {
                mesh._rtt_subMeshEffects.push([submesh.effect, submesh.materialDefines]);
            });
        }
        // swap back to original material
        mesh.material = mesh._saved_orig_material;
        for (let s = 0; s < mesh.subMeshes.length; ++s) {
            mesh.subMeshes[s].setEffect(...mesh._orig_subMeshEffects[s]);
        }
    });
};
```

Apply any uniforms on all material clones:

```
engine.runRenderLoop(() => {
    // ... 
    rttMaterials.forEach((c) => {c.setFloat('time', timeDiff)});
});
```

The example has the complete code, including animated objects and instances. You could freeze some meshes with `scene.freezeActiveMeshes()` to improve the performance even further.

Playground example: <Playground id="#S1W87B#5" title="Performance Example" description="Example of managing performance when running multiple passes." image=""/>

### Notes about your shader

Note that since you replace the material with a shader from the scratch for mesh instances, you need to handle effects such as animation or the instance transformation,and this will affect your vertex shader (and possibly your fragment shader as well). There are [https://github.com/BabylonJS/Babylon.js/tree/master/src/Shaders/ShadersInclude](several includes in Babylon) that help with that. Here's a sample vertex shader with support for bone animations and instances:

```
precision highp float;

attribute vec3 position;
attribute vec2 uv;

uniform mat4 view;
uniform mat4 projection;
uniform mat4 worldViewProjection;

varying vec2 vUV;

#include<bonesDeclaration>
#include<instancesDeclaration>

void main() {
    vec3 positionUpdated = position;

    #include<instancesVertex>
    #include<bonesVertex>

    vec4 worldPos = finalWorld * vec4(positionUpdated, 1.0);

    vUV = uv;

    gl_Position = projection * view * worldPos;
}
```

### Debugging multiple passes

Your final composer might become a complicated shader, and each pass might be complicated in itself. You certainly will need to debug shaders along the way. One way to easily debug individual passes is to show only that pass to the screen, commenting the rest of the code.

```
varying vec2 vUV;
uniform sampler2D somePassTexture;

void main() {
    // comment other code
    vec4 debugColor = texture2D(someTexture, vUV);
    gl_FragColor = debugColor;
}
```

Testing passes in separate and then adding them one at a time to the composer will make it easier to debug any issues. You can use the technique from the playgrounds above, splitting the screen on columns, each with a different pass, as well.

Finally you can also check RT textures with the [Babylon inspector](/toolsAndResources/tools/inspector).


## Introduction
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:
* **Using a Mirror Texture**:
    * pros: renders perfect reflections on a plane.
    * cons: limited to one reflection direction and complexity grows according to the scene's geometries.
* **Using a SSR post-process**:
    * pros: renders all possible reflections in all directions and complexity only depends on the screen's resolution (as all post-processes).
    * cons: limited to what the camera sees.

As an example, with SSR enabled (look at the water-tank):
![with_ssr](/img/how_to/screenSpaceReflectionsPostProcess/with_ssr.png)

With SSR disabled:
![with_ssr](/img/how_to/screenSpaceReflectionsPostProcess/without_ssr.png)

You can find a simple example of the SSR post-process in our playground: <Playground id="#PIZ1GK" title="SSR Post Process Example" description="Simple example of the screen space reflection Post Process." image=""/>

## Prerequisite
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:
* a **Standard Material**: a specular texture. The specular texture will be used to know how much the object reflects for each pixel.
* a **PBR Material**: a reflectivy texture. The post-process doesn't still support the roughness/metallic properties for instance and will be available in future. That means the post-process takes the reflectivity texture as-is and doesn't compute any metallic/roughness workflow.

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.

```javascript
// For a BABYLON.StandardMaterial
myMaterial.specularTexture = new BABYLON.Texture("textures/specular.png", scene);
```

```javascript
// 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.**

## Creating the SSR post-process
Just create an instance of BABYLON.ScreenSpaceReflectionPostProcess:
```javascript
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
); 
```

## Customizing

## Strength
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).

```javascript
// Double specular/reflectivity strength.
ssr.strength = 2;
```

Example playground: <Playground id="#PIZ1GK#3" title="SSR Reflective Strength Example" description="Simple example of the reflective strength of the screen space reflection post process." image=""/>

## Falloff Exponent
The falloff exponent is used to linearly reduce the reflection's intensities. The default value is "3.0" and works for most cases.

```javascript
// Reduce more the reflection's intensities
ssr.reflectionSpecularFalloffExponent = 4;
```

Example playground with an almost equal to 0 exponent: <Playground id="#PIZ1GK#2" title="SSR Falloff Example" description="Simple example falloff in the screen space reflection post process." image=""/>

## Quality
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:
* Low: 25 samples.
* Medium: 50 samples.
* High: 100 samples.

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: <Playground id="#PIZ1GK#7" title="High Quality SSR Example" description="Example of high quality screen space reflections." image=""/>
Medium quality playground: <Playground id="#PIZ1GK#5" title="Medium Quality SSR Example" description="Example of medium quality screen space reflections." image=""/>
Low quality playground: <Playground id="#PIZ1GK#6" title="Low Quality SSR Example" description="Example of low quality screen space reflections." image=""/>


## The standard pipeline is no longer maintained.

[Default pipeline](/divingDeeper/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." image=""/>
Full playground: <Playground id="#X3XD2C#1" title="Standard Rendering Pipeline Example (full example)" description="Full example of the standard rendering pipeline." image=""/>

## 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." image=""/>

**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 PostProcess

## Base postprocess
Every postprocess is based upon ```BABYLON.PostProcess``` which uses this constructor:

```javascript
BABYLON.PostProcess = function (name, fragmentUrl, parameters, samplers, ratio, camera, samplingMode, engine, reusable)
```

We will get back to _fragmentUrl_, _parameters_ and _samplers_ parameters.

The _ratio_ is used to define the size of the postprocess (0.5 means that your postprocess will have a width = canvas.width * 0.5 and a height = canvas.height * 0.5).

The _camera_ parameter specifies which camera to attach to. If creating a post process to be managed by a render pipeline this should be set to null. See [Post Process Pipeline](/divingDeeper/postProcesses/postProcessRenderPipeline)

The _samplingMode_ can be one of the following:
* BABYLON.Texture.NEAREST_SAMPLINGMODE
* BABYLON.Texture.BILINEAR_SAMPLINGMODE (**default**)
* BABYLON.Texture.TRILINEAR_SAMPLINGMODE

Please note that postprocess with trilinear sampling will be force to have a power of two size (256, 512, 1024, etc.)

The _engine_ parameter is the engine where you want to attach your postprocess.

The _reusable_ paameter indicates if your postprocess can be reused multiple times on the same camera (default is false).

## Additional parameters
By default (and if you are not using trilinear sampling) the postprocesses used the size of the screen scaled by the ratio you provide. But you can decide to force them to be rescaled to a power of two size in order to be more efficient. To enable this, just call `mypostprocess.alwaysForcePOT = true`.

You can also control how the size is chosen by setting `mypostprocess.scaleMode` to one of these values:
* BABYLON.Engine.SCALEMODE_FLOOR: Will fint the next lowest power of two.
* BABYLON.Engine.SCALEMODE_NEAREST: Will fint the nearest power of two.
* BABYLON.Engine.SCALEMODE_CEILING: Will fint the next highest power of two.

You can also control if the postprocess is cleared upon rendering with `mypostprocess.autoClear = true`. This is the default behavior.

If you turn off autoClear, you will be able to blend the render of the postprocess with its previous content by defining an alphaMode with `mypostprocess.alphaMode = BABYLON.Engine.ALPHA_COMBINE`.

This could be really useful when you have multiple postprocesses enabled together. You can even choose to share the output of several postprocesses with `mypostprocess.shareOutputWith(anotherPostprocess)`.

## Attach postprocess
Depending on how you have defined a postprocess, it can be attached one or more times to the same camera.
The same instance can also be attached to multiple cameras.

A camera has two methods:
### **attachPostProcess**

```javascript
NUMBER function(PostProcess postProcess [,NUMBER atIndice])
```

### **detachPostProcess**

```javascript
NUMBER function(PostProcess postProcess [,NUMBER[] atIndices])
```

## Builtin postprocesses
Babylon.js comes with a set of ready to use postprocesses.

## Pass
Do nothing. Used to copy the framebuffer into a postprocess for further use

```javascript
var postProcess = new BABYLON.PassPostProcess("Scene copy", 1.0, camera);
```

### Black and white
Apply a black and white effect:

```javascript
var postProcess = new BABYLON.BlackAndWhitePostProcess("bandw", 1.0, camera);
```

## Blur
Apply a directional blur using a kernel based blur:

```javascript
var postProcess = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), kernel, 0.25, camera);
```

The kernel value will define the ideal number of taps done by the postprocess. The postprocess will then adapt the kernel based on screen size and DPI resolution.

For instance here is an example with a kernel value of 32: <Playground id="#FBH4J7#3" title="Blur Post Process Example" description="Simple example of a blur post process." image=""/>
Or 256: <Playground id="#FBH4J7#4" title="Blur Post Process With Kernal Value Of 256" description="Simple example of a blur post process with a kernal value of 256." image=""/>

Obviously, as usual, try to stay reasonable with kernel size as it will impact the overall rendering speed.

### Convolution
Apply a kernel matrix to every pixel:

```javascript
var postProcess = new BABYLON.ConvolutionPostProcess("Sepia", BABYLON.ConvolutionPostProcess.EmbossKernel, 1.0, camera);
```

## FXAA
Apply a full screen antialiasing filter:

```javascript
var postProcess = new BABYLON.FxaaPostProcess("fxaa", 1.0, camera);
```

### Highlights
Apply a full screen highlight filter which will increment the luminosity of highlihts in your scene:

```javascript
var postProcess = new BABYLON.HighlightsPostProcess("highlights", 1.0, camera);
```

### Tonemap
Apply a full screen tone mapping filter:

```javascript
var postProcess = new BABYLON.TonemapPostProcess("tonemap", BABYLON.TonemappingOperator.Hable, 0.8, 1.0, camera);
```
The second parameter helps defining which operator will be used among the following ones:
* BABYLON.TonemappingOperator.Hable
* BABYLON.TonemappingOperator.Reinhard
* BABYLON.TonemappingOperator.HejiDawson
* BABYLON.TonemappingOperator.Photographic

The third parameter define the exposure adjustement.

You can find a demo here: <Playground id="#J9H084#8" title="Tonemap Post Process" description="Simple Example of a tonemap post process." image=""/>

### ImageProcessing
Apply a complete range of special image treaments (image processing):

```javascript
var postProcess = new BABYLON.ImageProcessingPostProcess("processing", 1.0, camera);
```

You have several options available:
* colorGradingTexture: Used to provide a color grading texture applied on your scene. You can use:
    * a [colorGradingTexture](//doc.babylonjs.com/api/classes/babylon.colorgradingtexture) using a [.3dl](https://en.wikipedia.org/wiki/3D_lookup_table) format. Demo: <Playground id="#17VHYI#15" title="ColorGrading Texture Post Process" description="Simple example of a colorgrading texture post process." image=""/>
    * a standard texture (using .png for example) but with _invertY_ set to _true_, wrap mode as clamp and _imageProcessingConfiguration.colorGradingWithGreenDepth_ set to _false_. Demo: <Playground id="#17VHYI#9" title="ColorGrading Texture Post Process Green Depth" description="Simple example of a colorgrading texture post process." image=""/>
* colorCurves: Used to provide several properties to change colors. More [details here](/divingDeeper/materials/using/masterPBR). Demo: <Playground id="#J9H084#12" title="ColorCurves Post Process" description="Simple example of a colorCurves post process." image=""/>
* contrast: 1.0 by default. Used to change the contrast. Demo: <Playground id="#J9H084#9" title="colorCurves Post Process (Contrast)" description="Simple example of changing the the contrast of a colorCurves Post Process." image=""/>
* exposure: 1.0 by default. Used to change the exposure of the image. Demo: <Playground id="#J9H084#10" title="colorCurves Post Process (Exposure)" description="Simple example of changing the exposure of a colorCurves Post Process." image=""/>

You can also use this postprocess to enable a vignette effect. The vignette is positioned thanks to the following parameters:
* vignetteStretch: 0 by default
* vignetteCentreX: X coordinate of the center (0,0 is the center of the screen)
* vignetteCentreY: Y coordinate of the center (0,0 is the center of the screen)
* vignetteWeight: 1.5 by default
* vignetteColor: Color4 value to define the overall color
* vignetteBlendMode: BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_MULTIPLY or BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_OPAQUE

You can find a demo of the vignette here: <Playground id="#J9H084#11" title="Vignette Post Process" description="Simple example of a Vignette Post Process." image=""/>

All features can be turned on and off with the following booleans:
* colorCurvesEnabled
* vignetteEnabled
* cameraToneMappingEnabled
* colorGradingEnabled

#### Configuration

Image postprocessing can be done with the ImageProcessingPostProcess but you can also use StandardMaterial and PBRMaterial built-in image processing features. To simplify the overall configuration of your image processing setup, you can define the properties you want on `scene.imageProcessingConfiguration`.
This object hosts the same properties as the ImageProcessingPostProcess.

By default, ImageProcessingPostProcess, StandardMaterial and PBRMaterial share the same configuration object (The one from the scene). This means that if you change a value on `scene.imageProcessingConfiguration` or directly on ImageProcessingPostProcess, StandardMaterial or PBRMaterial, this will affect all entities sharing the same configuration.

Here is an example of a global configuration: <Playground id="#J9H084#13" title="Post Process Global Configuration" description="Simple example of a post process globbal configuration." image=""/>

Furthermore, as they share the same configuration, you can just dispose a postprocess you were using and automatically the image processing will be done at materials level. So here is an example of a configuration done at scene level, but with no postprocess to use it: <Playground id="#J9H084#14" title="Configuration At The Scene Level" description="Simple example of a scene level configuration." image=""/> (As you can see the processing is then done by the material itself).

You can also decide to instantiate your own configuration and affect it to your material or to your postprocess with `postProcess.imageProcessingConfiguration = new BABYLON.ImageProcessingConfiguration()`. In this case, you will be able to configure this object independantly.

*Troubleshoot*
If you use post-processes with built-in image processing features, you might run into brighter color issues.  
Read [this](/advanced_topics/introToShaders/image_processing#tonemapping) if you want to know how to fix it.

#### Default rendering pipeline

The image processing post process is also included in a rendering pipeline: the DefaultRenderingPipeline. This pipeline adds support for FXAA and bloom on top of the image processing. You can find a complete interactive demo here: <Playground id="#5XB8YT#1" title="Default Rendering Pipeline Featuring Bloom" description="Simple example of the default rendering pipeline with bloom." image=""/>

You can turn pipeline features on and off with the following booleans:
* fxaaEnabled
* bloomEnabled
* imageProcessingEnabled

## Refraction
Apply a refraction texture:

```javascript
var postProcess = new BABYLON.RefractionPostProcess("Refraction", "refMap.jpg", new BABYLON.Color3(1.0, 1.0, 1.0), 0.5, 0.5, 1.0, camera);
```
The constructor of this postprocess is the following:

```javascript
BABYLON.RefractionPostProcess = function (name, refractionTextureUrl, color, depth, colorLevel, ratio, null, samplingMode, engine, reusable)
```
_refractionTextureUrl_ is the URL of the refraction map. The luminance of every pixel is used to define the refraction level (white = min, black = max)
_color_ is the base color of the refraction (used to taint the rendering)
_depth_ is the simulated refraction depth
_colorLevel_ is the coefficient of the base color (0 to remove base color tainting)

## Color Correction
Apply a color filter:

```javascript
var postProcess = new BABYLON.ColorCorrectionPostProcess("color_correction", "./table.png", 1.0, camera);
```
The second parameter of the constructor is the URL of the color look-up table (also known as _LUT_) that contains the filter to apply. This must be a texture 16 pixels high and 256 pixels wide containing a modified set of RGB colors (x=red value, y=green value, z=blue value). The post-processing will then map the RGB values of the rendered pixels to the new values contained in the look-up table.

Here is what the default (without filter) look-up table looks like:

![LUT](/img/how_to/post-processes/lut-default.png)

Examples of filtered LUT to use for various filters:

![LUT](/img/how_to/post-processes/lut-inverted.png)
 Inverted colors

![LUT](/img/how_to/post-processes/lut-highcontrast.png)
 High contrast

![LUT](/img/how_to/post-processes/lut-posterized.png)
 Posterize

You can easily create new filters by using a image editing software to alter the look-up table to fit your needs. Copy/paste the default look-up table on a screenshot or picture before altering it to see in real time what the filtered image will look like.

## Custom postprocesses
You can also develop your own postprocess using ```BABYLON.PostProcess``` object.

To do so, you need to create a .fragment.fx file, a shader-storing DOM node, or a ShaderStore entry where you will store the GLSL shader code used for every pixel of the screen:

```javascript

precision highp float;

// Samplers
varying vec2 vUV;
uniform sampler2D textureSampler;

// Parameters
uniform vec2 screenSize;
uniform float highlightThreshold;

float highlights(vec3 color)
{
 return smoothstep(highlightThreshold, 1.0, dot(color, vec3(0.3, 0.59, 0.11)));
}

void main(void)
{
 vec2 texelSize = vec2(1.0 / screenSize.x, 1.0 / screenSize.y);
 vec4 baseColor = texture2D(textureSampler, vUV + vec2(-1.0, -1.0) * texelSize) * 0.25;
 baseColor += texture2D(textureSampler, vUV + vec2(1.0, -1.0) * texelSize) * 0.25;
 baseColor += texture2D(textureSampler, vUV + vec2(1.0, 1.0) * texelSize) * 0.25;
 baseColor += texture2D(textureSampler, vUV + vec2(-1.0, 1.0) * texelSize) * 0.25;
 
 baseColor.a = highlights(baseColor.rgb);

 gl_FragColor = baseColor;
}
```

Your shader must define the following values:
* Precision must be set to highp
* A varying vUV must be used to read texture coordinates
* The first sampler must be named textureSampler

Once you created your sampler, you can create a postprocess:

```javascript
var postProcess = new BABYLON.PostProcess("Down sample", "./Scenes/Customs/postprocesses/downsample", ["screenSize", "highlightThreshold"], null, 0.25, camera);
```

You have to specify:
* A name
* The URL of the shader coder*
* A list of your uniforms parameters
* A list of additional samplers
* The ratio
* The parent camera (deprecated)
* The sampling mode
* The engine
* Can be reusable

(*Please see the link at the bottom of this document to learn more ways to store shader code.)

You can set up things before the postprocess is applied by specifying a onApply function:

```javascript
postProcess.onApply = function (effect) {
    effect.setFloat2("screenSize", postProcess1.width, postProcess1.height);
    effect.setFloat("highlightThreshold", 0.90);
};
```

You can find another example here: <Playground id="#DAC1WM" title="Custom Post Process Example" description="Simple example of a custom post process." image=""/>

To use the output of a previous post process setTextureFromPostProcess can be used.
Note: This will set sceneSampler to the output of the post process before postProcess0 NOT the output of postProcess0.
```javascript
effect.setTextureFromPostProcess("sceneSampler", postProcess0);
```

## Chaining postprocesses
You can chain postprocesses on a specific camera. They are processed using the creation order. For instance here is the code used to simulate a bloom effect:

```javascript
var blurWidth = 1.0;

var postProcess0 = new BABYLON.PassPostProcess("Scene copy", 1.0, camera);
var postProcess1 = new BABYLON.PostProcess("Down sample", "./Scenes/Customs/postprocesses/downsample", ["screenSize", "highlightThreshold"], null, 0.25, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
postProcess1.onApply = function (effect) {
    effect.setFloat2("screenSize", postProcess1.width, postProcess1.height);
    effect.setFloat("highlightThreshold", 0.90);
};
var postProcess2 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), blurWidth, 0.25, camera);
var postProcess3 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), blurWidth, 0.25, camera);
var postProcess4 = new BABYLON.PostProcess("Final compose", "./Scenes/Customs/postprocesses/compose", ["sceneIntensity", "glowIntensity", "highlightIntensity"], ["sceneSampler"], 1, camera);
postProcess4.onApply = function (effect) {
    effect.setTextureFromPostProcess("sceneSampler", postProcess0);
    effect.setFloat("sceneIntensity", 0.5);
    effect.setFloat("glowIntensity", 0.4);
    effect.setFloat("highlightIntensity", 1.0);
};
```
You might want to [read more about shaders](https://www.eternalcoding.com/what-do-you-mean-by-shaders-learn-how-to-create-shaders-with-babylon-js/) and try our [CYOS shader editor](https://cyos.babylonjs.com/).


# How To Add Your Own Physics Engine

## Define your plugin
You can create your own plugin by creating a class that provides the following interface:

* ```function initialize()```: Must initialize your engine

* ```function setGravity(gravity)```: Used by Babylon.js to set the current gravity

* ```function runOneStep(delta)```: babylon.js will call this function for each frame, giving you the delta time between current and previous frame. This is the responsibility of the plugin to update meshes' position and rotation accordingly to the physics simulation.

* ```function registerMesh(mesh, impostor, options)```: babylon.js will call this function when the user wants to create a physics impostor for a mesh. ```options``` parameter contains 3 values: ```mass```, ```friction``` and ```restitution```. Possible values for ```impostor``` are the following:
 * NoImpostor = 0;
 * SphereImpostor = 1;
 * BoxImpostor = 2;
 * PlaneImpostor = 3;
 * CompoundImpostor = 4;
 * MeshImpostor = 4;

* ```function registerMeshesAsCompound(parts, options)```: Babylon.js will call this function for compound objects. ```parts``` parameter contains an array of ```{mesh, impostor}```. ```options``` parameter is the same as above.

* ```function unregisterMesh(mesh)```: Called to remove a mesh from the simulation

* ```function applyImpulse(mesh, force, contactPoint)```: Apply a specific force to a specific contact point for a given mesh

* ```function createLink(mesh1, mesh2, pivot1, pivot2)```: Create a joint between two meshes

* ```function dispose()```: Free all allocated resources

* ```function isSupported()```: This function will be called by Babylon.js before everything else to ensure that your plugin can be instanciated (You have to check if required .js files are included for instance)

For implementation details, you can refer to cannon.js plugin: https://github.com/BabylonJS/Babylon.js/blob/master/src/Physics/Plugins/cannonJSPlugin.ts

## Using your plugin
When you launch the physics simulation, you can add a new parameter to ```enablePhysics``` function to indicate which plugin to use:

```javascript
scene.enablePhysics(null, new BABYLON.CannonJSPlugin()),
```

The first parameter can be used to define gravity (which is (0, -9.82, 0) by default).

Post Processes

Coming next

How To Use Post Processes

Learn how to use post process effect in Babylon.js.

How To Use A Post Process Render Pipeline

Learn how to use a post process render pipeline in Babylon.js.

Using the SSAO Rendering Pipeline

Learn how to the SSAO Rendering Pipeline in Babylon.js.

Using the Standard Rendering Pipeline (depricated)

Learn about the standard rendering pipeline in Babylon.js.

Using the Default Rendering Pipeline

Learn about the default rendering pipeline in Babylon.js.

Depth of Field and Other Lens Effects

Learn how to use depth of field and other lens effects in Babylon.js.

Motion Blur Post Process

Learn how to use the motion blur post process in Babylon.js.

Screen Space Reflections (SSR) Post Process

Learn about the screen space reflection post process in Babylon.js.

Render Target Texture With Multiple Passes

Learn about the render target texture and running multiple passes in Babylon.js.