inspector updates and lint

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

@@ -48,7 +48,8 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
     displayNormals: boolean,
     displayVertexColors: boolean,
     displayBoneWeights: boolean,
-    displayBoneIndex: number
+    displayBoneIndex: number,
+    displaySkeletonMap:boolean
 }> {
     constructor(props: IMeshPropertyGridComponentProps) {
         super(props);
@@ -57,6 +58,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
             displayVertexColors: false,
             displayBoneWeights: false,
             displayBoneIndex: 0,
+            displaySkeletonMap: false
         };
     }
 
@@ -243,6 +245,31 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         }
     }
 
+    displaySkeletonMap() {
+        const mesh = this.props.mesh;
+        const scene = mesh.getScene();
+
+        if (mesh.material && mesh.material.getClassName() === "SkeletonMapShader") {
+            mesh.material.dispose();
+            mesh.material = mesh.reservedDataStore.originalMaterial;
+            mesh.reservedDataStore.originalMaterial = null;
+            this.setState({ displaySkeletonMap: false });
+        } else {          
+            if (!mesh.reservedDataStore) {
+                mesh.reservedDataStore = {};
+            }
+            if (!mesh.reservedDataStore.originalMaterial) {
+                mesh.reservedDataStore.originalMaterial = mesh.material;
+            }  
+            if(mesh.skeleton){
+                const skeletonMapShader = SkeletonViewer.CreateSkeletonMapShader({skeleton:mesh.skeleton}, scene)
+                skeletonMapShader.reservedDataStore = { hidden: true };
+                mesh.material = skeletonMapShader;
+                this.setState({ displaySkeletonMap: true });
+            }            
+        }
+    }
+
     onBoneDisplayIndexChange(value:number):void{
         let mesh = this.props.mesh
         mesh.reservedDataStore.displayBoneIndex = value
@@ -318,6 +345,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         const renderNormalVectors = (mesh.reservedDataStore && mesh.reservedDataStore.normalLines) ? true : false;
         const renderWireframeOver = (mesh.reservedDataStore && mesh.reservedDataStore.wireframeOver) ? true : false;
         const displayBoneWeights = mesh.material != null && mesh.material.getClassName() === "BoneWeightShader";
+        const displaySkeletonMap = mesh.material != null && mesh.material.getClassName() === "SkeletonMapShader";
 
         var morphTargets: MorphTarget[] = [];
 
@@ -534,6 +562,11 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         <SliderLineComponent label="Target Bone" decimalCount={0} target={mesh.reservedDataStore} propertyName="displayBoneIndex" minimum={0} maximum={mesh.skeleton.bones.length-1 || 0} step={1} onChange={(value)=>{this.onBoneDisplayIndexChange(value)}} />
                         
                     }
+                    {
+                        !mesh.isAnInstance && mesh.skeleton &&
+                        <CheckBoxLineComponent label="Display SkeletonMap" isSelected={() => displaySkeletonMap } onSelect={() => this.displaySkeletonMap()} />
+                    }                
+
                 </LineContainerComponent>
             </div>
         );

src/Debug/ISkeletonViewer.ts

