Moved to new class and observe same output as before

Tools/Gulp/config.json

@@ -63,6 +63,7 @@
             "additionalPostProcess_circleOfConfusion",
             "additionalPostProcess_depthOfFieldMerge",
             "additionalPostProcess_depthOfFieldEffect",
+            "additionalPostProcess_bloomEffect",
             "additionalPostProcess_imageProcessing",
             "bones",
             "hdr",
@@ -812,6 +813,15 @@
                 "additionalPostProcess_circleOfConfusion"
             ]
         },
+        "additionalPostProcess_bloomEffect": {
+            "files": [
+                "../../src/PostProcess/babylon.bloomEffect.js"
+            ],
+            "dependUpon": [
+                "additionalPostProcess_blur",
+                "additionalPostProcess_depthOfFieldMerge"
+            ]
+        },
         "additionalPostProcess_fxaa": {
             "files": [
                 "../../src/PostProcess/babylon.fxaaPostProcess.js"
@@ -922,7 +932,8 @@
                 "additionalPostProcess_fxaa",
                 "additionalPostProcess_chromaticAberration",
                 "additionalPostProcess_sharpen",
-                "additionalPostProcess_depthOfFieldEffect"
+                "additionalPostProcess_depthOfFieldEffect",
+                "additionalPostProcess_bloomEffect"
             ]
         },
         "bones": {

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

@@ -11,26 +11,6 @@
 		 */
         readonly SharpenPostProcessId: string = "SharpenPostProcessEffect";
         /**
-		 * ID of the pass post process used for bloom,
-		 */
-        readonly PassPostProcessId: string = "PassPostProcessEffect";
-        /**
-		 * ID of the highlight post process used for bloom,
-		 */
-        readonly HighLightsPostProcessId: string = "HighLightsPostProcessEffect";
-        /**
-		 * ID of the blurX post process used for bloom,
-		 */
-        readonly BlurXPostProcessId: string = "BlurXPostProcessEffect";
-        /**
-		 * ID of the blurY post process used for bloom,
-		 */
-        readonly BlurYPostProcessId: string = "BlurYPostProcessEffect";
-        /**
-		 * ID of the copy back post process used for bloom,
-		 */
-        readonly CopyBackPostProcessId: string = "CopyBackPostProcessEffect";
-        /**
 		 * ID of the image processing post process;
 		 */
         readonly ImageProcessingPostProcessId: string = "ImageProcessingPostProcessEffect";
@@ -39,10 +19,6 @@
 		 */
         readonly FxaaPostProcessId: string = "FxaaPostProcessEffect";
         /**
-		 * ID of the final merge post process;
-		 */
-        readonly FinalMergePostProcessId: string = "FinalMergePostProcessEffect";
-        /**
 		 * ID of the chromatic aberration post process,
 		 */
         readonly ChromaticAberrationPostProcessId: string = "ChromaticAberrationPostProcessEffect";
@@ -53,26 +29,7 @@
 		 */
         public sharpen: SharpenPostProcess;
         private _sharpenEffect: PostProcessRenderEffect;
-        /**
-		 * First pass of bloom to capture the original image texture for later use.
-		 */
-        public pass: PassPostProcess;
-        /**
-		 * Second pass of bloom used to brighten bright portions of the image.
-		 */
-        public highlights: HighlightsPostProcess;
-        /**
-		 * BlurX post process used in coordination with blurY to guassian blur the highlighted image.
-		 */
-        public blurX: BlurPostProcess;
-        /**
-		 * BlurY post process used in coordination with blurX to guassian blur the highlighted image.
-		 */
-        public blurY: BlurPostProcess;
-        /**
-		 * Final pass run for bloom to copy the resulting bloom texture back to screen.
-		 */
-        public copyBack: PassPostProcess;
+        private bloom: BloomEffect;
         /**
          * Depth of field effect, applies a blur based on how far away objects are from the focus distance.
          */
@@ -86,10 +43,6 @@
          */
         public imageProcessing: ImageProcessingPostProcess;
         /**
-         * 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;
@@ -154,11 +107,11 @@
             if (this._bloomWeight === value) {
                 return;
             }
-            this._bloomWeight = value;
-
-            if (this._hdr && this.copyBack) {
-                this.copyBack.alphaConstants = new Color4(value, value, value, value);
+            if(this.bloom._merge._mergeOptions.bloom){
+                this.bloom._merge._mergeOptions.bloom.weight = value;
             }
+            
+            this._bloomWeight = value;
         }
 
         @serialize()
@@ -434,80 +387,8 @@
             }
 
             if (this.bloomEnabled) {
-                this.pass = new PassPostProcess("sceneRenderTarget", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                this._setAutoClearAndTextureSharing(this.pass, true);
-                this.addEffect(new PostProcessRenderEffect(engine, this.PassPostProcessId, () => { return this.pass; }, true));
-
-                if (!this._hdr) { // Need to enhance highlights if not using float rendering
-                    this.highlights = new HighlightsPostProcess("highlights", this.bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                    this.addEffect(new PostProcessRenderEffect(engine, this.HighLightsPostProcessId, () => { return this.highlights; }, true));
-                    this.highlights.autoClear = false;
-                    this.highlights.alwaysForcePOT = true;
-                }
-
-                this.blurX = new BlurPostProcess("horizontal blur", new Vector2(1.0, 0), 10.0, this.bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                this.addEffect(new PostProcessRenderEffect(engine, this.BlurXPostProcessId, () => { return this.blurX; }, true));
-                this.blurX.alwaysForcePOT = true;
-                this.blurX.autoClear = false;
-                this.blurX.onActivateObservable.add(() => {
-                    let dw = this.blurX.width / engine.getRenderWidth(true);
-                    this.blurX.kernel = this.bloomKernel * dw;
-                });
-
-                this.blurY = new BlurPostProcess("vertical blur", new Vector2(0, 1.0), 10.0, this.bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                this.addEffect(new PostProcessRenderEffect(engine, this.BlurYPostProcessId, () => { return this.blurY; }, true));
-                this.blurY.alwaysForcePOT = true;
-                this.blurY.autoClear = false;
-                this.blurY.onActivateObservable.add(() => {
-                    let dh = this.blurY.height / engine.getRenderHeight(true);
-                    this.blurY.kernel = this.bloomKernel * dh;
-                });
-
-                this.copyBack = new PassPostProcess("bloomBlendBlit", this.bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                this.addEffect(new PostProcessRenderEffect(engine, this.CopyBackPostProcessId, () => { return this.copyBack; }, true));
-                this.copyBack.alwaysForcePOT = true;
-                if (this._hdr) {
-                    this.copyBack.alphaMode = Engine.ALPHA_INTERPOLATE;
-                    let w = this.bloomWeight;
-                    this.copyBack.alphaConstants = new Color4(w, w, w, w);
-                } else {
-                    this.copyBack.alphaMode = Engine.ALPHA_SCREENMODE;
-                }
-                this.copyBack.autoClear = false;
-            }
-
-            if (this._imageProcessingEnabled) {
-                this.imageProcessing = new ImageProcessingPostProcess("imageProcessing", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                if (this._hdr) {
-                    this.addEffect(new PostProcessRenderEffect(engine, this.ImageProcessingPostProcessId, () => { return this.imageProcessing; }, true));
-                } else {
-                    this._scene.imageProcessingConfiguration.applyByPostProcess = false;
-                }
-            }
-
-            if (this._hdr && this.imageProcessing) {
-                this.finalMerge = this.imageProcessing;
-            }
-            else {
-                this.finalMerge = new PassPostProcess("finalMerge", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
-                this.addEffect(new PostProcessRenderEffect(engine, this.FinalMergePostProcessId, () => { return this.finalMerge; }, true));
-                this._setAutoClearAndTextureSharing(this.finalMerge, true);
-                
-                this.finalMerge.autoClear = !this.bloomEnabled && (!this._hdr || !this.imageProcessing);
-            }
-
-            if (this.bloomEnabled) {
-                if (this._hdr) { // Share render targets to save memory
-                    this.copyBack.shareOutputWith(this.blurX);
-                    if (this.imageProcessing) {
-                        this.imageProcessing.shareOutputWith(this.pass);
-                        this.imageProcessing.autoClear = false;
-                    } else {
-                        this.finalMerge.shareOutputWith(this.pass);
-                    }
-                } else {
-                    this.finalMerge.shareOutputWith(this.pass);
-                }
+                this.bloom = new BloomEffect(this._scene, this.bloomScale, this.bloomKernel);
+                this.addEffect(this.bloom);
             }
 
             if (this.fxaaEnabled) {
@@ -539,26 +420,6 @@
             for (var i = 0; i < this._cameras.length; i++) {
                 var camera = this._cameras[i];
 
-                if (this.pass) {
-                    this.pass.dispose(camera);
-                }
-
-                if (this.highlights) {
-                    this.highlights.dispose(camera);
-                }
-
-                if (this.blurX) {
-                    this.blurX.dispose(camera);
-                }
-
-                if (this.blurY) {
-                    this.blurY.dispose(camera);
-                }
-
-                if (this.copyBack) {
-                    this.copyBack.dispose(camera);
-                }
-
                 if (this.imageProcessing) {
                     this.imageProcessing.dispose(camera);
                 }
@@ -567,10 +428,6 @@
                     this.fxaa.dispose(camera);
                 }
 
-                if (this.finalMerge) {
-                    this.finalMerge.dispose(camera);
-                }
-
                 // These are created in the constructor and should not be disposed on every pipeline change
                 if(disposeNonRecreated){
                     if (this.sharpen) {
@@ -586,15 +443,9 @@
                     }
                 }
             }
-
-            (<any>this.pass) = null;
-            (<any>this.highlights) = null;
-            (<any>this.blurX) = null;
-            (<any>this.blurY) = null;
-            (<any>this.copyBack) = null;
+            
             (<any>this.imageProcessing) = null;
             (<any>this.fxaa) = null;
-            (<any>this.finalMerge) = null;
 
             if(disposeNonRecreated){
                 (<any>this.sharpen) = null;

src/PostProcess/babylon.bloomEffect.ts

@@ -0,0 +1,43 @@
+module BABYLON {
+    /**
+     * The bloom effect spreads bright areas of an image to simulate artifacts seen in cameras
+     */
+    export class BloomEffect extends PostProcessRenderEffect{
+        private _effects: Array<PostProcess> = [];
+        public _merge:DepthOfFieldMergePostProcess;
+
+        /**
+         * Creates a new instance of @see BloomEffect
+         * @param scene The scene the effect belongs to.
+         * @param bloomScale The ratio of the blur texture to the input texture that should be used to compute the bloom.
+         * @param bloomKernel The size of the kernel to be used when applying the blur.
+         * @param pipelineTextureType The type of texture to be used when performing the post processing.
+         * @param blockCompilation If compilation of the shader should not be done in the constructor. The updateEffect method can be used to compile the shader at a later time. (default: false)
+         */
+        constructor(scene: Scene, bloomScale:number, bloomKernel:number, pipelineTextureType = 0, blockCompilation = false) {
+            super(scene.getEngine(), "depth of field", ()=>{
+                return this._effects;
+            }, true);
+            
+            var blurX = new BlurPostProcess("horizontal blur", new Vector2(1.0, 0), 10.0, bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType);
+            blurX.alwaysForcePOT = true;
+            blurX.onActivateObservable.add(() => {
+                let dw = blurX.width / scene.getEngine().getRenderWidth(true);
+                blurX.kernel = bloomKernel * dw;
+            });
+
+            var blurY = new BlurPostProcess("vertical blur", new Vector2(0, 1.0), 10.0, bloomScale, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType);
+            blurY.alwaysForcePOT = true;
+            blurY.autoClear = false;
+            blurY.onActivateObservable.add(() => {
+                let dh = blurY.height / scene.getEngine().getRenderHeight(true);
+                blurY.kernel = bloomKernel * dh;
+            });
+            
+            this._merge = new DepthOfFieldMergePostProcess("depthOfFieldMerge", {originalFromInput: blurX, bloom: {blurred: blurY, weight: 0}}, 1, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType, blockCompilation);
+            this._merge.autoClear = false;
+
+            this._effects = [blurX, blurY, this._merge]
+        }
+    }
+}

