Postprocesses v2

Babylon/Cameras/babylon.camera.js

@@ -6,7 +6,7 @@
         this.id = name;
         this.position = position;
         this.upVector = BABYLON.Vector3.Up();
-       
+
         this._scene = scene;
 
         scene.cameras.push(this);
@@ -17,17 +17,20 @@
 
         this._computedViewMatrix = BABYLON.Matrix.Identity();
         this._currentRenderId = -1;
-        
+
         // Animations
         this.animations = [];
+
+        // Postprocesses
+        this.postProcesses = [];
     };
-    
+
     BABYLON.Camera.prototype = Object.create(BABYLON.Node.prototype);
-    
+
     // Statics
     BABYLON.Camera.PERSPECTIVE_CAMERA = 0;
     BABYLON.Camera.ORTHOGRAPHIC_CAMERA = 1;
-    
+
     // Members
     BABYLON.Camera.prototype.fov = 0.8;
     BABYLON.Camera.prototype.orthoLeft = null;
@@ -40,6 +43,11 @@
     BABYLON.Camera.prototype.inertia = 0.9;
     BABYLON.Camera.prototype.mode = BABYLON.Camera.PERSPECTIVE_CAMERA;
 
+    // Properties
+    BABYLON.Camera.prototype.getScene = function () {
+        return this._scene;
+    };
+
     // Methods
     BABYLON.Camera.prototype.attachControl = function (canvas) {
     };
@@ -49,7 +57,7 @@
 
     BABYLON.Camera.prototype._update = function () {
     };
-    
+
     BABYLON.Camera.prototype.getWorldMatrix = function () {
         var viewMatrix = this.getViewMatrix();
 
@@ -62,7 +70,7 @@
         return this._worldMatrix;
     };
 
-    BABYLON.Camera.prototype._getViewMatrix = function() {
+    BABYLON.Camera.prototype._getViewMatrix = function () {
         return BABYLON.Matrix.Identity();
     };
 
@@ -73,7 +81,7 @@
 
         this._computedViewMatrix = this._getViewMatrix();
         this._currentRenderId = this._scene.getRenderId();
-        
+
         if (this.parent && this.parent.getWorldMatrix) {
             if (!this._worldMatrix) {
                 this._worldMatrix = BABYLON.Matrix.Identity();
@@ -107,4 +115,15 @@
         BABYLON.Matrix.OrthoOffCenterLHToRef(this.orthoLeft || -halfWidth, this.orthoRight || halfWidth, this.orthoBottom || -halfHeight, this.orthoTop || halfHeight, this.minZ, this.maxZ, this._projectionMatrix);
         return this._projectionMatrix;
     };
+
+    BABYLON.Camera.prototype.dispose = function () {
+        // Remove from scene
+        var index = this._scene.cameras.indexOf(this);
+        this._scene.cameras.splice(index, 1);
+        
+        // Postprocesses
+        while (this.postProcesses.length) {
+            this.postProcesses[0].dispose();
+        }
+    };
 })();

Babylon/Materials/babylon.effect.js

@@ -12,41 +12,15 @@
         this._compilationError = "";
         this._attributesNames = attributesNames;
 
-        var that = this;
-        
         var vertex = baseName.vertex || baseName;
         var fragment = baseName.fragment || baseName;
 
-        // Is in local store ?
-        if (BABYLON.Effect.ShadersStore[vertex + "VertexShader"]) {
-            this._prepareEffect(BABYLON.Effect.ShadersStore[vertex + "VertexShader"], BABYLON.Effect.ShadersStore[fragment + "PixelShader"], attributesNames, defines, optionalDefines);
-        } else {
-            var vertexShaderUrl;
-            var fragmentShaderUrl;
-
-            if (baseName[0] === ".") {
-                vertexShaderUrl = vertex;
-                fragmentShaderUrl = fragment;
-            } else {
-                vertexShaderUrl = BABYLON.Engine.ShadersRepository + vertex;
-                if (fragment != vertex) {
-                    fragmentShaderUrl = fragment;
-                } else {
-                    fragmentShaderUrl = BABYLON.Engine.ShadersRepository + fragment;
-                }
-            }
-
-            // Vertex shader
-            BABYLON.Tools.LoadFile(vertexShaderUrl + ".vertex.fx",
-                function (vertexSourceCode) {
-                    // Fragment shader
-                    BABYLON.Tools.LoadFile(fragmentShaderUrl + ".fragment.fx",
-                        function (fragmentSourceCode) {
-                            that._prepareEffect(vertexSourceCode, fragmentSourceCode, attributesNames, defines, optionalDefines);
-                        });
-                }
-            );
-        }
+        var that = this;
+        this._loadVertexShader(vertex, function (vertexCode) {
+            that._loadFragmentShader(fragment, function (fragmentCode) {
+                that._prepareEffect(vertexCode, fragmentCode, attributesNames, defines, optionalDefines);
+            });
+        });   
 
         // Cache
         this._valueCache = [];
