Support all properties of every object

inspector/src/details/PropertyLine.ts

@@ -150,7 +150,7 @@ module INSPECTOR {
             }
         }
 
-        public validateInput(value: any, forceupdate:boolean = true): void {
+        public validateInput(value: any, forceupdate: boolean = true): void {
             this.updateObject();
             if (typeof this._property.value === 'number') {
                 this._property.value = parseFloat(value);
@@ -182,7 +182,7 @@ module INSPECTOR {
             Helpers.CleanDiv(this._valueDiv);
             if (typeof this.value !== 'boolean' && !this._isSliderType()) {
                 this._valueDiv.textContent = "-";
-            } 
+            }
             // restore elements
             for (let elem of this._elements) {
                 this._valueDiv.appendChild(elem.toHtml());
@@ -313,7 +313,7 @@ module INSPECTOR {
             // Then update its value
             // this._valueDiv.textContent = " "; // TOFIX this removes the elements after
             if (typeof this.value === 'boolean') {
-                 this._checkboxInput();
+                this._checkboxInput();
             } else if (this._isSliderType()) { // Add slider when parent have slider property
                 this._rangeInput();
             } else {
@@ -386,7 +386,9 @@ module INSPECTOR {
                 this._div.classList.toggle('unfolded');
                 if (this._children.length == 0) {
                     let objToDetail = this.value;
-                    let propToDisplay = (<any>PROPERTIES)[Helpers.GET_TYPE(objToDetail)].properties.slice().reverse();
+                    // Display all properties that are not functions
+                    let propToDisplay = Helpers.GetAllLinesPropertiesAsString(objToDetail);
+                    propToDisplay.sort().reverse();
 
                     for (let prop of propToDisplay) {
                         let infos = new Property(prop, this._property.value);
@@ -395,7 +397,7 @@ module INSPECTOR {
                     }
                 }
                 // otherwise display it    
-                if (this._div.parentNode) {                
+                if (this._div.parentNode) {
                     for (let child of this._children) {
                         this._div.parentNode.insertBefore(child.toHtml(), this._div.nextSibling);
                     }
@@ -437,7 +439,7 @@ module INSPECTOR {
          * Create input entry
          */
         private _checkboxInput() {
-            if(this._valueDiv.childElementCount < 1) { // Prevent display two checkbox
+            if (this._valueDiv.childElementCount < 1) { // Prevent display two checkbox
                 this._input = Helpers.CreateInput('checkbox-element', this._valueDiv);
                 this._input.type = 'checkbox'
                 this._input.checked = this.value;
@@ -445,11 +447,11 @@ module INSPECTOR {
                     Scheduler.getInstance().pause = true;
                     this.validateInput(!this.value)
                 })
-            }            
+            }
         }
 
         private _rangeInput() {
-            if(this._valueDiv.childElementCount < 1) { // Prevent display two input range
+            if (this._valueDiv.childElementCount < 1) { // Prevent display two input range
                 this._input = Helpers.CreateInput('slider-element', this._valueDiv);
                 this._input.type = 'range';
                 this._input.style.display = 'inline-block';
@@ -457,7 +459,7 @@ module INSPECTOR {
                 this._input.max = this._getSliderProperty().max;
                 this._input.step = this._getSliderProperty().step;
                 this._input.value = this.value;
-                
+
                 this._validateInputHandler = this._rangeHandler.bind(this)
                 this._input.addEventListener('input', this._validateInputHandler)
                 this._input.addEventListener('change', () => {
@@ -479,10 +481,10 @@ module INSPECTOR {
         }
 
         private _isSliderType() { //Check if property have slider definition
-            return this._property  && 
-            PROPERTIES.hasOwnProperty(this._property.obj.constructor.name) &&
-            (<any>PROPERTIES)[this._property.obj.constructor.name].hasOwnProperty('slider') && 
-            (<any>PROPERTIES)[this._property.obj.constructor.name].slider.hasOwnProperty(this.name);
+            return this._property &&
+                PROPERTIES.hasOwnProperty(this._property.obj.constructor.name) &&
+                (<any>PROPERTIES)[this._property.obj.constructor.name].hasOwnProperty('slider') &&
+                (<any>PROPERTIES)[this._property.obj.constructor.name].slider.hasOwnProperty(this.name);
         }
 
         private _getSliderProperty() {

inspector/src/helpers/Helpers.ts

@@ -7,7 +7,7 @@ module INSPECTOR {
          * uses getClassName. If nothing is returned, used the type of the constructor
          */
         public static GET_TYPE(obj: any): string {
-            if(typeof obj === 'boolean') {
+            if (typeof obj === 'boolean') {
                 return 'boolean';
             }
 
@@ -24,10 +24,10 @@ module INSPECTOR {
                 if (!this._CheckIfTypeExists(classname)) {
                     return this._GetTypeFor(obj);
                 }
-                
+
                 return classname;
             } else {
-                
+
                 return 'type_not_defined';
             }
         }
@@ -91,6 +91,9 @@ module INSPECTOR {
 
         /** Returns the given number with 2 decimal number max if a decimal part exists */
         public static Trunc(nb: number): number {
+            if (typeof nb !== 'number') {
+                return 0;
+            }
             if (Math.round(nb) !== nb) {
                 return (<any>nb.toFixed(2));
             }
@@ -141,7 +144,7 @@ module INSPECTOR {
             div.style.display = 'none';
             div.appendChild(clone);
             let value = (<any>Inspector.WINDOW.getComputedStyle(clone))[cssAttribute];
-            if (div.parentNode)  {
+            if (div.parentNode) {
                 div.parentNode.removeChild(div);
             }
             return value;
@@ -185,20 +188,33 @@ module INSPECTOR {
          */
         public static GetAllLinesProperties(obj: any): Array<PropertyLine> {
             let propertiesLines: Array<PropertyLine> = [];
-            
+            let props = Helpers.GetAllLinesPropertiesAsString(obj);
+
+            for (let prop of props) {
+                let infos = new Property(prop, obj);
+                propertiesLines.push(new PropertyLine(infos));
+            }
+            return propertiesLines;
+        }
+
+
+        /**
+         * Returns an array of string corresponding to tjhe list of properties of the object to be displayed
+         * @param obj 
+         */
+        public static GetAllLinesPropertiesAsString(obj: any): Array<string> {
+            let props: Array<string> = [];
+
             for (let prop in obj) {
-                /**
-                 * No private and no function
-                 */
-                if(prop.substring(0, 1) !== '_' && typeof obj[prop] !== 'function') {
-                    let infos = new Property(prop, obj);
-                    propertiesLines.push(new PropertyLine(infos));
+                //No private and no function
+                if (prop.substring(0, 1) !== '_' && typeof obj[prop] !== 'function') {
+                    props.push(prop);
                 }
             }
-            return propertiesLines;
+            return props;
         }
 
-        public static Capitalize (str : string) : string {
+        public static Capitalize(str: string): string {
             return str.charAt(0).toUpperCase() + str.slice(1);
         }
     }

inspector/src/properties.ts

@@ -20,59 +20,39 @@ module INSPECTOR {
         },
         'Vector2': {
             type: BABYLON.Vector2,
-            properties: ['x', 'y'],
             format: (vec: BABYLON.Vector2) => { return `x:${Helpers.Trunc(vec.x)}, y:${Helpers.Trunc(vec.y)}`; }
         },
         'Vector3': {
             type: BABYLON.Vector3,
-            properties: ['x', 'y', 'z'],
             format: (vec: BABYLON.Vector3) => { return `x:${Helpers.Trunc(vec.x)}, y:${Helpers.Trunc(vec.y)}, z:${Helpers.Trunc(vec.z)}` }
         },
         'Color3': {
             type: BABYLON.Color3,
-            properties: ['r', 'g', 'b'],
             format: (color: BABYLON.Color3) => { return `R:${color.r}, G:${color.g}, B:${color.b}` },
             slider: {
-                r: {min: 0, max: 1, step: 0.01},
-                g: {min: 0, max: 1, step: 0.01},
-                b: {min: 0, max: 1, step: 0.01}
+                r: { min: 0, max: 1, step: 0.01 },
+                g: { min: 0, max: 1, step: 0.01 },
+                b: { min: 0, max: 1, step: 0.01 }
             }
         },
         'Color4': {
             type: BABYLON.Color4,
-            properties: ['r', 'g', 'b'],
             format: (color: BABYLON.Color4) => { return `R:${color.r}, G:${color.g}, B:${color.b}` },
             slider: {
-                r: {min: 0, max: 1, step: 0.01},
-                g: {min: 0, max: 1, step: 0.01},
-                b: {min: 0, max: 1, step: 0.01}
+                r: { min: 0, max: 1, step: 0.01 },
+                g: { min: 0, max: 1, step: 0.01 },
+                b: { min: 0, max: 1, step: 0.01 }
             }
         },
         'Quaternion': {
-            type: BABYLON.Quaternion,
-            properties: ['x', 'y', 'z', 'w']
+            type: BABYLON.Quaternion
         },
         'Size': {
             type: BABYLON.Size,
-            properties: ['width', 'height'],
             format: (size: BABYLON.Size) => { return `Size - w:${Helpers.Trunc(size.width)}, h:${Helpers.Trunc(size.height)}` }
         },
         'Texture': {
             type: BABYLON.Texture,
-            properties: [
-                'hasAlpha',
-                'level',
-                'name',
-                'wrapU',
-                'wrapV',
-                'uScale',
-                'vScale',
-                'uAng',
-                'vAng',
-                'wAng',
-                'uOffset',
-                'vOffset'
-            ],
             format: (tex: BABYLON.Texture) => { return tex.name }
         },
         'RenderTargetTexture': {
@@ -91,247 +71,47 @@ module INSPECTOR {
             type: BABYLON.HDRCubeTexture
         },
         'Sound': {
-            type: BABYLON.Sound,
-            properties: [
-                'name',
-                'autoplay',
-                'loop',
-                'useCustomAttenuation',
-                'soundTrackId',
-                'spatialSound',
-                'refDistance',
-                'rolloffFactor',
-                'maxDistance',
-                'distanceModel',
-                'isPlaying',
-                'isPaused'
-            ]
+            type: BABYLON.Sound
         },
         'ArcRotateCamera': {
             type: BABYLON.ArcRotateCamera,
-            properties: [
-                'position',
-                'alpha',
-                'beta',
-                'radius',
-                'angularSensibilityX',
-                'angularSensibilityY',
-                'angularTouchSensibilityX',
-                'angularTouchSensibilityY',
-                'target',
-                'lowerAlphaLimit',
-                'lowerBetaLimit',
-                'upperAlphaLimit',
-                'upperBetaLimit',
-                'lowerRadiusLimit',
-                'upperRadiusLimit',
-
-                'pinchPrecision',
-                'wheelPrecision',
-                'allowUpsideDown',
-                'checkCollisions'
-            ],
             slider: {
-                alpha: {min: 0, max: 2*Math.PI, step: 0.01},
-                beta: {min: -Math.PI, max: Math.PI, step: 0.01},
-                fov: {min: 0, max: 180, step: 1}
+                alpha: { min: 0, max: 2 * Math.PI, step: 0.01 },
+                beta: { min: -Math.PI, max: Math.PI, step: 0.01 },
+                fov: { min: 0, max: 180, step: 1 }
             }
         },
         'FreeCamera': {
             type: BABYLON.FreeCamera,
-            properties: [
-                'position',
-                'rotation',
-                'rotationQuaternion',
-                'cameraDirection',
-                'cameraRotation',
-                'ellipsoid',
-                'applyGravity',
-                'angularSensibility',
-                'keysUp',
-                'keysDown',
-                'keysLeft',
-                'keysRight',
-                'checkCollisions',
-                'speed',
-                'lockedTarget',
-                'noRotationConstraint',
-                'fov',
-                'inertia',
-                'minZ', 'maxZ',
-                'layerMask',
-                'mode',
-                'orthoBottom',
-                'orthoTop',
-                'orthoLeft',
-                'orthoRight'
-            ],
             slider: {
-                fov: {min: 0, max: 180, step: 1}
+                fov: { min: 0, max: 180, step: 1 }
             }
         },
         'Scene': {
             type: BABYLON.Scene,
-            properties: [
-                'actionManager',
-                'activeCamera',
-                'ambientColor',
-                'clearColor',
-                'forceWireframe',
-                'forcePointsCloud',
-                'forceShowBoundingBoxes',
-                'useRightHandedSystem',
-                'hoverCursor',
-                'cameraToUseForPointers',
-                'fogEnabled',
-                'fogColor',
-                'fogDensity',
-                'fogStart',
-                'fogEnd',
-                'shadowsEnabled',
-                'lightsEnabled',
-                'collisionsEnabled',
-                'gravity',
-                'meshUnderPointer',
-                'pointerX',
-                'pointerY',
-                'uid'
-            ]
         },
         'Mesh': {
             type: BABYLON.Mesh,
-            properties: [
-                'name',
-                'position',
-                'rotation',
-                'rotationQuaternion',
-                'absolutePosition',
-                'material',
-                'actionManager',
-                'visibility',
-                'isVisible',
-                'isPickable',
-                'renderingGroupId',
-                'receiveShadows',
-                'renderOutline',
-                'outlineColor',
-                'outlineWidth',
-                'renderOverlay',
-                'overlayColor',
-                'overlayAlpha',
-                'hasVertexAlpha',
-                'useVertexColors',
-                'layerMask',
-                'alwaysSelectAsActiveMesh',
-                'ellipsoid',
-                'ellipsoidOffset',
-                'edgesWidth',
-                'edgesColor',
-                'checkCollisions',
-                'hasLODLevels'
-            ],
             format: (m: BABYLON.Mesh): string => { return m.name; },
             slider: {
-                visibility: {min: 0, max: 1, step: 0.1}
+                visibility: { min: 0, max: 1, step: 0.1 }
             }
         },
         'StandardMaterial': {
             type: BABYLON.StandardMaterial,
-            properties: [
-                'name',
-                'alpha',
-                'alphaMode',
-                'wireframe',
-                'isFrozen',
-                'zOffset',
-
-                'ambientColor',
-                'emissiveColor',
-                'diffuseColor',
-                'specularColor',
-
-                'specularPower',
-                'useAlphaFromDiffuseTexture',
-                'linkEmissiveWithDiffuse',
-                'useSpecularOverAlpha',
-
-                'diffuseFresnelParameters',
-                'opacityFresnelParameters',
-                'reflectionFresnelParameters',
-                'refractionFresnelParameters',
-                'emissiveFresnelParameters',
-
-                'diffuseTexture',
-                'emissiveTexture',
-                'specularTexture',
-                'ambientTexture',
-                'bumpTexture',
-                'lightMapTexture',
-                'opacityTexture',
-                'reflectionTexture',
-                'refractionTexture'
-            ],
             format: (mat: BABYLON.StandardMaterial): string => { return mat.name; },
             slider: {
-                alpha: {min: 0, max: 1, step: 0.01}
+                alpha: { min: 0, max: 1, step: 0.01 }
             }
         },
         'PBRMaterial': {
             type: BABYLON.PBRMaterial,
-            properties: [
-                'name',
-                'albedoColor',
-                'albedoTexture',
-
-                'opacityTexture',
-                'reflectionTexture',
-                'emissiveTexture',
-                'bumpTexture',
-                'lightmapTexture',
-
-                'opacityFresnelParameters',
-                'emissiveFresnelParameters',
-
-                'linkEmissiveWithAlbedo',
-                'useLightmapAsShadowmap',
-
-                'useAlphaFromAlbedoTexture',
-                'useSpecularOverAlpha',
-                'useAutoMicroSurfaceFromReflectivityMap',
-                'useLogarithmicDepth',
-
-                'reflectivityColor',
-                'reflectivityTexture',
-                'reflectionTexture',
-                'reflectionColor',
-
-                'alpha',
-                'linkRefractionWithTransparency',
-                'indexOfRefraction',
-
-                'microSurface',
-                'useMicroSurfaceFromReflectivityMapAlpha',
-
-                'directIntensity',
-                'emissiveIntensity',
-                'specularIntensity',
-                'environmentIntensity',
-                'cameraExposure',
-                'cameraContrast',
-                'cameraColorGradingTexture',
-                'cameraColorCurves'
-            ],
             slider: {
-                alpha: {min: 0, max: 1, step: 0.01}
+                alpha: { min: 0, max: 1, step: 0.01 }
             }
-        },  
+        },
         'PhysicsImpostor': {
-            type: BABYLON.PhysicsImpostor,
-            properties: [
-                'friction',
-                'mass',
-                'restitution',
-            ]
+            type: BABYLON.PhysicsImpostor
         },
     }
 

inspector/src/tabs/SceneTab.ts

@@ -1,55 +1,56 @@
 declare function Split(elements: HTMLElement[], options: any): void;
 module INSPECTOR {
-    
+
     export class SceneTab extends Tab {
-        
-        private _inspector : Inspector;
+
+        private _inspector: Inspector;
         /** The list of  channels/options that can be activated/deactivated */
-        private _actions   : HTMLDivElement;
+        private _actions: HTMLDivElement;
 
         /** The list of skeleton viewer */
-        private _skeletonViewers : Array<BABYLON.Debug.SkeletonViewer> = [];
+        private _skeletonViewers: Array<BABYLON.Debug.SkeletonViewer> = [];
 
         /** The detail of the scene */
-        private _detailsPanel : DetailPanel;        
-                
-        constructor(tabbar:TabBar, insp:Inspector) {
-            super(tabbar, 'Scene');            
-            this._inspector = insp;  
-            
+        private _detailsPanel: DetailPanel;
+
+        constructor(tabbar: TabBar, insp: Inspector) {
+            super(tabbar, 'Scene');
+            this._inspector = insp;
+
             // Build the properties panel : a div that will contains the tree and the detail panel
-            this._panel   = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
-            
+            this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
+
             this._actions = Helpers.CreateDiv('scene-actions', this._panel) as HTMLDivElement;
-           
+
             this._detailsPanel = new DetailPanel();
             this._panel.appendChild(this._detailsPanel.toHtml());
-            
+
             // build propertiesline
             let details = [];
-            for (let prop of PROPERTIES['Scene'].properties) {
-                details.push(new PropertyLine(new Property(prop, this._inspector.scene)));
+            let props = Helpers.GetAllLinesProperties(this._inspector.scene);
+            for (let prop of props) {
+                details.push(prop);
             }
             this._detailsPanel.details = details;
-            
-            Split([this._actions, this._detailsPanel.toHtml()], {  
-                blockDrag : this._inspector.popupMode,
-                sizes:[50, 50],
-                direction:'vertical'
-            });  
-            
+
+            Split([this._actions, this._detailsPanel.toHtml()], {
+                blockDrag: this._inspector.popupMode,
+                sizes: [50, 50],
+                direction: 'vertical'
+            });
+
             // Build actions
             {
-                
+
                 // Rendering mode
                 let title = Helpers.CreateDiv('actions-title', this._actions);
                 title.textContent = 'Rendering mode';
-                let point             = Helpers.CreateDiv('action-radio', this._actions);
-                let wireframe         = Helpers.CreateDiv('action-radio', this._actions);
-                let solid             = Helpers.CreateDiv('action-radio', this._actions);
-                point.textContent     = 'Point';
+                let point = Helpers.CreateDiv('action-radio', this._actions);
+                let wireframe = Helpers.CreateDiv('action-radio', this._actions);
+                let solid = Helpers.CreateDiv('action-radio', this._actions);
+                point.textContent = 'Point';
                 wireframe.textContent = 'Wireframe';
-                solid.textContent     = 'Solid';
+                solid.textContent = 'Solid';
                 if (this._inspector.scene.forcePointsCloud) {
                     point.classList.add('active');
                 } else if (this._inspector.scene.forceWireframe) {
@@ -58,64 +59,64 @@ module INSPECTOR {
                     solid.classList.add('active');
                 }
                 this._generateRadioAction([point, wireframe, solid]);
-                point.addEventListener('click', () => {this._inspector.scene.forcePointsCloud = true; this._inspector.scene.forceWireframe = false;});
-                wireframe.addEventListener('click', () => {this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = true; });
-                solid.addEventListener('click',  () => {this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = false; });
+                point.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = true; this._inspector.scene.forceWireframe = false; });
+                wireframe.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = true; });
+                solid.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = false; });
 
                 // Textures
                 title = Helpers.CreateDiv('actions-title', this._actions);
                 title.textContent = 'Textures channels';
-                this._generateActionLine('Diffuse Texture', BABYLON.StandardMaterial.DiffuseTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.DiffuseTextureEnabled = b });
-                this._generateActionLine('Ambient Texture', BABYLON.StandardMaterial.AmbientTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.AmbientTextureEnabled = b });
-                this._generateActionLine('Specular Texture', BABYLON.StandardMaterial.SpecularTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.SpecularTextureEnabled = b });
-                this._generateActionLine('Emissive Texture', BABYLON.StandardMaterial.EmissiveTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.EmissiveTextureEnabled = b });
-                this._generateActionLine('Bump Texture', BABYLON.StandardMaterial.BumpTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.BumpTextureEnabled = b });
-                this._generateActionLine('Opacity Texture', BABYLON.StandardMaterial.OpacityTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.OpacityTextureEnabled = b });
-                this._generateActionLine('Reflection Texture', BABYLON.StandardMaterial.ReflectionTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.ReflectionTextureEnabled = b });
-                this._generateActionLine('Refraction Texture', BABYLON.StandardMaterial.RefractionTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.RefractionTextureEnabled = b });
-                this._generateActionLine('ColorGrading', BABYLON.StandardMaterial.ColorGradingTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.ColorGradingTextureEnabled = b });
-                this._generateActionLine('Lightmap Texture', BABYLON.StandardMaterial.LightmapTextureEnabled, (b:boolean) => {BABYLON.StandardMaterial.LightmapTextureEnabled = b });
-                this._generateActionLine('Fresnel', BABYLON.StandardMaterial.FresnelEnabled, (b:boolean) => {BABYLON.StandardMaterial.FresnelEnabled = b });
+                this._generateActionLine('Diffuse Texture', BABYLON.StandardMaterial.DiffuseTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.DiffuseTextureEnabled = b });
+                this._generateActionLine('Ambient Texture', BABYLON.StandardMaterial.AmbientTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.AmbientTextureEnabled = b });
+                this._generateActionLine('Specular Texture', BABYLON.StandardMaterial.SpecularTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.SpecularTextureEnabled = b });
+                this._generateActionLine('Emissive Texture', BABYLON.StandardMaterial.EmissiveTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.EmissiveTextureEnabled = b });
+                this._generateActionLine('Bump Texture', BABYLON.StandardMaterial.BumpTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.BumpTextureEnabled = b });
+                this._generateActionLine('Opacity Texture', BABYLON.StandardMaterial.OpacityTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.OpacityTextureEnabled = b });
+                this._generateActionLine('Reflection Texture', BABYLON.StandardMaterial.ReflectionTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.ReflectionTextureEnabled = b });
+                this._generateActionLine('Refraction Texture', BABYLON.StandardMaterial.RefractionTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.RefractionTextureEnabled = b });
+                this._generateActionLine('ColorGrading', BABYLON.StandardMaterial.ColorGradingTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.ColorGradingTextureEnabled = b });
+                this._generateActionLine('Lightmap Texture', BABYLON.StandardMaterial.LightmapTextureEnabled, (b: boolean) => { BABYLON.StandardMaterial.LightmapTextureEnabled = b });
+                this._generateActionLine('Fresnel', BABYLON.StandardMaterial.FresnelEnabled, (b: boolean) => { BABYLON.StandardMaterial.FresnelEnabled = b });
 
                 // Options
                 title = Helpers.CreateDiv('actions-title', this._actions);
-                title.textContent = 'Options'; 
-                this._generateActionLine('Animations', this._inspector.scene.animationsEnabled, (b:boolean) => {this._inspector.scene.animationsEnabled = b });
-                this._generateActionLine('Collisions', this._inspector.scene.collisionsEnabled, (b:boolean) => {this._inspector.scene.collisionsEnabled = b });
-                this._generateActionLine('Fog', this._inspector.scene.fogEnabled, (b:boolean) => {this._inspector.scene.fogEnabled = b });
-                this._generateActionLine('Lens flares', this._inspector.scene.lensFlaresEnabled, (b:boolean) => {this._inspector.scene.lensFlaresEnabled = b });
-                this._generateActionLine('Lights', this._inspector.scene.lightsEnabled, (b:boolean) => {this._inspector.scene.lightsEnabled = b });
-                this._generateActionLine('Particles', this._inspector.scene.particlesEnabled, (b:boolean) => {this._inspector.scene.particlesEnabled = b });
-                this._generateActionLine('Post-processes', this._inspector.scene.postProcessesEnabled, (b:boolean) => {this._inspector.scene.postProcessesEnabled = b });
-                this._generateActionLine('Probes', this._inspector.scene.probesEnabled, (b:boolean) => {this._inspector.scene.probesEnabled = b });
-                this._generateActionLine('Procedural textures', this._inspector.scene.proceduralTexturesEnabled, (b:boolean) => {this._inspector.scene.proceduralTexturesEnabled = b });
-                this._generateActionLine('Render targets', this._inspector.scene.renderTargetsEnabled, (b:boolean) => {this._inspector.scene.renderTargetsEnabled = b });
-                this._generateActionLine('Shadows', this._inspector.scene.shadowsEnabled, (b:boolean) => {this._inspector.scene.shadowsEnabled = b });
-                this._generateActionLine('Skeletons', this._inspector.scene.skeletonsEnabled, (b:boolean) => {this._inspector.scene.skeletonsEnabled = b });
-                this._generateActionLine('Sprites', this._inspector.scene.spritesEnabled, (b:boolean) => {this._inspector.scene.spritesEnabled = b });
-                this._generateActionLine('Textures', this._inspector.scene.texturesEnabled, (b:boolean) => {this._inspector.scene.texturesEnabled = b });
-                
+                title.textContent = 'Options';
+                this._generateActionLine('Animations', this._inspector.scene.animationsEnabled, (b: boolean) => { this._inspector.scene.animationsEnabled = b });
+                this._generateActionLine('Collisions', this._inspector.scene.collisionsEnabled, (b: boolean) => { this._inspector.scene.collisionsEnabled = b });
+                this._generateActionLine('Fog', this._inspector.scene.fogEnabled, (b: boolean) => { this._inspector.scene.fogEnabled = b });
+                this._generateActionLine('Lens flares', this._inspector.scene.lensFlaresEnabled, (b: boolean) => { this._inspector.scene.lensFlaresEnabled = b });
+                this._generateActionLine('Lights', this._inspector.scene.lightsEnabled, (b: boolean) => { this._inspector.scene.lightsEnabled = b });
+                this._generateActionLine('Particles', this._inspector.scene.particlesEnabled, (b: boolean) => { this._inspector.scene.particlesEnabled = b });
+                this._generateActionLine('Post-processes', this._inspector.scene.postProcessesEnabled, (b: boolean) => { this._inspector.scene.postProcessesEnabled = b });
+                this._generateActionLine('Probes', this._inspector.scene.probesEnabled, (b: boolean) => { this._inspector.scene.probesEnabled = b });
+                this._generateActionLine('Procedural textures', this._inspector.scene.proceduralTexturesEnabled, (b: boolean) => { this._inspector.scene.proceduralTexturesEnabled = b });
+                this._generateActionLine('Render targets', this._inspector.scene.renderTargetsEnabled, (b: boolean) => { this._inspector.scene.renderTargetsEnabled = b });
+                this._generateActionLine('Shadows', this._inspector.scene.shadowsEnabled, (b: boolean) => { this._inspector.scene.shadowsEnabled = b });
+                this._generateActionLine('Skeletons', this._inspector.scene.skeletonsEnabled, (b: boolean) => { this._inspector.scene.skeletonsEnabled = b });
+                this._generateActionLine('Sprites', this._inspector.scene.spritesEnabled, (b: boolean) => { this._inspector.scene.spritesEnabled = b });
+                this._generateActionLine('Textures', this._inspector.scene.texturesEnabled, (b: boolean) => { this._inspector.scene.texturesEnabled = b });
+
                 // Audio
                 title = Helpers.CreateDiv('actions-title', this._actions);
-                title.textContent         = 'Audio'; 
-                let headphones            = Helpers.CreateDiv('action-radio', this._actions);
-                let normalSpeaker         = Helpers.CreateDiv('action-radio', this._actions);
-                this._generateActionLine('Disable audio', !this._inspector.scene.audioEnabled, (b:boolean) => {this._inspector.scene.audioEnabled = !b });
-                headphones.textContent    = 'Headphones';
-                normalSpeaker.textContent = 'Normal speakers';                
+                title.textContent = 'Audio';
+                let headphones = Helpers.CreateDiv('action-radio', this._actions);
+                let normalSpeaker = Helpers.CreateDiv('action-radio', this._actions);
+                this._generateActionLine('Disable audio', !this._inspector.scene.audioEnabled, (b: boolean) => { this._inspector.scene.audioEnabled = !b });
+                headphones.textContent = 'Headphones';
+                normalSpeaker.textContent = 'Normal speakers';
                 this._generateRadioAction([headphones, normalSpeaker]);
                 if (this._inspector.scene.headphone) {
                     headphones.classList.add('active');
                 } else {
                     normalSpeaker.classList.add('active');
                 }
-                headphones.addEventListener('click', () => {this._inspector.scene.headphone = true;});
-                normalSpeaker.addEventListener('click', () => {this._inspector.scene.headphone = false;});
-                
+                headphones.addEventListener('click', () => { this._inspector.scene.headphone = true; });
+                normalSpeaker.addEventListener('click', () => { this._inspector.scene.headphone = false; });
+
                 // Viewers
                 title = Helpers.CreateDiv('actions-title', this._actions);
                 title.textContent = 'Viewer';
-                this._generateActionLine('Skeletons', false, (b:boolean) => {
+                this._generateActionLine('Skeletons', false, (b: boolean) => {
                     if (b) {
                         for (var index = 0; index < this._inspector.scene.meshes.length; index++) {
                             var mesh = this._inspector.scene.meshes[index];
@@ -141,17 +142,17 @@ module INSPECTOR {
                         }
                         this._skeletonViewers = [];
                     }
-                });                
-            }            
+                });
+            }
         }
 
         /** Overrides super.dispose */
         public dispose() {
             this._detailsPanel.dispose();
         }
-        
+
         /** generates a div which correspond to an option that can be activated/deactivated */
-        private _generateActionLine(name:string, initValue:boolean, action:(b:boolean) => void) {
+        private _generateActionLine(name: string, initValue: boolean, action: (b: boolean) => void) {
             let div = Helpers.CreateDiv('scene-actions', this._actions);
             div.textContent = name;
             div.classList.add('action');
@@ -159,9 +160,9 @@ module INSPECTOR {
                 div.classList.add('active');
             }
             div.addEventListener('click', (e) => {
-                div.classList.toggle('active');      
+                div.classList.toggle('active');
                 let isActivated = div.classList.contains('active');
-                action(isActivated);          
+                action(isActivated);
             })
         }
 
@@ -169,7 +170,7 @@ module INSPECTOR {
          * Add a click action for all given elements : 
          * the clicked element is set as active, all others elements are deactivated
          */
-        private _generateRadioAction(arr:Array<HTMLElement>) {
+        private _generateRadioAction(arr: Array<HTMLElement>) {
             let active = (elem: HTMLElement, evt: any) => {
                 for (let e of arr) {
                     e.classList.remove('active');