Nightly

dist/preview release/babylon.max.js

@@ -15789,6 +15789,7 @@ var BABYLON;
                         excludeLoaders.push(loader);
                         BABYLON.Tools.Warn(loader.constructor.name + " failed when trying to load " + texture.url + ", falling back to the next supported loader");
                         _this.createTexture(urlArg, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture, undefined, undefined, excludeLoaders);
+                        return;
                     }
                 }
                 if (!customFallback) {
@@ -15797,6 +15798,7 @@ var BABYLON;
                     }
                     if (BABYLON.Tools.UseFallbackTexture) {
                         _this.createTexture(BABYLON.Tools.fallbackTexture, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture);
+                        return;
                     }
                 }
                 if (onError) {
@@ -16953,6 +16955,7 @@ var BABYLON;
                     if (fallbackUrl) {
                         excludeLoaders.push(loader);
                         _this.createCubeTexture(fallbackUrl, scene, files, noMipmap, onLoad, onError, format, extension, createPolynomials, lodScale, lodOffset, texture, excludeLoaders);
+                        return;
                     }
                 }
                 if (onError && request) {
@@ -60818,6 +60821,23 @@ var BABYLON;
             this.id = name;
             this.name = name;
         }
+        Object.defineProperty(BaseParticleSystem.prototype, "noiseTexture", {
+            /**
+             * Gets or sets a texture used to add random noise to particle positions
+             */
+            get: function () {
+                return this._noiseTexture;
+            },
+            set: function (value) {
+                if (this._noiseTexture === value) {
+                    return;
+                }
+                this._noiseTexture = value;
+                this._reset();
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(BaseParticleSystem.prototype, "isAnimationSheetEnabled", {
             /**
              * Gets or sets whether an animation sprite sheet is enabled or not on the particle system
@@ -61451,7 +61471,7 @@ var BABYLON;
                     }
                     particle.position.addInPlace(_this._scaledDirection);
                     // Noise
-                    if (noiseTextureData && noiseTextureSize) {
+                    if (noiseTextureData && noiseTextureSize && particle._randomNoiseCoordinates1) {
                         var fetchedColorR = _this._fetchR(particle._randomNoiseCoordinates1.x, particle._randomNoiseCoordinates1.y, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorG = _this._fetchR(particle._randomNoiseCoordinates1.z, particle._randomNoiseCoordinates2.x, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorB = _this._fetchR(particle._randomNoiseCoordinates2.y, particle._randomNoiseCoordinates2.z, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
@@ -70566,12 +70586,10 @@ var BABYLON;
             var vertexData = BABYLON.VertexData.CreatePlane(options);
             vertexData.applyToMesh(plane, options.updatable);
             if (options.sourcePlane) {
-                plane.translate(options.sourcePlane.normal, options.sourcePlane.d);
-                var product = Math.acos(BABYLON.Vector3.Dot(options.sourcePlane.normal, BABYLON.Axis.Z));
-                var vectorProduct = BABYLON.Vector3.Cross(BABYLON.Axis.Z, options.sourcePlane.normal);
-                if (vectorProduct.lengthSquared() > BABYLON.Epsilon) {
-                    plane.rotate(vectorProduct, product);
-                }
+                plane.translate(options.sourcePlane.normal, -options.sourcePlane.d);
+                var dot = BABYLON.Vector3.Dot(plane.position, options.sourcePlane.normal);
+                var flip = dot >= 0;
+                plane.lookAt(BABYLON.Vector3.Zero(), 0, flip ? Math.PI : 0, 0);
             }
             return plane;
         };

dist/preview release/babylon.no-module.max.js

@@ -15756,6 +15756,7 @@ var BABYLON;
                         excludeLoaders.push(loader);
                         BABYLON.Tools.Warn(loader.constructor.name + " failed when trying to load " + texture.url + ", falling back to the next supported loader");
                         _this.createTexture(urlArg, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture, undefined, undefined, excludeLoaders);
+                        return;
                     }
                 }
                 if (!customFallback) {
@@ -15764,6 +15765,7 @@ var BABYLON;
                     }
                     if (BABYLON.Tools.UseFallbackTexture) {
                         _this.createTexture(BABYLON.Tools.fallbackTexture, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture);
+                        return;
                     }
                 }
                 if (onError) {
@@ -16920,6 +16922,7 @@ var BABYLON;
                     if (fallbackUrl) {
                         excludeLoaders.push(loader);
                         _this.createCubeTexture(fallbackUrl, scene, files, noMipmap, onLoad, onError, format, extension, createPolynomials, lodScale, lodOffset, texture, excludeLoaders);
+                        return;
                     }
                 }
                 if (onError && request) {
@@ -60785,6 +60788,23 @@ var BABYLON;
             this.id = name;
             this.name = name;
         }
+        Object.defineProperty(BaseParticleSystem.prototype, "noiseTexture", {
+            /**
+             * Gets or sets a texture used to add random noise to particle positions
+             */
+            get: function () {
+                return this._noiseTexture;
+            },
+            set: function (value) {
+                if (this._noiseTexture === value) {
+                    return;
+                }
+                this._noiseTexture = value;
+                this._reset();
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(BaseParticleSystem.prototype, "isAnimationSheetEnabled", {
             /**
              * Gets or sets whether an animation sprite sheet is enabled or not on the particle system
@@ -61418,7 +61438,7 @@ var BABYLON;
                     }
                     particle.position.addInPlace(_this._scaledDirection);
                     // Noise
-                    if (noiseTextureData && noiseTextureSize) {
+                    if (noiseTextureData && noiseTextureSize && particle._randomNoiseCoordinates1) {
                         var fetchedColorR = _this._fetchR(particle._randomNoiseCoordinates1.x, particle._randomNoiseCoordinates1.y, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorG = _this._fetchR(particle._randomNoiseCoordinates1.z, particle._randomNoiseCoordinates2.x, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorB = _this._fetchR(particle._randomNoiseCoordinates2.y, particle._randomNoiseCoordinates2.z, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
@@ -70533,12 +70553,10 @@ var BABYLON;
             var vertexData = BABYLON.VertexData.CreatePlane(options);
             vertexData.applyToMesh(plane, options.updatable);
             if (options.sourcePlane) {
-                plane.translate(options.sourcePlane.normal, options.sourcePlane.d);
-                var product = Math.acos(BABYLON.Vector3.Dot(options.sourcePlane.normal, BABYLON.Axis.Z));
-                var vectorProduct = BABYLON.Vector3.Cross(BABYLON.Axis.Z, options.sourcePlane.normal);
-                if (vectorProduct.lengthSquared() > BABYLON.Epsilon) {
-                    plane.rotate(vectorProduct, product);
-                }
+                plane.translate(options.sourcePlane.normal, -options.sourcePlane.d);
+                var dot = BABYLON.Vector3.Dot(plane.position, options.sourcePlane.normal);
+                var flip = dot >= 0;
+                plane.lookAt(BABYLON.Vector3.Zero(), 0, flip ? Math.PI : 0, 0);
             }
             return plane;
         };

dist/preview release/es6.js

@@ -15756,6 +15756,7 @@ var BABYLON;
                         excludeLoaders.push(loader);
                         BABYLON.Tools.Warn(loader.constructor.name + " failed when trying to load " + texture.url + ", falling back to the next supported loader");
                         _this.createTexture(urlArg, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture, undefined, undefined, excludeLoaders);
+                        return;
                     }
                 }
                 if (!customFallback) {
@@ -15764,6 +15765,7 @@ var BABYLON;
                     }
                     if (BABYLON.Tools.UseFallbackTexture) {
                         _this.createTexture(BABYLON.Tools.fallbackTexture, noMipmap, invertY, scene, samplingMode, null, onError, buffer, texture);
+                        return;
                     }
                 }
                 if (onError) {
@@ -16920,6 +16922,7 @@ var BABYLON;
                     if (fallbackUrl) {
                         excludeLoaders.push(loader);
                         _this.createCubeTexture(fallbackUrl, scene, files, noMipmap, onLoad, onError, format, extension, createPolynomials, lodScale, lodOffset, texture, excludeLoaders);
+                        return;
                     }
                 }
                 if (onError && request) {
@@ -60785,6 +60788,23 @@ var BABYLON;
             this.id = name;
             this.name = name;
         }
+        Object.defineProperty(BaseParticleSystem.prototype, "noiseTexture", {
+            /**
+             * Gets or sets a texture used to add random noise to particle positions
+             */
+            get: function () {
+                return this._noiseTexture;
+            },
+            set: function (value) {
+                if (this._noiseTexture === value) {
+                    return;
+                }
+                this._noiseTexture = value;
+                this._reset();
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(BaseParticleSystem.prototype, "isAnimationSheetEnabled", {
             /**
              * Gets or sets whether an animation sprite sheet is enabled or not on the particle system
@@ -61418,7 +61438,7 @@ var BABYLON;
                     }
                     particle.position.addInPlace(_this._scaledDirection);
                     // Noise
-                    if (noiseTextureData && noiseTextureSize) {
+                    if (noiseTextureData && noiseTextureSize && particle._randomNoiseCoordinates1) {
                         var fetchedColorR = _this._fetchR(particle._randomNoiseCoordinates1.x, particle._randomNoiseCoordinates1.y, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorG = _this._fetchR(particle._randomNoiseCoordinates1.z, particle._randomNoiseCoordinates2.x, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
                         var fetchedColorB = _this._fetchR(particle._randomNoiseCoordinates2.y, particle._randomNoiseCoordinates2.z, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
@@ -70533,12 +70553,10 @@ var BABYLON;
             var vertexData = BABYLON.VertexData.CreatePlane(options);
             vertexData.applyToMesh(plane, options.updatable);
             if (options.sourcePlane) {
-                plane.translate(options.sourcePlane.normal, options.sourcePlane.d);
-                var product = Math.acos(BABYLON.Vector3.Dot(options.sourcePlane.normal, BABYLON.Axis.Z));
-                var vectorProduct = BABYLON.Vector3.Cross(BABYLON.Axis.Z, options.sourcePlane.normal);
-                if (vectorProduct.lengthSquared() > BABYLON.Epsilon) {
-                    plane.rotate(vectorProduct, product);
-                }
+                plane.translate(options.sourcePlane.normal, -options.sourcePlane.d);
+                var dot = BABYLON.Vector3.Dot(plane.position, options.sourcePlane.normal);
+                var flip = dot >= 0;
+                plane.lookAt(BABYLON.Vector3.Zero(), 0, flip ? Math.PI : 0, 0);
             }
             return plane;
         };

dist/preview release/inspector/babylon.inspector.d.ts

@@ -3,15 +3,13 @@
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-declare module INSPECTOR {
-    export class Inspector {
-        static OnSelectionChangeObservable: BABYLON.Observable<string>;
-        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static EarlyAttachToLoader(): void;
-        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-        static Hide(): void;
-    }
+export declare class Inspector {
+    static OnSelectionChangeObservable: BABYLON.Observable<string>;
+    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static EarlyAttachToLoader(): void;
+    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+    static Hide(): void;
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -6,17 +6,15 @@ declare module 'babylonjs-inspector' {
     export * from "babylonjs-inspector/inspector";
 }
 
-declare module 'babylonjs-inspector/inspector' {
-    import { Scene, Observable, IInspectorOptions } from "babylonjs";
-    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
-    export class Inspector {
-        static OnSelectionChangeObservable: Observable<string>;
-        static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static EarlyAttachToLoader(): void;
-        static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
-        static Hide(): void;
-    }
+import { Scene, Observable, IInspectorOptions } from "babylonjs";
+import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+export declare class Inspector {
+    static OnSelectionChangeObservable: Observable<string>;
+    static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static EarlyAttachToLoader(): void;
+    static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
+    static Hide(): void;
 }
 
 declare module 'babylonjs-inspector/components/propertyChangedEvent' {
@@ -34,15 +32,13 @@ declare module 'babylonjs-inspector/components/propertyChangedEvent' {
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-declare module INSPECTOR {
-    export class Inspector {
-        static OnSelectionChangeObservable: BABYLON.Observable<string>;
-        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-        static readonly IsVisible: boolean;
-        static EarlyAttachToLoader(): void;
-        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-        static Hide(): void;
-    }
+export declare class Inspector {
+    static OnSelectionChangeObservable: BABYLON.Observable<string>;
+    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+    static readonly IsVisible: boolean;
+    static EarlyAttachToLoader(): void;
+    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+    static Hide(): void;
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -2220,8 +2220,14 @@ var BABYLON;
                 this.logOpen(context + " " + (texture.name || ""));
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
+                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
+                var textureURL = null;
+                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
+                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                    textureURL = this._uniqueRootUrl + image.uri;
+                }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(null, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -2231,14 +2237,15 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
+                if (!textureURL) {
+                    promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
+                        var name = image.uri || _this._fileName + "#image" + image.index;
+                        var dataUrl = "data:" + _this._uniqueRootUrl + name;
+                        babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
+                    }));
+                }
                 babylonTexture.wrapU = samplerData.wrapU;
                 babylonTexture.wrapV = samplerData.wrapV;
-                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
-                    var name = image.uri || _this._fileName + "#image" + image.index;
-                    var dataUrl = "data:" + _this._uniqueRootUrl + name;
-                    babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
-                }));
                 assign(babylonTexture);
                 this.logClose();
                 return Promise.all(promises).then(function () {

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -4428,8 +4428,14 @@ var BABYLON;
                 this.logOpen(context + " " + (texture.name || ""));
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
+                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
+                var textureURL = null;
+                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
+                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                    textureURL = this._uniqueRootUrl + image.uri;
+                }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(null, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -4439,14 +4445,15 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
+                if (!textureURL) {
+                    promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
+                        var name = image.uri || _this._fileName + "#image" + image.index;
+                        var dataUrl = "data:" + _this._uniqueRootUrl + name;
+                        babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
+                    }));
+                }
                 babylonTexture.wrapU = samplerData.wrapU;
                 babylonTexture.wrapV = samplerData.wrapV;
-                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
-                    var name = image.uri || _this._fileName + "#image" + image.index;
-                    var dataUrl = "data:" + _this._uniqueRootUrl + name;
-                    babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
-                }));
                 assign(babylonTexture);
                 this.logClose();
                 return Promise.all(promises).then(function () {

dist/preview release/loaders/babylonjs.loaders.js

@@ -5490,8 +5490,14 @@ var BABYLON;
                 this.logOpen(context + " " + (texture.name || ""));
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
+                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
+                var textureURL = null;
+                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
+                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                    textureURL = this._uniqueRootUrl + image.uri;
+                }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(null, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -5501,14 +5507,15 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
+                if (!textureURL) {
+                    promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
+                        var name = image.uri || _this._fileName + "#image" + image.index;
+                        var dataUrl = "data:" + _this._uniqueRootUrl + name;
+                        babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
+                    }));
+                }
                 babylonTexture.wrapU = samplerData.wrapU;
                 babylonTexture.wrapV = samplerData.wrapV;
-                var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
-                    var name = image.uri || _this._fileName + "#image" + image.index;
-                    var dataUrl = "data:" + _this._uniqueRootUrl + name;
-                    babylonTexture.updateURL(dataUrl, new Blob([data], { type: image.mimeType }));
-                }));
                 assign(babylonTexture);
                 this.logClose();
                 return Promise.all(promises).then(function () {

inspector/src/components/actionTabs/actionTabs.scss

@@ -583,6 +583,7 @@
                         width: 256px;
                         margin-top: 5px;
                         margin-bottom: 5px;
+                        border: 2px solid rgba(255, 255, 255, 0.4);
                     }
                 }
 

inspector/src/components/actionTabs/lines/floatLineComponent.tsx

@@ -6,7 +6,6 @@ interface IFloatLineComponentProps {
     label: string,
     target: any,
     propertyName: string,
-    step?: number,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
     additionalClass?: string
 }
@@ -71,15 +70,13 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
     }
 
     render() {
-
-        const step = this.props.step !== undefined ? this.props.step : 0.1;
         return (
             <div className={this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine"}>
                 <div className="label">
                     {this.props.label}
                 </div>
                 <div className="value">
-                    <input className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt.target.value)} step={step} />
+                    <input className="numeric-input" value={this.state.value} onChange={evt => this.updateValue(evt.target.value)} />
                 </div>
             </div>
         );

inspector/src/components/actionTabs/tabs/propertyGrids/materials/commonMaterialPropertyGridComponent.tsx

@@ -58,13 +58,14 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
                     <SliderLineComponent label="Point size" target={material} propertyName="pointSize" minimum={0} maximum={100} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Z-offset" target={material} propertyName="zOffset" minimum={-10} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
-                <LineContainerComponent title="TRANSPARENCY">
+                <LineContainerComponent title="TRANSPARENCY">                
                     <SliderLineComponent label="Alpha" target={material} propertyName="alpha" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         (material as any).transparencyMode !== undefined &&
                         <OptionsLineComponent label="Transparency mode" options={transparencyModeOptions} target={material} propertyName="transparencyMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ transparencyMode: value })} />
                     }
                     <OptionsLineComponent label="Alpha mode" options={alphaModeOptions} target={material} propertyName="alphaMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ alphaMode: value })} />
+                    <CheckBoxLineComponent label="Separate culling pass" target={material} propertyName="separateCullingPass" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
             </div>
         );

inspector/src/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent.tsx

@@ -50,22 +50,22 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                 {
                     adtTexture &&
                     <LineContainerComponent title="ADVANCED TEXTURE PROPERTIES">
-                        <SliderLineComponent label="Render scale" minimum={0.1} maximum={5} target={adtTexture} propertyName="renderScale" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <SliderLineComponent label="Render scale" minimum={0.1} maximum={5} step={0.1} target={adtTexture} propertyName="renderScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Premultiply alpha" target={adtTexture} propertyName="premulAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                        <FloatLineComponent label="Ideal width" target={adtTexture} propertyName="idealWidth" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                        <FloatLineComponent label="Ideal height" target={adtTexture} propertyName="idealHeight" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <FloatLineComponent label="Ideal width" target={adtTexture} propertyName="idealWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <FloatLineComponent label="Ideal height" target={adtTexture} propertyName="idealHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Use smallest ideal" target={adtTexture} propertyName="useSmallestIdeal" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Render at ideal size" target={adtTexture} propertyName="renderAtIdealSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     </LineContainerComponent>
                 }
                 <LineContainerComponent title="TRANSFORM">
-                    <FloatLineComponent label="U offset" target={texture} propertyName="uOffset" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="V offset" target={texture} propertyName="vOffset" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="V scale" target={texture} propertyName="uScale" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="V scale" target={texture} propertyName="vScale" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="U angle" target={texture} propertyName="uAng" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="V angle" target={texture} propertyName="vAng" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent label="W angle" target={texture} propertyName="wAng" step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="U offset" target={texture} propertyName="uOffset" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="V offset" target={texture} propertyName="vOffset" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="V scale" target={texture} propertyName="uScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="V scale" target={texture} propertyName="vScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="U angle" target={texture} propertyName="uAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="V angle" target={texture} propertyName="vAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="W angle" target={texture} propertyName="wAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Clamp U" isSelected={() => texture.wrapU === BABYLON.Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapU = value ? BABYLON.Texture.CLAMP_ADDRESSMODE : BABYLON.Texture.WRAP_ADDRESSMODE} />
                     <CheckBoxLineComponent label="Clamp V" isSelected={() => texture.wrapV === BABYLON.Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapV = value ? BABYLON.Texture.CLAMP_ADDRESSMODE : BABYLON.Texture.WRAP_ADDRESSMODE} />
                 </LineContainerComponent>

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

@@ -8,6 +8,7 @@ import { Vector3LineComponent } from "../../../lines/vector3LineComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
 import { QuaternionLineComponent } from "../../../lines/quaternionLineComponent";
 import { AxesViewerComponent } from "./axesViewerComponent";
+import { FloatLineComponent } from "../../../lines/floatLineComponent";
 
 interface IMeshPropertyGridComponentProps {
     mesh: Mesh,
@@ -145,6 +146,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                 </LineContainerComponent>
                 <LineContainerComponent title="DISPLAY" closed={true}>
                     <SliderLineComponent label="Visibility" target={mesh} propertyName="visibility" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent label="Alpha index" target={mesh} propertyName="alphaIndex" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Receive shadows" target={mesh} propertyName="receiveShadows" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         mesh.isVerticesDataPresent(BABYLON.VertexBuffer.ColorKind) &&

inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx

@@ -122,7 +122,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
                 </LineContainerComponent>
                 <LineContainerComponent title="GLTF EXTENSIONS" closed={true}>
                     <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={value => extensionStates["MSFT_lod"].enabled = value} />
-                    <FloatLineComponent label="Maximum LODs" target={extensionStates["MSFT_lod"]} propertyName="maxLODsToLoad" step={1} additionalClass="gltf-extension-property" />
+                    <FloatLineComponent label="Maximum LODs" target={extensionStates["MSFT_lod"]} propertyName="maxLODsToLoad" additionalClass="gltf-extension-property" />
                     <CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={value => extensionStates["MSFT_minecraftMesh"].enabled = value} />
                     <CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={value => extensionStates["MSFT_sRGBFactors"].enabled = value} />
                     <CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={value => extensionStates["MSFT_audio_emitter"].enabled = value} />

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -135,10 +135,11 @@
 
             .text {
                 grid-column: 1;
-                display: flex;
-                align-items: center;
+                display: grid;
+                grid-template-columns: 20px 1fr;
 
                 .arrow {
+                    grid-column: 1;
                     margin-left: 0px;
                     color: white;
                     cursor: pointer;
@@ -146,9 +147,16 @@
                     margin-right: 6px;
                     opacity: 0.5;
                 }
+
+                .text-value {
+                    grid-column: 2;
+                    display: flex;
+                    align-items: center;
+                }
             }
 
-            .expandAll {
+            .expandAll {                
+                opacity: 0.5;
                 grid-column: 2;
             }
         }

inspector/src/components/sceneExplorer/treeItemComponent.tsx

@@ -28,9 +28,12 @@ class TreeItemExpandableHeaderComponent extends React.Component<ITreeItemExpanda
         return (
             <div className="expandableHeader">
                 <div className="text">
-                    <span className="arrow icon" onClick={() => this.props.onClick()}>
+                    <div className="arrow icon" onClick={() => this.props.onClick()}>
                         {chevron}
-                    </span> {this.props.label}
+                    </div> 
+                    <div className="text-value">
+                        {this.props.label}
+                    </div>
                 </div>
                 <div className="expandAll icon" onClick={() => this.expandAll()} title={this.props.isExpanded ? "Collapse all" : "Expand all"}>
                     {expandAll}
@@ -51,10 +54,15 @@ class TreeItemRootHeaderComponent extends React.Component<ITreeItemRootHeaderCom
 
     render() {
         return (
-            <div>
-                <span className="arrow icon">
-                    <FontAwesomeIcon icon={faBan} />
-                </span> {this.props.label}
+            <div className="expandableHeader">
+                <div className="text">
+                    <div className="arrow icon">
+                        <FontAwesomeIcon icon={faBan} />
+                    </div>
+                    <div className="text-value">
+                        {this.props.label}
+                    </div>
+                </div>
             </div>
         )
     }
@@ -151,7 +159,7 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
                 {
                     sortedItems.map(item => {
                         return (
-                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId} offset={this.props.offset + 2} selectedEntity={this.props.selectedEntity} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
+                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId} offset={this.props.offset + 1} selectedEntity={this.props.selectedEntity} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
                         );
                     })
                 }