Added blur to mirror

package.json

@@ -8,7 +8,7 @@
   ],
   "name": "babylonjs",
   "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-  "version": "3.0.3-beta",
+  "version": "3.0.4-beta",
   "repository": {
     "type": "git",
     "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -43,6 +43,6 @@
   },
   "readme": "Babylon.js is a 3D engine based on webgl and javascript",
   "readmeFilename": "README.md",
-  "_id": "babylonjs@3.0.3",
+  "_id": "babylonjs@3.0.4",
   "_from": "babylonjs@"
 }

src/Materials/Textures/babylon.mirrorTexture.ts

@@ -8,6 +8,37 @@ module BABYLON {
         private _mirrorMatrix = Matrix.Zero();
         private _savedViewMatrix: Matrix;
 
+        private _blurX: BlurPostProcess;
+        private _blurY: BlurPostProcess;
+        private _blurKernel = 0;
+        private _blurRatio = 0.6;
+
+        public set blurRatio(value: number) {
+            if (this._blurRatio === value) {
+                return;
+            }
+
+            this._blurRatio = value;
+            this._preparePostProcesses();
+        }
+
+        public get blurRatio(): number {
+            return this._blurRatio;
+        }
+
+        public set blurKernel(value: number) {
+            if (this._blurKernel === value) {
+                return;
+            }
+
+            this._blurKernel = value;
+            this._preparePostProcesses();
+        }
+
+        public get blurKernel(): number {
+            return this._blurKernel;
+        }        
+
         constructor(name: string, size: any, scene: Scene, generateMipMaps?: boolean, type: number = Engine.TEXTURETYPE_UNSIGNED_INT, samplingMode = Texture.BILINEAR_SAMPLINGMODE, generateDepthBuffer = true) {
             super(name, size, scene, generateMipMaps, true, type, false, samplingMode, generateDepthBuffer);
 
@@ -33,7 +64,28 @@ module BABYLON {
 
                 delete scene.clipPlane;
             });
-        }
+        }     
+
+        private _preparePostProcesses(): void {
+            this.clearPostProcesses(true);
+
+            if (this._blurKernel) {
+                var engine = this.getScene().getEngine();
+
+                var textureType = engine.getCaps().textureFloatRender ? Engine.TEXTURETYPE_FLOAT : Engine.TEXTURETYPE_HALF_FLOAT;
+
+                this._blurX = new BABYLON.BlurPostProcess("horizontal blur", new BABYLON.Vector2(1.0, 0), this._blurKernel, this._blurRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false, textureType);
+                this._blurX.autoClear = false;
+                this._blurX.alwaysForcePOT = false;
+
+                this._blurY = new BABYLON.BlurPostProcess("vertical blur", new BABYLON.Vector2(0, 1.0), this._blurKernel, this._blurRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false, textureType);
+                this._blurY.autoClear = false;
+                this._blurY.alwaysForcePOT = true;
+
+                this.addPostProcess(this._blurX);
+                this.addPostProcess(this._blurY);   
+            }
+        }   
 
         public clone(): MirrorTexture {
             var textureSize = this.getSize();

src/Materials/Textures/babylon.renderTargetTexture.ts

@@ -40,6 +40,9 @@
         public activeCamera: Camera;
         public customRenderFunction: (opaqueSubMeshes: SmartArray<SubMesh>, transparentSubMeshes: SmartArray<SubMesh>, alphaTestSubMeshes: SmartArray<SubMesh>, beforeTransparents?: () => void) => void;
         public useCameraPostProcesses: boolean;
+        
+        private _postProcessManager: PostProcessManager;
+        private _postProcesses: PostProcess[];
 
         // Events
 
@@ -178,6 +181,49 @@
             this.resetRefreshCounter();
         }
 
