inherit from BlurPP instead of adding into blur

Tools/Gulp/config.json

@@ -57,6 +57,7 @@
             "geometryBufferRenderer",
             "additionalPostProcesses",
             "additionalPostProcess_blur",
+            "additionalPostProcess_depthOfFieldBlur",
             "additionalPostProcess_fxaa",
             "additionalPostProcess_circleOfConfusion",
             "additionalPostProcess_depthOfFieldMerge",
@@ -724,6 +725,24 @@
                 "kernelBlurVertex"
             ]
         },
+        "additionalPostProcess_depthOfFieldBlur": {
+            "files": [
+                "../../src/PostProcess/babylon.depthOfFieldBlurPostProcess.js"
+            ],
+            "dependUpon": [
+                "postProcesses"
+            ],
+            "shaders": [
+                "kernelBlur.vertex",
+                "kernelBlur.fragment"
+            ],
+            "shaderIncludes": [
+                "kernelBlurFragment",
+                "kernelBlurFragment2",
+                "kernelBlurVaryingDeclaration",
+                "kernelBlurVertex"
+            ]
+        },
         "additionalPostProcess_circleOfConfusion": {
             "files": [
                 "../../src/PostProcess/babylon.circleOfConfusionPostProcess.js"

src/PostProcess/babylon.blurPostProcess.ts

@@ -1,14 +1,9 @@
 module BABYLON {
-	export class DepthOfFieldBlurOptions {		
-		constructor(public depthMap: BaseTexture, public original: Nullable<PostProcess> = null){
-
-		}
-	}
     export class BlurPostProcess extends PostProcess {
 		protected _kernel: number;
 		protected _idealKernel: number;
 		protected _packedFloat: boolean	= false;
-		protected depthOfFieldBlurOptions:any;
+		protected _staticDefines:string = ""
 		/**
 		 * Sets the length in pixels of the blur sample region
 		 */
@@ -48,30 +43,11 @@
 			return this._packedFloat;
 		}
 
-        constructor(name: string, public direction: Vector2, kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, depthOfFieldBlurOptions?:DepthOfFieldBlurOptions) {
+        constructor(name: string, public direction: Vector2, kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT) {
             super(name, "kernelBlur", ["delta", "direction", "near", "far"], ["depthSampler"], options, camera, samplingMode, engine, reusable, null, textureType, "kernelBlur", {varyingCount: 0, depCount: 0}, true);
 			
-			if(depthOfFieldBlurOptions){
-				this.depthOfFieldBlurOptions = depthOfFieldBlurOptions;
-			}
-			
 			this.onApplyObservable.add((effect: Effect) => {
-				if(this.depthOfFieldBlurOptions){
-					// TODO: setTextureFromPostProcess seems to be setting the input texture instead of output of the post process passed in 
-					if(this.depthOfFieldBlurOptions.original != null){
-						effect.setTextureFromPostProcess("textureSampler", this.depthOfFieldBlurOptions.original)
-					}
-					effect.setTexture("depthSampler", this.depthOfFieldBlurOptions.depthMap)
-				}
-				
 				effect.setFloat2('delta', (1 / this.width) * this.direction.x, (1 / this.height) * this.direction.y);
-			
-				// TODO: is there a better way to get camera?
-                var camera = this.getEngine().scenes[0].activeCamera;
-                if(camera){
-                    effect.setFloat('near', camera.minZ);
-                    effect.setFloat('far', camera.maxZ);
-                }
 			});
 
             this.kernel = kernel;
@@ -145,7 +121,8 @@
 
             let varyingCount = Math.min(offsets.length, freeVaryingVec2);
         
-            let defines = "";
+			let defines = "";
+			defines+=this._staticDefines;
             for (let i = 0; i < varyingCount; i++) {
                 defines += `#define KERNEL_OFFSET${i} ${this._glslFloat(offsets[i])}\r\n`;
                 defines += `#define KERNEL_WEIGHT${i} ${this._glslFloat(weights[i])}\r\n`;
@@ -162,10 +139,6 @@
 				defines += `#define PACKEDFLOAT 1`;
 			}
 
-			if(this.depthOfFieldBlurOptions){
-				defines += `#define DOF 1`;
-			}
-
             this.updateEffect(defines, null, null, {
 				varyingCount: varyingCount,
 				depCount: depCount

src/PostProcess/babylon.depthOfFieldBlurPostProcess.ts

@@ -0,0 +1,23 @@
+module BABYLON {    
+    export class DepthOfFieldBlurPostProcess extends BlurPostProcess {
+        constructor(name: string, public direction: Vector2, kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, depthMap:RenderTargetTexture, imageToBlur:Nullable<PostProcess> = null, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT) {
+            super(name, direction, kernel, options, camera, samplingMode = Texture.BILINEAR_SAMPLINGMODE, engine, reusable, textureType = Engine.TEXTURETYPE_UNSIGNED_INT)
+            this._staticDefines += `#define DOF 1\r\n`;
+			
+			this.onApplyObservable.add((effect: Effect) => {
+                // TODO: setTextureFromPostProcess seems to be setting the input texture instead of output of the post process passed in 
+                if(imageToBlur != null){
+                    effect.setTextureFromPostProcess("textureSampler", imageToBlur)
+                }
+                effect.setTexture("depthSampler", depthMap)
+                
+				// TODO: is there a better way to get camera?
+                var camera = this.getEngine().scenes[0].activeCamera;
+                if(camera){
+                    effect.setFloat('near', camera.minZ);
+                    effect.setFloat('far', camera.maxZ);
+                }
+			});
+        }
+    }
+}

src/PostProcess/babylon.depthOfFieldEffect.ts

@@ -9,8 +9,8 @@ module BABYLON {
 
         private depthOfFieldPass: PassPostProcess;
         private circleOfConfusion: CircleOfConfusionPostProcess;
-        private depthOfFieldBlurX: BlurPostProcess;
-        private depthOfFieldBlurY: BlurPostProcess;
+        private depthOfFieldBlurX: DepthOfFieldBlurPostProcess;
+        private depthOfFieldBlurY: DepthOfFieldBlurPostProcess;
         private depthOfFieldMerge: DepthOfFieldMergePostProcess;
 
         public set kernelSize(value: number){
@@ -58,9 +58,9 @@ module BABYLON {
 
             // Blur the image but do not blur on sharp far to near distance changes to avoid bleeding artifacts 
             // See section 2.6.2 http://fileadmin.cs.lth.se/cs/education/edan35/lectures/12dof.pdf
-            this.depthOfFieldBlurY = new BlurPostProcess("verticle blur", new Vector2(0, 1.0), 15, 1.0, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType, new DepthOfFieldBlurOptions(depthMap, this.circleOfConfusion));
+            this.depthOfFieldBlurY = new DepthOfFieldBlurPostProcess("verticle blur", new Vector2(0, 1.0), 15, 1.0, null,depthMap, this.circleOfConfusion, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType);
             pipeline.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.DepthOfFieldBlurYPostProcessId, () => { return this.depthOfFieldBlurY; }, true));
-            this.depthOfFieldBlurX = new BlurPostProcess("horizontal blur", new Vector2(1.0, 0), 15, 1.0, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType, new DepthOfFieldBlurOptions(depthMap));
+            this.depthOfFieldBlurX = new DepthOfFieldBlurPostProcess("horizontal blur", new Vector2(1.0, 0), 15, 1.0, null, depthMap, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType);
             pipeline.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.DepthOfFieldBlurXPostProcessId, () => { return this.depthOfFieldBlurX; }, true));
 
             // Merge blurred images with original image based on circleOfConfusion