FIxing issue with Lens flares and postprocessess

src/LensFlare/babylon.lensFlareSystem.js

@@ -85,7 +85,7 @@ var BABYLON;
                 return false;
             var engine = this._scene.getEngine();
             var viewport = this._scene.activeCamera.viewport;
-            var globalViewport = viewport.toGlobal(engine);
+            var globalViewport = viewport.toScreenGlobal(engine);
             // Position
             if (!this.computeEffectivePosition(globalViewport)) {
                 return false;
@@ -144,7 +144,7 @@ var BABYLON;
                 var x = centerX - (distX * flare.position);
                 var y = centerY - (distY * flare.position);
                 var cw = flare.size;
-                var ch = flare.size * engine.getAspectRatio(this._scene.activeCamera);
+                var ch = flare.size * engine.getAspectRatio(this._scene.activeCamera, true);
                 var cx = 2 * (x / globalViewport.width) - 1.0;
                 var cy = 1.0 - 2 * (y / globalViewport.height);
                 var viewportMatrix = BABYLON.Matrix.FromValues(cw / 2, 0, 0, 0, 0, ch / 2, 0, 0, 0, 0, 1, 0, cx, cy, 0, 1);

src/LensFlare/babylon.lensFlareSystem.ts

@@ -118,7 +118,7 @@
 
             var engine = this._scene.getEngine();
             var viewport = this._scene.activeCamera.viewport;
-            var globalViewport = viewport.toGlobal(engine);
+            var globalViewport = viewport.toScreenGlobal(engine);
 
             // Position
             if (!this.computeEffectivePosition(globalViewport)) {
@@ -187,7 +187,7 @@
                 var y = centerY - (distY * flare.position);
 
                 var cw = flare.size;
-                var ch = flare.size * engine.getAspectRatio(this._scene.activeCamera);
+                var ch = flare.size * engine.getAspectRatio(this._scene.activeCamera, true);
                 var cx = 2 * (x / globalViewport.width) - 1.0;
                 var cy = 1.0 - 2 * (y / globalViewport.height);
 

src/Materials/babylon.shaderMaterial.js

@@ -230,6 +230,7 @@ var BABYLON;
             var serializationObject = _super.prototype.serialize.call(this);
             serializationObject.options = this._options;
             serializationObject.shaderPath = this._shaderPath;
+            serializationObject.customType = "BABYLON.ShaderMaterial";
             // Texture
             serializationObject.textures = {};
             for (var name in this._textures) {

src/Materials/babylon.shaderMaterial.ts

@@ -2,17 +2,17 @@
     export class ShaderMaterial extends Material {
         private _shaderPath: any;
         private _options: any;
-        private _textures : { [name: string]: Texture } = {};
-        private _floats : { [name: string]: number }= {};
-        private _floatsArrays : { [name: string]: number[] } = {};
-        private _colors3 : { [name: string]: Color3 } = {};
-        private _colors4 : { [name: string]: Color4 } = {};
-        private _vectors2 : { [name: string]: Vector2 } = {};
-        private _vectors3 : { [name: string]: Vector3 } = {};
-        private _vectors4 : { [name: string]: Vector4 } = {};
-        private _matrices : { [name: string]: Matrix } = {};
-        private _matrices3x3 : { [name: string]: Float32Array } = {};
-        private _matrices2x2 : { [name: string]: Float32Array } = {};
+        private _textures: { [name: string]: Texture } = {};
+        private _floats: { [name: string]: number } = {};
+        private _floatsArrays: { [name: string]: number[] } = {};
+        private _colors3: { [name: string]: Color3 } = {};
+        private _colors4: { [name: string]: Color4 } = {};
+        private _vectors2: { [name: string]: Vector2 } = {};
+        private _vectors3: { [name: string]: Vector3 } = {};
+        private _vectors4: { [name: string]: Vector4 } = {};
+        private _matrices: { [name: string]: Matrix } = {};
+        private _matrices3x3: { [name: string]: Float32Array } = {};
+        private _matrices2x2: { [name: string]: Float32Array } = {};
         private _cachedWorldViewMatrix = new Matrix();
         private _renderId: number;
 
@@ -281,7 +281,7 @@
             var newShaderMaterial = new ShaderMaterial(name, this.getScene(), this._shaderPath, this._options);
 
             return newShaderMaterial;
-        }        
+        }
 
         public dispose(forceDisposeEffect?: boolean): void {
             for (var name in this._textures) {
@@ -292,141 +292,141 @@
 
             super.dispose(forceDisposeEffect);
         }
-		
+
         public serialize(): any {
             var serializationObject = super.serialize();
             serializationObject.options = this._options;
-			serializationObject.shaderPath = this._shaderPath;
-			serializationObject.customType      = "BABYLON.ShaderMaterial";
+            serializationObject.shaderPath = this._shaderPath;
+            serializationObject.customType = "BABYLON.ShaderMaterial";
 			
-			// Texture
-			serializationObject.textures = {};
-			for (var name in this._textures) {
-				serializationObject.textures[name] = this._textures[name].serialize();
-			}
-
-			// Float    
-			serializationObject.floats = {};
-			for (name in this._floats) {
-				serializationObject.floats[name] = this._floats[name];
-			}
-
-			// Float s   
-			serializationObject.floatArrays = {};
-			for (name in this._floatsArrays) {
-				serializationObject.floatArrays[name] = this._floatsArrays[name];
-			}
-
-			// Color3    
-			serializationObject.colors3 = {};		
-			for (name in this._colors3) {
-				serializationObject.colors3[name] = this._colors3[name].asArray();
-			}
-
-			// Color4  
-			serializationObject.colors4 = {};		
-			for (name in this._colors4) {
-				serializationObject.colors4[name] = this._colors4[name].asArray();
-			}
-
-			// Vector2  
-			serializationObject.vectors2 = {};		
-			for (name in this._vectors2) {
-				serializationObject.vectors2[name] = this._vectors2[name].asArray();
-			}
-
-			// Vector3        
-			serializationObject.vectors3 = {};		
-			for (name in this._vectors3) {
-				serializationObject.vectors3[name] = this._vectors3[name].asArray();
-			}
-
-			// Vector4        
-			serializationObject.vectors4 = {};		
-			for (name in this._vectors4) {
-				serializationObject.vectors4[name] = this._vectors4[name].asArray();
-			}
-
-			// Matrix      
-			serializationObject.matrices = {};
-			for (name in this._matrices) {
-				serializationObject.matrices[name] = this._matrices[name].asArray();
-			}
-
-			// Matrix 3x3
-			serializationObject.matrices3x3 = {};
-			for (name in this._matrices3x3) {
-				serializationObject.matrices3x3[name] = this._matrices3x3[name];
-			}
-
-			// Matrix 2x2
-			serializationObject.matrices2x2 = {};
-			for (name in this._matrices2x2) {
-				serializationObject.matrices2x2[name] = this._matrices2x2[name];
-			}
-			
-			return serializationObject;
-		}
-		
-		public static Parse(source: any, scene: Scene, rootUrl: string): ShaderMaterial {
+            // Texture
+            serializationObject.textures = {};
+            for (var name in this._textures) {
+                serializationObject.textures[name] = this._textures[name].serialize();
+            }
+
+            // Float    
+            serializationObject.floats = {};
+            for (name in this._floats) {
+                serializationObject.floats[name] = this._floats[name];
+            }
+
+            // Float s   
+            serializationObject.floatArrays = {};
+            for (name in this._floatsArrays) {
+                serializationObject.floatArrays[name] = this._floatsArrays[name];
+            }
+
+            // Color3    
+            serializationObject.colors3 = {};
+            for (name in this._colors3) {
+                serializationObject.colors3[name] = this._colors3[name].asArray();
+            }
+
+            // Color4  
+            serializationObject.colors4 = {};
+            for (name in this._colors4) {
+                serializationObject.colors4[name] = this._colors4[name].asArray();
+            }
+
+            // Vector2  
+            serializationObject.vectors2 = {};
+            for (name in this._vectors2) {
+                serializationObject.vectors2[name] = this._vectors2[name].asArray();
+            }
+
+            // Vector3        
+            serializationObject.vectors3 = {};
+            for (name in this._vectors3) {
+                serializationObject.vectors3[name] = this._vectors3[name].asArray();
+            }
+
+            // Vector4        
+            serializationObject.vectors4 = {};
+            for (name in this._vectors4) {
+                serializationObject.vectors4[name] = this._vectors4[name].asArray();
+            }
+
+            // Matrix      
+            serializationObject.matrices = {};
+            for (name in this._matrices) {
+                serializationObject.matrices[name] = this._matrices[name].asArray();
+            }
+
+            // Matrix 3x3
+            serializationObject.matrices3x3 = {};
+            for (name in this._matrices3x3) {
+                serializationObject.matrices3x3[name] = this._matrices3x3[name];
+            }
+
+            // Matrix 2x2
+            serializationObject.matrices2x2 = {};
+            for (name in this._matrices2x2) {
+                serializationObject.matrices2x2[name] = this._matrices2x2[name];
+            }
+
+            return serializationObject;
+        }
+
+        public static Parse(source: any, scene: Scene, rootUrl: string): ShaderMaterial {
             var material = new ShaderMaterial(source.name, scene, source.shaderPath, source.options);
 			
-			// Texture
-			for (var name in source.textures) {
-				material.setTexture(name, <Texture> Texture.Parse(source.textures[name], scene, rootUrl));
-			}
-
-			// Float    
-			for (name in source.floats) {
-				material.setFloat(name, source.floats[name]);
-			}
-
-			// Float s   
-			for (name in source.floatsArrays) {
-				material.setFloats(name, source.floatsArrays[name]);
-			}
-
-			// Color3        
-			for (name in source.colors3) {
-				material.setColor3(name, Color3.FromArray(source.colors3[name]));
-			}
-
-			// Color4      
-			for (name in source.colors4) {
-				material.setColor4(name, Color4.FromArray(source.colors4[name]));
-			}
-
-			// Vector2        
-			for (name in source.vectors2) {
-				material.setVector2(name, Vector2.FromArray(source.vectors2[name]));
-			}
-
-			// Vector3        
-			for (name in source.vectors3) {
-				material.setVector3(name, Vector3.FromArray(source.vectors3[name]));
-			}
-
-			// Vector4        
-			for (name in source.vectors4) {
-				material.setVector4(name, Vector4.FromArray(source.vectors4[name]));
-			}
-
-			// Matrix      
-			for (name in source.matrices) {
-				material.setMatrix(name, Matrix.FromArray(source.matrices[name]));
-			}
-
-			// Matrix 3x3
-			for (name in source.matrices3x3) {
-				material.setMatrix3x3(name, source.matrices3x3[name]);
-			}
-
-			// Matrix 2x2
-			for (name in source.matrices2x2) {
-				material.setMatrix2x2(name, source.matrices2x2[name]);
-			}
-			
-			return material;
-		}
+            // Texture
+            for (var name in source.textures) {
+                material.setTexture(name, <Texture>Texture.Parse(source.textures[name], scene, rootUrl));
+            }
+
+            // Float    
+            for (name in source.floats) {
+                material.setFloat(name, source.floats[name]);
+            }
+
+            // Float s   
+            for (name in source.floatsArrays) {
+                material.setFloats(name, source.floatsArrays[name]);
+            }
+
+            // Color3        
+            for (name in source.colors3) {
+                material.setColor3(name, Color3.FromArray(source.colors3[name]));
+            }
+
+            // Color4      
+            for (name in source.colors4) {
+                material.setColor4(name, Color4.FromArray(source.colors4[name]));
+            }
+
+            // Vector2        
+            for (name in source.vectors2) {
+                material.setVector2(name, Vector2.FromArray(source.vectors2[name]));
+            }
+
+            // Vector3        
+            for (name in source.vectors3) {
+                material.setVector3(name, Vector3.FromArray(source.vectors3[name]));
+            }
+
+            // Vector4        
+            for (name in source.vectors4) {
+                material.setVector4(name, Vector4.FromArray(source.vectors4[name]));
+            }
+
+            // Matrix      
+            for (name in source.matrices) {
+                material.setMatrix(name, Matrix.FromArray(source.matrices[name]));
+            }
+
+            // Matrix 3x3
+            for (name in source.matrices3x3) {
+                material.setMatrix3x3(name, source.matrices3x3[name]);
+            }
+
+            // Matrix 2x2
+            for (name in source.matrices2x2) {
+                material.setMatrix2x2(name, source.matrices2x2[name]);
+            }
+
+            return material;
+        }
     }
-} 
+} 