@@ -77,7 +77,9 @@ export interface IBoneWeightShaderOptions{
  * Simple structure of the gradient steps for the Color Map.
  */
 export interface ISkeletonMapShaderColorMapKnot{
+   /** Color of the Knot */
    color : Color3;
+   /** Location of the Knot */
    location : number;
 }
 
@@ -87,5 +89,6 @@ export interface ISkeletonMapShaderColorMapKnot{
 export interface ISkeletonMapShaderOptions{
    /** Skeleton to Map */
    skeleton: Skeleton;
+   /** Array of ColorMapKnots that make the gradient must be ordered with knot[i].location < knot[i+1].location*/
    colorMap? : ISkeletonMapShaderColorMapKnot[];
 }

src/Debug/skeletonViewer.ts

@@ -182,8 +182,6 @@ export class SkeletonViewer {
 
         let bufferWidth: number = skeleton.bones.length + 1;
         let colorMapBuffer: number[] = SkeletonViewer._CreateBoneMapColorBuffer(bufferWidth, colorMap, scene);
-        //colorMapBuffer.forEach((v, idx) => colorMapBuffer[idx] = v / 255);
-        console.log(colorMapBuffer);
         let shader = new ShaderMaterial('boneWeights:' + skeleton.name, scene,
         {
             vertexSource:
@@ -254,6 +252,10 @@ export class SkeletonViewer {
 
         shader.setFloats('colorMap', colorMapBuffer);
 
+        shader.getClassName = (): string => {
+            return "SkeletonMapShader";
+        };
+
         shader.transparencyMode = Material.MATERIAL_OPAQUE;
 
         return shader;
@@ -720,7 +722,7 @@ export class SkeletonViewer {
 
                 sphere.setVerticesData(VertexBuffer.MatricesWeightsKind, mwk, false);
                 sphere.setVerticesData(VertexBuffer.MatricesIndicesKind, mik, false);
-                console.log('Anchor Point', anchorPoint);
+
                 sphere.position = anchorPoint.clone();
                 spheres.push([sphere, bone]);
             }
@@ -779,7 +781,7 @@ export class SkeletonViewer {
         } else {
             this._getLinesForBonesWithLength(this.skeleton.bones, mesh.getWorldMatrix());
         }
-        //console.log(this._debugLines)
+
         const targetScene = this._utilityLayer.utilityLayerScene;
 
         if (targetScene) {

src/Materials/shaderMaterial.ts

@@ -540,42 +540,47 @@ export class ShaderMaterial extends Material {
 
         // Bones
         let numInfluencers = 0;
+        if (mesh) {
+            if (mesh.useBones && mesh.computeBonesUsingShaders && mesh.skeleton) {
+                attribs.push(VertexBuffer.MatricesIndicesKind);
+                attribs.push(VertexBuffer.MatricesWeightsKind);
+                if (mesh.numBoneInfluencers > 4) {
+                    attribs.push(VertexBuffer.MatricesIndicesExtraKind);
+                    attribs.push(VertexBuffer.MatricesWeightsExtraKind);
+                }
 
-        if (mesh && mesh.useBones && mesh.computeBonesUsingShaders && mesh.skeleton) {
-            attribs.push(VertexBuffer.MatricesIndicesKind);
-            attribs.push(VertexBuffer.MatricesWeightsKind);
-            if (mesh.numBoneInfluencers > 4) {
-                attribs.push(VertexBuffer.MatricesIndicesExtraKind);
-                attribs.push(VertexBuffer.MatricesWeightsExtraKind);
-            }
+                const skeleton = mesh.skeleton;
 
-            const skeleton = mesh.skeleton;
+                numInfluencers = mesh.numBoneInfluencers;
+                defines.push("#define NUM_BONE_INFLUENCERS " + numInfluencers);
+                fallbacks.addCPUSkinningFallback(0, mesh);
 
-            numInfluencers = mesh.numBoneInfluencers;
+                if (skeleton.isUsingTextureForMatrices) {
+                    defines.push("#define BONETEXTURE");
 
-            defines.push("#define NUM_BONE_INFLUENCERS " + numInfluencers);
-            fallbacks.addCPUSkinningFallback(0, mesh);
+                    if (this._options.uniforms.indexOf("boneTextureWidth") === -1) {
+                        this._options.uniforms.push("boneTextureWidth");
+                    }
 
-            if (skeleton.isUsingTextureForMatrices) {
-                defines.push("#define BONETEXTURE");
+                    if (this._options.samplers.indexOf("boneSampler") === -1) {
+                        this._options.samplers.push("boneSampler");
+                    }
+                } else {
+                    defines.push("#define BonesPerMesh " + (skeleton.bones.length + 1));
 
-                if (this._options.uniforms.indexOf("boneTextureWidth") === -1) {
-                    this._options.uniforms.push("boneTextureWidth");
+                    if (this._options.uniforms.indexOf("mBones") === -1) {
+                        this._options.uniforms.push("mBones");
+                    }
                 }
 
-                if (this._options.samplers.indexOf("boneSampler") === -1) {
-                    this._options.samplers.push("boneSampler");
-                }
             } else {
-                defines.push("#define BonesPerMesh " + (skeleton.bones.length + 1));
-
-                if (this._options.uniforms.indexOf("mBones") === -1) {
-                    this._options.uniforms.push("mBones");
+                if (mesh && this.getClassName() == "BoneWeightShader" || this.getClassName() == "SkeletonMapShader") {
+                    numInfluencers = mesh.numBoneInfluencers;
+                    defines.push("#define NUM_BONE_INFLUENCERS " + numInfluencers);
+                }else {
+                    defines.push("#define NUM_BONE_INFLUENCERS 0");
                 }
             }
-
-        } else {
-            defines.push("#define NUM_BONE_INFLUENCERS 0");
         }
 
         // Textures