MOre procedural textures work

new mesh.renderOverlay
No more gl.flush

Babylon/Audio/babylon.sound.js

@@ -3,28 +3,60 @@
     var Sound = (function () {
         function Sound(url, engine, readyToPlayCallback, distanceMax, autoplay, loop) {
             var _this = this;
-            this.distanceMax = 10;
+            this.maxDistance = 10;
             this.autoplay = false;
             this.loop = false;
             this._position = BABYLON.Vector3.Zero();
-            this._orientation = BABYLON.Vector3.Zero();
+            this._direction = BABYLON.Vector3.Zero();
             this._isLoaded = false;
             this._isReadyToPlay = false;
+            this._isPlaying = false;
+            this._isDirectional = false;
+            // Used if you'd like to create a directional sound.
+            // If not set, the sound will be omnidirectional
+            this._coneInnerAngle = null;
+            this._coneOuterAngle = null;
+            this._coneOuterGain = null;
             this._audioEngine = engine.getAudioEngine();
             ;
             this._readyToPlayCallback = readyToPlayCallback;
-            if (distanceMax)
-                this.distanceMax = distanceMax;
-            if (autoplay)
+            if (distanceMax) {
+                this.maxDistance = distanceMax;
+            }
+            if (autoplay) {
                 this.autoplay = autoplay;
-            if (loop)
+            }
+            if (loop) {
                 this.loop = loop;
+            }
             if (this._audioEngine.canUseWebAudio) {
                 BABYLON.Tools.LoadFile(url, function (data) {
                     _this._soundLoaded(data);
                 }, null, null, true);
             }
         }
+        /**
+        * Transform this sound into a directional source
+        * @param coneInnerAngle Size of the inner cone in degree
+        * @param coneOuterAngle Size of the outer cone in degree
+        * @param coneOuterGain Volume of the sound outside the outer cone (between 0.0 and 1.0)
+        */
+        Sound.prototype.setDirectionalCone = function (coneInnerAngle, coneOuterAngle, coneOuterGain) {
+            if (coneOuterAngle < coneInnerAngle) {
+                BABYLON.Tools.Error("setDirectionalCone(): outer angle of the cone must be superior or equal to the inner angle.");
+                return;
+            }
+            this._coneInnerAngle = coneInnerAngle;
+            this._coneOuterAngle = coneOuterAngle;
+            this._coneOuterGain = coneOuterGain;
+            this._isDirectional = true;
+
+            if (this._isPlaying && this.loop) {
+                this.stop();
+                this.play();
+            }
+        };
+
         Sound.prototype.setPosition = function (newPosition) {
             this._position = newPosition;
 
@@ -33,11 +65,12 @@
             }
         };
 
-        Sound.prototype.setOrientiation = function (newOrientation) {
-            this._orientation = newOrientation;
+        Sound.prototype.setDirection = function (newDirection) {
+            this._direction = newDirection;
 
             if (this._isReadyToPlay) {
-                this._soundPanner.setOrientation(this._orientation.x, this._orientation.y, this._orientation.z);
+                console.log(this._direction.x + " " + this._direction.y + " " + this._direction.z);
+                this._soundPanner.setOrientation(this._direction.x, this._direction.y, this._direction.z);
             }
         };
 
@@ -47,14 +80,24 @@
                 this._soundSource.buffer = this._audioBuffer;
                 this._soundPanner = this._audioEngine.audioContext.createPanner();
                 this._soundPanner.setPosition(this._position.x, this._position.y, this._position.z);
+
+                //this._soundPanner.maxDistance = this.maxDistance;
+                if (this._isDirectional) {
+                    this._soundPanner.coneInnerAngle = this._coneInnerAngle;
+                    this._soundPanner.coneOuterAngle = this._coneOuterAngle;
+                    this._soundPanner.coneOuterGain = this._coneOuterGain;
+                }
                 this._soundPanner.connect(this._audioEngine.masterGain);
                 this._soundSource.connect(this._soundPanner);
                 this._soundSource.loop = this.loop;
                 this._soundSource.start(0);
+                this._isPlaying = true;
             }
         };
 
         Sound.prototype.stop = function () {
+            this._soundSource.stop(0);
+            this._isPlaying = false;
         };
 
         Sound.prototype.pause = function () {
@@ -69,6 +112,10 @@
 
         Sound.prototype._onRegisterAfterWorldMatrixUpdate = function (connectedMesh) {
             this.setPosition(connectedMesh.position);
+            var mat = connectedMesh.getWorldMatrix();
+            var direction = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, -1), mat);
+            direction.normalize();
+            this.setDirection(direction);
         };
 
         Sound.prototype._soundLoaded = function (audioData) {

Babylon/Audio/babylon.sound.ts

@@ -1,31 +1,60 @@
 module BABYLON {
     export class Sound {
         private _audioBuffer;
-        public distanceMax: number = 10;
+        public maxDistance: number = 10;
         public autoplay: boolean = false;
         public loop: boolean = false;
         private _position: Vector3 = Vector3.Zero();
-        private _orientation: Vector3 = Vector3.Zero();
+        private _direction: Vector3 = Vector3.Zero();
         private _volume: number;
         private _currentVolume: number;
         private _isLoaded: boolean = false;
         private _isReadyToPlay: boolean = false;
+        private _isPlaying: boolean = false;
+        private _isDirectional: boolean = false;
         private _audioEngine: BABYLON.AudioEngine;
         private _readyToPlayCallback;
         private _soundSource: AudioBufferSourceNode;
         private _soundPanner: PannerNode;
+        // Used if you'd like to create a directional sound.
+        // If not set, the sound will be omnidirectional
+        private _coneInnerAngle: number = null;
+        private _coneOuterAngle: number = null;
+        private _coneOuterGain: number = null;
 
         constructor(url: string, engine: BABYLON.Engine, readyToPlayCallback, distanceMax?: number, autoplay?: boolean, loop?: boolean) {
             this._audioEngine = engine.getAudioEngine();;
             this._readyToPlayCallback = readyToPlayCallback;
-            if (distanceMax) this.distanceMax = distanceMax;
-            if (autoplay) this.autoplay = autoplay;
-            if (loop) this.loop = loop;
+            if (distanceMax) { this.maxDistance = distanceMax; }
+            if (autoplay) { this.autoplay = autoplay; }
+            if (loop) { this.loop = loop; }
             if (this._audioEngine.canUseWebAudio) {
                 BABYLON.Tools.LoadFile(url, (data) => { this._soundLoaded(data); }, null, null, true);
             }
         }
 
+        /**
+        * Transform this sound into a directional source
+        * @param coneInnerAngle Size of the inner cone in degree
+        * @param coneOuterAngle Size of the outer cone in degree
+        * @param coneOuterGain Volume of the sound outside the outer cone (between 0.0 and 1.0)
+        */
+        public setDirectionalCone(coneInnerAngle: number, coneOuterAngle: number, coneOuterGain: number) {
+            if (coneOuterAngle < coneInnerAngle) {
+                BABYLON.Tools.Error("setDirectionalCone(): outer angle of the cone must be superior or equal to the inner angle.");
+                return;
+            }
+            this._coneInnerAngle = coneInnerAngle;
+            this._coneOuterAngle = coneOuterAngle;
+            this._coneOuterGain = coneOuterGain;
+            this._isDirectional = true;
+
+            if (this._isPlaying && this.loop) {
+                this.stop();
+                this.play();
+            }
+        }
+
         public setPosition(newPosition: Vector3) {
             this._position = newPosition;
 
@@ -34,11 +63,12 @@
             }
         }
 
-        public setOrientiation(newOrientation: Vector3) {
-            this._orientation = newOrientation;
+        public setDirection(newDirection: Vector3) {
+            this._direction = newDirection;
 
             if (this._isReadyToPlay) {
-                this._soundPanner.setOrientation(this._orientation.x, this._orientation.y, this._orientation.z);
+                console.log(this._direction.x + " " + this._direction.y + " " + this._direction.z);
+                this._soundPanner.setOrientation(this._direction.x, this._direction.y, this._direction.z);
             }
         }
 
@@ -48,14 +78,23 @@
                 this._soundSource.buffer = this._audioBuffer;
                 this._soundPanner = this._audioEngine.audioContext.createPanner();
                 this._soundPanner.setPosition(this._position.x, this._position.y, this._position.z);
+                //this._soundPanner.maxDistance = this.maxDistance;
+                if (this._isDirectional) {
+                    this._soundPanner.coneInnerAngle = this._coneInnerAngle;
+                    this._soundPanner.coneOuterAngle = this._coneOuterAngle;
+                    this._soundPanner.coneOuterGain = this._coneOuterGain;
+                }
                 this._soundPanner.connect(this._audioEngine.masterGain);
                 this._soundSource.connect(this._soundPanner);
                 this._soundSource.loop = this.loop;
                 this._soundSource.start(0);
+                this._isPlaying = true;
             }
         }
 
         public stop() {
+            this._soundSource.stop(0);
+            this._isPlaying = false;
         }
 
         public pause() {
@@ -67,6 +106,10 @@
 
         private _onRegisterAfterWorldMatrixUpdate(connectedMesh: BABYLON.AbstractMesh) {
             this.setPosition(connectedMesh.position);
+            var mat = connectedMesh.getWorldMatrix();
+            var direction = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, -1), mat);
+            direction.normalize();
+            this.setDirection(direction);
         }
 
         private _soundLoaded(audioData: ArrayBuffer) {

Babylon/Materials/babylon.standardMaterial.js

@@ -474,7 +474,7 @@ var BABYLON;
             if (this.bumpTexture && scene.getEngine().getCaps().standardDerivatives && BABYLON.StandardMaterial.BumpTextureEnabled) {
                 this._effect.setTexture("bumpSampler", this.bumpTexture);
 
-                this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, this.bumpTexture.level);
+                this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, 1.0 / this.bumpTexture.level);
                 this._effect.setMatrix("bumpMatrix", this.bumpTexture.getTextureMatrix());
             }
 

