Moving skeletonviewer to utilitylayer

gui/src/2D/controls/control.ts

@@ -1039,10 +1039,12 @@ export class Control {
             return;
         }
 
+        context.save();
         context.strokeStyle = "#4affff";
         context.lineWidth = 2;
 
         this._renderHighlightSpecific(context);
+        context.restore();
     }
 
     /** @hidden */

inspector/src/components/actionTabs/tabs/debugTabComponent.tsx

@@ -54,7 +54,7 @@ export class DebugTabComponent extends PaneComponent {
                     if (found) {
                         continue;
                     }
-                    var viewer = new BABYLON.Debug.SkeletonViewer(mesh.skeleton, mesh, scene, true, 0, BABYLON.UtilityLayerRenderer.DefaultUtilityLayer);
+                    var viewer = new BABYLON.Debug.SkeletonViewer(mesh.skeleton, mesh, scene, true, 0);
                     viewer.isEnabled = true;
                     this._skeletonViewers.push(viewer);
                     if (!mesh.metadata) {

src/Debug/babylon.skeletonViewer.ts

@@ -12,6 +12,7 @@ module BABYLON.Debug {
         private _debugMesh: Nullable<LinesMesh>;
         private _isEnabled = false;
         private _renderFunction: () => void;
+        private _utilityLayer: Nullable<UtilityLayerRenderer>;
 
         /**
          * Returns the mesh used to render the bones
@@ -27,7 +28,6 @@ module BABYLON.Debug {
          * @param scene defines the hosting scene
          * @param autoUpdateBonesMatrices defines a boolean indicating if bones matrices must be forced to update before rendering (true by default)
          * @param renderingGroupId defines the rendering group id to use with the viewer
-         * @param utilityLayerRenderer defines an optional utility layer to render the helper on
          */
         constructor(
             /** defines the skeleton to render */
@@ -40,10 +40,13 @@ module BABYLON.Debug {
             /** defines the rendering group id to use with the viewer */
             public renderingGroupId = 1,
             /** defines an optional utility layer to render the helper on */
-            public utilityLayerRenderer?: UtilityLayerRenderer
         ) {
             this._scene = scene;
 
+            this._utilityLayer = new UtilityLayerRenderer(this._scene, false);
+            this._utilityLayer.pickUtilitySceneFirst = false;
+            this._utilityLayer.utilityLayerScene.autoClearDepthAndStencil = true;
+
             this.update();
 
             this._renderFunction = this.update.bind(this);
@@ -133,6 +136,10 @@ module BABYLON.Debug {
 
         /** Update the viewer to sync with current skeleton state */
         public update() {
+            if (!this._utilityLayer) {
+                return;
+            }
+
             if (this.autoUpdateBonesMatrices) {
                 this.skeleton.computeAbsoluteTransforms();
             }
@@ -142,7 +149,7 @@ module BABYLON.Debug {
             } else {
                 this._getLinesForBonesWithLength(this.skeleton.bones, this.mesh.getWorldMatrix());
             }
-            const targetScene = this.utilityLayerRenderer ? this.utilityLayerRenderer.utilityLayerScene : this._scene;
+            const targetScene = this._utilityLayer.utilityLayerScene;
 
             if (!this._debugMesh) {
                 this._debugMesh = BABYLON.MeshBuilder.CreateLineSystem("", { lines: this._debugLines, updatable: true, instance: null }, targetScene);
@@ -156,11 +163,19 @@ module BABYLON.Debug {
 
         /** Release associated resources */
         public dispose() {
+
+            this.isEnabled = false;
+
             if (this._debugMesh) {
                 this.isEnabled = false;
                 this._debugMesh.dispose();
                 this._debugMesh = null;
             }
+
+            if (this._utilityLayer) {
+                this._utilityLayer.dispose();
+                this._utilityLayer = null;
+            }
         }
     }
 }