Added a new parameter to `debugLayer.show()` to define root element to use

Fixed a bug with CSG when submeshes are kept

dist/preview release/babylon.max.js

@@ -26475,7 +26475,7 @@ var BABYLON;
             var engine = this._scene.getEngine();
             this._scene.unregisterBeforeRender(this._syncData);
             this._scene.unregisterAfterRender(this._syncUI);
-            document.body.removeChild(this._globalDiv);
+            this._rootElement.removeChild(this._globalDiv);
             window.removeEventListener("resize", this._syncPositions);
             this._scene.forceShowBoundingBoxes = false;
             this._scene.forceWireframe = false;
@@ -26499,9 +26499,10 @@ var BABYLON;
             this._scene.probesEnabled = true;
             engine.getRenderingCanvas().removeEventListener("click", this._onCanvasClick);
         };
-        DebugLayer.prototype.show = function (showUI, camera) {
+        DebugLayer.prototype.show = function (showUI, camera, rootElement) {
             if (showUI === void 0) { showUI = true; }
             if (camera === void 0) { camera = null; }
+            if (rootElement === void 0) { rootElement = null; }
             if (this._enabled) {
                 return;
             }
@@ -26515,7 +26516,8 @@ var BABYLON;
             this._showUI = showUI;
             var engine = this._scene.getEngine();
             this._globalDiv = document.createElement("div");
-            document.body.appendChild(this._globalDiv);
+            this._rootElement = rootElement || document.body;
+            this._rootElement.appendChild(this._globalDiv);
             this._generateDOMelements();
             window.addEventListener("resize", this._syncPositions);
             engine.getRenderingCanvas().addEventListener("click", this._onCanvasClick);
@@ -29756,8 +29758,10 @@ var BABYLON;
             // four classes.
             var polygonType = 0;
             var types = [];
-            for (var i = 0; i < polygon.vertices.length; i++) {
-                var t = BABYLON.Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
+            var i;
+            var t;
+            for (i = 0; i < polygon.vertices.length; i++) {
+                t = BABYLON.Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
                 var type = (t < -Plane.EPSILON) ? BACK : (t > Plane.EPSILON) ? FRONT : COPLANAR;
                 polygonType |= type;
                 types.push(type);
@@ -29779,19 +29783,20 @@ var BABYLON;
                         var j = (i + 1) % polygon.vertices.length;
                         var ti = types[i], tj = types[j];
                         var vi = polygon.vertices[i], vj = polygon.vertices[j];
-                        if (ti != BACK)
+                        if (ti !== BACK)
                             f.push(vi);
-                        if (ti != FRONT)
-                            b.push(ti != BACK ? vi.clone() : vi);
-                        if ((ti | tj) == SPANNING) {
+                        if (ti !== FRONT)
+                            b.push(ti !== BACK ? vi.clone() : vi);
+                        if ((ti | tj) === SPANNING) {
                             t = (this.w - BABYLON.Vector3.Dot(this.normal, vi.pos)) / BABYLON.Vector3.Dot(this.normal, vj.pos.subtract(vi.pos));
                             var v = vi.interpolate(vj, t);
                             f.push(v);
                             b.push(v.clone());
                         }
                     }
+                    var poly;
                     if (f.length >= 3) {
-                        var poly = new Polygon(f, polygon.shared);
+                        poly = new Polygon(f, polygon.shared);
                         if (poly.plane)
                             front.push(poly);
                     }
@@ -30164,7 +30169,7 @@ var BABYLON;
             if (keepSubMeshes) {
                 // We offset the materialIndex by the previous number of materials in the CSG mixed meshes
                 var materialIndexOffset = 0, materialMaxIndex;
-                mesh.subMeshes.length = 0;
+                mesh.subMeshes = new Array();
                 for (var m in subMesh_dict) {
                     materialMaxIndex = -1;
                     for (var sm in subMesh_dict[m]) {

dist/preview release/what's new.md

@@ -9,6 +9,7 @@
     - New `Mesh.CreatePolygon()` method ([jerome](https://github.com/jbousquie))
     - Introducing [babylon.core.js](http://doc.babylonjs.com/generals/Framework_versions) ([deltakosh](https://github.com/deltakosh))
   - **Updates**
+    - Added a new parameter to `debugLayer.show()` to define root element to use ([deltakosh](https://github.com/deltakosh))
     - New `MeshBuilder` class used to create all kind of mesh shapes ([deltakosh](https://github.com/deltakosh))
     - Added `Scene.constantlyUpdateMeshUnderPointer` to improve performance when moving mouse ([deltakosh](https://github.com/deltakosh))
     - Added `StandardMaterial.disableLighting` ([deltakosh](https://github.com/deltakosh))
@@ -23,9 +24,10 @@
     - `Material.dispose()` now removes disposed material from meshes ([deltakosh](https://github.com/deltakosh))
     - New `Material.getBindedMeshes()` function ([deltakosh](https://github.com/deltakosh))
   - **Bug fixes**
-    - Fixed bug with texture coordinates matrices ([deltakosh](https://github.com/deltakosh))
+    - Fixed a bug with CSG when submeshes are kept ([deltakosh](https://github.com/deltakosh)) 
+    - Fixed a bug with texture coordinates matrices ([deltakosh](https://github.com/deltakosh))
     - Fixed Sphere texture coordinates generation ([deltakosh](https://github.com/deltakosh))
-    - Fixed bug with `Mesh.attachToBone` when bone's matrix has a negative determinant ([deltakosh](https://github.com/deltakosh))
+    - Fixed a bug with `Mesh.attachToBone` when bone's matrix has a negative determinant ([deltakosh](https://github.com/deltakosh))
     - Fixed a possible but with the active camera while taking a screenshot. [PR](https://github.com/BabylonJS/Babylon.js/pull/701) ([RaananW](https://github.com/RaananW))
     - Fixed a bug with worker-collisions and instances. [PR](https://github.com/BabylonJS/Babylon.js/pull/705) ([RaananW](https://github.com/RaananW))
     - Fixed a bug with removed meshes and geometries from the worker-cache. [PR](https://github.com/BabylonJS/Babylon.js/pull/711) ([RaananW](https://github.com/RaananW))

src/Debug/babylon.debugLayer.js

@@ -237,7 +237,7 @@ var BABYLON;
             var engine = this._scene.getEngine();
             this._scene.unregisterBeforeRender(this._syncData);
             this._scene.unregisterAfterRender(this._syncUI);
-            document.body.removeChild(this._globalDiv);
+            this._rootElement.removeChild(this._globalDiv);
             window.removeEventListener("resize", this._syncPositions);
             this._scene.forceShowBoundingBoxes = false;
             this._scene.forceWireframe = false;
@@ -261,9 +261,10 @@ var BABYLON;
             this._scene.probesEnabled = true;
             engine.getRenderingCanvas().removeEventListener("click", this._onCanvasClick);
         };
-        DebugLayer.prototype.show = function (showUI, camera) {
+        DebugLayer.prototype.show = function (showUI, camera, rootElement) {
             if (showUI === void 0) { showUI = true; }
             if (camera === void 0) { camera = null; }
+            if (rootElement === void 0) { rootElement = null; }
             if (this._enabled) {
                 return;
             }
@@ -277,7 +278,8 @@ var BABYLON;
             this._showUI = showUI;
             var engine = this._scene.getEngine();
             this._globalDiv = document.createElement("div");
-            document.body.appendChild(this._globalDiv);
+            this._rootElement = rootElement || document.body;
+            this._rootElement.appendChild(this._globalDiv);
             this._generateDOMelements();
             window.addEventListener("resize", this._syncPositions);
             engine.getRenderingCanvas().addEventListener("click", this._onCanvasClick);

src/Debug/babylon.debugLayer.ts

@@ -19,6 +19,7 @@
         private _treeSubsetDiv: HTMLDivElement;
         private _drawingCanvas: HTMLCanvasElement;
         private _drawingContext: CanvasRenderingContext2D;
+        private _rootElement: HTMLElement;
 
         private _syncPositions: () => void;
         private _syncData: () => void;
@@ -340,7 +341,7 @@
 
             this._scene.unregisterBeforeRender(this._syncData);
             this._scene.unregisterAfterRender(this._syncUI);
-            document.body.removeChild(this._globalDiv);
+            this._rootElement.removeChild(this._globalDiv);
 
             window.removeEventListener("resize", this._syncPositions);
 
@@ -370,7 +371,7 @@
             engine.getRenderingCanvas().removeEventListener("click", this._onCanvasClick);
         }
 
-        public show(showUI: boolean = true, camera: Camera = null) {
+        public show(showUI: boolean = true, camera: Camera = null, rootElement: HTMLElement = null) {
             if (this._enabled) {
                 return;
             }
@@ -389,7 +390,9 @@
 
             this._globalDiv = document.createElement("div");
 
-            document.body.appendChild(this._globalDiv);
+            this._rootElement = rootElement || document.body;
+
+            this._rootElement.appendChild(this._globalDiv);
 
             this._generateDOMelements();
 

src/Mesh/babylon.csg.js

@@ -70,8 +70,10 @@ var BABYLON;
             // four classes.
             var polygonType = 0;
             var types = [];
-            for (var i = 0; i < polygon.vertices.length; i++) {
-                var t = BABYLON.Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
+            var i;
+            var t;
+            for (i = 0; i < polygon.vertices.length; i++) {
+                t = BABYLON.Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
                 var type = (t < -Plane.EPSILON) ? BACK : (t > Plane.EPSILON) ? FRONT : COPLANAR;
                 polygonType |= type;
                 types.push(type);
@@ -93,19 +95,20 @@ var BABYLON;
                         var j = (i + 1) % polygon.vertices.length;
                         var ti = types[i], tj = types[j];
                         var vi = polygon.vertices[i], vj = polygon.vertices[j];
-                        if (ti != BACK)
+                        if (ti !== BACK)
                             f.push(vi);
-                        if (ti != FRONT)
-                            b.push(ti != BACK ? vi.clone() : vi);
-                        if ((ti | tj) == SPANNING) {
+                        if (ti !== FRONT)
+                            b.push(ti !== BACK ? vi.clone() : vi);
+                        if ((ti | tj) === SPANNING) {
                             t = (this.w - BABYLON.Vector3.Dot(this.normal, vi.pos)) / BABYLON.Vector3.Dot(this.normal, vj.pos.subtract(vi.pos));
                             var v = vi.interpolate(vj, t);
                             f.push(v);
                             b.push(v.clone());
                         }
                     }
+                    var poly;
                     if (f.length >= 3) {
-                        var poly = new Polygon(f, polygon.shared);
+                        poly = new Polygon(f, polygon.shared);
                         if (poly.plane)
                             front.push(poly);
                     }
@@ -478,7 +481,7 @@ var BABYLON;
             if (keepSubMeshes) {
                 // We offset the materialIndex by the previous number of materials in the CSG mixed meshes
                 var materialIndexOffset = 0, materialMaxIndex;
-                mesh.subMeshes.length = 0;
+                mesh.subMeshes = new Array();
                 for (var m in subMesh_dict) {
                     materialMaxIndex = -1;
                     for (var sm in subMesh_dict[m]) {

src/Mesh/babylon.csg.ts

@@ -84,8 +84,10 @@
             // four classes.
             var polygonType = 0;
             var types = [];
-            for (var i = 0; i < polygon.vertices.length; i++) {
-                var t = Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
+            var i: number;
+            var t: number;
+            for (i = 0; i < polygon.vertices.length; i++) {
+                t = Vector3.Dot(this.normal, polygon.vertices[i].pos) - this.w;
                 var type = (t < -Plane.EPSILON) ? BACK : (t > Plane.EPSILON) ? FRONT : COPLANAR;
                 polygonType |= type;
                 types.push(type);
@@ -108,18 +110,18 @@
                         var j = (i + 1) % polygon.vertices.length;
                         var ti = types[i], tj = types[j];
                         var vi = polygon.vertices[i], vj = polygon.vertices[j];
-                        if (ti != BACK) f.push(vi);
-                        if (ti != FRONT) b.push(ti != BACK ? vi.clone() : vi);
-                        if ((ti | tj) == SPANNING) {
+                        if (ti !== BACK) f.push(vi);
+                        if (ti !== FRONT) b.push(ti !== BACK ? vi.clone() : vi);
+                        if ((ti | tj) === SPANNING) {
                             t = (this.w - Vector3.Dot(this.normal, vi.pos)) / Vector3.Dot(this.normal, vj.pos.subtract(vi.pos));
                             var v = vi.interpolate(vj, t);
                             f.push(v);
                             b.push(v.clone());
                         }
                     }
+                    var poly: Polygon;
                     if (f.length >= 3) {
-                        var poly = new Polygon(f, polygon.shared);
-
+                        poly = new Polygon(f, polygon.shared);
                         if (poly.plane)
                             front.push(poly);
                     }
@@ -572,7 +574,7 @@
                 var materialIndexOffset = 0,
                     materialMaxIndex;
 
-                mesh.subMeshes.length = 0;
+                mesh.subMeshes = new Array<SubMesh>();
 
                 for (var m in subMesh_dict) {
                     materialMaxIndex = -1;