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

Playground/css/index.css

@@ -330,7 +330,7 @@ body {
     float: right;
     vertical-align: top;
     height: 55px;
-    margin-right: 20px;
+    margin-right: 12px;
     font-size: 20px;
     color: #d5d2ca;
 }
@@ -774,4 +774,4 @@ body {
     .navbar .category .buttonJStoTS {
         width: 70px;
     }
-}
+}

Tools/Publisher/tasks/versionNumberManager.js

@@ -5,13 +5,13 @@ const colorConsole = require("../../NodeHelpers/colorConsole");
 
 // Global Variables.
 const config = require("../../Config/config.js");
-const enginePath = path.join(config.core.computed.mainDirectory, "Engines/engine.ts");
+const enginePath = path.join(config.core.computed.mainDirectory, "Engines/thinEngine.ts");
 
 /**
  * Get the version from the engine class for Babylon
  */
 function getEngineVersion() {
-    colorConsole.log("Get version from engine.ts", enginePath);
+    colorConsole.log("Get version from thinEngine.ts", enginePath);
     const engineContent = fs.readFileSync(enginePath).toString();
 
     const versionRegex = new RegExp(`public static get Version\\(\\): string {\\s*return "(\\S*)";\\s*}`, "gm");
@@ -23,7 +23,7 @@ function getEngineVersion() {
         return version;
     }
 
-    colorConsole.error("Version not found in engine.ts");
+    colorConsole.error("Version not found in thinEngine.ts");
     process.exit(1);
 }
 