@@ -84,12 +58,50 @@
     BABYLON.Effect.prototype.getSamplers = function () {
         return this._samplers;
     };
-    
+
     BABYLON.Effect.prototype.getCompilationError = function () {
         return this._compilationError;
     };
 
     // Methods
+    BABYLON.Effect.prototype._loadVertexShader = function (vertex, callback) {
+        // Is in local store ?
+        if (BABYLON.Effect.ShadersStore[vertex + "VertexShader"]) {
+            callback(BABYLON.Effect.ShadersStore[vertex + "VertexShader"]);
+            return;
+        }
+        
+        var vertexShaderUrl;
+
+        if (vertex[0] === ".") {
+            vertexShaderUrl = vertex;
+        } else {
+            vertexShaderUrl = BABYLON.Engine.ShadersRepository + vertex;
+        }
+
+        // Vertex shader
+        BABYLON.Tools.LoadFile(vertexShaderUrl + ".vertex.fx", callback);
+    };
+
+    BABYLON.Effect.prototype._loadFragmentShader = function (fragment, callback) {
+        // Is in local store ?
+        if (BABYLON.Effect.ShadersStore[fragment + "PixelShader"]) {
+            callback(BABYLON.Effect.ShadersStore[fragment + "PixelShader"]);
+            return;
+        }
+        
+        var fragmentShaderUrl;
+
+        if (fragment[0] === ".") {
+            fragmentShaderUrl = fragment;
+        } else {
+            fragmentShaderUrl = BABYLON.Engine.ShadersRepository + fragment;
+        }
+
+        // Fragment shader
+        BABYLON.Tools.LoadFile(fragmentShaderUrl + ".fragment.fx", callback);
+    };
+
     BABYLON.Effect.prototype._prepareEffect = function (vertexSourceCode, fragmentSourceCode, attributesNames, defines, optionalDefines, useFallback) {
         try {
             var engine = this._engine;
@@ -124,7 +136,7 @@
             }
         }
     };
-    
+
     BABYLON.Effect.prototype._bindTexture = function (channel, texture) {
         this._engine._bindTexture(this._samplers.indexOf(channel), texture);
     };
@@ -132,7 +144,7 @@
     BABYLON.Effect.prototype.setTexture = function (channel, texture) {
         this._engine.setTexture(this._samplers.indexOf(channel), texture);
     };
-    
+
     BABYLON.Effect.prototype.setTextureFromPostProcess = function (channel, postProcess) {
         this._engine.setTextureFromPostProcess(this._samplers.indexOf(channel), postProcess);
     };
@@ -141,12 +153,12 @@
     //    if (!this._valueCache[uniformName]) {
     //        this._valueCache[uniformName] = new BABYLON.Matrix();
     //    }
-        
+
     //    for (var index = 0; index < 16; index++) {
     //        this._valueCache[uniformName].m[index] = matrix.m[index];
     //    }
     //};