src/Math/babylon.math.js

@@ -2234,6 +2234,11 @@ var BABYLON;
             var height = engine.getRenderHeight();
             return new Viewport(this.x * width, this.y * height, this.width * width, this.height * height);
         };
+        Viewport.prototype.toScreenGlobal = function (engine) {
+            var width = engine.getRenderWidth(true);
+            var height = engine.getRenderHeight(true);
+            return new Viewport(this.x * width, this.y * height, this.width * width, this.height * height);
+        };
         return Viewport;
     })();
     BABYLON.Viewport = Viewport;

src/Math/babylon.math.ts

@@ -2797,11 +2797,17 @@
         constructor(public x: number, public y: number, public width: number, public height: number) {
         }
 
-        public toGlobal(engine): Viewport {
+        public toGlobal(engine: Engine): Viewport {
             var width = engine.getRenderWidth();
             var height = engine.getRenderHeight();
             return new Viewport(this.x * width, this.y * height, this.width * width, this.height * height);
         }
+
+        public toScreenGlobal(engine: Engine): Viewport {
+            var width = engine.getRenderWidth(true);
+            var height = engine.getRenderHeight(true);
+            return new Viewport(this.x * width, this.y * height, this.width * width, this.height * height);
+        }
     }
 
     export class Frustum {

src/Mesh/babylon.mesh.vertexData.ts

@@ -2165,3 +2165,4 @@
         }
     }
 }
