move image processing to the end but account for exposure in bloom

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

@@ -64,6 +64,7 @@
          */
         public animations: Animation[] = [];
 
+        private _imageProcessingConfigurationObserver:Nullable<Observer<ImageProcessingConfiguration>> = null;
         // Values   
         private _sharpenEnabled:boolean = false;    
         private _bloomEnabled: boolean = false;
@@ -397,6 +398,10 @@
                 this.bloomKernel = this.bloomKernel
             })
 
+            this._imageProcessingConfigurationObserver = this._scene.imageProcessingConfiguration.onUpdateParameters.add(()=>{
+                this.bloom._downscale._exposure = this._scene.imageProcessingConfiguration.exposure;
+            })
+
             this._buildPipeline();
         }
 
@@ -465,17 +470,6 @@
 
             var mergeOptions = new DefaultPipelineMergePostProcessOptions();
 
-            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));
-                    this._setAutoClearAndTextureSharing(this.imageProcessing);
-                    this._firstPostProcess = null;
-                } else {	
-                    this._scene.imageProcessingConfiguration.applyByPostProcess = false;	
-                }	
-            }
-
             if (this.fxaaEnabled) {
                 this.fxaa = new FxaaPostProcess("fxaa", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
                 this.addEffect(new PostProcessRenderEffect(engine, this.FxaaPostProcessId, () => { return this.fxaa; }, true));
@@ -524,6 +518,16 @@
                 this._setAutoClearAndTextureSharing(this._defaultPipelineMerge, true);
             }
 
+            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));	
+                    this._setAutoClearAndTextureSharing(this.imageProcessing);	
+                } else {		
+                    this._scene.imageProcessingConfiguration.applyByPostProcess = false;		
+                }		
+            }
+
             if (this.grainEnabled) {
                 if(!this.grain.isReady()){
                     this.grain.updateEffect();
@@ -616,6 +620,7 @@
                 this._scene.getEngine().onResizeObservable.remove(this._resizeObserver);
                 this._resizeObserver = null;
             }
+            this._scene.imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingConfigurationObserver)
             super.dispose();
         }
 

src/PostProcess/babylon.extractHighlightsPostProcess.ts

@@ -7,17 +7,23 @@ module BABYLON {
          * The luminance threshold, pixels below this value will be set to black.
          */
         public threshold = 0.9;
+
+        /**
+         * Internal
+         */
+        public _exposure = 1;
         /**
          * Post process which has the input texture to be used when performing highlight extraction
          */
         public _inputPostProcess:Nullable<PostProcess> = null;
         constructor(name: string, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, blockCompilation = false) {
-            super(name, "extractHighlights", ["threshold"], null, options, camera, samplingMode, engine, reusable, null, textureType, undefined, null, blockCompilation);
+            super(name, "extractHighlights", ["threshold", "exposure"], null, options, camera, samplingMode, engine, reusable, null, textureType, undefined, null, blockCompilation);
             this.onApplyObservable.add((effect: Effect) => {
                 if(this._inputPostProcess){
                     effect.setTextureFromPostProcess("textureSampler", this._inputPostProcess);
                 }
                 effect.setFloat('threshold', Math.pow(this.threshold, BABYLON.ToGammaSpace));
+                effect.setFloat('exposure', this._exposure);
             })
         }
     }

src/Shaders/extractHighlights.fragment.fx

@@ -4,10 +4,11 @@
 varying vec2 vUV;
 uniform sampler2D textureSampler;
 uniform float threshold;
+uniform float exposure;
 
 void main(void) 
 {
 	gl_FragColor = texture2D(textureSampler, vUV);
-	float luma = getLuminance(gl_FragColor.rgb);
+	float luma = getLuminance(gl_FragColor.rgb * exposure);
 	gl_FragColor.rgb = step(threshold, luma) * gl_FragColor.rgb;
 }