+        public addPostProcess(postProcess: PostProcess): void {
+            if (!this._postProcessManager) {
+                this._postProcessManager = new PostProcessManager(this.getScene());
+                this._postProcesses = new Array<PostProcess>();
+            }
+
+            this._postProcesses.push(postProcess);
+            this._postProcesses[0].autoClear = false;
+        }
+
+        public clearPostProcesses(dispose?: boolean): void {
+            if (!this._postProcesses) {
+                return;
+            }
+
+            if (dispose) {
+                for (var postProcess of this._postProcesses) {
+                    postProcess.dispose();
+                    postProcess = null;
+                }
+            }
+
+            this._postProcesses = [];
+        }
+
+        public removePostProcess(postProcess: PostProcess): void {
+            if (!this._postProcesses) {
+                return;
+            }
+
+            var index = this._postProcesses.indexOf(postProcess);
+
+            if (index === -1) {
+                return;
+            }
+
+            this._postProcesses.splice(index, 1);
+
+            if (this._postProcesses.length > 0) {
+                this._postProcesses[0].autoClear = false;
+            }
+        }
+
         public _shouldRender(): boolean {
             if (this._currentRefreshId === -1) { // At least render once
                 this._currentRefreshId = 1;
@@ -358,7 +404,10 @@
             var engine = scene.getEngine();
 
             // Bind
-            if (!useCameraPostProcess || !scene.postProcessManager._prepareFrame(this._texture)) {
+            if (this._postProcessManager) {
+                this._postProcessManager._prepareFrame(this._texture, this._postProcesses);
+            }
+            else if (!useCameraPostProcess || !scene.postProcessManager._prepareFrame(this._texture)) {
                 if (this.isCube) {
                     engine.bindFramebuffer(this._texture, faceIndex);
                 } else {
@@ -382,7 +431,10 @@
             // Render
             this._renderingManager.render(this.customRenderFunction, currentRenderList, this.renderParticles, this.renderSprites);
 
-            if (useCameraPostProcess) {
+            if (this._postProcessManager) {
+                this._postProcessManager._finalizeFrame(false, this._texture, faceIndex, this._postProcesses);
+            }
+            else if (useCameraPostProcess) {
                 scene.postProcessManager._finalizeFrame(false, this._texture, faceIndex);
             }
 
@@ -486,6 +538,13 @@
         }
 
         public dispose(): void {
+            if (this._postProcessManager) {
+                this._postProcessManager.dispose();
+                this._postProcessManager = null;
+            }
+
+            this.clearPostProcesses(true);
+
             super.dispose();
         }
     }

src/PostProcess/babylon.postProcess.ts

@@ -9,7 +9,7 @@
         public clearColor: Color4;
         public autoClear = true;
         public alphaMode = Engine.ALPHA_DISABLE;
-        public alphaConstants: Color4;        
+        public alphaConstants: Color4;       
 
         /*
             Enable Pixel Perfect mode where texture is not scaled to be power of 2.
@@ -38,6 +38,7 @@
         protected _indexParameters: any;
         private _shareOutputWithPostProcess: PostProcess;
         private _texelSize = Vector2.Zero();
+        private _forcedOutputTexture: WebGLTexture;
         
         // Events
 
@@ -113,7 +114,11 @@
 
         public get outputTexture(): WebGLTexture {
             return this._textures.data[this._currentRenderTextureInd];
-        }      
+        }   
+
+        public set outputTexture(value: WebGLTexture) {
+            this._forcedOutputTexture = value;
+        }   
 
         public getCamera(): Camera {
             return this._camera;
@@ -124,6 +129,10 @@
                 return this._shareOutputWithPostProcess.texelSize;
             }
 
+            if (this._forcedOutputTexture) {
+                this._texelSize.copyFromFloats(1.0 / this._forcedOutputTexture._width, 1.0 / this._forcedOutputTexture._height);
+            }
+
             return this._texelSize;
         }
 
@@ -193,8 +202,8 @@
             this.width = -1;
         }
 
-        public activate(camera: Camera, sourceTexture?: WebGLTexture): void {
-            if (!this._shareOutputWithPostProcess) {
+        public activate(camera: Camera, sourceTexture?: WebGLTexture, forceDepthStencil?: boolean): void {            
+            if (!this._shareOutputWithPostProcess && !this._forcedOutputTexture) {
                 camera = camera || this._camera;
 
                 var scene = camera.getScene();
@@ -229,8 +238,8 @@
                     let textureSize = { width: this.width, height: this.height };
                     let textureOptions = { 
                         generateMipMaps: false, 
-                        generateDepthBuffer: camera._postProcesses.indexOf(this) === 0, 
-                        generateStencilBuffer: camera._postProcesses.indexOf(this) === 0 && this._engine.isStencilEnable,
+                        generateDepthBuffer: forceDepthStencil || camera._postProcesses.indexOf(this) === 0, 
+                        generateStencilBuffer: (forceDepthStencil || camera._postProcesses.indexOf(this) === 0) && this._engine.isStencilEnable,
                         samplingMode: this.renderTargetSamplingMode, 
                         type: this._textureType 
                     };
@@ -253,7 +262,15 @@
                 });
             }
 
-            var target = this._shareOutputWithPostProcess ? this._shareOutputWithPostProcess.outputTexture : this.outputTexture;
+            var target: WebGLTexture;
+                        
+            if (this._shareOutputWithPostProcess) {
+                target = this._shareOutputWithPostProcess.outputTexture;
+            } else if (this._forcedOutputTexture) {
+                target = this._forcedOutputTexture;
+            } else {
+                target = this.outputTexture;
+            }
 
             if (this.enablePixelPerfectMode) {
                 this._scaleRatio.copyFromFloats(requiredWidth / desiredWidth, requiredHeight / desiredHeight);
@@ -285,6 +302,10 @@
                 return this._shareOutputWithPostProcess.aspectRatio;
             }
 
+            if (this._forcedOutputTexture) {
+                var size = this._forcedOutputTexture._width / this._forcedOutputTexture._height;
+            }
+
             return this.width / this.height;
         }
         
@@ -306,7 +327,14 @@
             }            
 
             // Texture            
-            var source = this._shareOutputWithPostProcess ? this._shareOutputWithPostProcess.outputTexture : this.outputTexture;
+            var source: WebGLTexture;                        
+            if (this._shareOutputWithPostProcess) {
+                source = this._shareOutputWithPostProcess.outputTexture;
+            } else if (this._forcedOutputTexture) {
+                source = this._forcedOutputTexture;
+            } else {
+                source = this.outputTexture;
+            }            
             this._effect._bindTexture("textureSampler", source);
 
             // Parameters
@@ -317,7 +345,7 @@
         }
 
         private _disposeTextures() {
-            if (this._shareOutputWithPostProcess) {
+            if (this._shareOutputWithPostProcess || this._forcedOutputTexture) {
                 return;
             }
 

src/PostProcess/babylon.postProcessManager.ts

@@ -36,14 +36,14 @@
         }
 
         // Methods
-        public _prepareFrame(sourceTexture?: WebGLTexture): boolean {
-            var postProcesses = this._scene.activeCamera._postProcesses;
+        public _prepareFrame(sourceTexture?: WebGLTexture, postProcesses?: PostProcess[]): boolean {
+            var postProcesses = postProcesses || this._scene.activeCamera._postProcesses;
 
             if (postProcesses.length === 0 || !this._scene.postProcessesEnabled) {
                 return false;
             }
 
-            postProcesses[0].activate(this._scene.activeCamera, sourceTexture);
+            postProcesses[0].activate(this._scene.activeCamera, sourceTexture, postProcesses !== null && postProcesses !== undefined);
             return true;
         }