Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/skeletonPropertyGridComponent.tsx

@@ -12,6 +12,7 @@ import { Skeleton } from 'babylonjs/Bones/skeleton';
 import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 import { SkeletonViewer } from 'babylonjs/Debug/skeletonViewer';
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
+import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 
 interface ISkeletonPropertyGridComponentProps {
     globalState: GlobalState;
@@ -22,6 +23,7 @@ interface ISkeletonPropertyGridComponentProps {
 
 export class SkeletonPropertyGridComponent extends React.Component<ISkeletonPropertyGridComponentProps> {
     private _skeletonViewersEnabled = false;
+    private _skeletonViewerDisplayOptions = { displayMode : SkeletonViewer.DISPLAY_LINES }
     private _skeletonViewers = new Array<SkeletonViewer>();
 
     constructor(props: ISkeletonPropertyGridComponentProps) {
@@ -47,13 +49,13 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
                     if (found) {
                         continue;
                     }
-                    var viewer = new SkeletonViewer(mesh.skeleton, mesh, scene, false, 3, { displayMode:SkeletonViewer.DISPLAY_SPHERE_AND_SPURS });
+                    var viewer = new SkeletonViewer(mesh.skeleton, mesh, scene, false, 3, { displayMode: this._skeletonViewerDisplayOptions.displayMode });
                     viewer.isEnabled = true;
                     this._skeletonViewers.push(viewer);
                     if (!mesh.reservedDataStore) {
                         mesh.reservedDataStore = {};
                     }
-                    mesh.reservedDataStore.skeletonViewer = viewer;
+                    mesh.reservedDataStore.skeletonViewer = viewer;                   
                 }
             }
         } else {
@@ -83,6 +85,14 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
         this._skeletonViewersEnabled = (this._skeletonViewers.length > 0);
     }
 
+    changeDisplayMode(){
+        if (this._skeletonViewersEnabled){              
+            for (var index = 0; index < this._skeletonViewers.length; index++) {
+                this._skeletonViewers[index].changeDisplayMode( this._skeletonViewerDisplayOptions.displayMode || 0 );
+            }                   
+        }
+    }
+
     shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps) {
         if (nextProps.skeleton !== this.props.skeleton) {
             this.checkSkeletonViewerState(nextProps);
@@ -103,6 +113,13 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
     render() {
         const skeleton = this.props.skeleton;
 
+        const debugModeOptions = [
+            { label: "Lines", value: SkeletonViewer.DISPLAY_LINES },
+            { label: "Spheres", value: SkeletonViewer.DISPLAY_SPHERES },
+            { label: "Sphere and Spurs", value: SkeletonViewer.DISPLAY_SPHERE_AND_SPURS }
+        ];
+
+
         return (
             <div className="pane">
                 <CustomPropertyGridComponent globalState={this.props.globalState} target={skeleton}
@@ -116,7 +133,11 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
                         <TextLineComponent label="Override mesh" value={skeleton.overrideMesh.name} onLink={() => this.onOverrideMeshLink()}/>
                     }                        
                     <CheckBoxLineComponent label="Use texture to store matrices" target={skeleton} propertyName="useTextureToStoreBoneMatrices" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <CheckBoxLineComponent label="Debug mode" isSelected={() => this._skeletonViewersEnabled} onSelect={() => this.switchSkeletonViewers()} />
+                    
+                    <LineContainerComponent globalState={this.props.globalState} title="DEBUG">                        
+                        <CheckBoxLineComponent label="Enabled" isSelected={() => this._skeletonViewersEnabled} onSelect={() => this.switchSkeletonViewers()} />
+                        <OptionsLineComponent label="displayMode" options={debugModeOptions} target={this._skeletonViewerDisplayOptions} propertyName="displayMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={() => this.changeDisplayMode()} />
+                    </LineContainerComponent>                    
                 </LineContainerComponent>
                 <AnimationGridComponent globalState={this.props.globalState} animatable={skeleton} scene={skeleton.getScene()} lockObject={this.props.lockObject} />
             </div>

src/Debug/skeletonViewer.ts

@@ -86,6 +86,17 @@ export class SkeletonViewer {
     set material(value: StandardMaterial) {
          this.material = value;
     }
+    /** Gets the material */
+    get displayMode(): number {
+        return this.options.displayMode || SkeletonViewer.DISPLAY_LINES;
+    }
+    /** Sets the material */
+    set displayMode(value: number) {
+        if (value > SkeletonViewer.DISPLAY_SPHERE_AND_SPURS) {
+            value = SkeletonViewer.DISPLAY_LINES;
+        }
+        this.options.displayMode = value;
+    }
 
     /**
      * Creates a new SkeletonViewer
@@ -135,7 +146,7 @@ export class SkeletonViewer {
         if (displayMode > SkeletonViewer.DISPLAY_SPHERE_AND_SPURS) {
             displayMode = SkeletonViewer.DISPLAY_LINES;
         }
-        this.options.displayMode = displayMode;
+        this.displayMode = displayMode;
         //Prep the Systems
         this.update();
         this._bindObs();
@@ -143,7 +154,7 @@ export class SkeletonViewer {
 
     /** The Dynamic bindings for the update functions */
     private _bindObs(): void {
-        switch (this.options.displayMode){
+        switch (this.displayMode){
             case SkeletonViewer.DISPLAY_LINES: {
                     this._obs = this.scene.onBeforeRenderObservable.add(() => {
                         this._displayLinesUpdate();
@@ -155,7 +166,7 @@ export class SkeletonViewer {
 
     /** Update the viewer to sync with current skeleton state, only used to manually update. */
     public update(): void {
-        switch (this.options.displayMode){
+        switch (this.displayMode){
             case SkeletonViewer.DISPLAY_LINES: {
                 this._displayLinesUpdate();
                 break;
@@ -271,7 +282,12 @@ export class SkeletonViewer {
 
     /** function to build and bind sphere joint points and spur bone representations. */
     private _buildSpheresAndSpurs(spheresOnly = true): Promise<void> {
-        this.dispose();
+
+        if (this._debugMesh) {
+            this._debugMesh.dispose();
+            this._debugMesh = null;
+            this.ready = false;
+        }
 
         this._ready = false;
         let scene = this.scene;
@@ -456,10 +472,11 @@ export class SkeletonViewer {
     }
 
     /** Update the viewer to sync with current skeleton state, only used for the line display. */
-    private  _displayLinesUpdate() {
+    private  _displayLinesUpdate(): void {
         if (!this._utilityLayer) {
             return;
         }
+        console.log("dlup");
 
         if (this.autoUpdateBonesMatrices) {
             this.skeleton.computeAbsoluteTransforms();
@@ -486,9 +503,30 @@ export class SkeletonViewer {
             this._debugMesh.color = this.color;
         }
     }
+    /** Changes the displayMode of the skeleton viewer
+     * @param mode The displayMode numerical value
+     */
+    public changeDisplayMode(mode: number): void {
+        let wasEnabled = (this.isEnabled) ? true : false;
+        if (this.displayMode !== mode) {
+            console.log("Change Display Mode!", mode, wasEnabled);
+            this.isEnabled = false;
+            if (this._debugMesh) {
+                this._debugMesh.dispose();
+                this._debugMesh = null;
+                this.ready = false;
+            }
+            this.displayMode = mode;
+
+            this.update();
+            this._bindObs();
+            this.isEnabled = wasEnabled;
+            console.log(this._utilityLayer, this._debugMesh);
+        }
+    }
 
     /** Release associated resources */
-    public dispose() {
+    public dispose(): void {
         this.isEnabled = false;
         if (this._debugMesh) {
             this._debugMesh.dispose();
@@ -499,5 +537,7 @@ export class SkeletonViewer {
             this._utilityLayer.dispose();
             this._utilityLayer = null;
         }
+
+        this.ready = false;
     }
 }

src/Engines/engine.ts

@@ -483,14 +483,14 @@ export class Engine extends ThinEngine {
     constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio: boolean = false) {
         super(canvasOrContext, antialias, options, adaptToDeviceRatio);
 
+        Engine.Instances.push(this);
+
         if (!canvasOrContext) {
             return;
         }
 
         options = this._creationOptions;
 
-        Engine.Instances.push(this);
-
         if ((<any>canvasOrContext).getContext) {
             let canvas = <HTMLCanvasElement>canvasOrContext;