Compiled version of canvas2d

canvas2D/src/Engine/babylon.prim2dBase.js

@@ -1299,6 +1299,8 @@ var BABYLON;
             this._firstZDirtyIndex = Prim2DBase._bigInt;
             this._actualOpacity = 0;
             this._actualScale = BABYLON.Vector2.Zero();
+            this._displayDebugAreas = false;
+            this._debugAreaGroup = null;
             var isPickable = true;
             var isContainer = true;
             if (settings.isPickable !== undefined) {
@@ -2374,6 +2376,207 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Prim2DBase.prototype, "displayDebugAreas", {
+            get: function () {
+                return this._displayDebugAreas;
+            },
+            set: function (value) {
+                if (this._displayDebugAreas === value) {
+                    return;
+                }
+                if (value === false) {
+                    this._debugAreaGroup.dispose();
+                    this._debugAreaGroup = null;
+                }
+                else {
+                    var layoutFill = "#F0808040"; // Red - Layout area
+                    var layoutBorder = "#F08080FF";
+                    var marginFill = "#F0F04040"; // Yellow - Margin area
+                    var marginBorder = "#F0F040FF";
+                    var paddingFill = "#F040F040"; // Magenta - Padding Area
+                    var paddingBorder = "#F040F0FF";
+                    var contentFill = "#40F0F040"; // Cyan - Content area
+                    var contentBorder = "#40F0F0FF";
+                    var s = new BABYLON.Size(10, 10);
+                    var p = BABYLON.Vector2.Zero();
+                    this._debugAreaGroup = new BABYLON.Group2D({
+                        parent: (this.parent != null) ? this.parent : this, id: "###DEBUG AREA GROUP###", children: [
+                            new BABYLON.Group2D({
+                                id: "###Layout Area###", position: p, size: s, children: [
+                                    new BABYLON.Rectangle2D({ id: "###Layout Frame###", position: BABYLON.Vector2.Zero(), size: s, fill: null, border: layoutBorder }),
+                                    new BABYLON.Rectangle2D({ id: "###Layout Top###", position: BABYLON.Vector2.Zero(), size: s, fill: layoutFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Layout Left###", position: BABYLON.Vector2.Zero(), size: s, fill: layoutFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Layout Right###", position: BABYLON.Vector2.Zero(), size: s, fill: layoutFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Layout Bottom###", position: BABYLON.Vector2.Zero(), size: s, fill: layoutFill })
+                                ]
+                            }),
+                            new BABYLON.Group2D({
+                                id: "###Margin Area###", position: p, size: s, children: [
+                                    new BABYLON.Rectangle2D({ id: "###Margin Frame###", position: BABYLON.Vector2.Zero(), size: s, fill: null, border: marginBorder }),
+                                    new BABYLON.Rectangle2D({ id: "###Margin Top###", position: BABYLON.Vector2.Zero(), size: s, fill: marginFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Margin Left###", position: BABYLON.Vector2.Zero(), size: s, fill: marginFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Margin Right###", position: BABYLON.Vector2.Zero(), size: s, fill: marginFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Margin Bottom###", position: BABYLON.Vector2.Zero(), size: s, fill: marginFill })
+                                ]
+                            }),
+                            new BABYLON.Group2D({
+                                id: "###Padding Area###", position: p, size: s, children: [
+                                    new BABYLON.Rectangle2D({ id: "###Padding Frame###", position: BABYLON.Vector2.Zero(), size: s, fill: null, border: paddingBorder }),
+                                    new BABYLON.Rectangle2D({ id: "###Padding Top###", position: BABYLON.Vector2.Zero(), size: s, fill: paddingFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Padding Left###", position: BABYLON.Vector2.Zero(), size: s, fill: paddingFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Padding Right###", position: BABYLON.Vector2.Zero(), size: s, fill: paddingFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Padding Bottom###", position: BABYLON.Vector2.Zero(), size: s, fill: paddingFill })
+                                ]
+                            }),
+                            new BABYLON.Group2D({
+                                id: "###Content Area###", position: p, size: s, children: [
+                                    new BABYLON.Rectangle2D({ id: "###Content Frame###", position: BABYLON.Vector2.Zero(), size: s, fill: null, border: contentBorder }),
+                                    new BABYLON.Rectangle2D({ id: "###Content Top###", position: BABYLON.Vector2.Zero(), size: s, fill: contentFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Content Left###", position: BABYLON.Vector2.Zero(), size: s, fill: contentFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Content Right###", position: BABYLON.Vector2.Zero(), size: s, fill: contentFill }),
+                                    new BABYLON.Rectangle2D({ id: "###Content Bottom###", position: BABYLON.Vector2.Zero(), size: s, fill: contentFill })
+                                ]
+                            })
+                        ]
+                    });
+                    this._updateDebugArea();
+                }
+                this._displayDebugAreas = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Prim2DBase.prototype._updateDebugArea = function () {
+            var areaNames = ["Layout", "Margin", "Padding", "Content"];
+            var areaZones = ["Area", "Frame", "Top", "Left", "Right", "Bottom"];
+            var prims = new Array(4);
+            // Get all the primitives used to display the areas
+            for (var i = 0; i < 4; i++) {
+                prims[i] = new Array(6);
+                for (var j = 0; j < 6; j++) {
+                    prims[i][j] = this._debugAreaGroup.findById("###" + areaNames[i] + " " + areaZones[j] + "###");
+                    if (j > 1) {
+                        prims[i][j].levelVisible = false;
+                    }
+                }
+            }
+            // Update the visibility status of layout/margin/padding
+            var hasLayout = (this.layoutAreaPos.x !== 0) || (this.layoutAreaPos.y !== 0);
+            var hasMargin = this._hasMargin;
+            var hasPadding = this._hasPadding;
+            prims[0][0].levelVisible = hasLayout;
+            prims[1][0].levelVisible = hasMargin;
+            prims[2][0].levelVisible = hasPadding;
+            prims[3][0].levelVisible = true;
+            // Current offset
+            var curOffset = BABYLON.Vector2.Zero();
+            // Store the area info of the layout area
+            var curAreaIndex = 0;
+            // Store data about each area
+            var areaInfo = new Array(4);
+            var storeAreaInfo = function (pos, size) {
+                var min = pos.clone();
+                var max = pos.clone();
+                if (size.width > 0) {
+                    max.x += size.width;
+                }
+                if (size.height > 0) {
+                    max.y += size.height;
+                }
+                areaInfo[curAreaIndex++] = { off: pos, size: size, min: min, max: max };
+            };
+            {
+                var w = this.margin.leftPixels + this.margin.rightPixels + this.actualSize.width;
+                var h = this.margin.topPixels + this.margin.bottomPixels + this.actualSize.height;
+                storeAreaInfo(BABYLON.Vector2.Zero(), new BABYLON.Size(w, h));
+            }
+            // Compute the layout related data
+            if (hasLayout) {
+                var layoutOffset = this.layoutAreaPos;
+                var w = this.layoutArea.width - (layoutOffset.x + this.margin.leftPixels + this.margin.rightPixels + this.actualSize.width);
+                var h = this.layoutArea.height - (layoutOffset.y + this.margin.topPixels + this.margin.bottomPixels + this.actualSize.height);
+                var layoutArea = new BABYLON.Size(w, h);
+                storeAreaInfo(layoutOffset, layoutArea);
+                curOffset = this.layoutAreaPos;
+            }
+            // Compute margin data
+            if (hasMargin) {
+                var marginOffset = this._marginOffset.add(curOffset);
+                var marginArea = this.actualSize;
+                storeAreaInfo(marginOffset, marginArea);
+                curOffset.addInPlace(marginOffset);
+            }
+            if (hasPadding) {
+                var contentOffset = this._paddingOffset.add(curOffset);
+                var contentArea = this.contentArea;
+                storeAreaInfo(contentOffset, contentArea);
+                curOffset.addInPlace(contentOffset);
+            }
+            // Helper function that set the pos and size of a given prim
+            var setArea = function (i, j, pos, size) {
+                prims[i][j].position = pos;
+                prims[i][j].size = size;
+            };
+            var setFullRect = function (i, pos, size) {
+                var plist = prims[i];
+                plist[2].levelVisible = true;
+                plist[3].levelVisible = false;
+                plist[4].levelVisible = false;
+                plist[5].levelVisible = false;
+                setArea(i, 1, pos, size);
+                setArea(i, 2, pos, size);
+            };
+            var setQuadRect = function (i, areaIndex) {
+                var plist = prims[i];
+                plist[2].levelVisible = true;
+                plist[3].levelVisible = true;
+                plist[4].levelVisible = true;
+                plist[5].levelVisible = true;
+                var ca = areaInfo[areaIndex];
+                var na = areaInfo[areaIndex + 1];
+                var tp = new BABYLON.Vector2(ca.min.x, na.max.y);
+                var ts = new BABYLON.Size(ca.size.width, ca.max.y - tp.y);
+                var lp = new BABYLON.Vector2(ca.min.x, na.min.y);
+                var ls = new BABYLON.Size(na.min.x - ca.min.x, na.max.y - na.min.y);
+                var rp = new BABYLON.Vector2(na.max.x, na.min.y);
+                var rs = ls;
+                var bp = new BABYLON.Vector2(ca.min.x, ca.min.y);
+                var bs = ts;
+                // Frame
+                plist[1].position = ca.off;
+                plist[1].size = ca.size;
+                // Top rect
+                plist[2].position = tp;
+                plist[2].size = ts;
+                // Left rect
+                plist[3].position = lp;
+                plist[3].size = ls;
+                // Right rect
+                plist[4].position = rp;
+                plist[4].size = rs;
+                // Bottom rect
+                plist[5].position = bp;
+                plist[5].size = bs;
+            };
+            var areaCount = curAreaIndex;
+            curAreaIndex = 0;
+            // Available zones
+            var availableZones = [false, hasLayout, hasMargin, hasPadding, true];
+            for (var k = 1; k < 5; k++) {
+                if (availableZones[k]) {
+                    var ai = areaInfo[curAreaIndex];
+                    setArea(k - 1, 0, BABYLON.Vector2.Zero(), ai.size);
+                    //                    setArea(k-1, 1, Vector2.Zero(), ai.size);
+                    if (k === 4) {
+                        setFullRect(k - 1, ai.off, ai.size);
+                    }
+                    else {
+                        setQuadRect(k - 1, curAreaIndex);
+                    }
+                    ++curAreaIndex;
+                }
+            }
+        };
         Prim2DBase.prototype.findById = function (id) {
             if (this._id === id) {
                 return this;
@@ -2869,6 +3072,9 @@ var BABYLON;
             if (isSizeAuto) {
                 this._lastAutoSizeArea = this.actualSize;
             }
+            if (this.displayDebugAreas) {
+                this._updateDebugArea();
+            }
         };
         Object.defineProperty(Prim2DBase.prototype, "contentArea", {
             /**

dist/preview release/babylon.max.js

@@ -17870,7 +17870,8 @@ var BABYLON;
             var renderhighlights = false;
             if (this.highlightLayers && this.highlightLayers.length > 0) {
                 for (var i = 0; i < this.highlightLayers.length; i++) {
-                    if (this.highlightLayers[i].shouldRender()) {
+                    var highlightLayer = this.highlightLayers[i];
+                    if ((highlightLayer.layerMask & camera.layerMask) && highlightLayer.shouldRender()) {
                         renderhighlights = true;
                         this._engine.setStencilBuffer(true);
                         break;
@@ -20311,6 +20312,7 @@ var BABYLON;
                 var highlightLayer = highlightLayers[i];
                 if (highlightLayer) {
                     highlightLayer.removeMesh(this);
+                    highlightLayer.removeExcludedMesh(this);
                 }
             }
             _super.prototype.dispose.call(this, doNotRecurse);
@@ -37168,6 +37170,7 @@ var BABYLON;
             this._maxSize = 0;
             this._shouldRender = false;
             this._instanceGlowingMeshStencilReference = HighlightLayer.glowingMeshStencilReference++;
+            this._excludedMeshes = {};
             /**
              * Specifies whether or not the inner glow is ACTIVE in the layer.
              */
@@ -37177,9 +37180,9 @@ var BABYLON;
              */
             this.outerGlow = true;
             /**
-             * Specifies the listof mesh excluded during the generation of the highlight layer.
+             * Helps enabling disabling the highlight depending on the layers being rendered.
              */
-            this.excludedMeshes = [];
+            this.layerMask = 0xFFFFFFFF;
             /**
              * An event triggered when the highlight layer has been disposed.
              * @type {BABYLON.Observable}
@@ -37351,7 +37354,7 @@ var BABYLON;
                     return;
                 }
                 // Excluded Mesh
-                if (_this.excludedMeshes.indexOf(mesh) > -1) {
+                if (_this._excludedMeshes[mesh.id]) {
                     return;
                 }
                 ;
@@ -37550,6 +37553,36 @@ var BABYLON;
             }
         };
         /**
+         * Add a mesh in the exclusion list to prevent it to impact or being impacted by the highlight layer.
+         * @param mesh The mesh to exclude from the highlight layer
+         */
+        HighlightLayer.prototype.addExcludedMesh = function (mesh) {
+            var meshExcluded = this._excludedMeshes[mesh.id];
+            if (!meshExcluded) {
+                this._excludedMeshes[mesh.id] = {
+                    mesh: mesh,
+                    beforeRender: mesh.onBeforeRenderObservable.add(function (mesh) {
+                        mesh.getEngine().setStencilBuffer(false);
+                    }),
+                    afterRender: mesh.onAfterRenderObservable.add(function (mesh) {
+                        mesh.getEngine().setStencilBuffer(true);
+                    }),
+                };
+            }
+        };
+        /**
+          * Remove a mesh from the exclusion list to let it impact or being impacted by the highlight layer.
+          * @param mesh The mesh to highlight
+          */
+        HighlightLayer.prototype.removeExcludedMesh = function (mesh) {
+            var meshExcluded = this._excludedMeshes[mesh.id];
+            if (meshExcluded) {
+                mesh.onBeforeRenderObservable.remove(meshExcluded.beforeRender);
+                mesh.onAfterRenderObservable.remove(meshExcluded.afterRender);
+            }
+            this._excludedMeshes[mesh.id] = undefined;
+        };
+        /**
          * Add a mesh in the highlight layer in order to make it glow with the chosen color.
          * @param mesh The mesh to highlight
          * @param color The color of the highlight
@@ -37568,7 +37601,12 @@ var BABYLON;
                     color: color,
                     // Lambda required for capture due to Observable this context
                     observerHighlight: mesh.onBeforeRenderObservable.add(function (mesh) {
-                        mesh.getScene().getEngine().setStencilFunctionReference(_this._instanceGlowingMeshStencilReference);
+                        if (_this._excludedMeshes[mesh.id]) {
+                            _this.defaultStencilReference(mesh);
+                        }
+                        else {
+                            mesh.getScene().getEngine().setStencilFunctionReference(_this._instanceGlowingMeshStencilReference);
+                        }
                     }),
                     observerDefault: mesh.onAfterRenderObservable.add(this.defaultStencilReference),
                     glowEmissiveOnly: glowEmissiveOnly
@@ -37651,6 +37689,14 @@ var BABYLON;
                 }
             }
             this._meshes = null;
+            for (var id in this._excludedMeshes) {
+                var meshHighlight = this._excludedMeshes[id];
+                if (meshHighlight) {
+                    meshHighlight.mesh.onBeforeRenderObservable.remove(meshHighlight.beforeRender);
+                    meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.afterRender);
+                }
+            }
+            this._excludedMeshes = null;
             // Remove from scene
             var index = this._scene.highlightLayers.indexOf(this, 0);
             if (index > -1) {
@@ -39073,9 +39119,7 @@ var BABYLON;
                     this._effect.setMatrix("viewProjection", this.getScene().getTransformMatrix());
                 }
                 // Bones
-                if (mesh && mesh.useBones && mesh.computeBonesUsingShaders) {
-                    this._effect.setMatrices("mBones", mesh.skeleton.getTransformMatrices(mesh));
-                }
+                BABYLON.MaterialHelper.BindBonesParameters(mesh, this._effect);
                 var name;
                 // Texture
                 for (name in this._textures) {

src/Layer/babylon.highlightlayer.js

@@ -47,6 +47,7 @@ var BABYLON;
             this._maxSize = 0;
             this._shouldRender = false;
             this._instanceGlowingMeshStencilReference = HighlightLayer.glowingMeshStencilReference++;
+            this._excludedMeshes = {};
             /**
              * Specifies whether or not the inner glow is ACTIVE in the layer.
              */
@@ -56,9 +57,9 @@ var BABYLON;
              */
             this.outerGlow = true;
             /**
-             * Specifies the listof mesh excluded during the generation of the highlight layer.
+             * Helps enabling disabling the highlight depending on the layers being rendered.
              */
-            this.excludedMeshes = [];
+            this.layerMask = 0xFFFFFFFF;
             /**
              * An event triggered when the highlight layer has been disposed.
              * @type {BABYLON.Observable}
@@ -230,7 +231,7 @@ var BABYLON;
                     return;
                 }
                 // Excluded Mesh
-                if (_this.excludedMeshes.indexOf(mesh) > -1) {
+                if (_this._excludedMeshes[mesh.id]) {
                     return;
                 }
                 ;
@@ -429,6 +430,36 @@ var BABYLON;
             }
         };
         /**
+         * Add a mesh in the exclusion list to prevent it to impact or being impacted by the highlight layer.
+         * @param mesh The mesh to exclude from the highlight layer
+         */
+        HighlightLayer.prototype.addExcludedMesh = function (mesh) {
+            var meshExcluded = this._excludedMeshes[mesh.id];
+            if (!meshExcluded) {
+                this._excludedMeshes[mesh.id] = {
+                    mesh: mesh,
+                    beforeRender: mesh.onBeforeRenderObservable.add(function (mesh) {
+                        mesh.getEngine().setStencilBuffer(false);
+                    }),
+                    afterRender: mesh.onAfterRenderObservable.add(function (mesh) {
+                        mesh.getEngine().setStencilBuffer(true);
+                    }),
+                };
+            }
+        };
+        /**
+          * Remove a mesh from the exclusion list to let it impact or being impacted by the highlight layer.
+          * @param mesh The mesh to highlight
+          */
+        HighlightLayer.prototype.removeExcludedMesh = function (mesh) {
+            var meshExcluded = this._excludedMeshes[mesh.id];
+            if (meshExcluded) {
+                mesh.onBeforeRenderObservable.remove(meshExcluded.beforeRender);
+                mesh.onAfterRenderObservable.remove(meshExcluded.afterRender);
+            }
+            this._excludedMeshes[mesh.id] = undefined;
+        };
+        /**
          * Add a mesh in the highlight layer in order to make it glow with the chosen color.
          * @param mesh The mesh to highlight
          * @param color The color of the highlight
@@ -447,7 +478,12 @@ var BABYLON;
                     color: color,
                     // Lambda required for capture due to Observable this context
                     observerHighlight: mesh.onBeforeRenderObservable.add(function (mesh) {
-                        mesh.getScene().getEngine().setStencilFunctionReference(_this._instanceGlowingMeshStencilReference);
+                        if (_this._excludedMeshes[mesh.id]) {
+                            _this.defaultStencilReference(mesh);
+                        }
+                        else {
+                            mesh.getScene().getEngine().setStencilFunctionReference(_this._instanceGlowingMeshStencilReference);
+                        }
                     }),
                     observerDefault: mesh.onAfterRenderObservable.add(this.defaultStencilReference),
                     glowEmissiveOnly: glowEmissiveOnly
@@ -530,6 +566,14 @@ var BABYLON;
                 }
             }
             this._meshes = null;
+            for (var id in this._excludedMeshes) {
+                var meshHighlight = this._excludedMeshes[id];
+                if (meshHighlight) {
+                    meshHighlight.mesh.onBeforeRenderObservable.remove(meshHighlight.beforeRender);
+                    meshHighlight.mesh.onAfterRenderObservable.remove(meshHighlight.afterRender);
+                }
+            }
+            this._excludedMeshes = null;
             // Remove from scene
             var index = this._scene.highlightLayers.indexOf(this, 0);
             if (index > -1) {

src/Materials/babylon.shaderMaterial.js

@@ -179,9 +179,7 @@ var BABYLON;
                     this._effect.setMatrix("viewProjection", this.getScene().getTransformMatrix());
                 }
                 // Bones
-                if (mesh && mesh.useBones && mesh.computeBonesUsingShaders) {
-                    this._effect.setMatrices("mBones", mesh.skeleton.getTransformMatrices(mesh));
-                }
+                BABYLON.MaterialHelper.BindBonesParameters(mesh, this._effect);
                 var name;
                 // Texture
                 for (name in this._textures) {

src/Mesh/babylon.mesh.js

@@ -1202,6 +1202,7 @@ var BABYLON;
                 var highlightLayer = highlightLayers[i];
                 if (highlightLayer) {
                     highlightLayer.removeMesh(this);
+                    highlightLayer.removeExcludedMesh(this);
                 }
             }
             _super.prototype.dispose.call(this, doNotRecurse);

src/babylon.scene.js

@@ -1734,7 +1734,8 @@ var BABYLON;
             var renderhighlights = false;
             if (this.highlightLayers && this.highlightLayers.length > 0) {
                 for (var i = 0; i < this.highlightLayers.length; i++) {
-                    if (this.highlightLayers[i].shouldRender()) {
+                    var highlightLayer = this.highlightLayers[i];
+                    if ((highlightLayer.layerMask & camera.layerMask) && highlightLayer.shouldRender()) {
                         renderhighlights = true;
                         this._engine.setStencilBuffer(true);
                         break;