Babylon/Materials/babylon.standardMaterial.ts

@@ -486,7 +486,7 @@
             if (this.bumpTexture && scene.getEngine().getCaps().standardDerivatives && BABYLON.StandardMaterial.BumpTextureEnabled) {
                 this._effect.setTexture("bumpSampler", this.bumpTexture);
 
-                this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, this.bumpTexture.level);
+                this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, 1.0 / this.bumpTexture.level);
                 this._effect.setMatrix("bumpMatrix", this.bumpTexture.getTextureMatrix());
             }
 

Babylon/Materials/textures/Procedurals/babylon.standardProceduralTexture.js

@@ -58,6 +58,7 @@ var BABYLON;
             this._shift = 1.6;
             this._alpha = 0.0;
             this._autoGenerateTime = true;
+            this._alphaThreshold = 0.5;
             this._fireColors = FireProceduralTexture.RedFireColors;
             this.updateShaderUniforms();
             this.refreshRate = 1;
@@ -73,6 +74,7 @@ var BABYLON;
             this.setColor3("c4", this._fireColors[3]);
             this.setColor3("c5", this._fireColors[4]);
             this.setColor3("c6", this._fireColors[5]);
+            this.setFloat("alphaThreshold", this._alphaThreshold);
         };
 
         FireProceduralTexture.prototype.render = function (useCameraPostProcess) {
@@ -261,25 +263,32 @@ var BABYLON;
             this._herb1 = new BABYLON.Color3(0.29, 0.38, 0.02);
             this._herb2 = new BABYLON.Color3(0.36, 0.49, 0.09);
             this._herb3 = new BABYLON.Color3(0.51, 0.6, 0.28);
-            this._dirt = new BABYLON.Color3(0.6, 0.46, 0.13);
-            this._ground = new BABYLON.Color3(1, 1, 1);
+            this._dirtColor = new BABYLON.Color3(0.6, 0.46, 0.13);
+            this._groundColor = new BABYLON.Color3(1, 1, 1);
+
+            this._grassColors = [
+                new BABYLON.Color3(0.29, 0.38, 0.02),
+                new BABYLON.Color3(0.36, 0.49, 0.09),
+                new BABYLON.Color3(0.51, 0.6, 0.28)
+            ];
+
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }
         GrassProceduralTexture.prototype.updateShaderUniforms = function () {
-            this.setColor3("herb1", this._herb1);
-            this.setColor3("herb2", this._herb2);
-            this.setColor3("herb3", this._herb2);
-            this.setColor3("dirt", this._dirt);
-            this.setColor3("ground", this._ground);
+            this.setColor3("herb1", this._grassColors[0]);
+            this.setColor3("herb2", this._grassColors[1]);
+            this.setColor3("herb3", this._grassColors[2]);
+            this.setColor3("dirt", this._dirtColor);
+            this.setColor3("ground", this._groundColor);
         };
 