+

src/Tools/babylon.sceneSerializer.js

@@ -228,10 +228,6 @@ var BABYLON;
             var material;
             for (index = 0; index < scene.materials.length; index++) {
                 material = scene.materials[index];
-                //ShaderMaterial is not yet being serialized.
-                if (material instanceof BABYLON.ShaderMaterial) {
-                    continue;
-                }
                 serializationObject.materials.push(material.serialize());
             }
             // MultiMaterials

src/Tools/babylon.sceneSerializer.ts

@@ -268,7 +268,7 @@
                 var multiMaterial = scene.multiMaterials[index];
                 serializationObject.multiMaterials.push(multiMaterial.serialize());
             }
-
+            
             // Skeletons
             serializationObject.skeletons = [];
             for (index = 0; index < scene.skeletons.length; index++) {

src/babylon.engine.js

@@ -646,18 +646,21 @@ var BABYLON;
                 version: this._glVersion
             };
         };
-        Engine.prototype.getAspectRatio = function (camera) {
+        Engine.prototype.getAspectRatio = function (camera, useScreen) {
+            if (useScreen === void 0) { useScreen = false; }
             var viewport = camera.viewport;
-            return (this.getRenderWidth() * viewport.width) / (this.getRenderHeight() * viewport.height);
+            return (this.getRenderWidth(useScreen) * viewport.width) / (this.getRenderHeight(useScreen) * viewport.height);
         };
-        Engine.prototype.getRenderWidth = function () {
-            if (this._currentRenderTarget) {
+        Engine.prototype.getRenderWidth = function (useScreen) {
+            if (useScreen === void 0) { useScreen = false; }
+            if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._width;
             }
             return this._renderingCanvas.width;
         };
-        Engine.prototype.getRenderHeight = function () {
-            if (this._currentRenderTarget) {
+        Engine.prototype.getRenderHeight = function (useScreen) {
+            if (useScreen === void 0) { useScreen = false; }
+            if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._height;
             }
             return this._renderingCanvas.height;

src/babylon.engine.ts

@@ -727,21 +727,21 @@
             }
         }
 
-        public getAspectRatio(camera: Camera): number {
+        public getAspectRatio(camera: Camera, useScreen = false): number {
             var viewport = camera.viewport;
-            return (this.getRenderWidth() * viewport.width) / (this.getRenderHeight() * viewport.height);
+            return (this.getRenderWidth(useScreen) * viewport.width) / (this.getRenderHeight(useScreen) * viewport.height);
         }
 
-        public getRenderWidth(): number {
-            if (this._currentRenderTarget) {
+        public getRenderWidth(useScreen = false): number {
+            if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._width;
             }
 
             return this._renderingCanvas.width;
         }
 
-        public getRenderHeight(): number {
-            if (this._currentRenderTarget) {
+        public getRenderHeight(useScreen = false): number {
+            if (!useScreen && this._currentRenderTarget) {
                 return this._currentRenderTarget._height;
             }