-    
+
     BABYLON.Effect.prototype._cacheFloat2 = function (uniformName, x, y) {
         if (!this._valueCache[uniformName]) {
             this._valueCache[uniformName] = [x, y];
@@ -156,7 +168,7 @@
         this._valueCache[uniformName][0] = x;
         this._valueCache[uniformName][1] = y;
     };
-    
+
     BABYLON.Effect.prototype._cacheFloat3 = function (uniformName, x, y, z) {
         if (!this._valueCache[uniformName]) {
             this._valueCache[uniformName] = [x, y, z];
@@ -167,7 +179,7 @@
         this._valueCache[uniformName][1] = y;
         this._valueCache[uniformName][2] = z;
     };
-    
+
     BABYLON.Effect.prototype._cacheFloat4 = function (uniformName, x, y, z, w) {
         if (!this._valueCache[uniformName]) {
             this._valueCache[uniformName] = [x, y, z, w];
@@ -179,17 +191,6 @@
         this._valueCache[uniformName][2] = z;
         this._valueCache[uniformName][3] = w;
     };
-    
-    BABYLON.Effect.prototype._cacheVector3 = function (uniformName, vector) {
-        if (!this._valueCache[uniformName]) {
-            this._valueCache[uniformName] = [vector.x , vector.y, vector.z];
-            return;
-        }
-
-        this._valueCache[uniformName][0] = vector.x;
-        this._valueCache[uniformName][1] = vector.y;
-        this._valueCache[uniformName][2] = vector.z;
-    };
 
     BABYLON.Effect.prototype.setMatrices = function (uniformName, matrices) {
         this._engine.setMatrices(this.getUniform(uniformName), matrices);
@@ -202,7 +203,7 @@
         //this._cacheMatrix(uniformName, matrix);
         this._engine.setMatrix(this.getUniform(uniformName), matrix);
     };
-    
+
     BABYLON.Effect.prototype.setFloat = function (uniformName, value) {
         if (this._valueCache[uniformName] && this._valueCache[uniformName] === value)
             return;
@@ -220,14 +221,13 @@
 
         this._engine.setBool(this.getUniform(uniformName), bool);
     };
-
-    BABYLON.Effect.prototype.setVector3 = function (uniformName, vector3) {
-        if (this._valueCache[uniformName] && this._valueCache[uniformName][0] == vector3.x && this._valueCache[uniformName][1] == vector3.y && this._valueCache[uniformName][2] == vector3.z)
+    
+    BABYLON.Effect.prototype.setVector2 = function (uniformName, vector2) {
+        if (this._valueCache[uniformName] && this._valueCache[uniformName][0] == vector2.x && this._valueCache[uniformName][1] == vector2.y)
             return;
 
-        this._cacheVector3(uniformName, vector3);
-
-        this._engine.setVector3(this.getUniform(uniformName), vector3);
+        this._cacheFloat2(uniformName, vector2.x, vector2.y);
+        this._engine.setFloat2(this.getUniform(uniformName), vector2.x, vector2.y);
     };
 
     BABYLON.Effect.prototype.setFloat2 = function (uniformName, x, y) {
@@ -237,6 +237,15 @@
         this._cacheFloat2(uniformName, x, y);
         this._engine.setFloat2(this.getUniform(uniformName), x, y);
     };
+    
+    BABYLON.Effect.prototype.setVector3 = function (uniformName, vector3) {
+        if (this._valueCache[uniformName] && this._valueCache[uniformName][0] == vector3.x && this._valueCache[uniformName][1] == vector3.y && this._valueCache[uniformName][2] == vector3.z)
+            return;
+
+        this._cacheFloat3(uniformName, vector3.x, vector3.y, vector3.z);
+
+        this._engine.setFloat3(this.getUniform(uniformName), vector3.x, vector3.y, vector3.z);
+    };
 
     BABYLON.Effect.prototype.setFloat3 = function (uniformName, x, y, z) {
         if (this._valueCache[uniformName] && this._valueCache[uniformName][0] == x && this._valueCache[uniformName][1] == y && this._valueCache[uniformName][2] == z)

Babylon/PostProcess/babylon.blackAndWhitePostProcess.js

@@ -0,0 +1,10 @@
+var BABYLON = BABYLON || {};
+
+(function () {
+    BABYLON.BlackAndWhitePostProcess = function (name, ratio, camera) {
+        BABYLON.PostProcess.call(this, name, "blackAndWhite", null, null, ratio, camera);
+    };
+    
+    BABYLON.BlackAndWhitePostProcess.prototype = Object.create(BABYLON.PostProcess.prototype);
+
+})();

Babylon/PostProcess/babylon.blurPostProcess.js

@@ -0,0 +1,19 @@
+var BABYLON = BABYLON || {};
+
+(function () {
+    BABYLON.BlurPostProcess = function (name, direction, blurWidth, ratio, camera) {
+        BABYLON.PostProcess.call(this, name, "blur", ["screenSize", "direction", "blurWidth"], null, ratio, camera);
+
+        this.direction = direction;
+        this.blurWidth = blurWidth;
+        var that = this;
+        this.onApply = function (effect) {
+            effect.setFloat2("screenSize", that.width, that.height);
+            effect.setVector2("direction", that.direction);
+            effect.setFloat("blurWidth", that.blurWidth);
+        };
+    };
+    
+    BABYLON.BlurPostProcess.prototype = Object.create(BABYLON.PostProcess.prototype);
+
+})();

Babylon/PostProcess/babylon.passPostProcess.js

@@ -0,0 +1,10 @@
+var BABYLON = BABYLON || {};
+
+(function () {
+    BABYLON.PassPostProcess = function (name, ratio, camera) {
+        BABYLON.PostProcess.call(this, name, "pass", null, null, ratio, camera);
+    };
+    
+    BABYLON.PassPostProcess.prototype = Object.create(BABYLON.PostProcess.prototype);
+
+})();

Babylon/PostProcess/babylon.postProcess.js

@@ -1,12 +1,12 @@
 var BABYLON = BABYLON || {};
 
 (function () {
-    BABYLON.PostProcess = function (name, fragmentUrl, parameters, samplers, ratio, scene) {
+    BABYLON.PostProcess = function (name, fragmentUrl, parameters, samplers, ratio, camera) {
         this.name = name;
-        this._scene = scene;
-        this._manager = scene.postProcessManager;
-        this._manager.postProcesses.push(this);
-        this._engine = scene.getEngine();
+        this._camera = camera;
+        this._scene = camera.getScene();
+        camera.postProcesses.push(this);
+        this._engine = this._scene.getEngine();
 
         this.width = this._engine._renderingCanvas.width * ratio;
         this.height = this._engine._renderingCanvas.height * ratio;
@@ -24,6 +24,7 @@
     
     // Methods
     BABYLON.PostProcess.prototype.onApply = null;
+    BABYLON.PostProcess.prototype._onDispose = null;
 
     BABYLON.PostProcess.prototype.activate = function() {
         this._engine.bindFramebuffer(this._texture);
@@ -50,11 +51,15 @@
         return this._effect;
     };
 
-    BABYLON.PostProcess.prototype.dispose = function() {
+    BABYLON.PostProcess.prototype.dispose = function () {
+        if (this._onDispose) {
+            this._onDispose();
+        }
+
         this._engine._releaseTexture(this._texture);
         
-        var index = this._manager.postProcesses.indexOf(this);
-        this._manager.postProcesses.splice(index, 1);        
+        var index = this._camera.postProcesses.indexOf(this);
+        this._camera.postProcesses.splice(index, 1);
     };
 
 })();

Babylon/PostProcess/babylon.postProcessManager.js

@@ -2,7 +2,6 @@
 
 (function () {
     BABYLON.PostProcessManager = function (scene) {
-        this.postProcesses = [];
         this._scene = scene;
         
         // VBO
@@ -30,28 +29,32 @@
 
     // Methods
     BABYLON.PostProcessManager.prototype._prepareFrame = function () {
-        if (this.postProcesses.length === 0 || !this._scene.postProcessesEnabled) {
+        var postProcesses = this._scene.activeCamera.postProcesses;
+        
+        if (postProcesses.length === 0 || !this._scene.postProcessesEnabled) {
             return;
         }
 
-        this.postProcesses[0].activate();
+        postProcesses[0].activate();
     };
     
     BABYLON.PostProcessManager.prototype._finalizeFrame = function () {
-        if (this.postProcesses.length === 0 || !this._scene.postProcessesEnabled) {
+        var postProcesses = this._scene.activeCamera.postProcesses;
+        
+        if (postProcesses.length === 0 || !this._scene.postProcessesEnabled) {
             return;
         }
 
         var engine = this._scene.getEngine();
         
-        for (var index = 0; index < this.postProcesses.length; index++) {            
-            if (index < this.postProcesses.length - 1) {
-                this.postProcesses[index + 1].activate();
+        for (var index = 0; index < postProcesses.length; index++) {            
+            if (index < postProcesses.length - 1) {
+                postProcesses[index + 1].activate();
             } else {
                 engine.restoreDefaultFramebuffer();
             }
 
-            var effect = this.postProcesses[index].apply();
+            var effect = postProcesses[index].apply();
 
             if (effect) {
                 // VBOs
@@ -73,9 +76,5 @@
             this._scene.getEngine()._releaseBuffer(this._indexBuffer);
             this._indexBuffer = null;
         }
-
-        while (this.postProcesses.length) {
-            this.postProcesses[0].dispose();
-        }
     };
 })();

Babylon/PostProcess/babylon.refractionPostProcess.js

@@ -0,0 +1,29 @@
+var BABYLON = BABYLON || {};
+
+(function () {
+    BABYLON.RefractionPostProcess = function (name, refractionTextureUrl, color, depth, colorLevel, ratio, camera) {
+        BABYLON.PostProcess.call(this, name, "refraction", ["baseColor", "depth", "colorLevel"], ["refractionSampler"], ratio, camera);
+
+        this.color = color;
+        this.depth = depth;
+        this.colorLevel = colorLevel;
+        this._refRexture = new BABYLON.Texture(refractionTextureUrl, camera.getScene());
+        
+        var that = this;
+        this.onApply = function (effect) {
+            effect.setColor3("baseColor", that.color);
+            effect.setFloat("depth", that.depth);
+            effect.setFloat("colorLevel", that.colorLevel);
+
+            effect.setTexture("refractionSampler", that._refRexture);
+        };
+    };
+    
+    BABYLON.RefractionPostProcess.prototype = Object.create(BABYLON.PostProcess.prototype);
+    
+    // Methods
+    BABYLON.RefractionPostProcess.prototype._onDispose = function () {
+        this._refRexture.dispose();
+    };
+
+})();

Babylon/Shaders/blackAndWhite.fragment.fx

@@ -0,0 +1,13 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// Samplers
+varying vec2 vUV;
+uniform sampler2D textureSampler;
+
+void main(void) 
+{
+	float luminance = dot(texture2D(textureSampler, vUV).rgb, vec3(0.3, 0.59, 0.11));
+	gl_FragColor = vec4(luminance, luminance, luminance, 1.0);
+}

Babylon/Shaders/blur.fragment.fx

@@ -0,0 +1,39 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// Samplers
+varying vec2 vUV;
+uniform sampler2D textureSampler;
+
+// Parameters
+uniform vec2 screenSize;
+uniform vec2 direction;
+uniform float blurWidth;
+
+void main(void)
+{
+	float weights[7];
+	weights[0] = 0.05;
+	weights[1] = 0.1;
+	weights[2] = 0.2;
+	weights[3] = 0.3;
+	weights[4] = 0.2;
+	weights[5] = 0.1;
+	weights[6] = 0.05;
+
+	vec2 texelSize = vec2(1.0 / screenSize.x, 1.0 / screenSize.y);
+	vec2 texelStep = texelSize * direction * blurWidth;
+	vec2 start = vUV - 3.0 * texelStep;
+
+	vec4 baseColor = vec4(0., 0., 0., 0.);
+	vec2 texelOffset = vec2(0., 0.);
+
+	for (int i = 0; i < 7; i++)
+	{
+		baseColor += texture2D(textureSampler, start + texelOffset) * weights[i];
+		texelOffset += texelStep;
+	}
+
+	gl_FragColor = baseColor;
+}

Babylon/Shaders/pass.fragment.fx

@@ -0,0 +1,12 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// Samplers
+varying vec2 vUV;
+uniform sampler2D textureSampler;
+
+void main(void) 
+{
+	gl_FragColor = texture2D(textureSampler, vUV);
+}

Babylon/Shaders/refraction.fragment.fx

@@ -0,0 +1,23 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// Samplers
+varying vec2 vUV;
+uniform sampler2D textureSampler;
+uniform sampler2D refractionSampler;
+
+// Parameters
+uniform vec3 baseColor;
+uniform float depth;
+uniform float colorLevel;
+
+void main() {
+	float ref = 1.0 - texture2D(refractionSampler, vUV).r;
+
+	vec2 uv = vUV - vec2(0.5);
+	vec2 offset = uv * depth * ref;
+	vec3 sourceColor = texture2D(textureSampler, vUV - offset).rgb;
+
+	gl_FragColor = vec4(sourceColor + sourceColor * ref * colorLevel, 1.0);
+}

Babylon/babylon.engine.js

@@ -448,19 +448,12 @@
 
         this._gl.uniformMatrix4fv(uniform, false, matrix.toArray());
     };
-
-    BABYLON.Engine.prototype.setVector2 = function (uniform, x, y) {
-        if (!uniform)
-            return;
-
-        this._gl.uniform2f(uniform, x, y);
-    };
-
-    BABYLON.Engine.prototype.setVector3 = function (uniform, vector3) {
+    
+    BABYLON.Engine.prototype.setFloat = function (uniform, value) {
         if (!uniform)
             return;
 
-        this._gl.uniform3f(uniform, vector3.x, vector3.y, vector3.z);
+        this._gl.uniform1f(uniform, value);
     };
 
     BABYLON.Engine.prototype.setFloat2 = function (uniform, x, y) {
@@ -477,13 +470,6 @@
         this._gl.uniform3f(uniform, x, y, z);
     };
     
-    BABYLON.Engine.prototype.setFloat = function (uniform, value) {
-        if (!uniform)
-            return;
-
-        this._gl.uniform1f(uniform, value);
-    };
-
     BABYLON.Engine.prototype.setBool = function (uniform, bool) {
         if (!uniform)
             return;

Babylon/babylon.scene.js

@@ -701,6 +701,11 @@
         while (this.meshes.length) {
             this.meshes[0].dispose(true);
         }
+        
+        // Release cameras
+        while (this.cameras.length) {
+            this.cameras[0].dispose();
+        }
 
         // Release materials
         while (this.materials.length) {