-        Object.defineProperty(GrassProceduralTexture.prototype, "herb1", {
+        Object.defineProperty(GrassProceduralTexture.prototype, "grassColors", {
             get: function () {
-                return this._herb1;
+                return this._grassColors;
             },
             set: function (value) {
-                this._herb1 = value;
+                this._grassColors = value;
                 this.updateShaderUniforms();
             },
             enumerable: true,
@@ -287,12 +296,12 @@ var BABYLON;
         });
 
 
-        Object.defineProperty(GrassProceduralTexture.prototype, "herb2", {
+        Object.defineProperty(GrassProceduralTexture.prototype, "dirtColor", {
             get: function () {
-                return this._herb2;
+                return this._dirtColor;
             },
             set: function (value) {
-                this._herb2 = value;
+                this._dirtColor = value;
                 this.updateShaderUniforms();
             },
             enumerable: true,
@@ -300,44 +309,22 @@ var BABYLON;
         });
 
 
-        Object.defineProperty(GrassProceduralTexture.prototype, "herb3", {
+        Object.defineProperty(GrassProceduralTexture.prototype, "groundColor", {
             get: function () {
-                return this._herb3;
-            },
-            set: function (value) {
-                this._herb3 = value;
-                this.updateShaderUniforms();
+                return this._groundColor;
             },
             enumerable: true,
             configurable: true
         });
 
-
-        Object.defineProperty(GrassProceduralTexture.prototype, "dirt", {
-            get: function () {
-                return this._dirt;
-            },
-            set: function (value) {
-                this._dirt = value;
-                this.updateShaderUniforms();
-            },
-            enumerable: true,
-            configurable: true
-        });
-
-
         Object.defineProperty(GrassProceduralTexture.prototype, "ground", {
-            get: function () {
-                return this._ground;
-            },
             set: function (value) {
-                this._ground = value;
+                this.groundColor = value;
                 this.updateShaderUniforms();
             },
             enumerable: true,
             configurable: true
         });
-
         return GrassProceduralTexture;
     })(BABYLON.ProceduralTexture);
     BABYLON.GrassProceduralTexture = GrassProceduralTexture;
@@ -346,20 +333,20 @@ var BABYLON;
         __extends(RoadProceduralTexture, _super);
         function RoadProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
             _super.call(this, name, size, "road", scene, fallbackTexture, generateMipMaps);
-            this._macadamColor = new BABYLON.Color3(0.53, 0.53, 0.53);
+            this._roadColor = new BABYLON.Color3(0.53, 0.53, 0.53);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }
         RoadProceduralTexture.prototype.updateShaderUniforms = function () {
-            this.setColor3("macadamColor", this._macadamColor);
+            this.setColor3("roadColor", this._roadColor);
         };
 
-        Object.defineProperty(RoadProceduralTexture.prototype, "macadamColor", {
+        Object.defineProperty(RoadProceduralTexture.prototype, "roadColor", {
             get: function () {
-                return this._macadamColor;
+                return this._roadColor;
             },
             set: function (value) {
-                this._macadamColor = value;
+                this._roadColor = value;
                 this.updateShaderUniforms();
             },
             enumerable: true,

Babylon/Materials/textures/Procedurals/babylon.standardProceduralTexture.ts

@@ -40,6 +40,7 @@
         private _alpha: number = 0.0;
         private _autoGenerateTime: boolean = true;
         private _fireColors: BABYLON.Color3[];
+        private _alphaThreshold: number = 0.5;
 
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
             super(name, size, "fire", scene, fallbackTexture, generateMipMaps);
@@ -59,6 +60,7 @@
             this.setColor3("c4", this._fireColors[3]);
             this.setColor3("c5", this._fireColors[4]);
             this.setColor3("c6", this._fireColors[5]);
+            this.setFloat("alphaThreshold", this._alphaThreshold);
         }
 
         public render(useCameraPostProcess?: boolean) {
@@ -194,74 +196,64 @@
     }
 
     export class GrassProceduralTexture extends ProceduralTexture {
+        private _grassColors: BABYLON.Color3[];
         private _herb1: BABYLON.Color3 = new BABYLON.Color3(0.29, 0.38, 0.02);
         private _herb2: BABYLON.Color3 = new BABYLON.Color3(0.36, 0.49, 0.09);
         private _herb3: BABYLON.Color3 = new BABYLON.Color3(0.51, 0.6, 0.28);
-        private _dirt: BABYLON.Color3 = new BABYLON.Color3(0.6, 0.46, 0.13);
-        private _ground: BABYLON.Color3 = new BABYLON.Color3(1, 1, 1);
+        private _dirtColor: BABYLON.Color3 = new BABYLON.Color3(0.6, 0.46, 0.13);
+        private _groundColor: BABYLON.Color3 = new BABYLON.Color3(1, 1, 1);
 
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
             super(name, size, "grass", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
 
-        public updateShaderUniforms() {
-            this.setColor3("herb1", this._herb1);
-            this.setColor3("herb2", this._herb2);
-            this.setColor3("herb3", this._herb2);
-            this.setColor3("dirt", this._dirt);
-            this.setColor3("ground", this._ground);
-        }
-
-        public get herb1(): BABYLON.Color3 {
-            return this._herb1;
-        }
+            this._grassColors = [
+                new BABYLON.Color3(0.29, 0.38, 0.02),
+                new BABYLON.Color3(0.36, 0.49, 0.09),
+                new BABYLON.Color3(0.51, 0.6, 0.28),
+            ];
 
-        public set herb1(value: BABYLON.Color3) {
-            this._herb1 = value;
             this.updateShaderUniforms();
+            this.refreshRate = 0;
         }
 
-        public get herb2(): BABYLON.Color3 {
-            return this._herb2;
-        }
-
-        public set herb2(value: BABYLON.Color3) {
-            this._herb2 = value;
-            this.updateShaderUniforms();
+        public updateShaderUniforms() {
+            this.setColor3("herb1", this._grassColors[0]);
+            this.setColor3("herb2", this._grassColors[1]);
+            this.setColor3("herb3", this._grassColors[2]);
+            this.setColor3("dirt", this._dirtColor);
+            this.setColor3("ground", this._groundColor);
         }
 
-        public get herb3(): BABYLON.Color3 {
-            return this._herb3;
+        public get grassColors(): BABYLON.Color3[] {
+            return this._grassColors;
         }
 
-        public set herb3(value: BABYLON.Color3) {
-            this._herb3 = value;
+        public set grassColors(value: BABYLON.Color3[]) {
+            this._grassColors = value;
             this.updateShaderUniforms();
         }
 
-        public get dirt(): BABYLON.Color3 {
-            return this._dirt;
+        public get dirtColor(): BABYLON.Color3 {
+            return this._dirtColor;
         }
 
-        public set dirt(value: BABYLON.Color3) {
-            this._dirt = value;
+        public set dirtColor(value: BABYLON.Color3) {
+            this._dirtColor = value;
             this.updateShaderUniforms();
         }
 
-        public get ground(): BABYLON.Color3 {
-            return this._ground;
+        public get groundColor(): BABYLON.Color3 {
+            return this._groundColor;
         }
 
         public set ground(value: BABYLON.Color3) {
-            this._ground = value;
+            this.groundColor = value;
             this.updateShaderUniforms();
         }
     }
 
     export class RoadProceduralTexture extends ProceduralTexture {
-        private _macadamColor: BABYLON.Color3 = new BABYLON.Color3(0.53, 0.53, 0.53);
+        private _roadColor: BABYLON.Color3 = new BABYLON.Color3(0.53, 0.53, 0.53);
 
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
             super(name, size, "road", scene, fallbackTexture, generateMipMaps);
@@ -270,15 +262,15 @@
         }
 
         public updateShaderUniforms() {
-            this.setColor3("macadamColor", this._macadamColor);
+            this.setColor3("roadColor", this._roadColor);
         }
 
-        public get macadamColor(): BABYLON.Color3 {
-            return this._macadamColor;
+        public get roadColor(): BABYLON.Color3 {
+            return this._roadColor;
         }
 
-        public set macadamColor(value: BABYLON.Color3) {
-            this._macadamColor = value;
+        public set roadColor(value: BABYLON.Color3) {
+            this._roadColor = value;
             this.updateShaderUniforms();
         }
     }

Babylon/Mesh/babylon.abstractMesh.js

@@ -29,6 +29,9 @@ var BABYLON;
             this.renderOutline = false;
             this.outlineColor = BABYLON.Color3.Red();
             this.outlineWidth = 0.02;
+            this.renderOverlay = false;
+            this.overlayColor = BABYLON.Color3.Red();
+            this.overlayAlpha = 0.5;
             this.hasVertexAlpha = false;
             this.useVertexColors = true;
             this.useOctreeForRenderingSelection = true;

Babylon/Mesh/babylon.abstractMesh.ts

@@ -50,6 +50,9 @@
         public renderOutline = false;
         public outlineColor = BABYLON.Color3.Red();
         public outlineWidth = 0.02;
+        public renderOverlay = false;
+        public overlayColor = BABYLON.Color3.Red();
+        public overlayAlpha = 0.5;
         public hasVertexAlpha = false;
         public useVertexColors = true;
 

Babylon/Mesh/babylon.mesh.js

@@ -527,6 +527,7 @@ var BABYLON;
             if (this.renderOutline) {
                 engine.setDepthWrite(false);
                 scene.getOutlineRenderer().render(subMesh, batch);
+                engine.setDepthWrite(savedDepthWrite);
             }
 
             effectiveMaterial._preBind();
@@ -573,6 +574,14 @@ var BABYLON;
                 engine.setColorWrite(true);
             }
 
+            // Overlay
+            if (this.renderOverlay) {
+                var currentMode = engine.getAlphaMode();
+                engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE);
+                scene.getOutlineRenderer().render(subMesh, batch, true);
+                engine.setAlphaMode(currentMode);
+            }
+
             for (callbackIndex = 0; callbackIndex < this._onAfterRenderCallbacks.length; callbackIndex++) {
                 this._onAfterRenderCallbacks[callbackIndex]();
             }

Babylon/Mesh/babylon.mesh.ts

@@ -526,6 +526,7 @@
             if (this.renderOutline) {
                 engine.setDepthWrite(false);
                 scene.getOutlineRenderer().render(subMesh, batch);
+                engine.setDepthWrite(savedDepthWrite);
             }
 
             effectiveMaterial._preBind();
@@ -571,6 +572,14 @@
                 engine.setColorWrite(true);
             }
 
+            // Overlay
+            if (this.renderOverlay) {
+                var currentMode = engine.getAlphaMode();
+                engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE);
+                scene.getOutlineRenderer().render(subMesh, batch, true);
+                engine.setAlphaMode(currentMode);
+            }
+
             for (callbackIndex = 0; callbackIndex < this._onAfterRenderCallbacks.length; callbackIndex++) {
                 this._onAfterRenderCallbacks[callbackIndex]();
             }

Babylon/Rendering/babylon.outlineRenderer.js

@@ -4,11 +4,12 @@
         function OutlineRenderer(scene) {
             this._scene = scene;
         }
-        OutlineRenderer.prototype.render = function (subMesh, batch) {
+        OutlineRenderer.prototype.render = function (subMesh, batch, useOverlay) {
+            if (typeof useOverlay === "undefined") { useOverlay = false; }
             var scene = this._scene;
             var engine = this._scene.getEngine();
 
-            var hardwareInstancedRendering = (engine.getCaps().instancedArrays !== null) && (batch.visibleInstances !== null);
+            var hardwareInstancedRendering = (engine.getCaps().instancedArrays !== null) && (batch.visibleInstances[subMesh._id] !== null) && (batch.visibleInstances[subMesh._id] !== undefined);
 
             if (!this.isReady(subMesh, hardwareInstancedRendering)) {
                 return;
@@ -18,8 +19,8 @@
             var material = subMesh.getMaterial();
 
             engine.enableEffect(this._effect);
-            this._effect.setFloat("offset", mesh.outlineWidth);
-            this._effect.setColor3("color", mesh.outlineColor);
+            this._effect.setFloat("offset", useOverlay ? 0 : mesh.outlineWidth);
+            this._effect.setColor4("color", useOverlay ? mesh.overlayColor : mesh.outlineColor, useOverlay ? mesh.overlayAlpha : 1.0);
             this._effect.setMatrix("viewProjection", scene.getTransformMatrix());
 
             // Bones

Babylon/Rendering/babylon.outlineRenderer.ts

@@ -8,11 +8,11 @@
             this._scene = scene;
         }
 
-        public render(subMesh: SubMesh, batch: _InstancesBatch) {
+        public render(subMesh: SubMesh, batch: _InstancesBatch, useOverlay: boolean = false) {
             var scene = this._scene;
             var engine = this._scene.getEngine();
 
-            var hardwareInstancedRendering = (engine.getCaps().instancedArrays !== null) && (batch.visibleInstances !== null);
+            var hardwareInstancedRendering = (engine.getCaps().instancedArrays !== null) && (batch.visibleInstances[subMesh._id] !== null) && (batch.visibleInstances[subMesh._id] !== undefined);
 
             if (!this.isReady(subMesh, hardwareInstancedRendering)) {
                 return;
@@ -22,8 +22,8 @@
             var material = subMesh.getMaterial();
 
             engine.enableEffect(this._effect);
-            this._effect.setFloat("offset", mesh.outlineWidth);
-            this._effect.setColor3("color", mesh.outlineColor);
+            this._effect.setFloat("offset", useOverlay ? 0 : mesh.outlineWidth);
+            this._effect.setColor4("color", useOverlay ? mesh.overlayColor : mesh.outlineColor, useOverlay ? mesh.overlayAlpha : 1.0);
             this._effect.setMatrix("viewProjection", scene.getTransformMatrix());
 
             // Bones
@@ -41,7 +41,6 @@
                 this._effect.setMatrix("diffuseMatrix", alphaTexture.getTextureMatrix());
             }
 
-
             if (hardwareInstancedRendering) {
                 mesh._renderWithInstances(subMesh, Material.TriangleFillMode, batch, this._effect, engine);
             } else {

Babylon/Shaders/default.fragment.fx

@@ -317,9 +317,9 @@ mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv)
 
 vec3 perturbNormal(vec3 viewDir)
 {
-	vec3 map = texture2D(bumpSampler, vBumpUV).xyz * vBumpInfos.y;
+	vec3 map = texture2D(bumpSampler, vBumpUV).xyz;
 	map = map * 255. / 127. - 128. / 127.;
-	mat3 TBN = cotangent_frame(vNormalW, -viewDir, vBumpUV);
+	mat3 TBN = cotangent_frame(vNormalW * vBumpInfos.y, -viewDir, vBumpUV);
 	return normalize(TBN * map);
 }
 #endif

Babylon/Shaders/fire.fragment.fx

@@ -11,7 +11,7 @@ uniform vec3 c5;
 uniform vec3 c6;
 uniform vec2 speed;
 uniform float shift;
-uniform float alpha;
+uniform float alphaThreshold;
 
 varying vec2 vUV;
 
@@ -40,5 +40,8 @@ void main() {
 	float q = fbm(p - iGlobalTime * 0.1);
 	vec2 r = vec2(fbm(p + q + iGlobalTime * speed.x - p.x - p.y), fbm(p + q - iGlobalTime * speed.y));
 	vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);
-	gl_FragColor = vec4(c * cos(shift * vUV.y), alpha);
+	vec3 color = c * cos(shift * vUV.y);
+	float luminance = dot(color.rgb, vec3(0.3, 0.59, 0.11));
+
+	gl_FragColor = vec4(color, luminance * alphaThreshold + (1.0 - alphaThreshold));
 }

Babylon/Shaders/outline.fragment.fx

@@ -1,6 +1,6 @@
 precision highp float;
 
-uniform vec3 color;
+uniform vec4 color;
 
 #ifdef ALPHATEST
 varying vec2 vUV;
@@ -13,5 +13,5 @@ void main(void) {
 		discard;
 #endif
 
-	gl_FragColor = vec4(color, 1.);
+	gl_FragColor = color;
 }

Babylon/Shaders/road.fragment.fx

@@ -3,7 +3,7 @@ precision highp float;
 #endif
 
 varying vec2 vUV;                    
-uniform vec3 macadamColor;
+uniform vec3 roadColor;
 
 float rand(vec2 n) {
 	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
@@ -27,6 +27,6 @@ float fbm(vec2 n) {
 
 void main(void) {
 	float ratioy = mod(gl_FragCoord.y * 100.0 , fbm(vUV * 2.0));
-	vec3 color = macadamColor * ratioy;
+	vec3 color = roadColor * ratioy;
 	gl_FragColor = vec4(color, 1.0);
 }

Babylon/Tools/babylon.tools.js

@@ -608,36 +608,64 @@
             configurable: true
         });
 
+        Tools._AddLogEntry = function (entry) {
+            Tools._LogCache = entry + Tools._LogCache;
+
+            if (Tools.OnNewCacheEntry) {
+                Tools.OnNewCacheEntry(entry);
+            }
+        };
+
         Tools._FormatMessage = function (message) {
             var padStr = function (i) {
                 return (i < 10) ? "0" + i : "" + i;
             };
 
             var date = new Date();
-            return "BJS - [" + padStr(date.getHours()) + ":" + padStr(date.getMinutes()) + ":" + padStr(date.getSeconds()) + "]: " + message;
+            return "[" + padStr(date.getHours()) + ":" + padStr(date.getMinutes()) + ":" + padStr(date.getSeconds()) + "]: " + message;
         };
 
         Tools._LogDisabled = function (message) {
             // nothing to do
         };
         Tools._LogEnabled = function (message) {
-            console.log(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.log("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:white'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
         };
 
         Tools._WarnDisabled = function (message) {
             // nothing to do
         };
         Tools._WarnEnabled = function (message) {
-            console.warn(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.warn("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:orange'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
         };
 
         Tools._ErrorDisabled = function (message) {
             // nothing to do
         };
         Tools._ErrorEnabled = function (message) {
-            console.error(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.error("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:red'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
         };
 
+        Object.defineProperty(Tools, "LogCache", {
+            get: function () {
+                return Tools._LogCache;
+            },
+            enumerable: true,
+            configurable: true
+        });
+
         Object.defineProperty(Tools, "LogLevels", {
             set: function (level) {
                 if ((level & Tools.MessageLogLevel) === Tools.MessageLogLevel) {
@@ -786,6 +814,7 @@
         Tools._MessageLogLevel = 1;
         Tools._WarningLogLevel = 2;
         Tools._ErrorLogLevel = 4;
+        Tools._LogCache = "";
 
         Tools.Log = Tools._LogEnabled;
 

Babylon/Tools/babylon.tools.ts

@@ -619,6 +619,9 @@
         private static _MessageLogLevel = 1;
         private static _WarningLogLevel = 2;
         private static _ErrorLogLevel = 4;
+        private static _LogCache = "";
+
+        public static OnNewCacheEntry: (entry: string) => void;
 
         static get NoneLogLevel(): number {
             return Tools._NoneLogLevel;
@@ -640,11 +643,19 @@
             return Tools._MessageLogLevel | Tools._WarningLogLevel | Tools._ErrorLogLevel;
         }
 
+        private static _AddLogEntry(entry: string) {
+            Tools._LogCache = entry + Tools._LogCache;
+
+            if (Tools.OnNewCacheEntry) {
+                Tools.OnNewCacheEntry(entry);
+            }
+        }
+
         private static _FormatMessage(message: string): string {
             var padStr = i => (i < 10) ? "0" + i : "" + i;
 
             var date = new Date();
-            return "BJS - [" + padStr(date.getHours()) + ":" + padStr(date.getMinutes()) + ":" + padStr(date.getSeconds()) + "]: " + message;
+            return "[" + padStr(date.getHours()) + ":" + padStr(date.getMinutes()) + ":" + padStr(date.getSeconds()) + "]: " + message;
         }
 
         public static Log: (message: string) => void = Tools._LogEnabled;
@@ -653,7 +664,11 @@
             // nothing to do
         }
         private static _LogEnabled(message: string): void {
-            console.log(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.log("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:white'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
         }
 
         public static Warn: (message: string) => void = Tools._WarnEnabled;
@@ -662,7 +677,11 @@
             // nothing to do
         }
         private static _WarnEnabled(message: string): void {
-            console.warn(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.warn("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:orange'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
         }
 
         public static Error: (message: string) => void = Tools._ErrorEnabled;
@@ -671,7 +690,15 @@
             // nothing to do
         }
         private static _ErrorEnabled(message: string): void {
-            console.error(Tools._FormatMessage(message));
+            var formattedMessage = Tools._FormatMessage(message);
+            console.error("BJS - " + formattedMessage);
+
+            var entry = "<div style='color:red'>" + formattedMessage + "</div><br>";
+            Tools._AddLogEntry(entry);
+        }
+
+        public static get LogCache(): string {
+            return Tools._LogCache;
         }
 
         public static set LogLevels(level: number) {

Babylon/babylon.engine.js

@@ -374,6 +374,7 @@
             // States
             this._depthCullingState = new _DepthCullingState();
             this._alphaState = new _AlphaState();
+            this._alphaMode = Engine.ALPHA_DISABLE;
             // Cache
             this._loadedTexturesCache = new Array();
             this._activeTexturesCache = new Array();
@@ -473,6 +474,8 @@
             document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
 
             this._audioEngine = new BABYLON.AudioEngine();
+
+            BABYLON.Tools.Log("Babylon.js engine (v" + Engine.Version + ") launched");
         }
         Object.defineProperty(Engine, "ALPHA_DISABLE", {
             get: function () {
@@ -746,7 +749,7 @@
         };
 
         Engine.prototype.flushFramebuffer = function () {
-            this._gl.flush();
+            //   this._gl.flush();
         };
 
         Engine.prototype.restoreDefaultFramebuffer = function () {
@@ -1204,6 +1207,12 @@
                     this._alphaState.alphaBlend = true;
                     break;
             }
+
+            this._alphaMode = mode;
+        };
+
+        Engine.prototype.getAlphaMode = function () {
+            return this._alphaMode;
         };
 
         Engine.prototype.setAlphaTesting = function (enable) {

Babylon/babylon.engine.ts

@@ -429,6 +429,7 @@
         // States
         private _depthCullingState = new _DepthCullingState();
         private _alphaState = new _AlphaState();
+        private _alphaMode = Engine.ALPHA_DISABLE;
 
         // Cache
         private _loadedTexturesCache = new Array<WebGLTexture>();
@@ -551,6 +552,8 @@
             document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
 
             this._audioEngine = new BABYLON.AudioEngine();
+
+            Tools.Log("Babylon.js engine (v" + Engine.Version + ") launched");
         }
 
         public getAudioEngine(): AudioEngine {
@@ -755,7 +758,7 @@
         }
 
         public flushFramebuffer(): void {
-            this._gl.flush();
+         //   this._gl.flush();
         }
 
         public restoreDefaultFramebuffer(): void {
@@ -1203,7 +1206,6 @@
         }
 
         public setAlphaMode(mode: number): void {
-
             switch (mode) {
                 case BABYLON.Engine.ALPHA_DISABLE:
                     this.setDepthWrite(true);
@@ -1220,6 +1222,12 @@
                     this._alphaState.alphaBlend = true;
                     break;
             }
+
+            this._alphaMode = mode;
+        }
+
+        public getAlphaMode(): number {
+            return this._alphaMode;
         }
 
         public setAlphaTesting(enable: boolean): void {

babylon.2.0.d.ts

@@ -88,6 +88,7 @@ declare module BABYLON {
         private _drawCalls;
         private _depthCullingState;
         private _alphaState;
+        private _alphaMode;
         private _loadedTexturesCache;
         public _activeTexturesCache: BaseTexture[];
         private _currentEffect;
@@ -173,6 +174,7 @@ declare module BABYLON {
         public setDepthWrite(enable: boolean): void;
         public setColorWrite(enable: boolean): void;
         public setAlphaMode(mode: number): void;
+        public getAlphaMode(): number;
         public setAlphaTesting(enable: boolean): void;
         public getAlphaTesting(): boolean;
         public wipeCaches(): void;
@@ -873,22 +875,34 @@ declare module BABYLON {
 declare module BABYLON {
     class Sound {
         private _audioBuffer;
-        public distanceMax: number;
+        public maxDistance: number;
         public autoplay: boolean;
         public loop: boolean;
         private _position;
-        private _orientation;
+        private _direction;
         private _volume;
         private _currentVolume;
         private _isLoaded;
         private _isReadyToPlay;
+        private _isPlaying;
+        private _isDirectional;
         private _audioEngine;
         private _readyToPlayCallback;
         private _soundSource;
         private _soundPanner;
+        private _coneInnerAngle;
+        private _coneOuterAngle;
+        private _coneOuterGain;
         constructor(url: string, engine: Engine, readyToPlayCallback: any, distanceMax?: number, autoplay?: boolean, loop?: boolean);
+        /**
+        * Transform this sound into a directional source
+        * @param coneInnerAngle Size of the inner cone in degree
+        * @param coneOuterAngle Size of the outer cone in degree
+        * @param coneOuterGain Volume of the sound outside the outer cone (between 0.0 and 1.0)
+        */
+        public setDirectionalCone(coneInnerAngle: number, coneOuterAngle: number, coneOuterGain: number): void;
         public setPosition(newPosition: Vector3): void;
-        public setOrientiation(newOrientation: Vector3): void;
+        public setDirection(newDirection: Vector3): void;
         public play(): void;
         public stop(): void;
         public pause(): void;
@@ -1439,15 +1453,24 @@ declare module BABYLON {
         private _enabled;
         private _labelsEnabled;
         private _displayStatistics;
+        private _displayLogs;
         private _globalDiv;
         private _statsDiv;
         private _optionsDiv;
+        private _logDiv;
         private _drawingCanvas;
         private _drawingContext;
         private _syncPositions;
         private _syncData;
+        private _onCanvasClick;
+        private _clickPosition;
+        private _ratio;
+        private _identityMatrix;
         constructor(scene: Scene);
+        private _renderLabel(text, projectedPosition, labelOffset, onClick, getFillStyle);
+        private _isClickInsideRect(x, y, width, height);
         public enabled : boolean;
+        private _clearLabels();
         private _generateTexBox(root, title);
         private _generateCheckBox(root, title, initialState, task);
         private _generateDOMelements();
@@ -2090,6 +2113,7 @@ declare module BABYLON {
         private _alpha;
         private _autoGenerateTime;
         private _fireColors;
+        private _alphaThreshold;
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         public updateShaderUniforms(): void;
         public render(useCameraPostProcess?: boolean): void;
@@ -2112,24 +2136,24 @@ declare module BABYLON {
         public cloudColor : Color3;
     }
     class GrassProceduralTexture extends ProceduralTexture {
+        private _grassColors;
         private _herb1;
         private _herb2;
         private _herb3;
-        private _dirt;
-        private _ground;
+        private _dirtColor;
+        private _groundColor;
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         public updateShaderUniforms(): void;
-        public herb1 : Color3;
-        public herb2 : Color3;
-        public herb3 : Color3;
-        public dirt : Color3;
+        public grassColors : Color3[];
+        public dirtColor : Color3;
+        public groundColor : Color3;
         public ground : Color3;
     }
     class RoadProceduralTexture extends ProceduralTexture {
-        private _macadamColor;
+        private _roadColor;
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         public updateShaderUniforms(): void;
-        public macadamColor : Color3;
+        public roadColor : Color3;
     }
     class BrickProceduralTexture extends ProceduralTexture {
         private _numberOfBricksHeight;
@@ -2559,6 +2583,9 @@ declare module BABYLON {
         public renderOutline: boolean;
         public outlineColor: Color3;
         public outlineWidth: number;
+        public renderOverlay: boolean;
+        public overlayColor: Color3;
+        public overlayAlpha: number;
         public hasVertexAlpha: boolean;
         public useVertexColors: boolean;
         public useOctreeForRenderingSelection: boolean;
@@ -3522,7 +3549,7 @@ declare module BABYLON {
         private _effect;
         private _cachedDefines;
         constructor(scene: Scene);
-        public render(subMesh: SubMesh, batch: _InstancesBatch): void;
+        public render(subMesh: SubMesh, batch: _InstancesBatch, useOverlay?: boolean): void;
         public isReady(subMesh: SubMesh, useInstances: boolean): boolean;
     }
 }
@@ -4017,11 +4044,14 @@ declare module BABYLON {
         private static _MessageLogLevel;
         private static _WarningLogLevel;
         private static _ErrorLogLevel;
+        private static _LogCache;
+        static OnNewCacheEntry: (entry: string) => void;
         static NoneLogLevel : number;
         static MessageLogLevel : number;
         static WarningLogLevel : number;
         static ErrorLogLevel : number;
         static AllLogLevel : number;
+        private static _AddLogEntry(entry);
         private static _FormatMessage(message);
         static Log: (message: string) => void;
         private static _LogDisabled(message);
@@ -4032,6 +4062,7 @@ declare module BABYLON {
         static Error: (message: string) => void;
         private static _ErrorDisabled(message);
         private static _ErrorEnabled(message);
+        static LogCache : string;
         static LogLevels : number;
         private static _PerformanceNoneLogLevel;
         private static _PerformanceUserMarkLogLevel;