@@ -31,7 +31,7 @@ function getEngineVersion() {
  * Update the version in the engine class for Babylon
  */
 function updateEngineVersion(newVersion) {
-    colorConsole.log("Updating version in engine.ts to: " + newVersion.green);
+    colorConsole.log("Updating version in thinEngine.ts to: " + newVersion.green);
     let engineContent = fs.readFileSync(enginePath).toString();
     let replaced = engineContent.replace(/(public static get Version\(\): string {\s*return ")(.*)(";\s*})/g, "$1" + newVersion + "$3");
     replaced = replaced.replace(/(public static get NpmPackage\(\): string {\s*return ")(.*)(";\s*})/g, "$1" + "babylonjs@" + newVersion + "$3");

Viewer/src/configuration/configuration.ts

@@ -1,6 +1,6 @@
-import { EngineOptions } from 'babylonjs/Engines/engine';
 import { ICameraConfiguration, IDefaultRenderingPipelineConfiguration, IGroundConfiguration, ILightConfiguration, IModelConfiguration, IObserversConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ISkyboxConfiguration, ITemplateConfiguration, IVRConfiguration } from './interfaces';
 import { IEnvironmentMapConfiguration } from './interfaces/environmentMapConfiguration';
+import { EngineOptions } from 'babylonjs/Engines/thinEngine';
 
 export function getConfigurationKey(key: string, configObject: any) {
     let splits = key.split('.');

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.20",
+    "version": "4.1.0-alpha.22",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/babylon.gui.js

@@ -13459,6 +13459,9 @@ var Button3D = /** @class */ (function (_super) {
                 this._facadeTexture.rootContainer.scaleY = this._contentScaleRatio;
                 this._facadeTexture.premulAlpha = true;
             }
+            else {
+                this._facadeTexture.rootContainer.clearControls();
+            }
             this._facadeTexture.addControl(value);
             this._applyFacade(this._facadeTexture);
         },

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.20",
+    "version": "4.1.0-alpha.22",
     "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.20"
+        "babylonjs": "4.1.0-alpha.22"
     },
     "engines": {
         "node": "*"

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

@@ -498,6 +498,16 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface ITextureLineComponentProps {
         texture: BABYLON.BaseTexture;
         width: number;
@@ -653,16 +663,6 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
-    export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
-    }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-        constructor(props: IButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module INSPECTOR {
     interface IScenePropertyGridComponentProps {
         globalState: GlobalState;
         scene: BABYLON.Scene;

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

@@ -581,6 +581,17 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/lines/buttonLineComponent" {
+    import * as React from "react";
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-inspector/components/actionTabs/lines/textureLineComponent" {
     import * as React from "react";
     import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
@@ -768,17 +779,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/fog
         render(): JSX.Element;
     }
 }
-declare module "babylonjs-inspector/components/actionTabs/lines/buttonLineComponent" {
-    import * as React from "react";
-    export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
-    }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-        constructor(props: IButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
 declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/scenePropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "babylonjs/Misc/observable";
@@ -2816,6 +2816,16 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface ITextureLineComponentProps {
         texture: BABYLON.BaseTexture;
         width: number;
@@ -2971,16 +2981,6 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
-    export interface IButtonLineComponentProps {
-        label: string;
-        onClick: () => void;
-    }
-    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-        constructor(props: IButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module INSPECTOR {
     interface IScenePropertyGridComponentProps {
         globalState: GlobalState;
         scene: BABYLON.Scene;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.1.0-alpha.20",
+    "version": "4.1.0-alpha.22",
     "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.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"
+        "babylonjs": "4.1.0-alpha.22",
+        "babylonjs-gui": "4.1.0-alpha.22",
+        "babylonjs-loaders": "4.1.0-alpha.22",
+        "babylonjs-materials": "4.1.0-alpha.22",
+        "babylonjs-serializers": "4.1.0-alpha.22",
+        "babylonjs-gltf2interface": "4.1.0-alpha.22"
     },
     "devDependencies": {
         "@types/react": "~16.7.3",

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

@@ -705,8 +705,7 @@ var OBJFileLoader = /** @class */ (function () {
             curPositionInIndices = 0;
         };
         /**
-         * Create triangles from polygons by recursion
-         * The best to understand how it works is to draw it in the same time you get the recursion.
+         * Create triangles from polygons
          * It is important to notice that a triangle is a polygon
          * We get 5 patterns of face defined in OBJ File :
          * facePattern1 = ["1","2","3","4","5","6"]
@@ -718,15 +717,11 @@ var OBJFileLoader = /** @class */ (function () {
          * @param face Array[String] The indices of elements
          * @param v Integer The variable to increment
          */
-        var getTriangles = function (face, v) {
+        var getTriangles = function (faces, v) {
             //Work for each element of the array
-            if (v + 1 < face.length) {
+            for (var faceIndex = v; faceIndex < faces.length - 1; faceIndex++) {
                 //Add on the triangle variable the indexes to obtain triangles
-                triangles.push(face[0], face[v], face[v + 1]);
-                //Incrementation for recursion
-                v += 1;
-                //Recursion
-                getTriangles(face, v);
+                triangles.push(faces[0], faces[faceIndex], faces[faceIndex + 1]);
             }
             //Result obtained after 2 iterations:
             //Pattern1 => triangle = ["1","2","3","1","3","4"];
@@ -1179,7 +1174,7 @@ var OBJFileLoader = /** @class */ (function () {
     /**
      * Defines if UVs are optimized by default during load.
      */
-    OBJFileLoader.OPTIMIZE_WITH_UV = false;
+    OBJFileLoader.OPTIMIZE_WITH_UV = true;
     /**
      * Invert model on y-axis (does a model scaling inversion)
      */

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

@@ -934,8 +934,7 @@ var OBJFileLoader = /** @class */ (function () {
             curPositionInIndices = 0;
         };
         /**
-         * Create triangles from polygons by recursion
-         * The best to understand how it works is to draw it in the same time you get the recursion.
+         * Create triangles from polygons
          * It is important to notice that a triangle is a polygon
          * We get 5 patterns of face defined in OBJ File :
          * facePattern1 = ["1","2","3","4","5","6"]
@@ -947,15 +946,11 @@ var OBJFileLoader = /** @class */ (function () {
          * @param face Array[String] The indices of elements
          * @param v Integer The variable to increment
          */
-        var getTriangles = function (face, v) {
+        var getTriangles = function (faces, v) {
             //Work for each element of the array
-            if (v + 1 < face.length) {
+            for (var faceIndex = v; faceIndex < faces.length - 1; faceIndex++) {
                 //Add on the triangle variable the indexes to obtain triangles
-                triangles.push(face[0], face[v], face[v + 1]);
-                //Incrementation for recursion
-                v += 1;
-                //Recursion
-                getTriangles(face, v);
+                triangles.push(faces[0], faces[faceIndex], faces[faceIndex + 1]);
             }
             //Result obtained after 2 iterations:
             //Pattern1 => triangle = ["1","2","3","1","3","4"];
@@ -1408,7 +1403,7 @@ var OBJFileLoader = /** @class */ (function () {
     /**
      * Defines if UVs are optimized by default during load.
      */
-    OBJFileLoader.OPTIMIZE_WITH_UV = false;
+    OBJFileLoader.OPTIMIZE_WITH_UV = true;
     /**
      * Invert model on y-axis (does a model scaling inversion)
      */

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.20",
+    "version": "4.1.0-alpha.22",
     "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.20",
-        "babylonjs": "4.1.0-alpha.20"
+        "babylonjs-gltf2interface": "4.1.0-alpha.22",
+        "babylonjs": "4.1.0-alpha.22"
     },
     "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.20",
+    "version": "4.1.0-alpha.22",
     "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.20"
+        "babylonjs": "4.1.0-alpha.22"
     },
     "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.20",
+    "version": "4.1.0-alpha.22",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-alpha.20"
+        "babylonjs": "4.1.0-alpha.22"
     },
     "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.20",
+    "version": "4.1.0-alpha.22",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":168524,"sceneOnly":510483,"minGridMaterial":640725,"minStandardMaterial":770199}
+{"thinEngineOnly":130582,"engineOnly":166444,"sceneOnly":510325,"minGridMaterial":640570,"minStandardMaterial":771729}

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.20",
+    "version": "4.1.0-alpha.22",
     "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.20"
+        "babylonjs": "4.1.0-alpha.22"
     },
     "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.20",
+    "version": "4.1.0-alpha.22",
     "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.20"
+        "babylonjs": "4.1.0-alpha.22"
     },
     "engines": {
         "node": "*"

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.20",
+    "version": "4.1.0-alpha.22",
     "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.20",
-        "babylonjs-gltf2interface": "4.1.0-alpha.20"
+        "babylonjs": "4.1.0-alpha.22",
+        "babylonjs-gltf2interface": "4.1.0-alpha.22"
     },
     "engines": {
         "node": "*"

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

@@ -20,6 +20,7 @@
 //   ../../../../../Tools/Gulp/babylonjs/Maths/math
 //   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/glTFFileLoader
 //   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/baseTexture
+//   ../../../../../Tools/Gulp/babylonjs/Engines/thinEngine
 //   ../../../../../Tools/Gulp/babylonjs/Misc/sceneOptimizer
 //   ../../../../../Tools/Gulp/babylonjs/Cameras/arcRotateCamera
 //   ../../../../../Tools/Gulp/babylonjs/Lights/light

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

@@ -21,6 +21,7 @@
 //   ../../../../../Tools/Gulp/babylonjs/Maths/math
 //   ../../../../../Tools/Gulp/babylonjs-loaders/glTF/glTFFileLoader
 //   ../../../../../Tools/Gulp/babylonjs/Materials/Textures/baseTexture
+//   ../../../../../Tools/Gulp/babylonjs/Engines/thinEngine
 //   ../../../../../Tools/Gulp/babylonjs/Misc/sceneOptimizer
 //   ../../../../../Tools/Gulp/babylonjs/Cameras/arcRotateCamera
 //   ../../../../../Tools/Gulp/babylonjs/Lights/light
@@ -1061,9 +1062,9 @@ declare module 'babylonjs-viewer/configuration' {
 }
 
 declare module 'babylonjs-viewer/configuration/configuration' {
-    import { EngineOptions } from 'babylonjs/Engines/engine';
     import { ICameraConfiguration, IDefaultRenderingPipelineConfiguration, IGroundConfiguration, ILightConfiguration, IModelConfiguration, IObserversConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ISkyboxConfiguration, ITemplateConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration/interfaces';
     import { IEnvironmentMapConfiguration } from 'babylonjs-viewer/configuration/interfaces/environmentMapConfiguration';
+    import { EngineOptions } from 'babylonjs/Engines/thinEngine';
     export function getConfigurationKey(key: string, configObject: any): any;
     export interface ViewerConfiguration {
             version?: string;

dist/preview release/what's new.md

@@ -121,6 +121,7 @@
 
 ### Documentation
 - Added a note on shallow bounding of getBoundingInfo ([tibotiber](https://github.com/tibotiber))
+- Added a typo fix to the ArcRotateCamera setPosition method description ([schm-dt](https://github.com/schm-dt))
 
 ## Bug fixes
 - Fixed Textblock line spacing evaluation when linespacing > 0 ([Deltakosh](https://github.com/deltakosh/))

gui/src/3D/controls/button3D.ts

@@ -124,6 +124,9 @@ export class Button3D extends AbstractButton3D {
             this._facadeTexture.rootContainer.scaleY = this._contentScaleRatio;
             this._facadeTexture.premulAlpha = true;
         }
+        else {
+            this._facadeTexture.rootContainer.clearControls();
+        }
 
         this._facadeTexture.addControl(value);
 

inspector/src/components/actionTabs/actionTabs.scss

@@ -292,7 +292,7 @@ $line-padding-left: 2px;
                     }
 
                     .file-upload {
-                        background: transparent;
+                        background: #222222;
                         border: 1px solid rgb(51, 122, 183);
                         margin: 0px 10px;
                         color:white;

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

@@ -8,6 +8,7 @@ import { PostProcess } from "babylonjs/PostProcesses/postProcess";
 import { PassPostProcess, PassCubePostProcess } from "babylonjs/PostProcesses/passPostProcess";
 
 import { GlobalState } from "../../../components/globalState";
+import { ButtonLineComponent } from './buttonLineComponent';
 
 interface ITextureLineComponentProps {
     texture: BaseTexture;
@@ -184,30 +185,38 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
         var texture = this.props.texture;
 
         return (
-            <div className="textureLine">
-                {
-                    !this.props.hideChannelSelect && texture.isCube &&
-                    <div className="control3D">
-                        <button className={this.state.face === 0 ? "px command selected" : "px command"} onClick={() => this.setState({ face: 0 })}>PX</button>
-                        <button className={this.state.face === 1 ? "nx command selected" : "nx command"} onClick={() => this.setState({ face: 1 })}>NX</button>
-                        <button className={this.state.face === 2 ? "py command selected" : "py command"} onClick={() => this.setState({ face: 2 })}>PY</button>
-                        <button className={this.state.face === 3 ? "ny command selected" : "ny command"} onClick={() => this.setState({ face: 3 })}>NY</button>
-                        <button className={this.state.face === 4 ? "pz command selected" : "pz command"} onClick={() => this.setState({ face: 4 })}>PZ</button>
-                        <button className={this.state.face === 5 ? "nz command selected" : "nz command"} onClick={() => this.setState({ face: 5 })}>NZ</button>
-                    </div>
-                }
+            <>
+                <div className="textureLine">
+                    {
+                        !this.props.hideChannelSelect && texture.isCube &&
+                        <div className="control3D">
+                            <button className={this.state.face === 0 ? "px command selected" : "px command"} onClick={() => this.setState({ face: 0 })}>PX</button>
+                            <button className={this.state.face === 1 ? "nx command selected" : "nx command"} onClick={() => this.setState({ face: 1 })}>NX</button>
+                            <button className={this.state.face === 2 ? "py command selected" : "py command"} onClick={() => this.setState({ face: 2 })}>PY</button>
+                            <button className={this.state.face === 3 ? "ny command selected" : "ny command"} onClick={() => this.setState({ face: 3 })}>NY</button>
+                            <button className={this.state.face === 4 ? "pz command selected" : "pz command"} onClick={() => this.setState({ face: 4 })}>PZ</button>
+                            <button className={this.state.face === 5 ? "nz command selected" : "nz command"} onClick={() => this.setState({ face: 5 })}>NZ</button>
+                        </div>
+                    }
+                    {
+                        !this.props.hideChannelSelect && !texture.isCube &&
+                        <div className="control">
+                            <button className={this.state.channel === ChannelToDisplay.R ? "red command selected" : "red command"} onClick={() => this.setState({ channel: ChannelToDisplay.R })}>R</button>
+                            <button className={this.state.channel === ChannelToDisplay.G ? "green command selected" : "green command"} onClick={() => this.setState({ channel: ChannelToDisplay.G })}>G</button>
+                            <button className={this.state.channel === ChannelToDisplay.B ? "blue command selected" : "blue command"} onClick={() => this.setState({ channel: ChannelToDisplay.B })}>B</button>
+                            <button className={this.state.channel === ChannelToDisplay.A ? "alpha command selected" : "alpha command"} onClick={() => this.setState({ channel: ChannelToDisplay.A })}>A</button>
+                            <button className={this.state.channel === ChannelToDisplay.All ? "all command selected" : "all command"} onClick={() => this.setState({ channel: ChannelToDisplay.All })}>ALL</button>
+                        </div>
+                    }
+                    <canvas ref="canvas" className="preview" />
+                </div>
                 {
-                    !this.props.hideChannelSelect && !texture.isCube &&
-                    <div className="control">
-                        <button className={this.state.channel === ChannelToDisplay.R ? "red command selected" : "red command"} onClick={() => this.setState({ channel: ChannelToDisplay.R })}>R</button>
-                        <button className={this.state.channel === ChannelToDisplay.G ? "green command selected" : "green command"} onClick={() => this.setState({ channel: ChannelToDisplay.G })}>G</button>
-                        <button className={this.state.channel === ChannelToDisplay.B ? "blue command selected" : "blue command"} onClick={() => this.setState({ channel: ChannelToDisplay.B })}>B</button>
-                        <button className={this.state.channel === ChannelToDisplay.A ? "alpha command selected" : "alpha command"} onClick={() => this.setState({ channel: ChannelToDisplay.A })}>A</button>
-                        <button className={this.state.channel === ChannelToDisplay.All ? "all command selected" : "all command"} onClick={() => this.setState({ channel: ChannelToDisplay.All })}>ALL</button>
-                    </div>
+                    texture.isRenderTarget &&
+                    <ButtonLineComponent label="Refresh" onClick={() => {
+                        this.updatePreview();
+                    }} />
                 }
-                <canvas ref="canvas" className="preview" />
-            </div>
+            </>
         );
     }
 }

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

@@ -23,6 +23,7 @@ import { GlobalState } from "../../../../../components/globalState";
 import { AdvancedDynamicTextureInstrumentation } from "babylonjs-gui/2D/adtInstrumentation";
 import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
 import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
+import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 
 interface ITexturePropertyGridComponentProps {
     texture: BaseTexture,
@@ -127,6 +128,26 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                     <TextLineComponent label="Width" value={texture.getSize().width.toString()} />
                     <TextLineComponent label="Height" value={texture.getSize().height.toString()} />
                     {
+                        texture.isRenderTarget &&
+                        <ButtonLineComponent label="Scale up" onClick={() => {
+                            let scene = texture.getScene()!;
+                            texture.scale(2);
+                            setTimeout(() => {
+                                this.props.globalState.onSelectionChangedObservable.notifyObservers(scene.getTextureByUniqueID(texture.uniqueId));
+                            });
+                        }} />
+                    }
+                    {
+                        texture.isRenderTarget &&
+                        <ButtonLineComponent label="Scale down" onClick={() => {                            
+                            let scene = texture.getScene()!;
+                            texture.scale(0.5);
+                            setTimeout(() => {
+                                this.props.globalState.onSelectionChangedObservable.notifyObservers(scene.getTextureByUniqueID(texture.uniqueId));
+                            });
+                        }} />
+                    }
+                    {
                         extension &&
                         <TextLineComponent label="File format" value={extension} />
                     }

loaders/src/OBJ/objFileLoader.ts

@@ -273,7 +273,7 @@ export class OBJFileLoader implements ISceneLoaderPluginAsync, ISceneLoaderPlugi
     /**
      * Defines if UVs are optimized by default during load.
      */
-    public static OPTIMIZE_WITH_UV = false;
+    public static OPTIMIZE_WITH_UV = true;
     /**
      * Invert model on y-axis (does a model scaling inversion)
      */
@@ -650,8 +650,7 @@ export class OBJFileLoader implements ISceneLoaderPluginAsync, ISceneLoaderPlugi
         };
 
         /**
-         * Create triangles from polygons by recursion
-         * The best to understand how it works is to draw it in the same time you get the recursion.
+         * Create triangles from polygons
          * It is important to notice that a triangle is a polygon
          * We get 5 patterns of face defined in OBJ File :
          * facePattern1 = ["1","2","3","4","5","6"]
@@ -663,15 +662,11 @@ export class OBJFileLoader implements ISceneLoaderPluginAsync, ISceneLoaderPlugi
          * @param face Array[String] The indices of elements
          * @param v Integer The variable to increment
          */
-        var getTriangles = (face: Array<string>, v: number) => {
+        var getTriangles = (faces: Array<string>, v: number) => {
             //Work for each element of the array
-            if (v + 1 < face.length) {
+            for (var faceIndex = v; faceIndex < faces.length - 1; faceIndex++) {
                 //Add on the triangle variable the indexes to obtain triangles
-                triangles.push(face[0], face[v], face[v + 1]);
-                //Incrementation for recursion
-                v += 1;
-                //Recursion
-                getTriangles(face, v);
+                triangles.push(faces[0], faces[faceIndex], faces[faceIndex + 1]);
             }
 
             //Result obtained after 2 iterations:

materialsLibrary/src/cell/cellMaterial.ts

@@ -3,7 +3,7 @@ import { serializeAsTexture, serialize, expandToProperty, serializeAsColor3, Ser
 import { Matrix } from "babylonjs/Maths/math.vector";
 import { Color3 } from "babylonjs/Maths/math.color";
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -18,6 +18,7 @@ import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 
 import "./cell.fragment";
 import "./cell.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class CellMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/fire/fireMaterial.ts

@@ -5,7 +5,6 @@ import { Color3 } from "babylonjs/Maths/math.color";
 import { Tags } from "babylonjs/Misc/tags";
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { Texture } from "babylonjs/Materials/Textures/texture";
-import { EffectFallbacks } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -20,6 +19,7 @@ import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 
 import "./fire.fragment";
 import "./fire.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class FireMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/fur/furMaterial.ts

@@ -7,7 +7,7 @@ import { Tags } from "babylonjs/Misc/tags";
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { Texture } from "babylonjs/Materials/Textures/texture";
 import { DynamicTexture } from "babylonjs/Materials/Textures/dynamicTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -18,6 +18,7 @@ import { SubMesh } from "babylonjs/Meshes/subMesh";
 import { Mesh } from "babylonjs/Meshes/mesh";
 import { Scene } from "babylonjs/scene";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 import "./fur.fragment";
 import "./fur.vertex";

materialsLibrary/src/gradient/gradientMaterial.ts

@@ -6,7 +6,7 @@ import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
-import { EffectCreationOptions, EffectFallbacks } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
 import { VertexBuffer } from "babylonjs/Meshes/buffer";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
@@ -17,6 +17,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./gradient.fragment";
 import "./gradient.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class GradientMaterialDefines extends MaterialDefines {
     public EMISSIVE = false;

materialsLibrary/src/lava/lavaMaterial.ts

@@ -4,7 +4,7 @@ import { Matrix } from "babylonjs/Maths/math.vector";
 import { Color3 } from "babylonjs/Maths/math.color";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -18,6 +18,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./lava.fragment";
 import "./lava.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class LavaMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/mix/mixMaterial.ts

@@ -5,7 +5,7 @@ import { Color3 } from "babylonjs/Maths/math.color";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { Texture } from "babylonjs/Materials/Textures/texture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -19,6 +19,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./mix.fragment";
 import "./mix.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class MixMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/normal/normalMaterial.ts

@@ -4,7 +4,7 @@ import { Matrix } from "babylonjs/Maths/math.vector";
 import { Color3 } from "babylonjs/Maths/math.color";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -18,6 +18,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./normal.fragment";
 import "./normal.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class NormalMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/shadowOnly/shadowOnlyMaterial.ts

@@ -4,7 +4,7 @@ import { Matrix } from "babylonjs/Maths/math.vector";
 import { Color3 } from "babylonjs/Maths/math.color";
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { IShadowLight } from "babylonjs/Lights/shadowLight";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -17,6 +17,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./shadowOnly.fragment";
 import "./shadowOnly.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class ShadowOnlyMaterialDefines extends MaterialDefines {
     public CLIPPLANE = false;

materialsLibrary/src/simple/simpleMaterial.ts

@@ -4,7 +4,7 @@ import { Matrix } from "babylonjs/Maths/math.vector";
 import { Color3 } from "babylonjs/Maths/math.color";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -18,6 +18,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./simple.fragment";
 import "./simple.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class SimpleMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/sky/skyMaterial.ts

@@ -3,7 +3,6 @@ import { serializeAsVector3, serialize, SerializationHelper } from "babylonjs/Mi
 import { Vector3, Matrix } from "babylonjs/Maths/math.vector";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -16,6 +15,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./sky.fragment";
 import "./sky.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 /** @hidden */
 class SkyMaterialDefines extends MaterialDefines {

materialsLibrary/src/terrain/terrainMaterial.ts

@@ -5,7 +5,7 @@ import { Color3 } from "babylonjs/Maths/math.color";
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { Texture } from "babylonjs/Materials/Textures/texture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -19,6 +19,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./terrain.fragment";
 import "./terrain.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class TerrainMaterialDefines extends MaterialDefines {
     public DIFFUSE = false;

materialsLibrary/src/triPlanar/triPlanarMaterial.ts

@@ -5,7 +5,7 @@ import { Color3 } from "babylonjs/Maths/math.color";
 
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
@@ -19,6 +19,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./triplanar.fragment";
 import "./triplanar.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class TriPlanarMaterialDefines extends MaterialDefines {
     public DIFFUSEX = false;

materialsLibrary/src/water/waterMaterial.ts

@@ -9,7 +9,7 @@ import { SmartArray } from "babylonjs/Misc/smartArray";
 import { Observer } from 'babylonjs/Misc/observable';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { RenderTargetTexture } from "babylonjs/Materials/Textures/renderTargetTexture";
-import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
+import { EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
 import { IImageProcessingConfigurationDefines, ImageProcessingConfiguration } from "babylonjs/Materials/imageProcessingConfiguration";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
@@ -25,6 +25,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 import "./water.fragment";
 import "./water.vertex";
+import { EffectFallbacks } from 'babylonjs/Materials/effectFallbacks';
 
 class WaterMaterialDefines extends MaterialDefines implements IImageProcessingConfigurationDefines {
     public BUMP = false;

nodeEditor/src/blockTools.ts

@@ -26,9 +26,11 @@ import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
 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 { NLerpBlock } from 'babylonjs/Materials/Node/Blocks/nLerpBlock';
 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 { SmoothStepBlock } from 'babylonjs/Materials/Node/Blocks/smoothStepBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
 import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
@@ -44,9 +46,16 @@ 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';
+import { ReplaceColorBlock } from 'babylonjs/Materials/Node/Blocks/replaceColorBlock';
+import { PosterizeBlock } from 'babylonjs/Materials/Node/Blocks/posterizeBlock';
+import { ArcTan2Block } from 'babylonjs/Materials/Node/Blocks/arcTan2Block';
+import { ReciprocalBlock } from 'babylonjs/Materials/Node/Blocks/reciprocalBlock';
+import { GradientBlock } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
+import { WaveBlock, WaveBlockKind } from 'babylonjs/Materials/Node/Blocks/waveBlock';
+import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 
 export class BlockTools {
-    public static GetBlockFromString(data: string, scene: Scene) {
+    public static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial) {
         switch (data) {
             case "BonesBlock":
                 return new BonesBlock("Bones");
@@ -69,7 +78,7 @@ export class BlockTools {
             case "TextureBlock":
                 return new TextureBlock("Texture");
             case "ReflectionTextureBlock":
-                return new ReflectionTextureBlock("Texture");                
+                return new ReflectionTextureBlock("Reflection texture");                
             case "LightBlock":
                 return new LightBlock("Lights");
             case "FogBlock":
@@ -104,14 +113,20 @@ export class BlockTools {
                 return new FresnelBlock("Fresnel");
             case "LerpBlock":
                 return new LerpBlock("Lerp");
+            case "NLerpBlock":
+                return new NLerpBlock("NLerp");
             case "DivideBlock":
                 return new DivideBlock("Divide");
             case "SubtractBlock":
                 return new SubtractBlock("Subtract"); 
             case "StepBlock":
                 return new StepBlock("Step");        
+            case "SmoothStepBlock":
+                return new SmoothStepBlock("Smooth step");        
             case "OneMinusBlock":
-                return new OneMinusBlock("One minus");      
+                return new OneMinusBlock("One minus");          
+            case "ReciprocalBlock":
+                return new ReciprocalBlock("Reciprocal");    
             case "ViewDirectionBlock":
                 return new ViewDirectionBlock("View direction");    
             case "LightInformationBlock":
@@ -132,6 +147,14 @@ export class BlockTools {
                 return new PerturbNormalBlock("Perturb normal");                     
             case "RandomNumberBlock":                                          
                 return new RandomNumberBlock("Random number");         
+            case "ReplaceColorBlock":                                          
+                return new ReplaceColorBlock("Replace color");      
+            case "PosterizeBlock":                                          
+                return new PosterizeBlock("Posterize");                              
+            case "ArcTan2Block":                                          
+                return new ArcTan2Block("ArcTan2");                            
+            case "GradientBlock":                                          
+                return new GradientBlock("Gradient");            
             case "CosBlock": {
                 let cosBlock = new TrigonometryBlock("Cos");
                 cosBlock.operation = TrigonometryBlockOperations.Cos;
@@ -152,6 +175,41 @@ export class BlockTools {
                 sqrtBlock.operation = TrigonometryBlockOperations.Sqrt;
                 return sqrtBlock;
             }
+            case "ArcCosBlock": {
+                let acosBlock = new TrigonometryBlock("ArcCos");
+                acosBlock.operation = TrigonometryBlockOperations.ArcCos;
+                return acosBlock;
+            }
+            case "ArcSinBlock": {
+                let asinBlock = new TrigonometryBlock("ArcSin");
+                asinBlock.operation = TrigonometryBlockOperations.ArcSin;
+                return asinBlock;
+            }
+            case "TanBlock": {
+                let tanBlock = new TrigonometryBlock("Tan");
+                tanBlock.operation = TrigonometryBlockOperations.Tan;
+                return tanBlock;
+            }
+            case "ArcTanBlock": {
+                let atanBlock = new TrigonometryBlock("ArcTan");
+                atanBlock.operation = TrigonometryBlockOperations.ArcTan;
+                return atanBlock;
+            }
+            case "FractBlock": {
+                let fractBlock = new TrigonometryBlock("Fract");
+                fractBlock.operation = TrigonometryBlockOperations.Fract;
+                return fractBlock;
+            }
+            case "SignBlock": {
+                let signBlock = new TrigonometryBlock("Sign");
+                signBlock.operation = TrigonometryBlockOperations.Sign;
+                return signBlock;
+            }            
+            case "LogBlock": {
+                let logBlock = new TrigonometryBlock("Log");
+                logBlock.operation = TrigonometryBlockOperations.Log;
+                return logBlock;
+            }                                                            
             case "ExpBlock": {
                 let expBlock = new TrigonometryBlock("Exp");
                 expBlock.operation = TrigonometryBlockOperations.Exp;
@@ -162,6 +220,16 @@ export class BlockTools {
                 exp2Block.operation = TrigonometryBlockOperations.Exp2;
                 return exp2Block;
             }
+            case "DegreesToRadiansBlock": {
+                let degreesToRadiansBlock = new TrigonometryBlock("Degrees to radians");
+                degreesToRadiansBlock.operation = TrigonometryBlockOperations.Radians;
+                return degreesToRadiansBlock;
+            }
+            case "RadiansToDegreesBlock": {
+                let radiansToDegreesBlock = new TrigonometryBlock("Radians to degrees");
+                radiansToDegreesBlock.operation = TrigonometryBlockOperations.Degrees;
+                return radiansToDegreesBlock;
+            }                        
             case "RoundBlock": {
                 let roundBlock = new TrigonometryBlock("Round");
                 roundBlock.operation = TrigonometryBlockOperations.Round;
@@ -177,6 +245,21 @@ export class BlockTools {
                 floorBlock.operation = TrigonometryBlockOperations.Floor;
                 return floorBlock;
             }       
+            case "SawToothWaveBlock": {
+                let sawToothWaveBlock = new WaveBlock("SawTooth wave");
+                sawToothWaveBlock.kind = WaveBlockKind.SawTooth;
+                return sawToothWaveBlock;
+            }     
+            case "SquareWaveBlock": {
+                let squareWaveBlock = new WaveBlock("Square wave");
+                squareWaveBlock.kind = WaveBlockKind.Square;
+                return squareWaveBlock;
+            }     
+            case "TriangleWaveBlock": {
+                let triangleWaveBlock = new WaveBlock("Triangle wave");
+                triangleWaveBlock.kind = WaveBlockKind.Triangle;
+                return triangleWaveBlock;
+            }
             case "WorldMatrixBlock": {
                 let worldMatrixBlock = new InputBlock("World");
                 worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
@@ -257,6 +340,51 @@ export class BlockTools {
                 timeBlock.animationType = AnimatedInputBlockTypes.Time;
                 return timeBlock;
             }   
+            case "DeltaTimeBlock": {
+                let deltaTimeBlock = new InputBlock("Delta time");                
+                deltaTimeBlock.setAsSystemValue(NodeMaterialSystemValues.DeltaTime);
+                return deltaTimeBlock;
+            }      
+            case "WorldPositionBlock": {
+                let worldPositionBlock = nodeMaterial.getInputBlockByPredicate(b => b.isAttribute && b.name === "position");                
+                if (!worldPositionBlock) {
+                    worldPositionBlock = new InputBlock("position");
+                    worldPositionBlock.setAsAttribute("position");
+                }
+
+                let worldMatrixBlock = nodeMaterial.getInputBlockByPredicate(b => b.isSystemValue && b.systemValue === NodeMaterialSystemValues.World);  
+
+                if (!worldMatrixBlock) {
+                    worldMatrixBlock = new InputBlock("World");
+                    worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
+                }
+
+                let transformBlock = new TransformBlock("World position");
+                worldPositionBlock.connectTo(transformBlock);
+                worldMatrixBlock.connectTo(transformBlock);
+
+                return transformBlock;
+            }        
+            case "WorldNormalBlock": {
+                let worldNormalBlock = nodeMaterial.getInputBlockByPredicate(b => b.isAttribute && b.name === "normal");                
+                if (!worldNormalBlock) {
+                    worldNormalBlock = new InputBlock("normal");
+                    worldNormalBlock.setAsAttribute("normal");
+                }
+
+                let worldMatrixBlock = nodeMaterial.getInputBlockByPredicate(b => b.isSystemValue && b.systemValue === NodeMaterialSystemValues.World);  
+
+                if (!worldMatrixBlock) {
+                    worldMatrixBlock = new InputBlock("World");
+                    worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
+                }
+
+                let transformBlock = new TransformBlock("World normal");
+                worldNormalBlock.connectTo(transformBlock);
+                worldMatrixBlock.connectTo(transformBlock);
+
+                return transformBlock;
+            }                  
         }
 
         return null;

nodeEditor/src/components/diagram/diagram.scss

@@ -76,10 +76,21 @@
         }        
     }
 
+    &.gradient {
+        .outputs, .inputs {
+            transform: translateY(5px);
+        }        
+        height: 70px;
+    }
+
     &.attribute {
         background: #40866E;
     }
 
+    &.constant {
+        background: gray;
+    }
+
     &.output {
         background: rgb(106, 44, 131);
         color:white;

nodeEditor/src/components/diagram/generic/genericNodeModel.tsx

@@ -71,7 +71,7 @@ export class GenericNodeModel extends DefaultNodeModel {
                     <CheckBoxLineComponent label="Invert X axis" target={this.block} propertyName="invertX" onValueChanged={() => globalState.onRebuildRequiredObservable.notifyObservers()} />
                     <CheckBoxLineComponent label="Invert Y axis" target={this.block} propertyName="invertY" onValueChanged={() => globalState.onRebuildRequiredObservable.notifyObservers()}/>                    
                 </LineContainerComponent>
-            }   
+            }               
             </div>
         );
     }

nodeEditor/src/components/diagram/gradient/gradientNodeFactory.tsx

@@ -0,0 +1,23 @@
+import * as SRD from "storm-react-diagrams";
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { GradientNodeWidget } from './gradientNodeWidget';
+import { GradientNodeModel } from './gradientNodeModel';
+
+export class GradientNodeFactory extends SRD.AbstractNodeFactory {
+    private _globalState: GlobalState;
+
+    constructor(globalState: GlobalState) {
+        super("gradient");
+
+        this._globalState = globalState;
+    }
+
+    generateReactWidget(diagramEngine: SRD.DiagramEngine, node: GradientNodeModel): JSX.Element {
+        return <GradientNodeWidget node={node} globalState={this._globalState} />;
+    }
+
+    getNewInstance() {
+        return new GradientNodeModel();
+    }
+}

nodeEditor/src/components/diagram/gradient/gradientNodeModel.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DefaultNodeModel } from '../defaultNodeModel';
+import { GlobalState } from '../../../globalState';
+import { GradientBlock } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
+import { GradientPropertyTabComponentProps } from './gradientNodePropertyComponent';
+
+export class GradientNodeModel extends DefaultNodeModel {
+
+    public get gradientBlock(): GradientBlock {
+        return this.block as GradientBlock;
+    }
+
+	/**
+	 * Constructs the node model
+	 */
+    constructor() {
+        super("gradient");
+    }
+
+    renderProperties(globalState: GlobalState) {
+        return (
+            <GradientPropertyTabComponentProps globalState={globalState} gradientNode={this} />
+        );
+    }
+}

nodeEditor/src/components/diagram/gradient/gradientNodePropertyComponent.tsx

@@ -0,0 +1,75 @@
+
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { LineContainerComponent } from '../../../sharedComponents/lineContainerComponent';
+import { TextInputLineComponent } from '../../../sharedComponents/textInputLineComponent';
+import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
+import { GradientNodeModel } from './gradientNodeModel';
+import { GradientBlockColorStep } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
+import { GradientStepComponent } from './gradientStepComponent';
+import { ButtonLineComponent } from '../../../sharedComponents/buttonLineComponent';
+import { Color3 } from 'babylonjs/Maths/math.color';
+
+interface IGradientPropertyTabComponentProps {
+    globalState: GlobalState;
+    gradientNode: GradientNodeModel;
+}
+
+export class GradientPropertyTabComponentProps extends React.Component<IGradientPropertyTabComponentProps> {
+
+    constructor(props: IGradientPropertyTabComponentProps) {
+        super(props)
+    }
+
+    forceRebuild() {
+        this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+    }
+
+    deleteStep(step: GradientBlockColorStep) {
+        let gradientBlock = this.props.gradientNode.gradientBlock;
+
+        let index = gradientBlock.colorSteps.indexOf(step);
+
+        if (index > -1) {
+            gradientBlock.colorSteps.splice(index, 1);
+            this.forceRebuild();
+            this.forceUpdate();
+        }
+    }
+
+    addNewStep() {
+        let gradientBlock = this.props.gradientNode.gradientBlock;
+
+        let newStep = new GradientBlockColorStep(1.0, Color3.White());
+        gradientBlock.colorSteps.push(newStep);
+
+        this.forceRebuild();
+        this.forceUpdate();
+    }
+
+    render() {
+        let gradientBlock = this.props.gradientNode.gradientBlock;
+      
+        return (
+            <div>
+                <LineContainerComponent title="GENERAL">
+                    <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={gradientBlock} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
+                    <TextLineComponent label="Type" value={gradientBlock.getClassName()} />
+                </LineContainerComponent>
+                <LineContainerComponent title="STEPS">
+                    <ButtonLineComponent label="Add new step" onClick={() => this.addNewStep()} />
+                    {
+                        gradientBlock.colorSteps.map((c, i) => {
+                            return (
+                                <GradientStepComponent globalState={this.props.globalState} 
+                                onUpdateStep={() => this.forceRebuild()}
+                                key={c.step} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
+                            )
+                        })
+                    }
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

nodeEditor/src/components/diagram/gradient/gradientNodeWidget.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { GradientNodeModel } from './gradientNodeModel';
+import { Nullable } from 'babylonjs/types';
+import { GlobalState } from '../../../globalState';
+import { PortHelper } from '../portHelper';
+import { GradientBlock } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
+
+export interface IGradientNodeWidgetProps {
+    node: Nullable<GradientNodeModel>;
+    globalState: GlobalState;
+}
+
+export class GradientNodeWidget extends React.Component<IGradientNodeWidgetProps> {
+    constructor(props: IGradientNodeWidgetProps) {
+        super(props);
+        this.state = {};
+
+        if (this.props.node) {
+            this.props.node.addListener({
+                selectionChanged: () => {
+                    let selected = (this.props.node as any).selected;
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(selected ? this.props.node : null);
+                }
+            });
+        }
+    }
+
+    renderValue(value: string) {
+        if (value) {
+            return (
+                <div className="value-text">
+                    {value}
+                </div>
+            )
+        }
+
+        return null;
+    }
+
+    render() {
+        var inputPorts = PortHelper.GenerateInputPorts(this.props.node, undefined, true);
+        var outputPorts = PortHelper.GenerateOutputPorts(this.props.node, true);
+        let gradientBlock = this.props.node!.block! as GradientBlock;
+
+        let gradients = gradientBlock.colorSteps.map(c => `rgb(${c.color.r * 255}, ${c.color.g * 255}, ${c.color.b * 255}) ${c.step * 100}%`);
+
+        let style = {
+            background: gradients.length ? `linear-gradient(90deg, ${gradients.join(", ")})` : 'black'
+        };
+
+        return (
+            <div className={"diagramBlock gradient"} style={style}>
+                <div className="header">
+                    {gradientBlock.name}
+                </div>
+                <div className="inputs">
+                    {inputPorts}
+                </div>
+                <div className="outputs">
+                    {outputPorts}
+                </div>
+                <div className="value">                
+                </div>
+            </div>
+        );
+    }
+}

nodeEditor/src/components/diagram/gradient/gradientStepComponent.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { GlobalState } from '../../../globalState';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Color3 } from 'babylonjs/Maths/math.color';
+import { GradientBlockColorStep } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
+
+interface IGradientStepComponentProps {
+    globalState: GlobalState;
+    step: GradientBlockColorStep;
+    lineIndex: number;
+    onDelete: () => void;
+    onUpdateStep: () => void;
+}
+
+export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {gradient: number}> {
+
+    constructor(props: IGradientStepComponentProps) {
+        super(props);
+
+        this.state={gradient: props.step.step};
+    }
+
+    updateColor(color: string) {
+        this.props.step.color = Color3.FromHexString(color);
+
+        this.props.onUpdateStep();
+        this.forceUpdate();
+    }    
+    
+    updateStep(gradient: number) {
+        this.props.step.step = gradient;
+
+        this.setState({gradient: gradient});
+
+        this.props.onUpdateStep();
+    }
+
+    render() {
+        let step = this.props.step;
+
+        return (
+            <div className="gradient-step">
+                <div className="step">
+                    {`#${this.props.lineIndex}`}
+                </div>
+                <input type="color" value={step.color.toHexString()} onChange={(evt) => this.updateColor(evt.target.value)} />
+                <div className="step-value">
+                    {step.step.toFixed(2)}
+                </div>
+                <div className="step-slider">
+                    <input className="range" type="range" step={0.01} min={0} max={1.0} value={step.step}
+                        onChange={evt => this.updateStep(parseFloat(evt.target.value))} />
+                </div>
+                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
+                    <FontAwesomeIcon icon={faTrash} />
+                </div>
+            </div>
+        )
+    }
+}

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

@@ -102,6 +102,9 @@ export class InputPropertyTabComponentProps extends React.Component<IInputProper
                     { label: "None", value: AnimatedInputBlockTypes.None },
                     { label: "Time", value: AnimatedInputBlockTypes.Time },
                 ];
+                systemValuesOptions = [ 
+                    { label: "Delta time", value: NodeMaterialSystemValues.DeltaTime }
+                ]
                 break;      
             case NodeMaterialBlockConnectionPointTypes.Matrix:
                 systemValuesOptions = [

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

@@ -89,6 +89,9 @@ export class InputNodeWidget extends React.Component<IInputNodeWidgetProps> {
                     case NodeMaterialSystemValues.FogColor:
                         value = "Fog color";
                         break;
+                    case NodeMaterialSystemValues.DeltaTime:
+                        value = "Delta time";
+                        break;
                 }
             } else {
                 if (!inputBlock || !inputBlock.isUniform) {
@@ -127,7 +130,7 @@ export class InputNodeWidget extends React.Component<IInputNodeWidgetProps> {
         }
 
         return (
-            <div className={"diagramBlock input" + (inputBlock && inputBlock.isAttribute ? " attribute" : "")} style={{
+            <div className={"diagramBlock input" + (inputBlock && inputBlock.isAttribute ? " attribute" : "")+ (inputBlock && inputBlock.isConstant ? " constant" : "")} style={{
                 background: color
             }}>
                 <div className="header">

nodeEditor/src/components/diagram/portHelper.tsx

@@ -48,7 +48,9 @@ export class PortHelper {
                 let style = this._GetPortStyle(port.connection!.type);
 
                 outputPorts.push(
-                    <div key={key} className="output-port">
+                    <div key={key}                                    
+				        title={port.name}
+                        className="output-port">
                         {
                             !ignoreLabel &&
                             <div className="output-port-label">
@@ -86,7 +88,9 @@ export class PortHelper {
 
                 if (!includeOnly || includeOnly.indexOf(port.name) !== -1) {
                     inputPorts.push(
-                        <div key={key} className="input-port">
+                        <div key={key}                         
+				            title={port.name}
+                            className="input-port">
                             <div className="input-port-plug">
                                 <div className="input-port-border">                                
                                 </div>

nodeEditor/src/components/diagram/reflectionTexture/reflectionTextureNodeFactory.tsx

@@ -0,0 +1,39 @@
+import * as SRD from "storm-react-diagrams";
+import * as React from "react";
+import { GlobalState } from '../../../globalState';
+import { ReflectionTextureNodeModel } from './reflectionTextureNodeModel';
+import { ReflectionTextureNodeWidget } from './reflectionTextureNodeWidget';
+
+/**
+ * Node factory which creates editor nodes
+ */
+export class ReflectionTextureNodeFactory extends SRD.AbstractNodeFactory {
+    private _globalState: GlobalState;
+
+	/**
+	 * Constructs a TextureNodeFactory
+	 */
+    constructor(globalState: GlobalState) {
+        super("reflectiontexture");
+
+        this._globalState = globalState;
+    }
+
+	/**
+	 * Generates a node widget
+	 * @param diagramEngine diagram engine
+	 * @param node node to generate
+	 * @returns node widget jsx
+	 */
+    generateReactWidget(diagramEngine: SRD.DiagramEngine, node: ReflectionTextureNodeModel): JSX.Element {
+        return <ReflectionTextureNodeWidget node={node} globalState={this._globalState} />;
+    }
+
+	/**
+	 * Gets a new instance of a node model
+	 * @returns texture node model
+	 */
+    getNewInstance() {
+        return new ReflectionTextureNodeModel();
+    }
+}

nodeEditor/src/components/diagram/reflectionTexture/reflectionTextureNodeModel.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Nullable } from 'babylonjs/types';
+import { DefaultNodeModel } from '../defaultNodeModel';
+import { GlobalState } from '../../../globalState';
+import { NodeCreationOptions, GraphEditor } from '../../../graphEditor';
+import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
+import { BaseTexture } from 'babylonjs/Materials/Textures/baseTexture';
+import { ReflectionTextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/reflectionTextureBlock';
+import { TexturePropertyTabComponent } from '../texture/texturePropertyTabComponent';
+
+/**
+ * Texture node model which stores information about a node editor block
+ */
+export class ReflectionTextureNodeModel extends DefaultNodeModel {
+    private _block: ReflectionTextureBlock;
+
+	/**
+	 * Texture for the node if it exists
+	 */
+    public get texture(): Nullable<BaseTexture> {
+        return this._block.texture;
+    }
+
+    public set texture(value: Nullable<BaseTexture>) {
+        this._block.texture = value;
+    }
+
+	/**
+	 * Constructs the node model
+	 */
+    constructor() {
+        super("reflectiontexture");
+    }
+
+    renderProperties(globalState: GlobalState) {
+        return (
+            <TexturePropertyTabComponent globalState={globalState} node={this} />
+        );
+    }
+
+    prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor) {
+        this._block = options.nodeMaterialBlock as ReflectionTextureBlock;
+
+        super.prepare(options, nodes, model, graphEditor);
+    }
+
+}

nodeEditor/src/components/diagram/reflectionTexture/reflectionTextureNodeWidget.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { TextureLineComponent } from "../../../sharedComponents/textureLineComponent"
+import { Nullable } from 'babylonjs/types';
+import { GlobalState } from '../../../globalState';
+import { PortHelper } from '../portHelper';
+import { ReflectionTextureNodeModel } from './reflectionTextureNodeModel';
+
+/**
+ * GenericNodeWidgetProps
+ */
+export interface IReflectionTextureNodeWidgetProps {
+    node: Nullable<ReflectionTextureNodeModel>;
+    globalState: GlobalState;
+}
+
+/**
+ * Used to display a node block for the node editor
+ */
+export class ReflectionTextureNodeWidget extends React.Component<IReflectionTextureNodeWidgetProps> {
+	/**
+	 * Creates a GenericNodeWidget
+	 * @param props 
+	 */
+    constructor(props: IReflectionTextureNodeWidgetProps) {
+        super(props);
+        this.state = {};
+
+        if (this.props.node) {
+            this.props.node.addListener({
+                selectionChanged: () => {
+                    let selected = (this.props.node as any).selected;
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(selected ? this.props.node : null);
+                }
+            });
+        }
+    }
+
+    render() {
+        // Input/Output ports
+        var outputPorts = PortHelper.GenerateOutputPorts(this.props.node, false);
+        var inputPorts = PortHelper.GenerateInputPorts(this.props.node);
+
+        return (
+            <div className={"diagramBlock texture-block"}>
+                <div className="header">
+                    {this.props.node!.block!.name}
+                </div>
+                <div className="inputs">
+                    {inputPorts}
+                </div>
+                <div className="outputs">
+                    {outputPorts}
+                </div>
+                {
+                    this.props.node && this.props.node.texture &&
+                    <TextureLineComponent ref="textureView" width={140} height={140} texture={this.props.node.texture} hideChannelSelect={true} />
+                }
+            </div>
+        );
+    }
+}

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

@@ -13,10 +13,12 @@ import { Texture } from 'babylonjs/Materials/Textures/texture';
 import { SliderLineComponent } from '../../../sharedComponents/sliderLineComponent';
 import { FloatLineComponent } from '../../../sharedComponents/floatLineComponent';
 import { ButtonLineComponent } from '../../../sharedComponents/buttonLineComponent';
+import { ReflectionTextureNodeModel } from '../reflectionTexture/reflectionTextureNodeModel';
+import { CubeTexture } from 'babylonjs/Materials/Textures/cubeTexture';
 
 interface ITexturePropertyTabComponentProps {
     globalState: GlobalState;
-    node: TextureNodeModel;
+    node: TextureNodeModel | ReflectionTextureNodeModel;
 }
 
 export class TexturePropertyTabComponent extends React.Component<ITexturePropertyTabComponentProps, {isEmbedded: boolean}> {
@@ -30,9 +32,11 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
     }
 
     UNSAFE_componentWillUpdate(nextProps: ITexturePropertyTabComponentProps, nextState: {isEmbedded: boolean}) {
-        let texture = nextProps.node.texture as BaseTexture;
+        if (nextProps.node !== this.props.node) {
+            let texture = nextProps.node.texture as BaseTexture;
 
-        nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+            nextState.isEmbedded = !texture || texture.name.substring(0, 4) !== "http";
+        }
     }
 
     private _generateRandomForCache() {
@@ -43,7 +47,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
     }
 
 
-    updateAftertextureLoad() {
+    updateAfterTextureLoad() {
         this.props.globalState.onUpdateRequiredObservable.notifyObservers();
         this.props.globalState.onRebuildRequiredObservable.notifyObservers();
     }
@@ -59,8 +63,15 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
 
         let texture = this.props.node.texture as BaseTexture;
         if (!texture) {
-            this.props.node.texture = new Texture(null, this.props.globalState.nodeMaterial.getScene(), false, false);
-            texture = this.props.node.texture;
+
+            if (this.props.node instanceof TextureNodeModel) {
+                this.props.node.texture = new Texture(null, this.props.globalState.nodeMaterial.getScene(), false, false);
+                texture = this.props.node.texture;
+            } else {
+                this.props.node.texture = new CubeTexture("", this.props.globalState.nodeMaterial.getScene());
+                texture = this.props.node.texture;
+                texture.coordinatesMode = Texture.CUBIC_MODE;
+            }
         }
 
         Tools.ReadFile(file, (data) => {
@@ -71,7 +82,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
             reader.onloadend = () => {
                 let base64data = reader.result as string;                
 
-                if (texture.isCube) {
+                if (texture.isCube || this.props.node instanceof ReflectionTextureNodeModel) {
                     let extension: string | undefined = undefined;
                     if (file.name.toLowerCase().indexOf(".dds") > 0) {
                         extension = ".dds";
@@ -79,9 +90,9 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         extension = ".env";
                     }
 
-                    (texture as Texture).updateURL(base64data, extension, () => this.updateAftertextureLoad());
+                    (texture as Texture).updateURL(base64data, extension, () => this.updateAfterTextureLoad());
                 } else {
-                    (texture as Texture).updateURL(base64data, null, () => this.updateAftertextureLoad());
+                    (texture as Texture).updateURL(base64data, null, () => this.updateAfterTextureLoad());
                 }
             }
         }, undefined, true);
@@ -91,12 +102,23 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         let texture = this.props.node.texture as BaseTexture;
         if (!texture) {
             this.props.node.texture = new Texture(url, this.props.globalState.nodeMaterial.getScene(), false, false, undefined, () => {
-                this.updateAftertextureLoad();
+                this.updateAfterTextureLoad();
             });
             return;
         }
 
-        (texture as Texture).updateURL(url, null, () => this.updateAftertextureLoad());
+        if (texture.isCube || this.props.node instanceof ReflectionTextureNodeModel) {
+            let extension: string | undefined = undefined;
+            if (url.toLowerCase().indexOf(".dds") > 0) {
+                extension = ".dds";
+            } else if (url.toLowerCase().indexOf(".env") > 0) {
+                extension = ".env";
+            }
+
+            (texture as Texture).updateURL(url, extension, () => this.updateAfterTextureLoad());
+        } else {
+            (texture as Texture).updateURL(url, null, () => this.updateAfterTextureLoad());
+        }
     }
 
     render() {
@@ -108,6 +130,8 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
         }
 
         url = url.replace(/\?nocache=\d+/, "");
+
+        let isInReflectionMode = this.props.node instanceof ReflectionTextureNodeModel;
         
         return (
             <div>
@@ -116,23 +140,30 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                     <TextInputLineComponent globalState={this.props.globalState} label="Name" propertyName="name" target={this.props.node.block!} onChange={() => this.props.globalState.onUpdateRequiredObservable.notifyObservers()} />
                 </LineContainerComponent>
                 <LineContainerComponent title="PROPERTIES">
-                    <CheckBoxLineComponent label="Auto select UV" propertyName="autoSelectUV" target={this.props.node.block!} />
+                    <CheckBoxLineComponent label="Auto select UV" propertyName="autoSelectUV" target={this.props.node.block!} onValueChanged={() => {                        
+                        this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                    }}/> {
+                        texture && !isInReflectionMode &&
+                        <CheckBoxLineComponent label="Gamma space" propertyName="gammaSpace" target={texture} onValueChanged={() => {                        
+                            this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                        }}/>
+                    }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <CheckBoxLineComponent label="Clamp U" isSelected={() => texture.wrapU === Texture.CLAMP_ADDRESSMODE} onSelect={(value) => {
                             texture.wrapU = value ? Texture.CLAMP_ADDRESSMODE : Texture.WRAP_ADDRESSMODE;
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }} />
                     }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <CheckBoxLineComponent label="Clamp V" isSelected={() => texture.wrapV === Texture.CLAMP_ADDRESSMODE} onSelect={(value) => {
                             texture.wrapV = value ? Texture.CLAMP_ADDRESSMODE : Texture.WRAP_ADDRESSMODE;
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }} />
                     }        
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <FloatLineComponent label="Offset U" target={texture} propertyName="uOffset" 
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -140,29 +171,29 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         />
                     }
                     {
-                        texture &&
-                        <FloatLineComponent label="Offset U" target={texture} propertyName="vOffset"
+                        texture && !isInReflectionMode &&
+                        <FloatLineComponent label="Offset V" target={texture} propertyName="vOffset"
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }}
                         />
                     }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <FloatLineComponent label="Scale U" target={texture} propertyName="uScale"
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }} />
                     }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <FloatLineComponent label="Scale V" target={texture} propertyName="vScale"
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                         }} />
                     }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <SliderLineComponent label="Rotation U" target={texture} propertyName="uAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -170,7 +201,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         />
                     }
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <SliderLineComponent label="Rotation V" target={texture} propertyName="vAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -178,7 +209,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                         />
                     }                    
                     {
-                        texture &&
+                        texture && !isInReflectionMode &&
                         <SliderLineComponent label="Rotation W" target={texture} propertyName="wAng" minimum={0} maximum={Math.PI * 2} useEuler={true} step={0.1}
                         onChange={() => {
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -190,7 +221,7 @@ export class TexturePropertyTabComponent extends React.Component<ITexturePropert
                     <CheckBoxLineComponent label="Embed texture" isSelected={() => this.state.isEmbedded} onSelect={value => {
                         this.setState({isEmbedded: value});
                         this.props.node.texture = null;
-                        this.updateAftertextureLoad();
+                        this.updateAfterTextureLoad();
                     }}/>
                     {
                         this.state.isEmbedded &&

nodeEditor/src/components/diagram/trigonometry/trigonometryNodePropertyComponent.tsx

@@ -30,8 +30,21 @@ export class TrigonometryPropertyTabComponentProps extends React.Component<ITrig
             {label: "Exp2", value: TrigonometryBlockOperations.Exp2},
             {label: "Round", value: TrigonometryBlockOperations.Round},
             {label: "Ceiling", value: TrigonometryBlockOperations.Ceiling},
-            {label: "Floor", value: TrigonometryBlockOperations.Floor}
+            {label: "Floor", value: TrigonometryBlockOperations.Floor},
+            {label: "ArcCos", value: TrigonometryBlockOperations.ArcCos},
+            {label: "ArcSin", value: TrigonometryBlockOperations.ArcSin},
+            {label: "ArcTan", value: TrigonometryBlockOperations.ArcTan},
+            {label: "Tan", value: TrigonometryBlockOperations.Tan},
+            {label: "Log", value: TrigonometryBlockOperations.Log},
+            {label: "Fract", value: TrigonometryBlockOperations.Fract},
+            {label: "Sign", value: TrigonometryBlockOperations.Sign},
+            {label: "Radians to degrees", value: TrigonometryBlockOperations.Degrees},
+            {label: "Degrees to radians", value: TrigonometryBlockOperations.Radians}
         ];
+
+        operationOptions.sort((a, b) => {
+            return a.label.localeCompare(b.label);
+        })
         
         return (
             <div>

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -26,17 +26,18 @@ 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", "RandomNumberBlock"],
+            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock", "LengthBlock", "DistanceBlock", "NegateBlock", "RandomNumberBlock", "ReciprocalBlock"],
+            Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
-            Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "TimeBlock"],
-            Interpolation: ["LerpBlock"],
+            Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "TimeBlock", "DeltaTimeBlock"],
+            Interpolation: ["LerpBlock", "SmoothStepBlock", "NLerpBlock"],
             Matrices: ["Matrix", "WorldMatrixBlock", "WorldViewMatrixBlock", "WorldViewProjectionMatrixBlock", "ViewMatrixBlock", "ViewProjectionMatrixBlock", "ProjectionMatrixBlock"],
-            Mesh_Attributes: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock"],
+            Mesh_Attributes: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock", "WorldPositionBlock", "WorldNormalBlock"], 
             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", "SqrtBlock", "PowBlock"],
+            Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block", "SqrtBlock", "PowBlock", "LogBlock", "ArcCosBlock", "ArcSinBlock", "TanBlock", "ArcTanBlock", "FractBlock", "SignBlock", "ArcTan2Block", "DegreesToRadiansBlock", "RadiansToDegreesBlock", "SawToothWaveBlock", "TriangleWaveBlock", "SquareWaveBlock"],
             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, faCheckDouble, faSun, faLocationArrow } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faStop, faPalette, faCheckDouble, faSun, faLocationArrow, faClone } from '@fortawesome/free-solid-svg-icons';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { DataStorage } from '../../dataStorage';
 
@@ -37,6 +37,13 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent>
         this.forceUpdate();
     }
 
+    changeDepthPrePass(value: boolean) {        
+        this.props.globalState.depthPrePass = value;
+        DataStorage.StoreBoolean("DepthPrePass", value);
+        this.props.globalState.onDepthPrePassChanged.notifyObservers();
+        this.forceUpdate();
+    }    
+
     render() {
         return (
             <>
@@ -63,6 +70,11 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponent>
                         <FontAwesomeIcon icon={faCheckDouble} />
                     </div>  
                     <div
+                        title="Render with depth pre-pass"
+                        onClick={() => this.changeDepthPrePass(!this.props.globalState.depthPrePass)} className={"button" + (this.props.globalState.depthPrePass ? " selected" : "")}>
+                        <FontAwesomeIcon icon={faClone} />
+                    </div>                     
+                    <div
                         title="Turn on/off hemispheric light"  
                         onClick={() => {
                             this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;                            

nodeEditor/src/components/preview/previewManager.ts

@@ -24,6 +24,7 @@ export class PreviewManager {
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;
     private _onPreviewBackgroundChangedObserver: Nullable<Observer<void>>;
     private _onBackFaceCullingChangedObserver: Nullable<Observer<void>>;
+    private _onDepthPrePassChangedObserver: Nullable<Observer<void>>;
     private _onLightUpdatedObserver: Nullable<Observer<void>>;
     private _engine: Engine;
     private _scene: Scene;
@@ -64,10 +65,13 @@ export class PreviewManager {
         });
 
         this._onBackFaceCullingChangedObserver = globalState.onBackFaceCullingChanged.add(() => {
-            let serializationObject = this._nodeMaterial.serialize();
-            this._updatePreview(serializationObject);
+            this._material.backFaceCulling = this._globalState.backFaceCulling;
         });
 
+        this._onDepthPrePassChangedObserver = globalState.onDepthPrePassChanged.add(() => {
+            this._material.needDepthPrePass = this._globalState.depthPrePass;
+        });        
+
         this._engine = new Engine(targetCanvas, true);
         this._scene = new Scene(this._engine);
         this._camera = new ArcRotateCamera("Camera", 0, 0.8, 4, Vector3.Zero(), this._scene);
@@ -93,7 +97,7 @@ export class PreviewManager {
             for (var root of this._scene.rootNodes) {
                 let transformNode = root as TransformNode;
 
-                if (transformNode.getClassName() === "TransformNode" || transformNode.getClassName() === "Mesh") {
+                if (transformNode.getClassName() === "TransformNode" || transformNode.getClassName() === "Mesh" || transformNode.getClassName() === "GroundMesh") {
                     if (transformNode.rotationQuaternion) {
                         transformNode.rotation = transformNode.rotationQuaternion.toEulerAngles();
                         transformNode.rotationQuaternion = null;
@@ -169,6 +173,8 @@ export class PreviewManager {
             for (var light of lights) {
                 light.dispose();
             }
+
+            this._engine.releaseEffects();
         
             switch (this._globalState.previewMeshType) {
                 case PreviewMeshType.Box:
@@ -209,7 +215,6 @@ export class PreviewManager {
 
     private _forceCompilationAsync(material: NodeMaterial, mesh: AbstractMesh): Promise<void> {
         return material.forceCompilationAsync(mesh);
-
     }
 
     private _updatePreview(serializationObject: any) {
@@ -217,6 +222,7 @@ export class PreviewManager {
             let tempMaterial = NodeMaterial.Parse(serializationObject, this._scene);
 
             tempMaterial.backFaceCulling = this._globalState.backFaceCulling;
+            tempMaterial.needDepthPrePass = this._globalState.depthPrePass;
 
             if (this._meshes.length) {
                 let tasks = this._meshes.map(m => this._forceCompilationAsync(tempMaterial, m));
@@ -247,6 +253,7 @@ export class PreviewManager {
         this._globalState.onAnimationCommandActivated.remove(this._onAnimationCommandActivatedObserver);
         this._globalState.onPreviewBackgroundChanged.remove(this._onPreviewBackgroundChangedObserver);
         this._globalState.onBackFaceCullingChanged.remove(this._onBackFaceCullingChangedObserver);
+        this._globalState.onDepthPrePassChanged.remove(this._onDepthPrePassChangedObserver);
         this._globalState.onLightUpdated.remove(this._onLightUpdatedObserver);
 
         if (this._material) {

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -36,6 +36,54 @@
         }
     }
 
+    .range {
+        -webkit-appearance: none;
+        width: 120px;
+        height: 6px;
+        background: #d3d3d3;
+        border-radius: 5px;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+    
+    .range:hover {
+        opacity: 1;
+    }
+    
+    .range::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: rgb(51, 122, 183);
+        cursor: pointer;
+    }
+    
+    .range::-moz-range-thumb {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: rgb(51, 122, 183);
+        cursor: pointer;
+    }
+
+    input[type="color"] {
+        -webkit-appearance: none;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        padding: 0;
+        width: 30px;
+        height: 20px;
+    }
+    input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+    input[type="color"]::-webkit-color-swatch {
+        border: none;
+    }
+
     .sliderLine {
         padding-left: $line-padding-left;
         height: 30px;
@@ -54,40 +102,6 @@
             
             display: flex;
             align-items: center;
-
-            .range {
-                -webkit-appearance: none;
-                width: 120px;
-                height: 6px;
-                background: #d3d3d3;
-                border-radius: 5px;
-                outline: none;
-                opacity: 0.7;
-                -webkit-transition: .2s;
-                transition: opacity .2s;
-            }
-            
-            .range:hover {
-                opacity: 1;
-            }
-            
-            .range::-webkit-slider-thumb {
-                -webkit-appearance: none;
-                appearance: none;
-                width: 14px;
-                height: 14px;
-                border-radius: 50%;
-                background: rgb(51, 122, 183);
-                cursor: pointer;
-            }
-            
-            .range::-moz-range-thumb {
-                width: 14px;
-                height: 14px;
-                border-radius: 50%;
-                background: rgb(51, 122, 183);
-                cursor: pointer;
-            }
         }                    
     }     
 
@@ -194,6 +208,54 @@
         }
     }
 
+    .gradient-step {
+        display: grid;
+        grid-template-rows: 100%;
+        grid-template-columns: 30px 30px 40px auto 20px 5px;
+        margin-top: 5px;
+        margin-left: 5px;
+
+        .step {
+            grid-row: 1;
+            grid-column: 1;
+        }
+            
+        .color {
+            grid-row: 1;
+            grid-column: 2;
+            cursor: pointer;
+        }
+
+        .step-value {       
+            margin-left: 5px;     
+            grid-row: 1;
+            grid-column: 3;
+            text-align: right;
+            margin-right: 5px;
+        }
+
+        .step-slider {            
+            grid-row: 1;
+            grid-column: 4;
+            display: grid;
+            justify-content: stretch;
+            align-content: center;
+            margin-right: 5px;
+
+            input {
+                width: unset;
+            }
+        }
+
+        .gradient-delete {            
+            grid-row: 1;
+            grid-column: 5;
+            display: grid;
+            align-content: center;
+            justify-content: center;
+        }
+    }
+
     .floatLine {
         padding-left: $line-padding-left;
         height: 30px;
@@ -448,21 +510,7 @@
                 grid-column: 2;
                 
                 display: flex;
-                align-items: center;   
-
-                input[type="color"] {
-                    -webkit-appearance: none;
-                    border: 1px solid rgba(255, 255, 255, 0.5);
-                    padding: 0;
-                    width: 30px;
-                    height: 20px;
-                }
-                input[type="color"]::-webkit-color-swatch-wrapper {
-                    padding: 0;
-                }
-                input[type="color"]::-webkit-color-swatch {
-                    border: none;
-                }
+                align-items: center;            
                 
                 input {
                     margin-right: 5px;

nodeEditor/src/globalState.ts

@@ -26,6 +26,7 @@ export class GlobalState {
     onLightUpdated = new Observable<void>();
     onPreviewBackgroundChanged = new Observable<void>();
     onBackFaceCullingChanged = new Observable<void>();
+    onDepthPrePassChanged = new Observable<void>();
     onAnimationCommandActivated = new Observable<void>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => NodeModel;
     previewMeshType: PreviewMeshType;
@@ -33,6 +34,7 @@ export class GlobalState {
     rotatePreview: boolean;
     backgroundColor: Color4;
     backFaceCulling: boolean;
+    depthPrePass: boolean;
     blockKeyboardEvents = false;
     hemisphericLight: boolean;
     directionalLight0: boolean;
@@ -42,6 +44,7 @@ export class GlobalState {
     public constructor() {
         this.previewMeshType = DataStorage.ReadNumber("PreviewMeshType", PreviewMeshType.Box);
         this.backFaceCulling = DataStorage.ReadBoolean("BackFaceCulling", true);
+        this.depthPrePass = DataStorage.ReadBoolean("DepthPrePass", false);
         this.hemisphericLight = DataStorage.ReadBoolean("HemisphericLight", true);
         this.directionalLight0 = DataStorage.ReadBoolean("DirectionalLight0", true);