src/PostProcess/babylon.depthOfFieldEffect.ts

@@ -116,7 +116,7 @@ module BABYLON {
             }
 
             // Merge blurred images with original image based on circleOfConfusion
-            this._depthOfFieldMerge = new DepthOfFieldMergePostProcess("depthOfFieldMerge", this._circleOfConfusion, this._circleOfConfusion, this._depthOfFieldBlurX, 1, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType, blockCompilation);
+            this._depthOfFieldMerge = new DepthOfFieldMergePostProcess("depthOfFieldMerge", {originalFromInput: this._circleOfConfusion, depthOfField: {circleOfConfusion: this._circleOfConfusion, blurSteps: this._depthOfFieldBlurX}}, 1, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, pipelineTextureType, blockCompilation);
             this._depthOfFieldMerge.autoClear = false;
             
             // Set all post processes on the effect.

src/PostProcess/babylon.depthOfFieldMergePostProcess.ts

@@ -1,14 +1,41 @@
 module BABYLON {
     /**
+     * Options to be set when merging outputs from the default pipeline.
+     */
+	export class DepthOfFieldMergePostProcessOptions {
+        /**
+         * The original image to merge on top of
+         */
+        public originalFromInput?: PostProcess;
+        /**
+         * Parameters to perform the merge of the depth of field effect
+         */
+        public depthOfField?: {
+            circleOfConfusion: PostProcess;
+            blurSteps: Array<PostProcess>;
+        };
+        /**
+         * Parameters to perform the merge of bloom effect
+         */
+        public bloom?: {
+            blurred: PostProcess;
+            weight: number;
+        };
+    }
+
+    /**
      * The DepthOfFieldMergePostProcess merges blurred images with the original based on the values of the circle of confusion.
      */
     export class DepthOfFieldMergePostProcess extends PostProcess {
         /**
+         * Internal, optins for the merge post process
+         */
+        public _mergeOptions:DepthOfFieldMergePostProcessOptions;
+
+        /**
          * Creates a new instance of @see CircleOfConfusionPostProcess
          * @param name The name of the effect.
-         * @param original The non-blurred image to be modified
-         * @param circleOfConfusion The circle of confusion post process that will determine how blurred each pixel should become.
-         * @param blurSteps Incrimental bluring post processes.
+         * @param mergeOptions Options to be set when merging outputs from the default pipeline.
          * @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)
@@ -17,14 +44,23 @@ module BABYLON {
          * @param textureType Type of textures used when performing the post process. (default: 0)
          * @param blockCompilation If compilation of the shader should not be done in the constructor. The updateEffect method can be used to compile the shader at a later time. (default: false)
          */
-        constructor(name: string, original: PostProcess, circleOfConfusion: PostProcess, private blurSteps: Array<PostProcess>, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, blockCompilation = false) {
-            super(name, "depthOfFieldMerge", [], ["circleOfConfusionSampler", "blurStep0", "blurStep1", "blurStep2"], options, camera, samplingMode, engine, reusable, null, textureType, undefined, null, true);
+        constructor(name: string, mergeOptions: DepthOfFieldMergePostProcessOptions, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, blockCompilation = false) {
+            super(name, "depthOfFieldMerge", ["bloomWeight"], ["circleOfConfusionSampler", "blurStep0", "blurStep1", "blurStep2", "bloomBlur"], options, camera, samplingMode, engine, reusable, null, textureType, undefined, null, true);
+            this._mergeOptions = mergeOptions;
             this.onApplyObservable.add((effect: Effect) => {
-                effect.setTextureFromPostProcessOutput("circleOfConfusionSampler", circleOfConfusion);
-                effect.setTextureFromPostProcess("textureSampler", original);
-                blurSteps.forEach((step,index)=>{
-                    effect.setTextureFromPostProcessOutput("blurStep"+(blurSteps.length-index-1), step);
-                });
+                if(mergeOptions.originalFromInput){
+                    effect.setTextureFromPostProcess("textureSampler", mergeOptions.originalFromInput);
+                }
+                if(mergeOptions.depthOfField){
+                    effect.setTextureFromPostProcessOutput("circleOfConfusionSampler", mergeOptions.depthOfField.circleOfConfusion);
+                    mergeOptions.depthOfField.blurSteps.forEach((step,index)=>{
+                        effect.setTextureFromPostProcessOutput("blurStep"+(mergeOptions.depthOfField!.blurSteps.length-index-1), step);
+                    });
+                }
+                if(mergeOptions.bloom){
+                    effect.setTextureFromPostProcessOutput("bloomBlur", mergeOptions.bloom.blurred);
+                    effect.setFloat("bloomWeight", mergeOptions.bloom.weight);
+                }        
             });
 
             if(!blockCompilation){
@@ -43,7 +79,17 @@ module BABYLON {
          */
         public updateEffect(defines: Nullable<string> = null, uniforms: Nullable<string[]> = null, samplers: Nullable<string[]> = null, indexParameters?: any,
             onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void) {
-            super.updateEffect(defines ? defines : "#define BLUR_LEVEL "+(this.blurSteps.length-1)+"\n", uniforms, samplers, indexParameters, onCompiled, onError);
+            if(!defines){
+                defines = "";
+                if(this._mergeOptions.depthOfField){
+                    defines += "#define DOF 1\n";
+                    defines += "#define BLUR_LEVEL "+(this._mergeOptions.depthOfField.blurSteps.length-1)+"\n";
+                }
+                if(this._mergeOptions.bloom){
+                    defines += "#define BLOOM 1\n";
+                }
+            }
+            super.updateEffect(defines, uniforms, samplers, indexParameters, onCompiled, onError);
         }
     }
 }

src/Shaders/depthOfFieldMerge.fragment.fx

@@ -1,46 +1,57 @@
-// samplers
 uniform sampler2D textureSampler;
-uniform sampler2D circleOfConfusionSampler;
-uniform sampler2D blurStep0;
+varying vec2 vUV;
+
+#ifdef DOF
+    uniform sampler2D circleOfConfusionSampler;
+    uniform sampler2D blurStep0;
 
-#if BLUR_LEVEL > 0
-uniform sampler2D blurStep1;
+    #if BLUR_LEVEL > 0
+    uniform sampler2D blurStep1;
+    #endif
+    #if BLUR_LEVEL > 1
+    uniform sampler2D blurStep2;
+    #endif
 #endif
-#if BLUR_LEVEL > 1
-uniform sampler2D blurStep2;
+
+#ifdef BLOOM
+    uniform sampler2D bloomBlur;
+    uniform float bloomWeight;
 #endif
-// varyings
-varying vec2 vUV;
 
 void main(void)
 {
     gl_FragColor = texture2D(textureSampler, vUV);
-
-    float coc = texture2D(circleOfConfusionSampler, vUV).r;
-    vec4 original = texture2D(textureSampler, vUV);
-#if BLUR_LEVEL == 0
-    vec4 blurred0 = texture2D(blurStep0, vUV);
-    gl_FragColor = mix(original, blurred0, coc);
-#endif
-#if BLUR_LEVEL == 1
-    vec4 blurred0 = texture2D(blurStep0, vUV);   
-    vec4 blurred1 = texture2D(blurStep1, vUV);
-    if(coc < 0.5){
-        gl_FragColor = mix(original, blurred1, coc/0.5);
-    }else{
-        gl_FragColor = mix(blurred1, blurred0, (coc-0.5)/0.5);
-    }
+#ifdef DOF
+        float coc = texture2D(circleOfConfusionSampler, vUV).r;
+        vec4 original = texture2D(textureSampler, vUV);
+    #if BLUR_LEVEL == 0
+        vec4 blurred0 = texture2D(blurStep0, vUV);
+        gl_FragColor = mix(original, blurred0, coc);
+    #endif
+    #if BLUR_LEVEL == 1
+        vec4 blurred0 = texture2D(blurStep0, vUV);   
+        vec4 blurred1 = texture2D(blurStep1, vUV);
+        if(coc < 0.5){
+            gl_FragColor = mix(original, blurred1, coc/0.5);
+        }else{
+            gl_FragColor = mix(blurred1, blurred0, (coc-0.5)/0.5);
+        }
+    #endif
+    #if BLUR_LEVEL == 2
+        vec4 blurred0 = texture2D(blurStep0, vUV);
+        vec4 blurred1 = texture2D(blurStep1, vUV);
+        vec4 blurred2 = texture2D(blurStep2, vUV);
+        if(coc < 0.33){
+            gl_FragColor = mix(original, blurred2, coc/0.33);
+        }else if(coc < 0.66){
+            gl_FragColor = mix(blurred2, blurred1, (coc-0.33)/0.33);
+        }else{
+            gl_FragColor = mix(blurred1, blurred0, (coc-0.66)/0.34);
+        }
+    #endif
 #endif
-#if BLUR_LEVEL == 2
-    vec4 blurred0 = texture2D(blurStep0, vUV);
-    vec4 blurred1 = texture2D(blurStep1, vUV);
-    vec4 blurred2 = texture2D(blurStep2, vUV);
-    if(coc < 0.33){
-        gl_FragColor = mix(original, blurred2, coc/0.33);
-    }else if(coc < 0.66){
-        gl_FragColor = mix(blurred2, blurred1, (coc-0.33)/0.33);
-    }else{
-        gl_FragColor = mix(blurred1, blurred0, (coc-0.66)/0.34);
-    }
+#ifdef BLOOM
+    vec3 blurred = texture2D(bloomBlur, vUV).rgb;
+    gl_FragColor.rgb = mix(gl_FragColor.rgb, blurred, bloomWeight);
 #endif
 }