Merge pull request #3831 from TrevorDev/chromaticAberrationDefaultPipeline

add chromatic aberration to default pipeline

Tools/Gulp/config.json

@@ -825,6 +825,7 @@
                 "../../src/PostProcess/babylon.blackAndWhitePostProcess.js",
                 "../../src/PostProcess/babylon.convolutionPostProcess.js",
                 "../../src/PostProcess/babylon.sharpenPostProcess.js",
+                "../../src/PostProcess/babylon.chromaticAberrationPostProcess.js",
                 "../../src/PostProcess/babylon.filterPostProcess.js",
                 "../../src/PostProcess/babylon.fxaaPostProcess.js",
                 "../../src/PostProcess/babylon.volumetricLightScatteringPostProcess.js",

dist/preview release/typedocValidationBaseline.json

@@ -1,7 +1,7 @@
 {
-  "errors": 7218,
+  "errors": 7219,
   "babylon.typedoc.json": {
-    "errors": 7218,
+    "errors": 7219,
     "AnimationKeyInterpolation": {
       "Enumeration": {
         "Comments": {
@@ -8797,6 +8797,11 @@
             "NotCamelCase": true
           }
         },
+        "ChromaticAberrationPostProcessId": {
+          "Naming": {
+            "NotCamelCase": true
+          }
+        },
         "CopyBackPostProcessId": {
           "Naming": {
             "NotCamelCase": true

dist/preview release/what's new.md

@@ -14,7 +14,7 @@
 - Added [VideoDome](http://doc.babylonjs.com/how_to/360videodome) class to easily support 360 videos ([DavidHGillen](https://github.com/DavidHGillen))
 - Added [GlowLayer](https://doc.babylonjs.com/how_to/glow_layer) to easily support glow from emissive materials ([sebavan](https://github.com/sebavan))
 - New [AssetContainer](http://doc.babylonjs.com/how_to/how_to_use_assetcontainer) Class and loading methods ([trevordev](https://github.com/trevordev))
-- Added depth of field effect to the default pipeline ([trevordev](https://github.com/trevordev))
+- Added depth of field, MSAA, sharpening and chromatic aberration effect to the default pipeline ([trevordev](https://github.com/trevordev))
 
 ## Updates
 
@@ -82,7 +82,6 @@
 - Integrates depth texture support in the engine ([sebavan](https://github.com/sebavan))
 - NPM package now has a dependency system, updated during build. ([RaananW](https://github.com/RaananW))
 - Default fragment shader will clamp negative values to avoid underflow, webVR post processing will render to eye texture size ([trevordev](https://github.com/trevordev))
-- Add msaa and sharpening options to the default pipeline ([trevordev](https://github.com/trevordev))
 
 ## Bug fixes
 

src/PostProcess/RenderPipeline/Pipelines/babylon.defaultRenderingPipeline.ts

@@ -42,6 +42,10 @@
 		 * ID of the final merge post process;
 		 */
         readonly FinalMergePostProcessId: string = "FinalMergePostProcessEffect";
+        /**
+		 * ID of the chromatic aberration post process,
+		 */
+        readonly ChromaticAberrationPostProcessId: string = "ChromaticAberrationPostProcessEffect";
 
         // Post-processes
         /**
@@ -84,6 +88,10 @@
          * Final post process to merge results of all previous passes
          */
         public finalMerge: PassPostProcess;
+        /**
+		 * Chromatic aberration post process which will shift rgb colors in the image
+		 */
+        public chromaticAberration: ChromaticAberrationPostProcess;
 
         /**
          * Animations which can be used to tweak settings over a period of time
@@ -100,6 +108,7 @@
         private _imageProcessingEnabled: boolean = true;
         private _defaultPipelineTextureType: number;
         private _bloomScale: number = 0.6;
+        private _chromaticAberrationEnabled:boolean = false;  
 
         private _buildAllowed = true;
 
@@ -274,6 +283,23 @@
         }
 
         /**
+         * Enable or disable the chromaticAberration process from the pipeline
+         */
+        public set chromaticAberrationEnabled(enabled: boolean) {
+            if (this._chromaticAberrationEnabled === enabled) {
+                return;
+            }
+            this._chromaticAberrationEnabled = enabled;
+
+            this._buildPipeline();
+        }
+
+        @serialize()
+        public get chromaticAberrationEnabled(): boolean {
+            return this._chromaticAberrationEnabled;
+        }
+
+        /**
          * @constructor
          * @param {string} name - The rendering pipeline name
          * @param {BABYLON.Scene} scene - The scene linked to this pipeline
@@ -429,6 +455,12 @@
                 }
             }
 
+            if (this.chromaticAberrationEnabled) {
+                this.chromaticAberration = new ChromaticAberrationPostProcess("ChromaticAberration", engine.getRenderWidth(), engine.getRenderHeight(), 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
+                this.addEffect(new PostProcessRenderEffect(engine, this.ChromaticAberrationPostProcessId, () => { return this.chromaticAberration; }, true));
+            }
+
+
             if (this._cameras !== null) {
                 this._scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(this._name, this._cameras);
             }
@@ -483,6 +515,10 @@
                 if(this.depthOfField){
                     this.depthOfField.disposeEffects(camera);
                 }
+
+                if(this.chromaticAberration){
+                    this.chromaticAberration.dispose(camera);
+                }
             }
 
             (<any>this.sharpen) = null;
@@ -495,6 +531,7 @@
             (<any>this.fxaa) = null;
             (<any>this.finalMerge) = null;
             (<any>this.depthOfField) = null;
+            (<any>this.chromaticAberration) = null;
         }
 
         /**

src/PostProcess/RenderPipeline/Pipelines/babylon.lensRenderingPipeline.ts

@@ -180,7 +180,7 @@ module BABYLON {
         // colors shifting and distortion
         private _createChromaticAberrationPostProcess(ratio: number): void {
             this._chromaticAberrationPostProcess = new PostProcess("LensChromaticAberration", "chromaticAberration",
-                ["chromatic_aberration", "screen_width", "screen_height"],      // uniforms
+                ["chromatic_aberration", "screen_width", "screen_height", "direction", "radialIntensity", "centerPosition"],      // uniforms
                 [],                                         // samplers
                 ratio, null, Texture.TRILINEAR_SAMPLINGMODE,
                 this._scene.getEngine(), false);
@@ -189,6 +189,9 @@ module BABYLON {
                 effect.setFloat('chromatic_aberration', this._chromaticAberration);
                 effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
                 effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
+                effect.setFloat('radialIntensity', 1);
+                effect.setFloat2('direction', 17, 17);
+                effect.setFloat2('centerPosition', 0.5,0.5);
             };
         }
 

src/PostProcess/babylon.chromaticAberrationPostProcess.ts

@@ -0,0 +1,50 @@
+module BABYLON {
+    /**
+     * The ChromaticAberrationPostProcess separates the rgb channels in an image to produce chromatic distortion around the edges of the screen
+     */
+    export class ChromaticAberrationPostProcess extends PostProcess {
+        /**
+         * The amount of seperation of rgb channels (default: 0)
+         */
+        aberrationAmount = 0;
+
+        /**
+         * The amount the effect will increase for pixels closer to the edge of the screen. (default: 0)
+         */
+        radialIntensity = 0;
+
+        /**
+         * The normilized direction in which the rgb channels should be seperated. If set to 0,0 radial direction will be used. (default: Vector2(0.707,0.707))
+         */
+        direction = new Vector2(0.707,0.707);
+
+        /**
+         * The center position where the radialIntensity should be around. [0.5,0.5 is center of screen, 1,1 is top right corder] (default: Vector2(0.5 ,0.5))
+         */
+        centerPosition = new Vector2(0.5,0.5);
+        
+        /**
+         * Creates a new instance of @see ChromaticAberrationPostProcess
+         * @param name The name of the effect.
+         * @param screenWidth The width of the screen to apply the effect on.
+         * @param screenHeight The height of the screen to apply the effect on.
+         * @param options The required width/height ratio to downsize to before computing the render pass.
+         * @param camera The camera to apply the render pass to.
+         * @param samplingMode The sampling mode to be used when computing the pass. (default: 0)
+         * @param engine The engine which the post process will be applied. (default: current engine)
+         * @param reusable If the post process can be reused on the same frame. (default: false)
+         * @param textureType Type of textures used when performing the post process. (default: 0)
+         */
+        constructor(name: string, screenWidth:number, screenHeight:number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT) {
+            super(name, "chromaticAberration", ["chromatic_aberration", "screen_width", "screen_height", "direction", "radialIntensity", "centerPosition"], [], options, camera, samplingMode, engine, reusable, null, textureType);
+            this.onApplyObservable.add((effect: Effect) => {
+                effect.setFloat('chromatic_aberration', this.aberrationAmount);
+                effect.setFloat('screen_width', screenWidth);
+                effect.setFloat('screen_height', screenHeight);
+                effect.setFloat('radialIntensity', this.radialIntensity);
+                effect.setFloat2('direction', this.direction.x,this.direction.y);
+                effect.setFloat2('centerPosition', this.centerPosition.x,this.centerPosition.y);
+            })
+        }
+    }
+}

src/Shaders/chromaticAberration.fragment.fx

@@ -3,6 +3,9 @@ uniform sampler2D textureSampler;	// original color
 
 // uniforms
 uniform float chromatic_aberration;
+uniform float radialIntensity;
+uniform vec2 direction;
+uniform vec2 centerPosition;
 uniform float screen_width;
 uniform float screen_height;
 
@@ -11,28 +14,31 @@ varying vec2 vUV;
 
 void main(void)
 {
-	vec2 centered_screen_pos = vec2(vUV.x - 0.5, vUV.y - 0.5);
+	vec2 centered_screen_pos = vec2(vUV.x - centerPosition.x, vUV.y - centerPosition.y);
+	vec2 directionOfEffect = direction;
+	if(directionOfEffect.x == 0. && directionOfEffect.y == 0.){
+		directionOfEffect = normalize(centered_screen_pos);
+	}
+
 	float radius2 = centered_screen_pos.x*centered_screen_pos.x
 		+ centered_screen_pos.y*centered_screen_pos.y;
 	float radius = sqrt(radius2);
 
 	vec4 original = texture2D(textureSampler, vUV);
 
-	if (chromatic_aberration > 0.0) {
-		//index of refraction of each color channel, causing chromatic dispersion
-		vec3 ref_indices = vec3(-0.3, 0.0, 0.3);
-		float ref_shiftX = chromatic_aberration * radius * 17.0 / screen_width;
-		float ref_shiftY = chromatic_aberration * radius * 17.0 / screen_height;
+	//index of refraction of each color channel, causing chromatic dispersion
+	vec3 ref_indices = vec3(-0.3, 0.0, 0.3);
+	float ref_shiftX = chromatic_aberration * pow(radius, radialIntensity) * directionOfEffect.x / screen_width;
+	float ref_shiftY = chromatic_aberration * pow(radius, radialIntensity) * directionOfEffect.y / screen_height;
 
-		// shifts for red, green & blue
-		vec2 ref_coords_r = vec2(vUV.x + ref_indices.r*ref_shiftX, vUV.y + ref_indices.r*ref_shiftY*0.5);
-		vec2 ref_coords_g = vec2(vUV.x + ref_indices.g*ref_shiftX, vUV.y + ref_indices.g*ref_shiftY*0.5);
-		vec2 ref_coords_b = vec2(vUV.x + ref_indices.b*ref_shiftX, vUV.y + ref_indices.b*ref_shiftY*0.5);
+	// shifts for red, green & blue
+	vec2 ref_coords_r = vec2(vUV.x + ref_indices.r*ref_shiftX, vUV.y + ref_indices.r*ref_shiftY*0.5);
+	vec2 ref_coords_g = vec2(vUV.x + ref_indices.g*ref_shiftX, vUV.y + ref_indices.g*ref_shiftY*0.5);
+	vec2 ref_coords_b = vec2(vUV.x + ref_indices.b*ref_shiftX, vUV.y + ref_indices.b*ref_shiftY*0.5);
 
-		original.r = texture2D(textureSampler, ref_coords_r).r;
-		original.g = texture2D(textureSampler, ref_coords_g).g;
-		original.b = texture2D(textureSampler, ref_coords_b).b;
-	}
+	original.r = texture2D(textureSampler, ref_coords_r).r;
+	original.g = texture2D(textureSampler, ref_coords_g).g;
+	original.b = texture2D(textureSampler, ref_coords_b).b;
 
 	gl_FragColor = original;
 }