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

Playground/babylonjs-loaders.js

@@ -0,0 +1 @@
+// Dummy file so Monaco will not complain

Playground/babylonjs-serializers.js

@@ -0,0 +1 @@
+// Dummy file so Monaco will not complain

Tools/Config/config.json

@@ -16,6 +16,7 @@
         "documentationFile": "documentation.d.ts",
         "intellisenseSources": [
             "../../dist/preview release/babylon.d.ts",
+            "../../dist/preview release/typedoc.d.ts",
             "../../dist/preview release/gui/babylon.gui.d.ts",
             "../../dist/preview release/loaders/babylonjs.loaders.d.ts",
             "../../dist/preview release/serializers/babylonjs.serializers.d.ts",

Viewer/src/loader/plugins/extendedMaterialLoaderPlugin.ts

@@ -1,7 +1,7 @@
 import { Material } from 'babylonjs/Materials/material';
 import { PBRMaterial } from 'babylonjs/Materials/PBR/pbrMaterial';
-import { Engine } from 'babylonjs/Engines/engine';
 import { ILoaderPlugin } from './loaderPlugin';
+import { Constants } from 'babylonjs/Engines/constants';
 
 /**
  * A (PBR) material will be extended using this function.
@@ -11,6 +11,6 @@ export class ExtendedMaterialLoaderPlugin implements ILoaderPlugin {
 
     public onMaterialLoaded(baseMaterial: Material) {
         var material = baseMaterial as PBRMaterial;
-        material.alphaMode = Engine.ALPHA_PREMULTIPLIED_PORTERDUFF;
+        material.alphaMode = Constants.ALPHA_PREMULTIPLIED_PORTERDUFF;
     }
 }

Viewer/src/managers/sceneManager.ts

@@ -35,6 +35,7 @@ import { Behavior } from 'babylonjs/Behaviors/behavior';
 import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
 import { Scene } from 'babylonjs/scene';
 import { ShadowGenerator } from 'babylonjs/Lights/Shadows/shadowGenerator';
+import { Constants } from 'babylonjs/Engines/constants';
 
 /**
  * This interface describes the structure of the variable sent with the configuration observables of the scene manager.
@@ -1458,17 +1459,17 @@ export class SceneManager {
         this._hdrSupport = enableHDR && !!(linearFloatTargets || linearHalfFloatTargets);
 
         if (linearHalfFloatTargets) {
-            this._defaultHighpTextureType = Engine.TEXTURETYPE_HALF_FLOAT;
+            this._defaultHighpTextureType = Constants.TEXTURETYPE_HALF_FLOAT;
             this._shadowGeneratorBias = 0.002;
         } else if (linearFloatTargets) {
-            this._defaultHighpTextureType = Engine.TEXTURETYPE_FLOAT;
+            this._defaultHighpTextureType = Constants.TEXTURETYPE_FLOAT;
             this._shadowGeneratorBias = 0.001;
         } else {
-            this._defaultHighpTextureType = Engine.TEXTURETYPE_UNSIGNED_INT;
+            this._defaultHighpTextureType = Constants.TEXTURETYPE_UNSIGNED_INT;
             this._shadowGeneratorBias = 0.001;
         }
 
-        this._defaultPipelineTextureType = this._hdrSupport ? this._defaultHighpTextureType : Engine.TEXTURETYPE_UNSIGNED_INT;
+        this._defaultPipelineTextureType = this._hdrSupport ? this._defaultHighpTextureType : Constants.TEXTURETYPE_UNSIGNED_INT;
     }
 
     /**

dist/gltf2Interface/babylon.glTF2Interface.d.ts

@@ -1,14 +1,8 @@
-/**
- * @ignoreChildren
- * @ignore
- */
 declare module "babylonjs-gltf2interface" {
     export = BABYLON.GLTF2;
 }
 /**
  * Module for glTF 2.0 Interface
- * @ignoreChildren
- * @ignore
  */
 declare module BABYLON.GLTF2 {
     /**

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

@@ -1,14 +1,8 @@
-/**
- * @ignoreChildren
- * @ignore
- */
 declare module "babylonjs-gltf2interface" {
     export = BABYLON.GLTF2;
 }
 /**
  * Module for glTF 2.0 Interface
- * @ignoreChildren
- * @ignore
  */
 declare module BABYLON.GLTF2 {
     /**
@@ -857,6 +851,7 @@ declare module BABYLON.GLTF2 {
 
     /**
      * The glTF validation results
+     * @ignore
      */
     interface IGLTFValidationResults {
         info: {
@@ -888,16 +883,23 @@ declare module BABYLON.GLTF2 {
      * The glTF validation options
      */
     interface IGLTFValidationOptions {
+        /** Uri to use */
         uri?: string;
+        /** Function used to load external resources */
         externalResourceFunction?: (uri: string) => Promise<Uint8Array>;
+        /** Boolean indicating that we need to validate accessor data */
         validateAccessorData?: boolean;
+        /** max number of issues allowed */
         maxIssues?: number;
+        /** Ignored issues */
         ignoredIssues?: Array<string>;
+        /** Value to override severy settings */
         severityOverrides?: Object;
     }
 
     /**
      * The glTF validator object
+     * @ignore
      */
     interface IGLTFValidator {
         validateBytes: (data: Uint8Array, options?: IGLTFValidationOptions) => Promise<IGLTFValidationResults>;

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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

@@ -2948,6 +2948,54 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+    * Class used to load GUI via XML.
+    */
+    export class XmlLoader {
+        private _nodes;
+        private _nodeTypes;
+        private _isLoaded;
+        private _objectAttributes;
+        private _parentClass;
+        /**
+        * Create a new xml loader
+        * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
+        */
+        constructor(parentClass?: null);
+        private _getChainElement;
+        private _getClassAttribute;
+        private _createGuiElement;
+        private _parseGrid;
+        private _parseElement;
+        private _prepareSourceElement;
+        private _parseElementsFromSource;
+        private _parseXml;
+        /**
+         * Gets if the loading has finished.
+         * @returns whether the loading has finished or not
+        */
+        isLoaded(): boolean;
+        /**
+         * Gets a loaded node / control by id.
+         * @param id the Controls id set in the xml
+         * @returns element of type Control
+        */
+        getNodeById(id: string): any;
+        /**
+         * Gets all loaded nodes / controls
+         * @returns Array of controls
+        */
+        getNodes(): any;
+        /**
+         * Initiates the xml layout loading
+         * @param xmlFile defines the xml layout to load
+         * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
+         * @param callback defines the callback called on layout load.
+         */
+        loadLayout(xmlFile: any, rootNode: any, callback: any): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
      * Class used to create containers for controls
      */
     export class Container3D extends Control3D {

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

@@ -3094,6 +3094,54 @@ declare module "babylonjs-gui/2D/adtInstrumentation" {
         dispose(): void;
     }
 }
+declare module "babylonjs-gui/2D/xmlLoader" {
+    /**
+    * Class used to load GUI via XML.
+    */
+    export class XmlLoader {
+        private _nodes;
+        private _nodeTypes;
+        private _isLoaded;
+        private _objectAttributes;
+        private _parentClass;
+        /**
+        * Create a new xml loader
+        * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
+        */
+        constructor(parentClass?: null);
+        private _getChainElement;
+        private _getClassAttribute;
+        private _createGuiElement;
+        private _parseGrid;
+        private _parseElement;
+        private _prepareSourceElement;
+        private _parseElementsFromSource;
+        private _parseXml;
+        /**
+         * Gets if the loading has finished.
+         * @returns whether the loading has finished or not
+        */
+        isLoaded(): boolean;
+        /**
+         * Gets a loaded node / control by id.
+         * @param id the Controls id set in the xml
+         * @returns element of type Control
+        */
+        getNodeById(id: string): any;
+        /**
+         * Gets all loaded nodes / controls
+         * @returns Array of controls
+        */
+        getNodes(): any;
+        /**
+         * Initiates the xml layout loading
+         * @param xmlFile defines the xml layout to load
+         * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
+         * @param callback defines the callback called on layout load.
+         */
+        loadLayout(xmlFile: any, rootNode: any, callback: any): void;
+    }
+}
 declare module "babylonjs-gui/2D/index" {
     export * from "babylonjs-gui/2D/controls/index";
     export * from "babylonjs-gui/2D/advancedDynamicTexture";
@@ -3103,6 +3151,7 @@ declare module "babylonjs-gui/2D/index" {
     export * from "babylonjs-gui/2D/multiLinePoint";
     export * from "babylonjs-gui/2D/style";
     export * from "babylonjs-gui/2D/valueAndUnit";
+    export * from "babylonjs-gui/2D/xmlLoader";
 }
 declare module "babylonjs-gui/3D/controls/container3D" {
     import { Nullable } from "babylonjs/types";
@@ -6834,6 +6883,54 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+    * Class used to load GUI via XML.
+    */
+    export class XmlLoader {
+        private _nodes;
+        private _nodeTypes;
+        private _isLoaded;
+        private _objectAttributes;
+        private _parentClass;
+        /**
+        * Create a new xml loader
+        * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
+        */
+        constructor(parentClass?: null);
+        private _getChainElement;
+        private _getClassAttribute;
+        private _createGuiElement;
+        private _parseGrid;
+        private _parseElement;
+        private _prepareSourceElement;
+        private _parseElementsFromSource;
+        private _parseXml;
+        /**
+         * Gets if the loading has finished.
+         * @returns whether the loading has finished or not
+        */
+        isLoaded(): boolean;
+        /**
+         * Gets a loaded node / control by id.
+         * @param id the Controls id set in the xml
+         * @returns element of type Control
+        */
+        getNodeById(id: string): any;
+        /**
+         * Gets all loaded nodes / controls
+         * @returns Array of controls
+        */
+        getNodes(): any;
+        /**
+         * Initiates the xml layout loading
+         * @param xmlFile defines the xml layout to load
+         * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
+         * @param callback defines the callback called on layout load.
+         */
+        loadLayout(xmlFile: any, rootNode: any, callback: any): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
      * Class used to create containers for controls
      */
     export class Container3D extends Control3D {

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -41274,7 +41274,7 @@ var NumericInputComponent = /** @class */ (function (_super) {
     function NumericInputComponent(props) {
         var _this = _super.call(this, props) || this;
         _this._localChange = false;
-        _this.state = { value: _this.props.value.toFixed(3) };
+        _this.state = { value: _this.props.value.toFixed(_this.props.precision !== undefined ? _this.props.precision : 3) };
         return _this;
     }
     NumericInputComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
@@ -41283,7 +41283,7 @@ var NumericInputComponent = /** @class */ (function (_super) {
             return true;
         }
         if (nextProps.value.toString() !== nextState.value) {
-            nextState.value = nextProps.value.toFixed(3);
+            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);
             return true;
         }
         return false;
@@ -42127,7 +42127,7 @@ var TextureLinkLineComponent = /** @class */ (function (_super) {
         babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Tools"].ReadFile(file, function (data) {
             var blob = new Blob([data], { type: "octet/stream" });
             var url = URL.createObjectURL(blob);
-            var texture = new babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Texture"](url, material.getScene());
+            var texture = new babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Texture"](url, material.getScene(), false, false);
             material[_this.props.propertyName] = texture;
             _this.forceUpdate();
         }, undefined, true);
@@ -44937,13 +44937,13 @@ var CommonMaterialPropertyGridComponent = /** @class */ (function (_super) {
             { label: "Alpha blend and test", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["PBRMaterial"].PBRMATERIAL_ALPHATESTANDBLEND },
         ];
         var alphaModeOptions = [
-            { label: "Combine", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_COMBINE },
-            { label: "One one", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_ONEONE },
-            { label: "Add", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_ADD },
-            { label: "Subtract", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_SUBTRACT },
-            { label: "Multiply", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_MULTIPLY },
-            { label: "Maximized", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_MAXIMIZED },
-            { label: "Pre-multiplied", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Engine"].ALPHA_PREMULTIPLIED },
+            { label: "Combine", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_COMBINE },
+            { label: "One one", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_ONEONE },
+            { label: "Add", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_ADD },
+            { label: "Subtract", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_SUBTRACT },
+            { label: "Multiply", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_MULTIPLY },
+            { label: "Maximized", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_MAXIMIZED },
+            { label: "Pre-multiplied", value: babylonjs_Materials_material__WEBPACK_IMPORTED_MODULE_2__["Constants"].ALPHA_PREMULTIPLIED },
         ];
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__["CustomPropertyGridComponent"], { globalState: this.props.globalState, target: material, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
@@ -45224,12 +45224,16 @@ var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
     PBRMaterialPropertyGridComponent.prototype.switchMetallicMode = function (state) {
         this.props.material.debugMode = state ? 62 : 0;
     };
+    PBRMaterialPropertyGridComponent.prototype.switchRoughnessMode = function (state) {
+        this.props.material.debugMode = state ? 63 : 0;
+    };
     PBRMaterialPropertyGridComponent.prototype.renderTextures = function (onDebugSelectionChangeObservable) {
         var _this = this;
         var material = this.props.material;
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "TEXTURES" },
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "CHANNELS" },
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { label: "Albedo", texture: material.albedoTexture, propertyName: "albedoTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { customDebugAction: function (state) { return _this.switchMetallicMode(state); }, label: "Metallic", texture: material.metallicTexture, propertyName: "metallicTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { customDebugAction: function (state) { return _this.switchRoughnessMode(state); }, label: "Roughness", texture: material.metallicTexture, propertyName: "metallicTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { label: "Reflection", texture: material.reflectionTexture, propertyName: "reflectionTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { label: "Refraction", texture: material.refractionTexture, propertyName: "refractionTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_10__["TextureLinkLineComponent"], { label: "Micro-surface", texture: material.microSurfaceTexture, propertyName: "microSurfaceTexture", material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }),
@@ -45942,7 +45946,9 @@ var MeshPropertyGridComponent = /** @class */ (function (_super) {
         var normals = mesh.getVerticesData(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["VertexBuffer"].NormalKind);
         var positions = mesh.getVerticesData(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["VertexBuffer"].PositionKind);
         var color = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["Color3"].White();
-        var size = mesh.getBoundingInfo().diagonalLength * 0.05;
+        var bbox = mesh.getBoundingInfo();
+        var diag = bbox.maximum.subtractToRef(bbox.minimum, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["TmpVectors"].Vector3[0]);
+        var size = diag.length() * 0.05;
         var lines = [];
         for (var i = 0; i < normals.length; i += 3) {
             var v1 = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["Vector3"].FromArray(positions, i);
@@ -47363,6 +47369,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _tools_gltfComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./tools/gltfComponent */ "./components/actionTabs/tabs/tools/gltfComponent.tsx");
 /* harmony import */ var babylonjs_serializers_glTF_2_0_index__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! babylonjs-serializers/glTF/2.0/index */ "babylonjs-serializers/glTF/2.0/index");
 /* harmony import */ var babylonjs_serializers_glTF_2_0_index__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(babylonjs_serializers_glTF_2_0_index__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../lines/floatLineComponent */ "./components/actionTabs/lines/floatLineComponent.tsx");
+/* harmony import */ var _lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lines/numericInputComponent */ "./components/actionTabs/lines/numericInputComponent.tsx");
+/* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../lines/checkBoxLineComponent */ "./components/actionTabs/lines/checkBoxLineComponent.tsx");
+
+
+
 
 
 
@@ -47380,6 +47392,8 @@ var ToolsTabComponent = /** @class */ (function (_super) {
     tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](ToolsTabComponent, _super);
     function ToolsTabComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this._screenShotSize = { precision: 1 };
+        _this._useWidthHeight = false;
         _this.state = { tag: "Record video" };
         return _this;
     }
@@ -47400,8 +47414,24 @@ var ToolsTabComponent = /** @class */ (function (_super) {
     ToolsTabComponent.prototype.captureScreenshot = function () {
         var scene = this.props.scene;
         if (scene.activeCamera) {
-            babylonjs_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_5__["Tools"].CreateScreenshot(scene.getEngine(), scene.activeCamera, { precision: 1.0 });
+            babylonjs_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_5__["Tools"].CreateScreenshot(scene.getEngine(), scene.activeCamera, this._screenShotSize);
+        }
+    };
+    ToolsTabComponent.prototype.captureRender = function () {
+        var scene = this.props.scene;
+        var oldScreenshotSize = {
+            height: this._screenShotSize.height,
+            width: this._screenShotSize.width,
+            precision: this._screenShotSize.precision
+        };
+        if (!this._useWidthHeight) {
+            this._screenShotSize.width = undefined;
+            this._screenShotSize.height = undefined;
+        }
+        if (scene.activeCamera) {
+            babylonjs_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_5__["Tools"].CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, this._screenShotSize);
         }
+        this._screenShotSize = oldScreenshotSize;
     };
     ToolsTabComponent.prototype.recordVideo = function () {
         var _this = this;
@@ -47474,6 +47504,18 @@ var ToolsTabComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "CAPTURE" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Screenshot", onClick: function () { return _this.captureScreenshot(); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: this.state.tag, onClick: function () { return _this.recordVideo(); } })),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "CAPTURE WITH RTT" },
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Capture", onClick: function () { return _this.captureRender(); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "vector3Line" },
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__["FloatLineComponent"], { label: "Precision", target: this._screenShotSize, propertyName: 'precision', onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_10__["CheckBoxLineComponent"], { label: "Use Width/Height", onSelect: function (value) {
+                            _this._useWidthHeight = value;
+                            _this.forceUpdate();
+                        }, isSelected: function () { return _this._useWidthHeight; } }),
+                    this._useWidthHeight &&
+                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
+                            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_9__["NumericInputComponent"], { label: "Width", precision: 0, step: 1, value: this._screenShotSize.width ? this._screenShotSize.width : 512, onChange: function (value) { return _this._screenShotSize.width = value; } }),
+                            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_9__["NumericInputComponent"], { label: "Height", precision: 0, step: 1, value: this._screenShotSize.height ? this._screenShotSize.height : 512, onChange: function (value) { return _this._screenShotSize.height = value; } })))),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "REPLAY" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Generate replay code", onClick: function () { return _this.exportReplay(); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "Reset", onClick: function () { return _this.resetReplay(); } })),

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

@@ -273,6 +273,7 @@ declare module INSPECTOR {
         value: number;
         step?: number;
         onChange: (value: number) => void;
+        precision?: number;
     }
     export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
         value: string;
@@ -614,6 +615,7 @@ declare module INSPECTOR {
         constructor(props: IPBRMaterialPropertyGridComponentProps);
         switchAmbientMode(state: boolean): void;
         switchMetallicMode(state: boolean): void;
+        switchRoughnessMode(state: boolean): void;
         renderTextures(onDebugSelectionChangeObservable: BABYLON.Observable<BABYLON.BaseTexture>): JSX.Element;
         render(): JSX.Element;
     }
@@ -1371,10 +1373,13 @@ declare module INSPECTOR {
 declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
+        private _screenShotSize;
+        private _useWidthHeight;
         constructor(props: IPaneComponentProps);
         componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
+        captureRender(): void;
         recordVideo(): void;
         shouldExport(node: BABYLON.Node): boolean;
         exportGLTF(): void;

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

@@ -311,6 +311,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/numericInputComp
         value: number;
         step?: number;
         onChange: (value: number) => void;
+        precision?: number;
     }
     export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
         value: string;
@@ -722,6 +723,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
         constructor(props: IPBRMaterialPropertyGridComponentProps);
         switchAmbientMode(state: boolean): void;
         switchMetallicMode(state: boolean): void;
+        switchRoughnessMode(state: boolean): void;
         renderTextures(onDebugSelectionChangeObservable: Observable<BaseTexture>): JSX.Element;
         render(): JSX.Element;
     }
@@ -1775,10 +1777,13 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/toolsTabComponent
     import { Node } from "babylonjs/node";
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
+        private _screenShotSize;
+        private _useWidthHeight;
         constructor(props: IPaneComponentProps);
         componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
+        captureRender(): void;
         recordVideo(): void;
         shouldExport(node: Node): boolean;
         exportGLTF(): void;
@@ -2586,6 +2591,7 @@ declare module INSPECTOR {
         value: number;
         step?: number;
         onChange: (value: number) => void;
+        precision?: number;
     }
     export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
         value: string;
@@ -2927,6 +2933,7 @@ declare module INSPECTOR {
         constructor(props: IPBRMaterialPropertyGridComponentProps);
         switchAmbientMode(state: boolean): void;
         switchMetallicMode(state: boolean): void;
+        switchRoughnessMode(state: boolean): void;
         renderTextures(onDebugSelectionChangeObservable: BABYLON.Observable<BABYLON.BaseTexture>): JSX.Element;
         render(): JSX.Element;
     }
@@ -3684,10 +3691,13 @@ declare module INSPECTOR {
 declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
+        private _screenShotSize;
+        private _useWidthHeight;
         constructor(props: IPaneComponentProps);
         componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
+        captureRender(): void;
         recordVideo(): void;
         shouldExport(node: BABYLON.Node): boolean;
         exportGLTF(): void;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19",
-        "babylonjs-gui": "4.1.0-alpha.19",
-        "babylonjs-loaders": "4.1.0-alpha.19",
-        "babylonjs-materials": "4.1.0-alpha.19",
-        "babylonjs-serializers": "4.1.0-alpha.19",
-        "babylonjs-gltf2interface": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20",
+        "babylonjs-gui": "4.1.0-alpha.20",
+        "babylonjs-loaders": "4.1.0-alpha.20",
+        "babylonjs-materials": "4.1.0-alpha.20",
+        "babylonjs-serializers": "4.1.0-alpha.20",
+        "babylonjs-gltf2interface": "4.1.0-alpha.20"
     },
     "devDependencies": {
         "@types/react": "~16.7.3",

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

@@ -1740,22 +1740,22 @@ var GLTFLoaderBase = /** @class */ (function () {
             var blendFunc = functions.blendFuncSeparate;
             if (blendFunc) {
                 if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_ALPHA && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_COMBINE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_COMBINE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ONEONE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ONEONE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ADD;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ADD;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_SUBTRACT;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_SUBTRACT;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].DST_COLOR && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MULTIPLY;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MULTIPLY;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MAXIMIZED;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MAXIMIZED;
                 }
             }
         }

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

@@ -1740,22 +1740,22 @@ var GLTFLoaderBase = /** @class */ (function () {
             var blendFunc = functions.blendFuncSeparate;
             if (blendFunc) {
                 if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_ALPHA && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_COMBINE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_COMBINE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ONEONE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ONEONE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ADD;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ADD;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_SUBTRACT;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_SUBTRACT;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].DST_COLOR && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MULTIPLY;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MULTIPLY;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MAXIMIZED;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MAXIMIZED;
                 }
             }
         }

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

@@ -3083,22 +3083,22 @@ var GLTFLoaderBase = /** @class */ (function () {
             var blendFunc = functions.blendFuncSeparate;
             if (blendFunc) {
                 if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_ALPHA && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_COMBINE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_COMBINE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ONEONE;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ONEONE;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_ADD;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_ADD;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_SUBTRACT;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_SUBTRACT;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].DST_COLOR && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ZERO && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MULTIPLY;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MULTIPLY;
                 }
                 else if (blendFunc[0] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].SRC_ALPHA && blendFunc[1] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE_MINUS_SRC_COLOR && blendFunc[2] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE && blendFunc[3] === _glTFLoaderInterfaces__WEBPACK_IMPORTED_MODULE_0__["EBlendingFunction"].ONE) {
-                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Engine"].ALPHA_MAXIMIZED;
+                    shaderMaterial.alphaMode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Constants"].ALPHA_MAXIMIZED;
                 }
             }
         }

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.1.0-alpha.19",
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs-gltf2interface": "4.1.0-alpha.20",
+        "babylonjs": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":167802,"sceneOnly":508463,"minGridMaterial":638613,"minStandardMaterial":767889}
+{"engineOnly":168524,"sceneOnly":510483,"minGridMaterial":640725,"minStandardMaterial":770199}

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -2828,7 +2828,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
             }
         }
         if (babylonStandardMaterial.alpha < 1.0 || babylonStandardMaterial.opacityTexture) {
-            if (babylonStandardMaterial.alphaMode === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].ALPHA_COMBINE) {
+            if (babylonStandardMaterial.alphaMode === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].ALPHA_COMBINE) {
                 glTFMaterial.alphaMode = "BLEND" /* BLEND */;
             }
             else {
@@ -2936,12 +2936,12 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         var _this = this;
         return new Promise(function (resolve, reject) {
             var hostingScene;
-            var textureType = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT;
+            var textureType = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT;
             var engine = _this._exporter._getLocalEngine();
             hostingScene = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Scene"](engine);
             // Create a temporary texture with the texture buffer data
-            var tempTexture = engine.createRawTexture(buffer, width, height, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTUREFORMAT_RGBA, false, true, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, null, textureType);
-            var postProcess = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["PostProcess"]("pass", "pass", null, null, 1, null, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, engine, false, undefined, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
+            var tempTexture = engine.createRawTexture(buffer, width, height, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTUREFORMAT_RGBA, false, true, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, null, textureType);
+            var postProcess = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["PostProcess"]("pass", "pass", null, null, 1, null, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, engine, false, undefined, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
             postProcess.getEffect().executeWhenCompiled(function () {
                 postProcess.onApply = function (effect) {
                     effect._bindTexture("textureSampler", tempTexture);
@@ -3512,7 +3512,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         return Promise.all(promises).then(function (result) { });
     };
     _GLTFMaterialExporter.prototype.getPixelsFromTexture = function (babylonTexture) {
-        var pixels = babylonTexture.textureType === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT ? babylonTexture.readPixels() : babylonTexture.readPixels();
+        var pixels = babylonTexture.textureType === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT ? babylonTexture.readPixels() : babylonTexture.readPixels();
         return pixels;
     };
     /**

dist/preview release/serializers/babylonjs.serializers.js

@@ -3006,7 +3006,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
             }
         }
         if (babylonStandardMaterial.alpha < 1.0 || babylonStandardMaterial.opacityTexture) {
-            if (babylonStandardMaterial.alphaMode === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].ALPHA_COMBINE) {
+            if (babylonStandardMaterial.alphaMode === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].ALPHA_COMBINE) {
                 glTFMaterial.alphaMode = "BLEND" /* BLEND */;
             }
             else {
@@ -3114,12 +3114,12 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         var _this = this;
         return new Promise(function (resolve, reject) {
             var hostingScene;
-            var textureType = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT;
+            var textureType = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT;
             var engine = _this._exporter._getLocalEngine();
             hostingScene = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Scene"](engine);
             // Create a temporary texture with the texture buffer data
-            var tempTexture = engine.createRawTexture(buffer, width, height, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTUREFORMAT_RGBA, false, true, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, null, textureType);
-            var postProcess = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["PostProcess"]("pass", "pass", null, null, 1, null, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, engine, false, undefined, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
+            var tempTexture = engine.createRawTexture(buffer, width, height, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTUREFORMAT_RGBA, false, true, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, null, textureType);
+            var postProcess = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["PostProcess"]("pass", "pass", null, null, 1, null, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Texture"].NEAREST_SAMPLINGMODE, engine, false, undefined, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT, undefined, null, false);
             postProcess.getEffect().executeWhenCompiled(function () {
                 postProcess.onApply = function (effect) {
                     effect._bindTexture("textureSampler", tempTexture);
@@ -3690,7 +3690,7 @@ var _GLTFMaterialExporter = /** @class */ (function () {
         return Promise.all(promises).then(function (result) { });
     };
     _GLTFMaterialExporter.prototype.getPixelsFromTexture = function (babylonTexture) {
-        var pixels = babylonTexture.textureType === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Engine"].TEXTURETYPE_UNSIGNED_INT ? babylonTexture.readPixels() : babylonTexture.readPixels();
+        var pixels = babylonTexture.textureType === babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Constants"].TEXTURETYPE_UNSIGNED_INT ? babylonTexture.readPixels() : babylonTexture.readPixels();
         return pixels;
     };
     /**

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "4.1.0-alpha.19",
+    "version": "4.1.0-alpha.20",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.19",
-        "babylonjs-gltf2interface": "4.1.0-alpha.19"
+        "babylonjs": "4.1.0-alpha.20",
+        "babylonjs-gltf2interface": "4.1.0-alpha.20"
     },
     "engines": {
         "node": "*"

dist/preview release/typedoc.d.ts

@@ -0,0 +1,12 @@
+
+/**
+ * @ignore
+ */
+declare module BABYLON.GLTF2.Exporter {
+}
+
+/**
+ * @ignore
+ */
+declare module BABYLON.GLTF1 {
+}

dist/preview release/what's new.md

@@ -13,8 +13,6 @@
   - WebXR webVR parity helpers (Vive, WMR, Oculus Rift) ([TrevorDev](https://github.com/TrevorDev))
 
 ## Updates
-- SpritePackedManager extends SpriteManager so that a sprite sheet with different size sprites can be used ([JohnK](https://github.com/BabylonJSGuide))
-- MultiPickSprite and multiPickSpriteWithRay added to sprites ([JohnK](https://github.com/BabylonJSGuide))
 
 ### General
 - Added support for dual shock gamepads ([Deltakosh](https://github.com/deltakosh/))
@@ -56,6 +54,7 @@
 - Texture channels are now displayed in grayscale ([Deltakosh](https://github.com/deltakosh/))
 - Ambiant and metallic maps are displayed correctly on PBR material even when using ORM packed texture ([Deltakosh](https://github.com/deltakosh/))
 - Added support for inspectable strings ([Deltakosh](https://github.com/deltakosh/))
+- Added support for CreateScreenshotUsingRenderTarget ([13djwright](https://github.com/13djwright/))
 
 ### Tools
 - Added `Tools.CreateScreenshotAsync` and `Tools.CreateScreenshotUsingRenderTargetAsync` ([mehmetoguzderin](https://github.com/mehmetoguzderin/))
@@ -87,6 +86,7 @@
 - Added `ShaderMaterial.setArray4` ([JonathanTron](https://github.com/JonathanTron/))
 - Added `scene.environmentIntensity` to control the IBL strength overall in a scene ([Sebavan](https://github.com/sebavan/))
 - Added support of image processing for `WaterMaterial` ([julien-moreau](https://github.com/julien-moreau))
+- Added `pbrBRDFConfiguration.useSpecularGlossinessInputEnergyConservation` to allow Specular-Workflow energy conservation to be turned off ([ColorDigital-PS](https://github.com/ColorDigital-PS)).
 
 ### ScreenshotTools
 - Added interface for argument `size` of screenshot methods ([Dok11](https://github.com/Dok11/))
@@ -96,10 +96,15 @@
 - Added `ISoundOptions.skipCodecCheck` to make `Sound` more flexible with URLs ([nbduke](https://github.com/nbduke))
 - Added `Scene.audioListenerPositionProvider` property, to enable setting custom position of audio listener ([Foxhoundn](https://github.com/foxhoundn))
 
+### Sprites
+- SpritePackedManager extends SpriteManager so that a sprite sheet with different size sprites can be used ([JohnK](https://github.com/BabylonJSGuide))
+- MultiPickSprite and multiPickSpriteWithRay added to sprites ([JohnK](https://github.com/BabylonJSGuide))
+
 ### Ray
 - Added `Ray.intersectsAxis` to translate screen to axis coordinates without checking collisions ([horusscope](https://github.com/horusscope))
 
 ### GUI
+- Added `xmlLoader` to load GUI layouts from XML ([null0924](https://github.com/null0924))
 - Added `disableMobilePrompt` option to InputText for OculusQuest(and other android base VR devices) ([shinyoshiaki](https://github.com/shinyoshiaki))
 - Added `Button.delegatePickingToChildren` to let buttons delegate hit testing to embedded controls ([Deltakosh](https://github.com/deltakosh/))
 - Added `Container.maxLayoutCycle` and `Container.logLayoutCycleErrors` to get more control over layout cycles ([Deltakosh](https://github.com/deltakosh/))
@@ -107,9 +112,13 @@
 - Added `_getSVGAttribs` functionality for loading multiple svg icons from an external svg file via icon id.([lockphase](https://github.com/lockphase/))
 
 
+
 ### Navigation Mesh
 - Added moveAlong function to cast a segment on mavmesh ([CedricGuillemet](https://github.com/CedricGuillemet/))
 
+### Node Material
+- Added Light intensity output to LightInformationBlock ([Drigax](https://github.com/drigax))
+
 ### Documentation
 - Added a note on shallow bounding of getBoundingInfo ([tibotiber](https://github.com/tibotiber))
 
@@ -141,8 +150,11 @@
 - Fixed `CubeTexture` to keep custom `filesList` when serializing/parsing ([julien-moreau](https://github.com/julien-moreau))
 - Fixed `StandardRenderingPipeline` to properly dispose post-processes from attached cameras ([julien-moreau](https://github.com/julien-moreau))
 - Fixed `VolumetricLightScattering` post-process to use a custom vertex shader instead of the depth vertex shader. ([julien-moreau](https://github.com/julien-moreau))
+- Added missing callback triggers within texture loaders ([PierreLeBlond](https://github.com/PierreLeBlond))
+- Fixed `TextureLinkLineComponent` to no longer invert inspector-loaded textures ([Drigax](https://github.com/drigax))
 
 ## Breaking changes
 - Setting mesh.scaling to a new vector will no longer automatically call forceUpdate (this should be done manually when needed) ([TrevorDev](https://github.com/TrevorDev))
 - `Tools.ExtractMinAndMaxIndexed` and `Tools.ExtractMinAndMax` are now ambiant functions (available on `BABYLON.extractMinAndMaxIndexed` and `BABYLON.extractMinAndMax`) ([Deltakosh](https://github.com/deltakosh/))
 - `Tools.QueueNewFrame` was removed in favor of `Engine.QueueNewFrame` ([Deltakosh](https://github.com/deltakosh/))
+- Removed external data from Engine (`addExternalData`, `getExternalData`, `getOrAddExternalDataWithFactory`, `removeExternalData`)  ([Deltakosh](https://github.com/deltakosh/))

gui/src/2D/advancedDynamicTexture.ts

@@ -18,6 +18,7 @@ import { Container } from "./controls/container";
 import { Control } from "./controls/control";
 import { Style } from "./style";
 import { Measure } from "./measure";
+import { Constants } from 'babylonjs/Engines/constants';
 /**
 * Interface used to define a control that can receive focus
 */
@@ -284,7 +285,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
    * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
    */
     constructor(name: string, width = 0, height = 0, scene: Nullable<Scene>, generateMipMaps = false, samplingMode = Texture.NEAREST_SAMPLINGMODE) {
-        super(name, { width: width, height: height }, scene, generateMipMaps, samplingMode, Engine.TEXTUREFORMAT_RGBA);
+        super(name, { width: width, height: height }, scene, generateMipMaps, samplingMode, Constants.TEXTUREFORMAT_RGBA);
         scene = this.getScene();
         if (!scene || !this._texture) {
             return;

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

@@ -5,6 +5,7 @@ import { Rectangle } from "./rectangle";
 import { Control } from "./control";
 import { TextBlock } from "./textBlock";
 import { Image } from "./image";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create 2D buttons
@@ -262,4 +263,5 @@ export class Button extends Rectangle {
 
         return result;
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Button"] = Button;

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

@@ -4,6 +4,7 @@ import { Vector2 } from "babylonjs/Maths/math";
 import { Control } from "./control";
 import { StackPanel } from "./stackPanel";
 import { TextBlock } from "./textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to represent a 2D checkbox
@@ -175,3 +176,4 @@ export class Checkbox extends Control {
         return panel;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Checkbox"] = Checkbox;

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

@@ -9,6 +9,7 @@ import { Button } from "./button";
 import { Grid } from "./grid";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 import { TextBlock } from "../controls/textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create color pickers */
 export class ColorPicker extends Control {
@@ -1512,4 +1513,5 @@ export class ColorPicker extends Control {
             }
         });
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;

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

@@ -4,6 +4,7 @@ import { Logger } from "babylonjs/Misc/logger";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class for 2D containers
@@ -456,4 +457,5 @@ export class Container extends Control {
             this.children[index].dispose();
         }
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Container"] = Container;

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

@@ -13,6 +13,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
 import { Style } from "../style";
 import { Matrix2D, Vector2WithInfo } from "../math2D";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class used for all 2D controls
@@ -1967,3 +1968,4 @@ export class Control {
         context.translate(-x, -y);
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Control"] = Control;

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

@@ -1,4 +1,5 @@
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to render a grid  */
 export class DisplayGrid extends Control {
@@ -218,4 +219,5 @@ export class DisplayGrid extends Control {
     protected _getTypeName(): string {
         return "DisplayGrid";
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.DisplayGrid"] = DisplayGrid;

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

@@ -1,6 +1,7 @@
 import { Container } from "./container";
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create 2D ellipse containers */
 export class Ellipse extends Container {
@@ -84,4 +85,5 @@ export class Ellipse extends Container {
 
         context.clip();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Ellipse"] = Ellipse;

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

@@ -5,6 +5,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { Tools } from 'babylonjs/Misc/tools';
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a 2D grid container
@@ -488,4 +489,5 @@ export class Grid extends Container {
 
         this._childControls = [];
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Grid"] = Grid;

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

@@ -4,6 +4,7 @@ import { Tools } from "babylonjs/Misc/tools";
 
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create 2D images
@@ -749,4 +750,5 @@ export class Image extends Control {
     public static readonly STRETCH_EXTEND = 3;
     /** NINE_PATCH */
     public static readonly STRETCH_NINE_PATCH = 4;
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Image"] = Image;

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

@@ -1,4 +1,5 @@
 import { InputText } from "./inputText";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a password control
@@ -12,3 +13,4 @@ export class InputPassword extends InputText {
         return txt;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.InputPassword"] = InputPassword;

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

@@ -8,6 +8,7 @@ import { Control } from "./control";
 import { IFocusableControl } from "../advancedDynamicTexture";
 import { ValueAndUnit } from "../valueAndUnit";
 import { VirtualKeyboard } from "./virtualKeyboard";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create input text control
@@ -1028,3 +1029,4 @@ export class InputText extends Control implements IFocusableControl {
         this.onKeyboardEventProcessedObservable.clear();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.InputText"] = InputText;

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

@@ -7,6 +7,7 @@ import { Scene } from "babylonjs/scene";
 import { Control } from "./control";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to render 2D lines */
 export class Line extends Control {
@@ -245,3 +246,4 @@ export class Line extends Control {
         }
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Line"] = Line;

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

@@ -4,6 +4,7 @@ import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
 import { Control } from "./control";
 import { MultiLinePoint } from "../multiLinePoint";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create multi line control
@@ -260,5 +261,5 @@ export class MultiLine extends Control {
 
         super.dispose();
     }
-
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.MultiLine"] = MultiLine;

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

@@ -4,6 +4,7 @@ import { Vector2 } from "babylonjs/Maths/math";
 import { Control } from "./control";
 import { StackPanel } from "./stackPanel";
 import { TextBlock } from "./textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create radio button controls
@@ -203,3 +204,4 @@ export class RadioButton extends Control {
         return panel;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.RadioButton"] = RadioButton;

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

@@ -1,5 +1,6 @@
 import { Container } from "./container";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create rectangle container */
 export class Rectangle extends Container {
@@ -132,4 +133,5 @@ export class Rectangle extends Container {
             context.clip();
         }
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Rectangle"] = Rectangle;

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -10,6 +10,7 @@ import { Measure } from "../../measure";
 import { AdvancedDynamicTexture } from "../../advancedDynamicTexture";
 import { _ScrollViewerWindow } from "./scrollViewerWindow";
 import { ScrollBar } from "../sliders/scrollBar";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to hold a viewer window and sliders in a grid
@@ -387,4 +388,5 @@ export class ScrollViewer extends Rectangle {
         }
         super.dispose();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ScrollViewer"] = ScrollViewer;

gui/src/2D/controls/sliders/imageBasedSlider.ts

@@ -1,6 +1,7 @@
 import { BaseSlider } from "./baseSlider";
 import { Measure } from "../../measure";
 import { Image } from "../image";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create slider controls based on images
@@ -160,4 +161,5 @@ export class ImageBasedSlider extends BaseSlider {
 
         context.restore();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ImageBasedSlider"] = ImageBasedSlider;

gui/src/2D/controls/sliders/slider.ts

@@ -1,4 +1,5 @@
 import { BaseSlider } from "./baseSlider";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create slider controls
@@ -238,3 +239,4 @@ export class Slider extends BaseSlider {
         context.restore();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Slider"] = Slider;

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

@@ -3,6 +3,7 @@ import { Tools } from "babylonjs/Misc/tools";
 import { Container } from "./container";
 import { Measure } from "../measure";
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a 2D stack panel container
@@ -192,4 +193,5 @@ export class StackPanel extends Container {
 
         super._postMeasure();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.StackPanel"] = StackPanel;

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

@@ -2,6 +2,7 @@ import { Observable } from "babylonjs/Misc/observable";
 import { Measure } from "../measure";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Enum that determines the text-wrapping mode to use.
@@ -462,3 +463,4 @@ export class TextBlock extends Control {
         this.onTextChangedObservable.clear();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.TextBlock"] = TextBlock;

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

@@ -6,6 +6,7 @@ import { Button } from "./button";
 import { Container } from "./container";
 import { TextBlock } from "./textBlock";
 import { InputText } from "./inputText";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to store key control properties
@@ -308,3 +309,5 @@ export class VirtualKeyboard extends StackPanel {
         return returnValue;
     }
 }
+
+_TypeStore.RegisteredTypes["BABYLON.GUI.VirtualKeyboard"] = VirtualKeyboard;

gui/src/2D/index.ts

@@ -6,4 +6,5 @@ export * from "./math2D";
 export * from "./measure";
 export * from "./multiLinePoint";
 export * from "./style";
-export * from "./valueAndUnit";
+export * from "./valueAndUnit";
+export * from "./xmlLoader";

gui/src/2D/xmlLoader.ts

@@ -0,0 +1,330 @@
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
+
+/**
+* Class used to load GUI via XML.
+*/
+export class XmlLoader {
+    private _nodes: any = {};
+
+    private _nodeTypes: any = {
+        element: 1,
+        attribute: 2,
+        text: 3
+    };
+
+    private _isLoaded: boolean = false;
+
+    private _objectAttributes: any = {
+        "textHorizontalAlignment": 1,
+        "textVerticalAlignment": 2,
+        "horizontalAlignment": 3,
+        "verticalAlignment": 4,
+        "stretch": 5,
+    };
+
+    private _parentClass: any;
+
+     /**
+     * Create a new xml loader
+     * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
+     */
+    constructor(parentClass = null) {
+        if (parentClass) {
+            this._parentClass = parentClass;
+        }
+    }
+
+    private _getChainElement(attributeValue: any): any {
+        let element = window;
+
+        if (this._parentClass) {
+            element = this._parentClass;
+        }
+        let value = attributeValue;
+        value = value.split(".");
+
+        for (let i = 0; i < value.length; i++) {
+            element = element[value[i]];
+        }
+        return element;
+
+    }
+
+    private _getClassAttribute(attributeName : string) : any {
+        const attribute = attributeName.split(".");
+        const className = _TypeStore.GetClass("BABYLON.GUI." + attribute[0]);
+        return className[attribute[1]];
+    }
+
+    private _createGuiElement(node: any, parent: any, linkParent: boolean = true): void {
+        try {
+            let className = _TypeStore.GetClass("BABYLON.GUI." + node.nodeName);
+            let guiNode = new className();
+
+            if (parent && linkParent) {
+                parent.addControl(guiNode);
+            }
+
+            for (let i = 0; i < node.attributes.length; i++) {
+
+                if (node.attributes[i].name.toLowerCase().includes("datasource")) {
+                    continue;
+                }
+
+                if (node.attributes[i].name.toLowerCase().includes("observable")) {
+
+                    let element = this._getChainElement(node.attributes[i].value);
+                    guiNode[node.attributes[i].name].add(element);
+
+                    continue;
+                } else if (node.attributes[i].name == "linkWithMesh") {
+                    if (this._parentClass) {
+                        guiNode.linkWithMesh(this._parentClass[node.attributes[i].value]);
+                    } else {
+                        guiNode.linkWithMesh(window[node.attributes[i].value]);
+                    }
+                } else if (node.attributes[i].value.startsWith("{{") && node.attributes[i].value.endsWith("}}")) {
+                    let element = this._getChainElement(node.attributes[i].value.substring(2, node.attributes[i].value.length - 2));
+                    guiNode[node.attributes[i].name] = element;
+                } else if (!this._objectAttributes[node.attributes[i].name]) {
+                    if (node.attributes[i].value == "true" || node.attributes[i].value == "false") {
+                        guiNode[node.attributes[i].name] = (node.attributes[i].value == 'true');
+                    } else {
+                        guiNode[node.attributes[i].name] = !isNaN(Number(node.attributes[i].value)) ? Number(node.attributes[i].value) : node.attributes[i].value;
+                    }
+                } else {
+                    guiNode[node.attributes[i].name] = this._getClassAttribute(node.attributes[i].value);
+                }
+            }
+
+            if (!node.attributes.getNamedItem("id")) {
+                this._nodes[node.nodeName + Object.keys(this._nodes).length + "_gen"] = guiNode;
+                return guiNode;
+            }
+
+            if (!this._nodes[node.attributes.getNamedItem("id").nodeValue]) {
+                this._nodes[node.attributes.getNamedItem("id").nodeValue] = guiNode;
+            } else {
+                throw "XmlLoader Exception : Duplicate ID, every element should have an unique ID attribute";
+            }
+            return guiNode;
+
+        } catch (e) {
+            throw "XmlLoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
+        }
+    }
+
+    private _parseGrid(node: any, guiNode: any, parent: any): void {
+        let width;
+        let height;
+        let columns;
+        let rows = node.children;
+        let cells;
+        let isPixel = false;
+        let cellNode;
+        let rowNumber = -1;
+        let columnNumber = -1;
+        let totalColumnsNumber = 0;
+
+        for (let i = 0; i < rows.length; i++) {
+            if (rows[i].nodeType != this._nodeTypes.element) {
+                continue;
+            }
+            if (rows[i].nodeName != "Row") {
+                throw "XmlLoader Exception : Expecting Row node, received " + rows[i].nodeName;
+            }
+            rowNumber += 1;
+            columns = rows[i].children;
+
+            if (!rows[i].attributes.getNamedItem("height")) {
+                throw "XmlLoader Exception : Height must be defined for grid rows";
+            }
+            height = Number(rows[i].attributes.getNamedItem("height").nodeValue);
+            isPixel = rows[i].attributes.getNamedItem("isPixel") ? JSON.parse(rows[i].attributes.getNamedItem("isPixel").nodeValue) : false;
+            guiNode.addRowDefinition(height, isPixel);
+
+            for (let j = 0; j < columns.length; j++) {
+                if (columns[j].nodeType != this._nodeTypes.element) {
+                    continue;
+                }
+                if (columns[j].nodeName != "Column") {
+                    throw "XmlLoader Exception : Expecting Column node, received " + columns[j].nodeName;
+                }
+                columnNumber += 1;
+                if (rowNumber > 0 && columnNumber > totalColumnsNumber) {
+                    throw "XmlLoader Exception : In the Grid element, the number of columns is defined in the first row, do not add more columns in the subsequent rows.";
+                }
+
+                if (rowNumber == 0) {
+                    if (!columns[j].attributes.getNamedItem("width")) {
+                        throw "XmlLoader Exception : Width must be defined for all the grid columns in the first row";
+                    }
+                    width = Number(columns[j].attributes.getNamedItem("width").nodeValue);
+                    isPixel = columns[j].attributes.getNamedItem("isPixel") ? JSON.parse(columns[j].attributes.getNamedItem("isPixel").nodeValue) : false;
+                    guiNode.addColumnDefinition(width, isPixel);
+                }
+
+                cells = columns[j].children;
+
+                for (let k = 0; k < cells.length; k++) {
+                    if (cells[k].nodeType != this._nodeTypes.element) {
+                        continue;
+                    }
+                    cellNode = this._createGuiElement(cells[k], guiNode, false);
+                    guiNode.addControl(cellNode, rowNumber, columnNumber);
+                    if (cells[k].firstChild) {
+                        this._parseXml(cells[k].firstChild, cellNode);
+                    }
+                }
+            }
+            if (rowNumber == 0) {
+                totalColumnsNumber = columnNumber;
+            }
+            columnNumber = -1;
+        }
+
+        if (node.nextSibling) {
+            this._parseXml(node.nextSibling, parent);
+        }
+    }
+
+    private _parseElement(node: any, guiNode: any, parent: any): void {
+
+        if (node.firstChild) {
+            this._parseXml(node.firstChild, guiNode);
+        }
+
+        if (node.nextSibling) {
+            this._parseXml(node.nextSibling, parent);
+        }
+    }
+
+    private _prepareSourceElement(node: any, guiNode: any, variable: any, source: any, iterator: any): void {
+        if (this._parentClass) {
+            this._parentClass[variable] = source[iterator];
+        } else {
+            window[variable] = source[iterator];
+        }
+
+        if (node.firstChild) {
+            this._parseXml(node.firstChild, guiNode, true);
+        }
+    }
+
+    private _parseElementsFromSource(node: any, guiNode: any, parent: any): void {
+        let dataSource = node.attributes.getNamedItem("dataSource").value;
+        if (!dataSource.includes(" in ")) {
+            throw "XmlLoader Exception : Malformed XML, Data Source must include an in";
+        } else {
+            let isArray = true;
+            let splittedSource = dataSource.split(" in ");
+            if (splittedSource.length < 2) {
+                throw "XmlLoader Exception : Malformed XML, Data Source must an iterator and a source";
+            }
+            let source = splittedSource[1];
+            if (source.startsWith("{") && source.endsWith("}")) {
+                isArray = false;
+            }
+
+            if (!isArray || (source.startsWith("[") && source.endsWith("]"))) {
+                source = source.substring(1, source.length - 1);
+            }
+
+            if (this._parentClass) {
+                source = this._parentClass[source];
+            } else {
+                source = window[source];
+            }
+
+            if (isArray) {
+                for (let i = 0; i < source.length; i++) {
+                    this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
+                }
+            } else {
+                for (let i in source) {
+                    this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
+                }
+            }
+
+            if (node.nextSibling) {
+                this._parseXml(node.nextSibling, parent);
+            }
+        }
+    }
+
+    private _parseXml(node: any, parent: any, generated: boolean = false): void {
+
+        if (node.nodeType != this._nodeTypes.element) {
+            if (node.nextSibling) {
+                this._parseXml(node.nextSibling, parent, generated);
+            }
+            return;
+        }
+
+        if (generated) {
+            node.setAttribute("id", parent.id + parent._children.length + 1);
+        }
+
+        let guiNode = this._createGuiElement(node, parent);
+
+        if (node.nodeName == "Grid") {
+            this._parseGrid(node, guiNode, parent);
+        } else if (!node.attributes.getNamedItem("dataSource")) {
+            this._parseElement(node, guiNode, parent);
+        } else {
+            this._parseElementsFromSource(node, guiNode, parent);
+        }
+    }
+
+    /**
+     * Gets if the loading has finished.
+     * @returns whether the loading has finished or not
+    */
+    public isLoaded(): boolean {
+        return this._isLoaded;
+    }
+
+    /**
+     * Gets a loaded node / control by id.
+     * @param id the Controls id set in the xml
+     * @returns element of type Control
+    */
+    public getNodeById(id: string): any {
+        return this._nodes[id];
+    }
+
+    /**
+     * Gets all loaded nodes / controls
+     * @returns Array of controls
+    */
+    public getNodes(): any {
+        return this._nodes;
+    }
+
+    /**
+     * Initiates the xml layout loading
+     * @param xmlFile defines the xml layout to load
+     * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
+     * @param callback defines the callback called on layout load.
+     */
+    public loadLayout(xmlFile: any, rootNode: any, callback: any): void {
+        let xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function(this: XmlLoader) {
+            if (xhttp.readyState == 4 && xhttp.status == 200) {
+                if (!xhttp.responseXML) {
+                    throw "XmlLoader Exception : XML file is malformed or corrupted.";
+                }
+
+                let xmlDoc = xhttp.responseXML.documentElement;
+                this._parseXml(xmlDoc.firstChild, rootNode);
+                this._isLoaded = true;
+                if (callback) {
+                    callback();
+                }
+            }
+        }.bind(this);
+
+        xhttp.open("GET", xmlFile, true);
+        xhttp.send();
+    }
+}

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

@@ -5,6 +5,7 @@ interface INumericInputComponentProps {
     value: number;
     step?: number;
     onChange: (value: number) => void;
+    precision?: number;
 }
 
 export class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {
@@ -17,7 +18,7 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
     constructor(props: INumericInputComponentProps) {
         super(props);
 
-        this.state = { value: this.props.value.toFixed(3) }
+        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) }
     }
 
     shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: { value: string }) {
@@ -27,7 +28,7 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
         }
 
         if (nextProps.value.toString() !== nextState.value) {
-            nextState.value = nextProps.value.toFixed(3);
+            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);
             return true;
         }
         return false;
@@ -52,7 +53,6 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
         this.props.onChange(valueAsNumber);
     }
 
-
     render() {
         return (
             <div className="numeric">

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

@@ -140,7 +140,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
             var blob = new Blob([data], { type: "octet/stream" });
             var url = URL.createObjectURL(blob);
 
-            let texture = new Texture(url, material.getScene());
+            let texture = new Texture(url, material.getScene(), false, false);
 
             (material as any)[this.props.propertyName!] = texture;
 

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Observable } from "babylonjs/Misc/observable";
 import { Material } from "babylonjs/Materials/material";
 import { PBRMaterial } from "babylonjs/Materials/PBR/pbrMaterial";
-import { Engine } from "babylonjs/Engines/engine";
+import { Constants } from "babylonjs/Engines/constants";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
 import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
@@ -43,13 +43,13 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
         ];
 
         var alphaModeOptions = [
-            { label: "Combine", value: Engine.ALPHA_COMBINE },
-            { label: "One one", value: Engine.ALPHA_ONEONE },
-            { label: "Add", value: Engine.ALPHA_ADD },
-            { label: "Subtract", value: Engine.ALPHA_SUBTRACT },
-            { label: "Multiply", value: Engine.ALPHA_MULTIPLY },
-            { label: "Maximized", value: Engine.ALPHA_MAXIMIZED },
-            { label: "Pre-multiplied", value: Engine.ALPHA_PREMULTIPLIED },
+            { label: "Combine", value: Constants.ALPHA_COMBINE },
+            { label: "One one", value: Constants.ALPHA_ONEONE },
+            { label: "Add", value: Constants.ALPHA_ADD },
+            { label: "Subtract", value: Constants.ALPHA_SUBTRACT },
+            { label: "Multiply", value: Constants.ALPHA_MULTIPLY },
+            { label: "Maximized", value: Constants.ALPHA_MAXIMIZED },
+            { label: "Pre-multiplied", value: Constants.ALPHA_PREMULTIPLIED },
         ];
 
         return (

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

@@ -15,10 +15,10 @@ import { Color3LineComponent } from '../../../lines/color3LineComponent';
 import { Vector3LineComponent } from '../../../lines/vector3LineComponent';
 import { Vector4LineComponent } from '../../../lines/vector4LineComponent';
 import { Vector2LineComponent } from '../../../lines/vector2LineComponent';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
 import { BaseTexture } from 'babylonjs/Materials/Textures/baseTexture';
 import { TextureLinkLineComponent } from '../../../lines/textureLinkLineComponent';
 import { SliderLineComponent } from '../../../lines/sliderLineComponent';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 
 interface INodeMaterialPropertyGridComponentProps {
     globalState: GlobalState;

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

@@ -38,13 +38,18 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
         this.props.material.debugMode = state ? 62 : 0;
     }
 
+    switchRoughnessMode(state: boolean) {
+        this.props.material.debugMode = state ? 63 : 0;
+    }
+
     renderTextures(onDebugSelectionChangeObservable: Observable<BaseTexture>) {
         const material = this.props.material;
 
         return (
-            <LineContainerComponent globalState={this.props.globalState} title="TEXTURES">
+            <LineContainerComponent globalState={this.props.globalState} title="CHANNELS">
                 <TextureLinkLineComponent label="Albedo" texture={material.albedoTexture} propertyName="albedoTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 <TextureLinkLineComponent customDebugAction={state => this.switchMetallicMode(state)} label="Metallic" texture={material.metallicTexture} propertyName="metallicTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent customDebugAction={state => this.switchRoughnessMode(state)} label="Roughness" texture={material.metallicTexture} propertyName="metallicTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} propertyName="reflectionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} propertyName="refractionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 <TextureLinkLineComponent label="Micro-surface" texture={material.microSurfaceTexture} propertyName="microSurfaceTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />

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

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
 import { Tools } from "babylonjs/Misc/tools";
-import { Color3, Vector3 } from "babylonjs/Maths/math";
+import { Color3, Vector3, TmpVectors } from "babylonjs/Maths/math";
 import { Mesh } from "babylonjs/Meshes/mesh";
 import { VertexBuffer } from "babylonjs/Meshes/buffer";
 import { LinesBuilder } from "babylonjs/Meshes/Builders/linesBuilder";
@@ -105,7 +105,9 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         var positions = mesh.getVerticesData(VertexBuffer.PositionKind);
 
         const color = Color3.White();
-        const size = mesh.getBoundingInfo().diagonalLength * 0.05;
+        const bbox = mesh.getBoundingInfo();
+        const diag = bbox.maximum.subtractToRef(bbox.minimum, TmpVectors.Vector3[0]);
+        const size = diag.length() * 0.05;
 
         var lines = [];
         for (var i = 0; i < normals!.length; i += 3) {

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

@@ -18,10 +18,15 @@ import { Mesh } from "babylonjs/Meshes/mesh";
 import { GLTFComponent } from "./tools/gltfComponent";
 
 import { GLTFData, GLTF2Export } from "babylonjs-serializers/glTF/2.0/index";
+import { FloatLineComponent } from '../lines/floatLineComponent';
+import { IScreenshotSize } from 'babylonjs/Misc/interfaces/screenshotSize';
+import { NumericInputComponent } from '../lines/numericInputComponent';
+import { CheckBoxLineComponent } from '../lines/checkBoxLineComponent';
 
 export class ToolsTabComponent extends PaneComponent {
     private _videoRecorder: Nullable<VideoRecorder>;
-
+    private _screenShotSize: IScreenshotSize = { precision: 1 };
+    private _useWidthHeight = false;
     constructor(props: IPaneComponentProps) {
         super(props);
 
@@ -47,8 +52,25 @@ export class ToolsTabComponent extends PaneComponent {
     captureScreenshot() {
         const scene = this.props.scene;
         if (scene.activeCamera) {
-            Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, { precision: 1.0 });
+            Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, this._screenShotSize);
+        }
+    }
+
+    captureRender() {
+        const scene = this.props.scene;
+        const oldScreenshotSize: IScreenshotSize = {
+            height: this._screenShotSize.height,
+            width: this._screenShotSize.width,
+            precision: this._screenShotSize.precision
+        };
+        if (!this._useWidthHeight) {
+            this._screenShotSize.width = undefined;
+            this._screenShotSize.height = undefined;
+        }
+        if (scene.activeCamera) {
+            Tools.CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, this._screenShotSize);
         }
+        this._screenShotSize = oldScreenshotSize;
     }
 
     recordVideo() {
@@ -137,6 +159,25 @@ export class ToolsTabComponent extends PaneComponent {
                     <ButtonLineComponent label="Screenshot" onClick={() => this.captureScreenshot()} />
                     <ButtonLineComponent label={this.state.tag} onClick={() => this.recordVideo()} />
                 </LineContainerComponent>
+                <LineContainerComponent globalState={this.props.globalState} title="CAPTURE WITH RTT">
+                    <ButtonLineComponent label="Capture" onClick={() => this.captureRender()} />
+                    <div className="vector3Line">
+                        <FloatLineComponent label="Precision" target={this._screenShotSize} propertyName='precision' onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <CheckBoxLineComponent label="Use Width/Height" onSelect={ value => {
+                            this._useWidthHeight = value;
+                            this.forceUpdate();
+                        }
+                        } isSelected={() => this._useWidthHeight} />
+                        {
+                        this._useWidthHeight &&
+                        <div className="secondLine">
+                            <NumericInputComponent label="Width" precision={0} step={1} value={this._screenShotSize.width ? this._screenShotSize.width : 512} onChange={value => this._screenShotSize.width = value} />
+                            <NumericInputComponent label="Height" precision={0} step={1} value={this._screenShotSize.height ? this._screenShotSize.height : 512} onChange={value => this._screenShotSize.height = value} />
+                        </div>
+                        }
+                        
+                    </div>
+                </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="REPLAY">
                     <ButtonLineComponent label="Generate replay code" onClick={() => this.exportReplay()} />
                     <ButtonLineComponent label="Reset" onClick={() => this.resetReplay()} />

loaders/src/glTF/1.0/glTFLoader.ts

@@ -28,11 +28,11 @@ import { DirectionalLight } from "babylonjs/Lights/directionalLight";
 import { PointLight } from "babylonjs/Lights/pointLight";
 import { SpotLight } from "babylonjs/Lights/spotLight";
 import { SceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
-import { Engine } from "babylonjs/Engines/engine";
 import { Scene } from "babylonjs/scene";
 
 import { GLTFUtils } from "./glTFLoaderUtils";
 import { GLTFFileLoader, IGLTFLoader, GLTFLoaderState, IGLTFLoaderData } from "../glTFFileLoader";
+import { Constants } from 'babylonjs/Engines/constants';
 
 /**
 * Tokenizer. Used for shaders compatibility
@@ -1561,22 +1561,22 @@ export class GLTFLoaderBase {
             var blendFunc = functions.blendFuncSeparate;
             if (blendFunc) {
                 if (blendFunc[0] === EBlendingFunction.SRC_ALPHA && blendFunc[1] === EBlendingFunction.ONE_MINUS_SRC_ALPHA && blendFunc[2] === EBlendingFunction.ONE && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_COMBINE;
+                    shaderMaterial.alphaMode = Constants.ALPHA_COMBINE;
                 }
                 else if (blendFunc[0] === EBlendingFunction.ONE && blendFunc[1] === EBlendingFunction.ONE && blendFunc[2] === EBlendingFunction.ZERO && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_ONEONE;
+                    shaderMaterial.alphaMode = Constants.ALPHA_ONEONE;
                 }
                 else if (blendFunc[0] === EBlendingFunction.SRC_ALPHA && blendFunc[1] === EBlendingFunction.ONE && blendFunc[2] === EBlendingFunction.ZERO && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_ADD;
+                    shaderMaterial.alphaMode = Constants.ALPHA_ADD;
                 }
                 else if (blendFunc[0] === EBlendingFunction.ZERO && blendFunc[1] === EBlendingFunction.ONE_MINUS_SRC_COLOR && blendFunc[2] === EBlendingFunction.ONE && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_SUBTRACT;
+                    shaderMaterial.alphaMode = Constants.ALPHA_SUBTRACT;
                 }
                 else if (blendFunc[0] === EBlendingFunction.DST_COLOR && blendFunc[1] === EBlendingFunction.ZERO && blendFunc[2] === EBlendingFunction.ONE && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_MULTIPLY;
+                    shaderMaterial.alphaMode = Constants.ALPHA_MULTIPLY;
                 }
                 else if (blendFunc[0] === EBlendingFunction.SRC_ALPHA && blendFunc[1] === EBlendingFunction.ONE_MINUS_SRC_COLOR && blendFunc[2] === EBlendingFunction.ONE && blendFunc[3] === EBlendingFunction.ONE) {
-                    shaderMaterial.alphaMode = Engine.ALPHA_MAXIMIZED;
+                    shaderMaterial.alphaMode = Constants.ALPHA_MAXIMIZED;
                 }
             }
         }

nodeEditor/src/blockTools.ts

@@ -1,4 +1,4 @@
-import { AlphaTestBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/alphaTestBlock';
+import { DiscardBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/discardBlock';
 import { BonesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/bonesBlock';
 import { InstancesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/instancesBlock';
 import { MorphTargetsBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/morphTargetsBlock';
@@ -23,14 +23,14 @@ import { CrossBlock } from 'babylonjs/Materials/Node/Blocks/crossBlock';
 import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
 import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
 import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { FresnelBlock } from 'babylonjs/Materials/Node/Blocks/fresnelBlock';
 import { LerpBlock } from 'babylonjs/Materials/Node/Blocks/lerpBlock';
 import { DivideBlock } from 'babylonjs/Materials/Node/Blocks/divideBlock';
 import { SubtractBlock } from 'babylonjs/Materials/Node/Blocks/subtractBlock';
 import { StepBlock } from 'babylonjs/Materials/Node/Blocks/stepBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/nodeMaterialSystemValues';
+import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
 import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
 import { OneMinusBlock } from 'babylonjs/Materials/Node/Blocks/oneMinusBlock';
 import { ViewDirectionBlock } from 'babylonjs/Materials/Node/Blocks/viewDirectionBlock';
@@ -41,9 +41,12 @@ import { PerturbNormalBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/per
 import { LengthBlock } from 'babylonjs/Materials/Node/Blocks/lengthBlock';
 import { DistanceBlock } from 'babylonjs/Materials/Node/Blocks/distanceBlock';
 import { NegateBlock } from 'babylonjs/Materials/Node/Blocks/negateBlock';
+import { PowBlock } from 'babylonjs/Materials/Node/Blocks/powBlock';
+import { Scene } from 'babylonjs/scene';
+import { RandomNumberBlock } from 'babylonjs/Materials/Node/Blocks/randomNumberBlock';
 
 export class BlockTools {
-    public static GetBlockFromString(data: string) {
+    public static GetBlockFromString(data: string, scene: Scene) {
         switch (data) {
             case "BonesBlock":
                 return new BonesBlock("Bones");
@@ -51,8 +54,8 @@ export class BlockTools {
                 return new InstancesBlock("Instances");
             case "MorphTargetsBlock":
                 return new MorphTargetsBlock("MorphTargets");
-            case "AlphaTestBlock":
-                return new AlphaTestBlock("AlphaTest");
+            case "DiscardBlock":
+                return new DiscardBlock("Discard");
             case "ImageProcessingBlock":
                 return new ImageProcessingBlock("ImageProcessing");
             case "ColorMergerBlock":
@@ -85,6 +88,8 @@ export class BlockTools {
                 return new CrossBlock("Cross");
             case "DotBlock":
                 return new DotBlock("Dot");
+            case "PowBlock":
+                return new PowBlock("Pow");
             case "MultiplyBlock":
                 return new MultiplyBlock("Multiply");
             case "TransformBlock":
@@ -110,7 +115,9 @@ export class BlockTools {
             case "ViewDirectionBlock":
                 return new ViewDirectionBlock("View direction");    
             case "LightInformationBlock":
-                return new LightInformationBlock("Light information");         
+                let lightInformationBlock = new LightInformationBlock("Light information");
+                lightInformationBlock.light = scene.lights.length ? scene.lights[0] : null;
+                return lightInformationBlock;
             case "MaxBlock":
                 return new MaxBlock("Max");       
             case "MinBlock":
@@ -122,7 +129,9 @@ export class BlockTools {
             case "NegateBlock":
                 return new NegateBlock("Negate");                                     
             case "PerturbNormalBlock":                                          
-                return new PerturbNormalBlock("Perturb normal");        
+                return new PerturbNormalBlock("Perturb normal");                     
+            case "RandomNumberBlock":                                          
+                return new RandomNumberBlock("Random number");         
             case "CosBlock": {
                 let cosBlock = new TrigonometryBlock("Cos");
                 cosBlock.operation = TrigonometryBlockOperations.Cos;
@@ -137,6 +146,11 @@ export class BlockTools {
                 let absBlock = new TrigonometryBlock("Abs");
                 absBlock.operation = TrigonometryBlockOperations.Abs;
                 return absBlock;
+            }            
+            case "SqrtBlock": {
+                let sqrtBlock = new TrigonometryBlock("Sqrt");
+                sqrtBlock.operation = TrigonometryBlockOperations.Sqrt;
+                return sqrtBlock;
             }
             case "ExpBlock": {
                 let expBlock = new TrigonometryBlock("Exp");

nodeEditor/src/components/diagram/input/inputNodePropertyComponent.tsx

@@ -4,9 +4,9 @@ import { Vector2PropertyTabComponent } from '../../propertyTab/properties/vector
 import { Vector3PropertyTabComponent } from '../../propertyTab/properties/vector3PropertyTabComponent';
 import { GlobalState } from '../../../globalState';
 import { InputNodeModel } from './inputNodeModel';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { OptionsLineComponent } from '../../../sharedComponents/optionsLineComponent';
-import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/nodeMaterialSystemValues';
+import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
 import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
 import { Color3PropertyTabComponent } from '../../propertyTab/properties/color3PropertyTabComponent';
 import { FloatPropertyTabComponent } from '../../propertyTab/properties/floatPropertyTabComponent';
@@ -172,7 +172,13 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
                     {
                         inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === AnimatedInputBlockTypes.None &&
                         <CheckBoxLineComponent label="Visible in the Inspector" target={inputBlock} propertyName="visibleInInspector"/>
-                    }                 
+                    }           
+                    {
+                        inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === AnimatedInputBlockTypes.None &&
+                        <CheckBoxLineComponent label="IsConstant" target={inputBlock} propertyName="isConstant"
+                            onValueChanged={() => this.props.globalState.onRebuildRequiredObservable.notifyObservers()}
+                        />
+                    }                             
                     <OptionsLineComponent label="Mode" options={modeOptions} target={inputBlock} 
                         noDirectUpdate={true}
                         getSelection={(block) => {

nodeEditor/src/components/diagram/input/inputNodeWidget.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { InputNodeModel } from './inputNodeModel';
 import { Nullable } from 'babylonjs/types';
 import { GlobalState } from '../../../globalState';
-import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/nodeMaterialSystemValues';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { Color3, Vector2, Vector3, Vector4 } from 'babylonjs/Maths/math';
 import { StringTools } from '../../../stringTools';
 import { PortHelper } from '../portHelper';

nodeEditor/src/components/diagram/portHelper.tsx

@@ -3,7 +3,7 @@ import { DefaultNodeModel } from './defaultNodeModel';
 import { DefaultPortModel } from './port/defaultPortModel';
 import { Nullable } from 'babylonjs/types';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { DefaultPortWidget } from './port/defaultPortWidget';
 import { BlockTools } from '../../blockTools';
 

nodeEditor/src/components/diagram/texture/texturePropertyTabComponent.tsx

@@ -12,6 +12,7 @@ import { CheckBoxLineComponent } from '../../../sharedComponents/checkBoxLineCom
 import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { SliderLineComponent } from '../../../sharedComponents/sliderLineComponent';
 import { FloatLineComponent } from '../../../sharedComponents/floatLineComponent';
+import { ButtonLineComponent } from '../../../sharedComponents/buttonLineComponent';
 
 interface ITexturePropertyTabComponentProps {
     globalState: GlobalState;
@@ -28,6 +29,19 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         this.state = {isEmbedded: !texture || texture.name.substring(0, 4) !== "http"};
     }
 
+    UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {isEmbedded: boolean}) {
+        let texture = nextProps.node.texture as BaseTexture;
+
+        nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+    }
+
+    private _generateRandomForCache() {
+        return 'xxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, (c) => {
+            var r = Math.random() * 10 | 0;
+            return r.toString();
+        });
+    }
+
 
     updateAftertextureLoad() {
         this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -93,6 +107,8 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
             url = texture.name;
         }
 
+        url = url.replace(/\?nocache=\d+/, "");
+        
         return (
             <div>
                 <LineContainerComponent title="GENERAL">
@@ -184,6 +200,10 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         !this.state.isEmbedded &&
                         <TextInputLineComponent label="Link" globalState={this.props.globalState} value={url} onChange={newUrl => this.replaceTextureWithUrl(newUrl)}/>
                     }
+                    {
+                        !this.state.isEmbedded && url &&
+                        <ButtonLineComponent label="Refresh" onClick={() => this.replaceTextureWithUrl(url + "?nocache=" + this._generateRandomForCache())}/>
+                    }
                 </LineContainerComponent>
             </div>
         );

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -26,17 +26,17 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         // Block types used to create the menu from
         const allBlocks = {
             Animation: ["BonesBlock", "MorphTargetsBlock"],
-            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock", "LengthBlock", "DistanceBlock", "NegateBlock"],
+            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock", "LengthBlock", "DistanceBlock", "NegateBlock", "RandomNumberBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "TimeBlock"],
             Interpolation: ["LerpBlock"],
             Matrices: ["Matrix", "WorldMatrixBlock", "WorldViewMatrixBlock", "WorldViewProjectionMatrixBlock", "ViewMatrixBlock", "ViewProjectionMatrixBlock", "ProjectionMatrixBlock"],
             Mesh_Attributes: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock"],
-            Output_Blocks: ["VertexOutputBlock", "FragmentOutputBlock", "AlphaTestBlock"],
+            Output_Blocks: ["VertexOutputBlock", "FragmentOutputBlock", "DiscardBlock"],
             Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
             Round: ["StepBlock", "RoundBlock", "CeilingBlock", "FloorBlock"],
             Scene_Attributes: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "LightInformationBlock", "ReflectionTextureBlock", "ViewDirectionBlock", "PerturbNormalBlock"],
-            Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block"],
+            Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block", "SqrtBlock", "PowBlock"],
             Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock"],
         }
 

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { GlobalState } from '../../globalState';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlay, faStop, faPalette } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faStop, faPalette, faCheckDouble, faSun, faLocationArrow } from '@fortawesome/free-solid-svg-icons';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { DataStorage } from '../../dataStorage';
 
@@ -30,6 +30,13 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent>
         this.props.globalState.onPreviewBackgroundChanged.notifyObservers();
     }
 
+    changeBackFaceCulling(value: boolean) {        
+        this.props.globalState.backFaceCulling = value;
+        DataStorage.StoreBoolean("BackFaceCulling", value);
+        this.props.globalState.onBackFaceCullingChanged.notifyObservers();
+        this.forceUpdate();
+    }
+
     render() {
         return (
             <>
@@ -37,15 +44,44 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent>
                     <canvas id="preview-canvas"/>
                 </div>                
                 <div id="preview-config-bar">
-                    <div onClick={() => this.changeAnimation()} className={"button"}>
+                    <div                     
+                        title="Turn-table animation"
+                        onClick={() => this.changeAnimation()} className={"button"}>
                         <FontAwesomeIcon icon={this.props.globalState.rotatePreview ? faStop : faPlay} />
                     </div>
-                    <div className={"button align"}>
+                    <div 
+                        title="Background color"
+                        className={"button align"}>
                         <label htmlFor="color-picker" id="color-picker-label">
                             <FontAwesomeIcon icon={faPalette} />
                         </label>
                         <input ref="color-picker" id="color-picker" type="color" onChange={evt => this.changeBackground(evt.target.value)} />
-                    </div>
+                    </div>                        
+                    <div
+                        title="Render without back face culling"
+                        onClick={() => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling)} className={"button" + (!this.props.globalState.backFaceCulling ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faCheckDouble} />
+                    </div>  
+                    <div
+                        title="Turn on/off hemispheric light"  
+                        onClick={() => {
+                            this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;                            
+                            DataStorage.StoreBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
+                            this.props.globalState.onLightUpdated.notifyObservers();
+                            this.forceUpdate();
+                        }} className={"button" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faSun} />
+                    </div>    
+                    <div
+                        title="Turn on/off direction light #0"  
+                        onClick={() => {
+                            this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;                       
+                            DataStorage.StoreBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
+                            this.props.globalState.onLightUpdated.notifyObservers();
+                            this.forceUpdate();
+                        }} className={"button" + (this.props.globalState.directionalLight0 ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faLocationArrow} />
+                    </div>                  
                 </div>
             </>
         );