Mutli Glow Layer

src/Layer/babylon.highlightlayer.ts

@@ -114,6 +114,7 @@
         private _meshes: {[id: string]: IHighlightLayerMesh} = {};
         private _maxSize:number = 0;
         private _shouldRender = false;
+        private _instanceGlowingMeshStencilReference = HighlightLayer.glowingMeshStencilReference++;
 
         /**
          * Specifies whether or not the inner glow is ACTIVE in the layer.
@@ -178,7 +179,7 @@
             var engine = scene.getEngine();
             this._engine = engine;
             this._maxSize = this._engine.getCaps().maxTextureSize;
-            this._scene.highlightLayer = this;
+            this._scene.highlightLayers.push(this);
 
             // Warn on stencil.
             if (!this._engine.isStencilEnable) {
@@ -486,7 +487,7 @@
             engine.setAlphaMode(this._options.alphaBlendingMode);
             engine.setStencilMask(0x00);
             engine.setStencilBuffer(true);
-            engine.setStencilFunctionReference(HighlightLayer.glowingMeshStencilReference);
+            engine.setStencilFunctionReference(this._instanceGlowingMeshStencilReference);
 
             if (this.outerGlow) {
                 currentEffect.setFloat("offset", 0);
@@ -532,7 +533,10 @@
                 this._meshes[mesh.id] = {
                     mesh: mesh,
                     color: color,
-                    observerHighlight: mesh.onBeforeRenderObservable.add(this.highligtStencilReference),
+                    // Lambda required for capture due to Observable this context
+                    observerHighlight: mesh.onBeforeRenderObservable.add((mesh: Mesh) => { 
+                        mesh.getScene().getEngine().setStencilFunctionReference(this._instanceGlowingMeshStencilReference);
+                    }),
                     observerDefault: mesh.onAfterRenderObservable.add(this.defaultStencilReference)
                 };
             }
@@ -582,13 +586,6 @@
         }
 
         /**
-         * Force the stencil to the glowing expected value for glowing parts
-         */
-        private highligtStencilReference(mesh: Mesh) {
-            mesh.getScene().getEngine().setStencilFunctionReference(HighlightLayer.glowingMeshStencilReference);
-        }
-
-        /**
          * Force the stencil to the normal expected value for none glowing parts
          */
         private defaultStencilReference(mesh: Mesh) {
@@ -636,7 +633,10 @@
             this._meshes = null;
 
             // Remove from scene
-            this._scene.highlightLayer = null;
+            var index = this._scene.highlightLayers.indexOf(this, 0);
+            if (index > -1) {
+                this._scene.highlightLayers.splice(index, 1);
+            }
 
             // Callback
             this.onDisposeObservable.notifyObservers(this);

src/babylon.scene.ts

@@ -360,7 +360,7 @@
 
         // Layers
         public layers = new Array<Layer>();
-        public highlightLayer:HighlightLayer = null;
+        public highlightLayers = new Array<HighlightLayer>();
 
         // Skeletons
         public skeletonsEnabled = true;
@@ -2042,14 +2042,21 @@
 
             // Activate HighlightLayer stencil
             var stencilState = this._engine.getStencilBuffer();
-            if (this.highlightLayer && this.highlightLayer.shouldRender()) {
-                this._engine.setStencilBuffer(true);
+            var renderhighlights = false;
+            if (this.highlightLayers && this.highlightLayers.length > 0) {
+                for (let i = 0; i < this.highlightLayers.length; i++) {
+                    if (this.highlightLayers[i].shouldRender()) {
+                        renderhighlights = true;
+                        this._engine.setStencilBuffer(true);
+                        break;
+                    }
+                }
             }
 
             this._renderingManager.render(null, null, true, true);
 
             // Restore HighlightLayer stencil
-            if (this.highlightLayer && this.highlightLayer.shouldRender()) {
+            if (renderhighlights) {
                 this._engine.setStencilBuffer(stencilState);
             }
 
@@ -2089,9 +2096,13 @@
             }
 
             // Highlight Layer
-            if (this.highlightLayer && this.highlightLayer.shouldRender()) {
+            if (renderhighlights) {
                 engine.setDepthBuffer(false);
-                this.highlightLayer.render();
+                for (let i = 0; i < this.highlightLayers.length; i++) {
+                    if (this.highlightLayers[i].shouldRender()) {
+                        this.highlightLayers[i].render();
+                    }
+                }
                 engine.setDepthBuffer(true);
             }
 
@@ -2280,8 +2291,12 @@
             }
 
             // HighlightLayer
-            if (this.highlightLayer && this.highlightLayer.shouldRender()) {
-               this._renderTargets.push((<any>this.highlightLayer)._mainTexture);
+            if (this.highlightLayers && this.highlightLayers.length > 0) {
+                for (let i = 0; i < this.highlightLayers.length; i++) {
+                    if (this.highlightLayers[i].shouldRender()) {
+                        this._renderTargets.push((<any>this.highlightLayers[i])._mainTexture);
+                    }
+                }
             }
 
             // RenderPipeline
@@ -2562,9 +2577,8 @@
             while (this.layers.length) {
                 this.layers[0].dispose();
             }
-
-            if (this.highlightLayer) {
-                this.highlightLayer.dispose();
+            while (this.highlightLayers.length) {
+                this.highlightLayers[0].dispose();
             }
 
             // Release textures