Using the Default Rendering Pipeline
Introduction
You can find a complete example of this pipeline in our playground:
Default Rendering Pipeline ExampleThe 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
:
var pipeline = new BABYLON.DefaultRenderingPipeline("defaultPipeline", // The name of the pipelinetrue, // 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:
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.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 Clear Color Fix
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:
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:
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:
pipeline.sharpenEnabled = true;
To increase the intensity of the effect modify:
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):
pipeline.sharpen.colorAmount = 0.0;
Depth of field
You can turn the depth of field effect on and off with:
pipeline.depthOfFieldEnabled = true;
Set the strength of blur with (higher may affect performance):
pipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low;
Furthermore, you can control the settings of the effect with the following parameters:
pipeline.depthOfField.focusDistance = 2000; // distance of the current focus point from the camera in millimeters considering 1 scene unit is 1 meterpipeline.depthOfField.focalLength = 50; // focal length of the camera in millimeterspipeline.depthOfField.fStop = 1.4; // aka F number of the camera defined in stops as it would be on a physical device
Bloom
You can turn the bloom effect on and off with:
pipeline.bloomEnabled = true;
The bloom luminance threshold, impact of the bloom, kernel size and scale can be controlled with the following:
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:
pipeline.imageProcessingEnabled = true;
You can also control individual image processing subeffects. To get more info about the ImageProcessing postprocess, please read the following tutorial.
Chromatic Aberration
You can turn the effect on and off with:
pipeline.chromaticAberrationEnabled = true;
Furthermore, you can control the distance of color channel separation with:
pipeline.chromaticAberration.aberrationAmount = 300;
To modify the strength of the effect based on the distance from the center of the screen:
pipeline.chromaticAberration.radialIntensity = 3;
To modify the direction the aberration the direction can be set:
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:
pipeline.grainEnabled = true;
Furthermore, you can control intensity of the grain with:
pipeline.grain.intensity = 10;
To set grain to animate on every frame set:
pipeline.grain.animated = value;
Example
You may be interested by this code example using default values, ready to be copy-pasted into your application:
// https://doc.babylonjs.com/api/classes/babylon.defaultrenderingpipelinevar 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 defaultif (defaultPipeline.imageProcessingEnabled) {defaultPipeline.imageProcessing.contrast = 1; // 1 by defaultdefaultPipeline.imageProcessing.exposure = 1; // 1 by default/* color grading */defaultPipeline.imageProcessing.colorGradingEnabled = false; // false by defaultif (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 defaultif (defaultPipeline.imageProcessing.colorCurvesEnabled) {var curve = new BABYLON.ColorCurves();curve.globalDensity = 0; // 0 by defaultcurve.globalExposure = 0; // 0 by defaultcurve.globalHue = 30; // 30 by defaultcurve.globalSaturation = 0; // 0 by defaultcurve.highlightsDensity = 0; // 0 by defaultcurve.highlightsExposure = 0; // 0 by defaultcurve.highlightsHue = 30; // 30 by defaultcurve.highlightsSaturation = 0; // 0 by defaultcurve.midtonesDensity = 0; // 0 by defaultcurve.midtonesExposure = 0; // 0 by defaultcurve.midtonesHue = 30; // 30 by defaultcurve.midtonesSaturation = 0; // 0 by defaultcurve.shadowsDensity = 0; // 0 by defaultcurve.shadowsExposure = 0; // 0 by defaultcurve.shadowsHue = 30; // 30 by defaultcurve.shadowsDensity = 80;curve.shadowsSaturation = 0; // 0 by default;defaultPipeline.imageProcessing.colorCurves = curve;}}/* bloom */defaultPipeline.bloomEnabled = false; // false by defaultif (defaultPipeline.bloomEnabled) {defaultPipeline.bloomKernel = 64; // 64 by defaultdefaultPipeline.bloomScale = 0.5; // 0.5 by defaultdefaultPipeline.bloomThreshold = 0.9; // 0.9 by defaultdefaultPipeline.bloomWeight = 0.15; // 0.15 by default}/* chromatic abberation */defaultPipeline.chromaticAberrationEnabled = false; // false by defaultif (defaultPipeline.chromaticAberrationEnabled) {defaultPipeline.chromaticAberration.aberrationAmount = 30; // 30 by defaultdefaultPipeline.chromaticAberration.adaptScaleToCurrentViewport = false; // false by defaultdefaultPipeline.chromaticAberration.alphaMode = 0; // 0 by defaultdefaultPipeline.chromaticAberration.alwaysForcePOT = false; // false by defaultdefaultPipeline.chromaticAberration.enablePixelPerfectMode = false; // false by defaultdefaultPipeline.chromaticAberration.forceFullscreenViewport = true; // true by default}/* DOF */defaultPipeline.depthOfFieldEnabled = false; // false by defaultif (defaultPipeline.depthOfFieldEnabled && defaultPipeline.depthOfField.isSupported) {defaultPipeline.depthOfFieldBlurLevel = 0; // 0 by defaultdefaultPipeline.depthOfField.fStop = 1.4; // 1.4 by defaultdefaultPipeline.depthOfField.focalLength = 50; // 50 by default, mmdefaultPipeline.depthOfField.focusDistance = 2000; // 2000 by default, mmdefaultPipeline.depthOfField.lensSize = 50; // 50 by default}/* FXAA */defaultPipeline.fxaaEnabled = false; // false by defaultif (defaultPipeline.fxaaEnabled) {defaultPipeline.fxaa.samples = 1; // 1 by defaultdefaultPipeline.fxaa.adaptScaleToCurrentViewport = false; // false by default}/* glowLayer */defaultPipeline.glowLayerEnabled = false;if (defaultPipeline.glowLayerEnabled) {defaultPipeline.glowLayer.blurKernelSize = 16; // 16 by defaultdefaultPipeline.glowLayer.intensity = 1; // 1 by default}/* grain */defaultPipeline.grainEnabled = false;if (defaultPipeline.grainEnabled) {defaultPipeline.grain.adaptScaleToCurrentViewport = false; // false by defaultdefaultPipeline.grain.animated = false; // false by defaultdefaultPipeline.grain.intensity = 30; // 30 by default}/* sharpen */defaultPipeline.sharpenEnabled = false;if (defaultPipeline.sharpenEnabled) {defaultPipeline.sharpen.adaptScaleToCurrentViewport = false; // false by defaultdefaultPipeline.sharpen.edgeAmount = 0.3; // 0.3 by defaultdefaultPipeline.sharpen.colorAmount = 1; // 1 by default}}
As usual, a playground is available to check out: Default Rendering Pipeline Template Code