Merge Playground fix. Builds, but not all tests pass.

Playground/css/index.css

@@ -421,9 +421,15 @@ body {
     cursor: pointer;
     background-color: white;
 }
-.button:hover span {
+
+.button.languageJS:hover span {
     color: #3f3461;
 }
+
+.button.languageTS:hover span {
+    color: #bb464b;
+}
+
 .languageJS .button:hover img {
     filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
 }
@@ -640,7 +646,6 @@ body {
     height:35px;
     width:100%;
     line-height:35px;
-    background-color: #201936;
 }
 
 .navbarBottom #statusBar {
@@ -650,6 +655,10 @@ body {
     padding-left:20px;
 }
 
+.navbarBottom.languageTS #statusBar {
+    color: #3f3461;
+}
+
 .navbarBottom .links {
     position:absolute;
     right: 0;
@@ -661,11 +670,13 @@ body {
     display: inline-block;
     line-height: 35px;
     font-size: 16px;
-    color: white;
 }
+
 .navbarBottom .links .link:hover {
-    background-color:#3F3461;
+    background-color:white;
+    color: #3f3461;
 }
+
 .navbarBottom .links .link a {
     text-decoration: none;
     line-height: 35px;
@@ -674,6 +685,16 @@ body {
     color: white;
 }
 
+.navbarBottom.languageJS .links .link a:hover {
+    background-color:white;
+    color: #3f3461;
+}
+
+.navbarBottom.languageTS .links .link a:hover {
+    background-color:white;
+    color: #bb464b;
+}
+
 /* Save form & co */
 .save-layer {
     display: none;

Playground/js/main.js

@@ -1,3 +1,186 @@
+var engine = null;
+
+/**
+ * Compile the script in the editor, and run the preview in the canvas
+ */
+compileAndRun = function(parent, fpsLabel) {
+    // If we need to change the version, don't do this
+    if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
+
+    try {
+        parent.menuPG.hideWaitDiv();
+
+        if (!BABYLON.Engine.isSupported()) {
+            parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);
+            return;
+        }
+
+        var showInspector = false;
+        parent.menuPG.showBJSPGMenu();
+        parent.monacoCreator.JsEditor.updateOptions({ readOnly: false });
+
+        if (BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
+            showInspector = true;
+        }
+
+        if (engine) {
+            try {
+                engine.dispose();
+            }
+            catch (ex) { }
+            engine = null;
+        }
+
+        var canvas = document.getElementById("renderCanvas");
+        document.getElementById("errorZone").style.display = 'none';
+        document.getElementById("errorZone").innerHTML = "";
+        document.getElementById("statusBar").innerHTML = "Loading assets... Please wait.";
+        var checkCamera = true;
+        var checkSceneCount = true;
+        var createEngineFunction = "createDefaultEngine";
+        var createSceneFunction;
+
+        parent.monacoCreator.getRunCode(function (code) {
+            var createDefaultEngine = function () {
+                return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+            }
+
+            var scene;
+            var defaultEngineZip = "new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })";
+
+            if (code.indexOf("createEngine") !== -1) {
+                createEngineFunction = "createEngine";
+            }
+
+            // Check for different typos
+            if (code.indexOf("delayCreateScene") !== -1) { // delayCreateScene
+                createSceneFunction = "delayCreateScene";
+                checkCamera = false;
+            } else if (code.indexOf("createScene") !== -1) { // createScene
+                createSceneFunction = "createScene";
+            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                createSceneFunction = "CreateScene";
+            } else if (code.indexOf("createscene") !== -1) { // createscene
+                createSceneFunction = "createscene";
+            }
+
+            if (!createSceneFunction) {
+                // Just pasted code.
+                engine = createDefaultEngine();
+                scene = new BABYLON.Scene(engine);
+                var runScript = null;
+                eval("runScript = function(scene, canvas) {" + code + "}");
+                runScript(scene, canvas);
+
+                parent.zipTool.ZipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+            } else {
+                var __createScene = null;
+                if (parent.settingsPG.ScriptLanguage == "JS") {
+                    code += "\n" + "__createScene = " + createSceneFunction + ";";
+                }
+                else {
+                    __createScene = createSceneFunction;
+                    var startCar = code.search('var ' + createSceneFunction);
+                    code = code.substr(0, startCar) + code.substr(startCar + 4);
+                }
+
+                // Execute the code
+                eval(code);
+
+                // Create engine
+                eval("engine = " + createEngineFunction + "()");
+                if (!engine) {
+                    parent.utils.showError("createEngine function must return an engine.", null);
+                    return;
+                }
+
+                // Create scene
+                eval("scene = " + __createScene + "()");
+
+                if (!scene) {
+                    parent.utils.showError(createSceneFunction + " function must return a scene.", null);
+                    return;
+                }
+
+                // if scene returns a promise avoid checks
+                if (scene.then) {
+                    checkCamera = false;
+                    checkSceneCount = false;
+                }
+
+                var createEngineZip = (createEngineFunction === "createEngine")
+                    ? "createEngine()"
+                    : defaultEngineZip;
+
+                parent.zipTool.zipCode =
+                    code + "\r\n\r\n" +
+                    "var engine = " + createEngineZip + ";\r\n" +
+                    "var scene = " + createSceneFunction + "();";
+
+            }
+
+            engine = engine;
+            engine.runRenderLoop(function () {
+                if (engine.scenes.length === 0) {
+                    return;
+                }
+
+                if (canvas.width !== canvas.clientWidth) {
+                    engine.resize();
+                }
+
+                var scene = engine.scenes[0];
+
+                if (scene.activeCamera || scene.activeCameras.length > 0) {
+                    scene.render();
+                }
+
+                fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
+            }.bind(this));
+
+            if (checkSceneCount && engine.scenes.length === 0) {
+                parent.utils.showError("You must at least create a scene.", null);
+                return;
+            }
+
+            if (checkCamera && engine.scenes[0].activeCamera == null) {
+                parent.utils.showError("You must at least create a camera.", null);
+                return;
+            } else if (scene.then) {
+                scene.then(function () {
+                    document.getElementById("statusBar").innerHTML = "";
+                });
+            } else {
+                engine.scenes[0].executeWhenReady(function () {
+                    document.getElementById("statusBar").innerHTML = "";
+                });
+            }
+
+            if (scene) {
+                if (showInspector) {
+                    if (scene.then) {
+                        // Handle if scene is a promise
+                        scene.then(function (s) {
+                            if (!s.debugLayer.isVisible()) {
+                                s.debugLayer.show({ embedMode: true });
+                            }
+                        })
+                    } else {
+                        if (!scene.debugLayer.isVisible()) {
+                            scene.debugLayer.show({ embedMode: true });
+                        }
+                    }
+                }
+            }
+        }.bind(this));
+
+    } catch (e) {
+        parent.utils.showError(e.message, e);
+        // Also log error in console to help debug playgrounds
+        console.error(e);
+    }
+};
+
 /**
  * This JS file contains the main function
  */
@@ -11,7 +194,6 @@ class Main {
         this.currentSnippetTitle = null;
         this.currentSnippetDescription = null;
         this.currentSnippetTags = null;
-        this.engine = null;
         this.fpsLabel = document.getElementById("fpsLabel");
         this.scripts;
         this.previousHash = "";
@@ -39,8 +221,8 @@ class Main {
         // Resize the render view when resizing the window
         window.addEventListener("resize",
             function () {
-                if (this.engine) {
-                    this.engine.resize();
+                if (engine) {
+                    engine.resize();
                 }
             }.bind(this)
         );
@@ -59,7 +241,7 @@ class Main {
         // Display BJS version - Need a check in case of version selection
         if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
-        this.parent.utils.setToMultipleID("runButton", "click", this.compileAndRun.bind(this));
+        this.parent.utils.setToMultipleID("runButton", "click", () => compileAndRun(this.parent, this.fpsLabel));
         // New
         this.parent.utils.setToMultipleID("newButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -74,7 +256,7 @@ class Main {
         this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
         // Zip
         this.parent.utils.setToMultipleID("zipButton", "click", function () {
-            this.parent.zipTool.getZip(this.engine);
+            this.parent.zipTool.getZip(engine);
         }.bind(this));
         // Themes
         this.parent.utils.setToMultipleID("darkTheme", "click", function () {
@@ -131,7 +313,7 @@ class Main {
         // FullScreen
         this.parent.utils.setToMultipleID("fullscreenButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
-            this.parent.menuPG.goFullscreen(this.engine);
+            this.parent.menuPG.goFullscreen(engine);
         }.bind(this));
         // Editor fullScreen
         this.parent.utils.setToMultipleID("editorFullscreenButton", "click", function () {
@@ -211,7 +393,7 @@ class Main {
                     this.parent.monacoCreator.JsEditor.setValue(xhr.responseText);
                     this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 0, column: 0 });
                     this.parent.monacoCreator.BlockEditorChange = false;
-                    this.compileAndRun();
+                    compileAndRun(this.parent, this.fpsLabel);
 
                     this.currentSnippetToken = null;
                 }
@@ -399,7 +581,7 @@ class Main {
         }
         this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 11, column: 0 });
         this.parent.monacoCreator.JsEditor.focus();
-        this.compileAndRun();
+        compileAndRun(this.parent, this.fpsLabel);
     };
 
     clear() {
@@ -494,7 +676,7 @@ class Main {
                     location.href = newUrl;
                     // Hide the complete title & co message
                     this.hideNoMetadata();
-                    this.compileAndRun();
+                    compileAndRun(this.parent, this.fpsLabel);
                 } else {
                     this.parent.utils.showError("Unable to save your code. It may be too long.", null);
                 }
@@ -527,191 +709,13 @@ class Main {
         }
     };
 
-    /**
-         * Compile the script in the editor, and run the preview in the canvas
-         */
-    compileAndRun() {
-        // If we need to change the version, don't do this
-        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
-
-        try {
-            this.parent.menuPG.hideWaitDiv();
-
-            if (!BABYLON.Engine.isSupported()) {
-                this.parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);
-                return;
-            }
-
-            var showInspector = false;
-            this.parent.menuPG.showBJSPGMenu();
-            this.parent.monacoCreator.JsEditor.updateOptions({ readOnly: false });
-
-            if (BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
-                showInspector = true;
-            }
-
-            if (this.engine) {
-                try {
-                    this.engine.dispose();
-                }
-                catch(ex) {}
-                this.engine = null;
-            }
-
-            var canvas = document.getElementById("renderCanvas");
-            document.getElementById("errorZone").style.display = 'none';
-            document.getElementById("errorZone").innerHTML = "";
-            document.getElementById("statusBar").innerHTML = "Loading assets... Please wait.";
-            var checkCamera = true;
-            var checkSceneCount = true;
-            var createEngineFunction = "createDefaultEngine";
-            var createSceneFunction;
-
-            this.parent.monacoCreator.getRunCode(function (code) {
-                // Need these variables for "eval" purpose
-                var engine = this.engine;
-                var delayCreateScene = null;
-                var createScene = null;
-                var CreateScene = null;
-                var createscene = null;
-
-                var createDefaultEngine = function () {
-                    return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
-                }
-
-                var scene;
-                var defaultEngineZip = "new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })";
-
-                if (code.indexOf("createEngine") !== -1) {
-                    createEngineFunction = "createEngine";
-                }
-
-                // Check for different typos
-                if (code.indexOf("delayCreateScene") !== -1) { // createScene
-                    createSceneFunction = "delayCreateScene";
-                    checkCamera = false;
-                } else if (code.indexOf("createScene") !== -1) { // createScene
-                    createSceneFunction = "createScene";
-                } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
-                    createSceneFunction = "CreateScene";
-                } else if (code.indexOf("createscene") !== -1) { // createscene
-                    createSceneFunction = "createscene";
-                }
-
-                if (!createSceneFunction) {
-                    // Just pasted code.
-                    engine = createDefaultEngine();
-                    scene = new BABYLON.Scene(engine);
-                    eval("runScript = function(scene, canvas) {" + code + "}");
-                    runScript(scene, canvas);
-
-                    this.parent.zipTool.ZipCode = "var engine = " + defaultEngineZip + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
-                } else {
-                    var startCar = code.search('var ' + createSceneFunction);
-                    code = code.substr(0, startCar) + code.substr(startCar + 4);
-
-                    // Execute the code
-                    eval(code);
-                    // Create engine
-                    eval("engine = " + createEngineFunction + "()");
-                    if (!engine) {
-                        this.parent.utils.showError("createEngine function must return an engine.", null);
-                        return;
-                    }
-
-                    // Create scene
-                    eval("scene = " + createSceneFunction + "()");
-
-                    if (!scene) {
-                        this.parent.utils.showError(createSceneFunction + " function must return a scene.", null);
-                        return;
-                    }
-
-                    // if scene returns a promise avoid checks
-                    if (scene.then) {
-                        checkCamera = false;
-                        checkSceneCount = false;
-                    }
-
-                    var createEngineZip = (createEngineFunction === "createEngine")
-                        ? "createEngine()"
-                        : defaultEngineZip;
-
-                    this.parent.zipTool.zipCode =
-                        code + "\r\n\r\n" +
-                        "var engine = " + createEngineZip + ";\r\n" +
-                        "var scene = " + createSceneFunction + "();";
-
-                }
-
-                this.engine = engine;
-                this.engine.runRenderLoop(function () {
-                    if (this.engine.scenes.length === 0) {
-                        return;
-                    }
-
-                    if (canvas.width !== canvas.clientWidth) {
-                        this.engine.resize();
-                    }
-
-                    var scene = this.engine.scenes[0];
-
-                    if (scene.activeCamera || scene.activeCameras.length > 0) {
-                        scene.render();
-                    }
-
-                    this.fpsLabel.innerHTML = this.engine.getFps().toFixed() + " fps";
-                }.bind(this));
-
-                if (checkSceneCount && this.engine.scenes.length === 0) {
-                    this.parent.utils.showError("You must at least create a scene.", null);
-                    return;
-                }
-
-                if (checkCamera && this.engine.scenes[0].activeCamera == null) {
-                    this.parent.utils.showError("You must at least create a camera.", null);
-                    return;
-                } else if (scene.then) {
-                    scene.then(function () {
-                        document.getElementById("statusBar").innerHTML = "";
-                    });
-                } else {
-                    this.engine.scenes[0].executeWhenReady(function () {
-                        document.getElementById("statusBar").innerHTML = "";
-                    });
-                }
-
-                if (scene) {
-                    if (showInspector) {
-                        if (scene.then) {
-                            // Handle if scene is a promise
-                            scene.then(function (s) {
-                                if (!s.debugLayer.isVisible()) {
-                                    s.debugLayer.show({ embedMode: true });
-                                }
-                            })
-                        } else {
-                            if (!scene.debugLayer.isVisible()) {
-                                scene.debugLayer.show({ embedMode: true });
-                            }
-                        }
-                    }
-                }
-            }.bind(this));
-
-        } catch (e) {
-            this.parent.utils.showError(e.message, e);
-            // Also log error in console to help debug playgrounds
-            console.error(e);
-        }
-    };
 
     /**
          * Toggle the code editor
          */
     toggleEditor() {
         var editorButton = document.getElementById("editorButton1280");
-        var scene = this.engine.scenes[0];
+        var scene = engine.scenes[0];
 
         // If the editor is present
         if (editorButton.classList.contains('checked')) {
@@ -723,7 +727,7 @@ class Main {
             this.parent.splitInstance.setSizes([50, 50]);  // Reset
             this.parent.utils.setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
-        this.engine.resize();
+        engine.resize();
 
         if (scene.debugLayer.isVisible()) {
             scene.debugLayer.show({ embedMode: true });
@@ -735,7 +739,7 @@ class Main {
      */
     toggleDebug() {
         // Always showing the debug layer, because you can close it by itself
-        var scene = this.engine.scenes[0];
+        var scene = engine.scenes[0];
         if (scene.debugLayer.isVisible()) {
             scene.debugLayer.hide();
         }
@@ -810,7 +814,7 @@ class Main {
 
                                 this.parent.monacoCreator.JsEditor.setPosition({ lineNumber: 0, column: 0 });
                                 this.parent.monacoCreator.BlockEditorChange = false;
-                                this.compileAndRun();
+                                compileAndRun(this.parent, this.fpsLabel);
                             }
                         }
                     }.bind(this);

Playground/js/settingsPG.js

@@ -17,7 +17,10 @@ class SettingsPG {
             '.navbar .select .toDisplay .subSelect .toDisplaySub',
             '#fpsLabel',
             '.save-form',
-            '#switchWrapper'
+            '#switchWrapper',
+            '.navbarBottom',
+            '.navbarBottom .links .link a',
+            '.button'
         ];
         // The elements that will color with theme
         this.elementToTheme = [

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-serializers"] = factory(require("babylonjs"));
 	else
 		root["SERIALIZERS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -137,7 +137,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KHR_lights_punctual", function() { return KHR_lights_punctual; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../glTFExporter */ "./glTF/2.0/glTFExporter.ts");
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
@@ -300,7 +300,7 @@ _glTFExporter__WEBPACK_IMPORTED_MODULE_1__["_Exporter"].RegisterExtension(NAME,
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KHR_texture_transform", function() { return KHR_texture_transform; });
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../glTFExporter */ "./glTF/2.0/glTFExporter.ts");
 /* harmony import */ var _shaders_textureTransform_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shaders/textureTransform.fragment */ "./glTF/2.0/shaders/textureTransform.fragment.ts");
@@ -426,7 +426,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFAnimation", function() { return _GLTFAnimation; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
 
@@ -1166,7 +1166,7 @@ var GLTFData = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Exporter", function() { return _Exporter; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_BinaryWriter", function() { return _BinaryWriter; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFMaterialExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./glTFMaterialExporter */ "./glTF/2.0/glTFMaterialExporter.ts");
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
@@ -2576,7 +2576,7 @@ var __IGLTFExporterExtensionV2 = 0; // I am here to allow dts to be created
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFMaterialExporter", function() { return _GLTFMaterialExporter; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -3748,7 +3748,7 @@ var GLTF2Export = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFUtilities", function() { return _GLTFUtilities; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -3990,7 +3990,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "textureTransformPixelShader", function() { return textureTransformPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'textureTransformPixelShader';
@@ -4102,14 +4102,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Maths/math":
+/***/ "babylonjs/Misc/tools":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__;
 
 /***/ })
 

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-serializers"] = factory(require("babylonjs"));
 	else
 		root["SERIALIZERS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -154,7 +154,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OBJExport", function() { return OBJExport; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -334,14 +334,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Maths/math":
+/***/ "babylonjs/Misc/tools":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__;
 
 /***/ })
 

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-serializers"] = factory(require("babylonjs"));
 	else
 		root["SERIALIZERS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -154,7 +154,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OBJExport", function() { return OBJExport; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -315,7 +315,7 @@ var OBJExport = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KHR_lights_punctual", function() { return KHR_lights_punctual; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../glTFExporter */ "./glTF/2.0/glTFExporter.ts");
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
@@ -478,7 +478,7 @@ _glTFExporter__WEBPACK_IMPORTED_MODULE_1__["_Exporter"].RegisterExtension(NAME,
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KHR_texture_transform", function() { return KHR_texture_transform; });
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../glTFExporter */ "./glTF/2.0/glTFExporter.ts");
 /* harmony import */ var _shaders_textureTransform_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shaders/textureTransform.fragment */ "./glTF/2.0/shaders/textureTransform.fragment.ts");
@@ -604,7 +604,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFAnimation", function() { return _GLTFAnimation; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
 
@@ -1344,7 +1344,7 @@ var GLTFData = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_Exporter", function() { return _Exporter; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_BinaryWriter", function() { return _BinaryWriter; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _glTFMaterialExporter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./glTFMaterialExporter */ "./glTF/2.0/glTFMaterialExporter.ts");
 /* harmony import */ var _glTFUtilities__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./glTFUtilities */ "./glTF/2.0/glTFUtilities.ts");
@@ -2754,7 +2754,7 @@ var __IGLTFExporterExtensionV2 = 0; // I am here to allow dts to be created
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFMaterialExporter", function() { return _GLTFMaterialExporter; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -3926,7 +3926,7 @@ var GLTF2Export = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_GLTFUtilities", function() { return _GLTFUtilities; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -4168,7 +4168,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "textureTransformPixelShader", function() { return textureTransformPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'textureTransformPixelShader';
@@ -4496,7 +4496,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "STLExport", function() { return STLExport; });
-/* harmony import */ var babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Meshes/buffer */ "babylonjs/Maths/math");
+/* harmony import */ var babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Meshes/buffer */ "babylonjs/Misc/tools");
 /* harmony import */ var babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -4608,14 +4608,14 @@ var STLExport = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "babylonjs/Maths/math":
+/***/ "babylonjs/Misc/tools":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__;
 
 /***/ })
 

dist/preview release/what's new.md

@@ -84,6 +84,7 @@
 - Added `ShaderMaterial.setColor4Array` ([JonathanTron](https://github.com/JonathanTron/))
 - Added `ShaderMaterial.setArray4` ([JonathanTron](https://github.com/JonathanTron/))
 - Added `scene.environmentIntensity` to control the IBL strength overall in a scene ([Sebavan](https://github.com/sebavan/))
+- Added support of image processing for `WaterMaterial` ([julien-moreau](https://github.com/julien-moreau))
 
 ### ScreenshotTools
 - Added interface for argument `size` of screenshot methods ([Dok11](https://github.com/Dok11/))
@@ -132,6 +133,10 @@
 - Fix check for material needing alpha blending in OutlineRenderer ([mkmc](https://github.com/mkmc))
 - Fixed: scene's input manager's detachControl doesn't remove a wheel event listener ([RamilKadyrov](https://github.com/RamilKadyrov))
 - Fixed Solid Particle System particle's idx and idxInShape initialization ([RamilKadyrov](https://github.com/RamilKadyrov))
+- Added in ArcRotateCamera.storeState to save targetScreenOffset, in restoreState to restore it ([RamilKadyrov](https://github.com/RamilKadyrov))
+- Fixed `CubeTexture` to keep custom `filesList` when serializing/parsing ([julien-moreau](https://github.com/julien-moreau))
+- Fixed `StandardRenderingPipeline` to properly dispose post-processes from attached cameras ([julien-moreau](https://github.com/julien-moreau))
+- Fixed `VolumetricLightScattering` post-process to use a custom vertex shader instead of the depth vertex shader. ([julien-moreau](https://github.com/julien-moreau))
 
 ## Breaking changes
 - Setting mesh.scaling to a new vector will no longer automatically call forceUpdate (this should be done manually when needed) ([TrevorDev](https://github.com/TrevorDev))

localDev/fresnel.json

@@ -269,8 +269,8 @@
           "targetConnectionName": "output"
         },
         {
-          "name": "color",
-          "inputName": "color",
+          "name": "input",
+          "inputName": "input",
           "targetBlockId": 215,
           "targetConnectionName": "rgb"
         },

nodeEditor/src/blockTools.ts

@@ -29,7 +29,6 @@ import { LerpBlock } from 'babylonjs/Materials/Node/Blocks/lerpBlock';
 import { DivideBlock } from 'babylonjs/Materials/Node/Blocks/divideBlock';
 import { SubtractBlock } from 'babylonjs/Materials/Node/Blocks/subtractBlock';
 import { StepBlock } from 'babylonjs/Materials/Node/Blocks/stepBlock';
-import { TypeConverterBlock } from 'babylonjs/Materials/Node/Blocks/typeConverterBlock';
 
 export class BlockTools {
     public static GetBlockFromString(data: string) {
@@ -93,9 +92,7 @@ export class BlockTools {
             case "SubtractBlock":
                 return new SubtractBlock("Subtract"); 
             case "StepBlock":
-                return new StepBlock("Step");                  
-            case "TypeConverterBlock":
-                return new TypeConverterBlock("Type converter");                  
+                return new StepBlock("Step");                                
         }
 
         return null;

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

@@ -27,7 +27,10 @@ export class TrigonometryPropertyTabComponentProps extends React.Component<ITrig
             {label: "Sin", value: TrigonometryBlockOperations.Sin},
             {label: "Abs", value: TrigonometryBlockOperations.Abs},
             {label: "Exp", value: TrigonometryBlockOperations.Exp},
-            {label: "Exp2", value: TrigonometryBlockOperations.Exp2}
+            {label: "Exp2", value: TrigonometryBlockOperations.Exp2},
+            {label: "Round", value: TrigonometryBlockOperations.Round},
+            {label: "Ceiling", value: TrigonometryBlockOperations.Ceiling},
+            {label: "Floor", value: TrigonometryBlockOperations.Floor}
         ];
         
         return (

nodeEditor/src/components/nodeList/nodeList.scss

@@ -9,6 +9,31 @@
 
     .panes {
         overflow: hidden;
+
+        .filter {
+            display: flex;
+            align-items: stretch;
+    
+            input {
+                width: 100%;
+                margin: 10px 10px 5px 10px;
+                display: block;
+                border: none;
+                padding: 0;
+                border-bottom: solid 1px rgb(51, 122, 183);
+                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, rgb(51, 122, 183) 4%);
+                background-position: -1000px 0;
+                background-size: 1000px 100%;
+                background-repeat: no-repeat;  
+                color:white;    
+            }
+    
+            input:focus  {
+                box-shadow: none;
+                outline: none;
+                background-position: 0 0;
+            }
+        }
         
         .pane {
             color: white;

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -10,35 +10,61 @@ interface INodeListComponentProps {
     globalState: GlobalState;
 }
 
-export class NodeListComponent extends React.Component<INodeListComponentProps> {
+export class NodeListComponent extends React.Component<INodeListComponentProps, {filter: string}> {
+
+    constructor(props: INodeListComponentProps) {
+        super(props);
+
+        this.state = { filter: "" };
+    }
+
+    filterContent(filter: string) {
+        this.setState({ filter: filter });
+    }
+
     render() {
         // Block types used to create the menu from
         const allBlocks = {
-            Vertex: ["BonesBlock", "InstancesBlock", "MorphTargetsBlock"],
-            Fragment: ["AlphaTestBlock", "FogBlock", "FresnelBlock", "ImageProcessingBlock", "LightBlock", "ReflectionTextureBlock", "TextureBlock"],
-            Outputs: ["VertexOutputBlock", "FragmentOutputBlock"],
-            Math: ["AddBlock", "ClampBlock", "CrossBlock", "DivideBlock", "DotBlock", "LerpBlock", "MultiplyBlock", "RemapBlock", "NormalizeBlock", "ScaleBlock", "StepBlock", "SubtractBlock", "TransformBlock", "TrigonometryBlock", "TypeConverterBlock"],
-            Conversion: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
-            Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "Matrix"],
+            Animation: ["BonesBlock", "MorphTargetsBlock"],
+            Output_Blocks: ["VertexOutputBlock", "FragmentOutputBlock", "AlphaTestBlock"],
+            Interpolation: ["LerpBlock"],
+            Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
+            Round: ["StepBlock"],
+            Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock"],
+            Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock"],
+            Trigonometry: [],
+            Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
+            Mesh_Attributes: ["InstancesBlock"],
+            Matrices: ["Matrix"],
+            Scene_Attributes: ["FogBlock","ImageProcessingBlock", "LightBlock", "ReflectionTextureBlock"],
+            Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock"],
         }
 
         // Create node menu
         var blockMenu = []
         for (var key in allBlocks) {
-            var blockList = (allBlocks as any)[key].map((block: any, i: number) => {
+            var blockList = (allBlocks as any)[key].filter((b: string) => !this.state.filter || b.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1)
+            .sort((a: string, b: string) => a.localeCompare(b))
+            .map((block: any, i: number) => {
                 return <DraggableLineComponent key={block} data={block} />
-            })
-            blockMenu.push(
-                <LineContainerComponent key={key + " blocks"} title={key + " blocks"} closed={false}>
-                    {blockList}
-                </LineContainerComponent>
-            )
+            });
+
+            if (blockList.length) {
+                blockMenu.push(
+                    <LineContainerComponent key={key + " blocks"} title={key.replace("_", " ")} closed={false}>
+                        {blockList}
+                    </LineContainerComponent>
+                );
+            }
         }
 
         return (
             <div id="nodeList" style={{ borderRightStyle: "solid", borderColor: "grey", borderWidth: "1px" }} >
                 <div className="panes">
                     <div className="pane">
+                        <div className="filter">
+                            <input type="text" placeholder="Filter" onChange={(evt) => this.filterContent(evt.target.value)} />
+                        </div>
                         {blockMenu}
                     </div>
                 </div>

nodeEditor/src/components/preview/previewManager.ts

@@ -91,7 +91,7 @@ export class PreviewManager {
         }        
 
         this._material = NodeMaterial.Parse(serializationObject, this._scene);
-        this._material.build(true);
+        this._material.build();
         this._dummy.material = this._material;
     }
 

nodeEditor/src/graphEditor.tsx

@@ -432,11 +432,11 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                                         }
                                     }
     
-                                    if (isFragmentOutput) {
-                                        this.applyFragmentOutputConstraints(link.input);
-                                    }
-    
                                     if (link.output.connection.canConnectTo(link.input.connection)) {
+                                        if (isFragmentOutput) {
+                                            this.applyFragmentOutputConstraints(link.input);
+                                        }
+        
                                         link.output.connection.connectTo(link.input.connection);
                                     } else {
                                         (evt.entity as AdvancedLinkModel).remove();
@@ -614,6 +614,12 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                         this._mouseLocationX = evt.pageX;
                         this._mouseLocationY = evt.pageY;
                     }}
+                    onMouseDown={(evt) => {
+                        if ((evt.target as HTMLElement).nodeName === "INPUT") {
+                            return;
+                        }
+                        this.props.globalState.blockKeyboardEvents = false;
+                    }}
                     >
                     {/* Node creation menu */}
                     <NodeListComponent globalState={this.props.globalState} />

src/Actions/index.ts

@@ -1,3 +1,4 @@
+export * from "./abstractActionManager";
 export * from "./action";
 export * from "./actionEvent";
 export * from "./actionManager";

src/Cameras/arcRotateCamera.ts

@@ -689,6 +689,7 @@ export class ArcRotateCamera extends TargetCamera {
     private _storedBeta: number;
     private _storedRadius: number;
     private _storedTarget: Vector3;
+    private _storedTargetScreenOffset: Vector2;
 
     /**
      * Stores the current state of the camera (alpha, beta, radius and target)
@@ -699,6 +700,7 @@ export class ArcRotateCamera extends TargetCamera {
         this._storedBeta = this.beta;
         this._storedRadius = this.radius;
         this._storedTarget = this._getTargetPosition().clone();
+        this._storedTargetScreenOffset = this.targetScreenOffset.clone();
 
         return super.storeState();
     }
@@ -712,10 +714,11 @@ export class ArcRotateCamera extends TargetCamera {
             return false;
         }
 
+        this.setTarget(this._storedTarget.clone());
         this.alpha = this._storedAlpha;
         this.beta = this._storedBeta;
         this.radius = this._storedRadius;
-        this.setTarget(this._storedTarget.clone());
+        this.targetScreenOffset = this._storedTargetScreenOffset.clone();
 
         this.inertialAlphaOffset = 0;
         this.inertialBetaOffset = 0;

src/Cameras/index.ts

@@ -11,6 +11,7 @@ export * from "./deviceOrientationCamera";
 export * from "./flyCamera";
 export * from "./flyCameraInputsManager";
 export * from "./followCamera";
+export * from "./followCameraInputsManager";
 export * from "./gamepadCamera";
 export * from "./Stereoscopic/index";
 export * from "./universalCamera";

src/Helpers/videoDome.ts

@@ -229,8 +229,10 @@ export class VideoDome extends TransformNode {
                 // in half-dome mode the uScale should be double of 360 videos
                 // Use 0.99999 to boost perf by not switching program
                 this._videoTexture.uScale = this._halfDome ? 0.99999 : 0.5;
+                const rightOffset = this._halfDome ? 0.0 : 0.5;
+                const leftOffset = this._halfDome ? 0.5 : 0.0;
                 this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
-                    this._videoTexture.uOffset = camera.isRightCamera ? 0.5 : 0.0;
+                    this._videoTexture.uOffset = camera.isRightCamera ? rightOffset : leftOffset;
                 });
                 break;
             case VideoDome.MODE_TOPBOTTOM:

src/Materials/Node/Blocks/Dual/fogBlock.ts

@@ -31,17 +31,13 @@ export class FogBlock extends NodeMaterialBlock {
         this.registerInput("view", NodeMaterialBlockConnectionPointTypes.Matrix, false, NodeMaterialBlockTargets.Vertex);
 
         // Fragment
-        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
         this.registerInput("fogColor", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
 
-        this.color.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color4);
-        this.color.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3);
-        this.color.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector4);
+        this.input.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color4);
         this.fogColor.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color4);
-        this.fogColor.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3);
-        this.fogColor.acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector4);
     }
 
     /**
@@ -69,7 +65,7 @@ export class FogBlock extends NodeMaterialBlock {
     /**
      * Gets the color input component
      */
-    public get color(): NodeMaterialConnectionPoint {
+    public get input(): NodeMaterialConnectionPoint {
         return this._inputs[2];
     }
 
@@ -130,7 +126,7 @@ export class FogBlock extends NodeMaterialBlock {
             });
 
             let tempFogVariablename = state._getFreeVariableName("fog");
-            let color = this.color;
+            let color = this.input;
             let fogColor = this.fogColor;
             this._fogParameters = state._getFreeVariableName("fogParameters");
             let output = this._outputs[0];

src/Materials/Node/Blocks/Dual/textureBlock.ts

@@ -38,7 +38,7 @@ export class TextureBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.VertexAndFragment);
 
-        this.registerInput("uv", NodeMaterialBlockConnectionPointTypes.Vector2, false, NodeMaterialBlockTargets.Vertex);
+        this.registerInput("uv", NodeMaterialBlockConnectionPointTypes.Vector2, false, NodeMaterialBlockTargets.VertexAndFragment);
 
         this.registerOutput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, NodeMaterialBlockTargets.Fragment);
         this.registerOutput("rgb", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
@@ -49,8 +49,6 @@ export class TextureBlock extends NodeMaterialBlock {
 
         this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3);
         this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector4);
-        this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color3);
-        this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color4);
     }
 
     /**
@@ -110,6 +108,43 @@ export class TextureBlock extends NodeMaterialBlock {
         return this._outputs[5];
     }
 
+    public get target() {
+        if (!this.uv.isConnected) {
+            return NodeMaterialBlockTargets.VertexAndFragment;
+        }
+
+        if (this.uv.sourceBlock!.isInput) {
+            return NodeMaterialBlockTargets.VertexAndFragment;
+        }
+
+        let parent = this.uv.connectedPoint;
+
+        while (parent) {
+            if (parent.target === NodeMaterialBlockTargets.Fragment) {
+                return NodeMaterialBlockTargets.Fragment;
+            }
+
+            if (parent.target === NodeMaterialBlockTargets.Vertex) {
+                return NodeMaterialBlockTargets.VertexAndFragment;
+            }
+
+            if (parent.target === NodeMaterialBlockTargets.Neutral || parent.target === NodeMaterialBlockTargets.VertexAndFragment) {
+                let parentBlock = parent.ownerBlock;
+
+                parent = null;
+                for (var input of parentBlock.inputs) {
+                    if (input.connectedPoint) {
+                        parent = input.connectedPoint;
+                        break;
+                    }
+                }
+            }
+
+        }
+
+        return NodeMaterialBlockTargets.VertexAndFragment;
+    }
+
     public autoConfigure() {
         if (!this.uv.isConnected) {
             let uvInput = new InputBlock("uv");
@@ -156,11 +191,17 @@ export class TextureBlock extends NodeMaterialBlock {
             return;
         }
 
-        effect.setFloat(this._textureInfoName, this.texture.level);
-        effect.setMatrix(this._textureTransformName, this.texture.getTextureMatrix());
+        if (this._isMixed) {
+            effect.setFloat(this._textureInfoName, this.texture.level);
+            effect.setMatrix(this._textureTransformName, this.texture.getTextureMatrix());
+        }
         effect.setTexture(this._samplerName, this.texture);
     }
 
+    private get _isMixed() {
+        return this.target !== NodeMaterialBlockTargets.Fragment;
+    }
+
     private _injectVertexCode(state: NodeMaterialBuildState) {
         let uvInput = this.uv;
 
@@ -195,6 +236,12 @@ export class TextureBlock extends NodeMaterialBlock {
 
     private _writeOutput(state: NodeMaterialBuildState, output: NodeMaterialConnectionPoint, swizzle: string) {
         let uvInput = this.uv;
+
+        if (this.uv.ownerBlock.target === NodeMaterialBlockTargets.Fragment) {
+            state.compilationString += `${this._declareOutput(output, state)} = texture2D(${this._samplerName}, ${uvInput.associatedVariableName}).${swizzle};\r\n`;
+            return;
+        }
+
         const complement = ` * ${this._textureInfoName}`;
 
         state.compilationString += `#ifdef ${this._defineName}\r\n`;
@@ -221,10 +268,11 @@ export class TextureBlock extends NodeMaterialBlock {
         state._samplerDeclaration += `uniform sampler2D ${this._samplerName};\r\n`;
 
         // Fragment
-        state.sharedData.blocksWithDefines.push(this);
         state.sharedData.bindableBlocks.push(this);
-
-        state._emitUniformFromString(this._textureInfoName, "float");
+        if (this._isMixed) {
+            state.sharedData.blocksWithDefines.push(this);
+            state._emitUniformFromString(this._textureInfoName, "float");
+        }
 
         for (var output of this._outputs) {
             if (output.hasEndpoints) {
@@ -235,6 +283,16 @@ export class TextureBlock extends NodeMaterialBlock {
         return this;
     }
 
+    protected _dumpPropertiesCode() {
+        if (!this.texture) {
+            return "";
+        }
+
+        var codeString = `${this._codeVariableName}.texture = new BABYLON.Texture("${this.texture.name}");\r\n`;
+
+        return codeString;
+    }
+
     public serialize(): any {
         let serializationObject = super.serialize();
 

src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts

@@ -19,9 +19,6 @@ export class FragmentOutputBlock extends NodeMaterialBlock {
         this.registerInput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, true);
         this.registerInput("rgb", NodeMaterialBlockConnectionPointTypes.Color3, true);
         this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true);
-
-        this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector4);
-        this._inputs[1].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3);
     }
 
     /**

src/Materials/Node/Blocks/Fragment/imageProcessingBlock.ts

@@ -24,8 +24,6 @@ export class ImageProcessingBlock extends NodeMaterialBlock {
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color4);
 
         this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Color3);
-        this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector3);
-        this._inputs[0].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector4);
     }
 
     /**

src/Materials/Node/Blocks/Input/inputBlock.ts

@@ -73,11 +73,15 @@ export class InputBlock extends NodeMaterialBlock {
                         return this._type;
                     case "matricesIndices":
                     case "matricesWeights":
+                    case "world0":
+                    case "world1":
+                    case "world2":
+                    case "world3":
                         this._type = NodeMaterialBlockConnectionPointTypes.Vector4;
                         return this._type;
                     case "color":
-                            this._type = NodeMaterialBlockConnectionPointTypes.Color4;
-                            return this._type;
+                        this._type = NodeMaterialBlockConnectionPointTypes.Color4;
+                        return this._type;
                 }
             }
 

src/Materials/Node/Blocks/clampBlock.ts

@@ -4,6 +4,7 @@ import { NodeMaterialBuildState } from '../nodeMaterialBuildState';
 import { NodeMaterialConnectionPoint } from '../nodeMaterialBlockConnectionPoint';
 import { NodeMaterialBlockTargets } from '../nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../Misc/typeStore';
+import { Scene } from '../../../scene';
 /**
  * Block used to clamp a float
  */
@@ -56,6 +57,30 @@ export class ClampBlock extends NodeMaterialBlock {
 
         return this;
     }
+
+    protected _dumpPropertiesCode() {
+        var codeString = `${this._codeVariableName}.minimum = ${this.minimum};\r\n`;
+
+        codeString += `${this._codeVariableName}.maximum = ${this.maximum};\r\n`;
+
+        return codeString;
+    }
+
+    public serialize(): any {
+        let serializationObject = super.serialize();
+
+        serializationObject.minimum = this.minimum;
+        serializationObject.maximum = this.maximum;
+
+        return serializationObject;
+    }
+
+    public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
+        super._deserialize(serializationObject, scene, rootUrl);
+
+        this.minimum = serializationObject.minimum;
+        this.maximum = serializationObject.maximum;
+    }
 }
 
 _TypeStore.RegisteredTypes["BABYLON.ClampBlock"] = ClampBlock;

src/Materials/Node/Blocks/colorSplitterBlock.ts

@@ -83,7 +83,7 @@ export class ColorSplitterBlock extends NodeMaterialBlock {
     }
 
     protected _inputRename(name: string) {
-        if (name === "rgb") {
+        if (name === "rgb ") {
             return "rgbIn";
         }
         return name;

src/Materials/Node/Blocks/index.ts

@@ -20,4 +20,3 @@ export * from "./lerpBlock";
 export * from "./divideBlock";
 export * from "./subtractBlock";
 export * from "./stepBlock";
-export * from "./typeConverterBlock";

src/Materials/Node/Blocks/remapBlock.ts

@@ -5,6 +5,7 @@ import { NodeMaterialConnectionPoint } from '../nodeMaterialBlockConnectionPoint
 import { NodeMaterialBlockTargets } from '../nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../Misc/typeStore';
 import { Vector2 } from '../../../Maths/math.vector';
+import { Scene } from '../../../scene';
 /**
  * Block used to remap a float from a range to a new one
  */
@@ -63,6 +64,30 @@ export class RemapBlock extends NodeMaterialBlock {
 
         return this;
     }
+
+    protected _dumpPropertiesCode() {
+        var codeString = `${this._codeVariableName}.sourceRange = new BABYLON.Vector2(${this.sourceRange.x}, ${this.sourceRange.y});\r\n`;
+
+        codeString += `${this._codeVariableName}.targetRange = new BABYLON.Vector2(${this.targetRange.x}, ${this.targetRange.y});\r\n`;
+
+        return codeString;
+    }
+
+    public serialize(): any {
+        let serializationObject = super.serialize();
+
+        serializationObject.sourceRange = this.sourceRange.asArray();
+        serializationObject.targetRange = this.targetRange.asArray();
+
+        return serializationObject;
+    }
+
+    public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
+        super._deserialize(serializationObject, scene, rootUrl);
+
+        this.sourceRange = Vector2.FromArray(serializationObject.sourceRange);
+        this.targetRange = Vector2.FromArray(serializationObject.targetRange);
+    }
 }
 
 _TypeStore.RegisteredTypes["BABYLON.RemapBlock"] = RemapBlock;

src/Materials/Node/Blocks/trigonometryBlock.ts

@@ -18,7 +18,13 @@ export enum TrigonometryBlockOperations {
     /** Exp */
     Exp,
     /** Exp2 */
-    Exp2
+    Exp2,
+    /** Round */
+    Round,
+    /** Floor */
+    Floor,
+    /** Ceiling */
+    Ceiling,
 }
 
 /**
@@ -91,6 +97,18 @@ export class TrigonometryBlock extends NodeMaterialBlock {
                 operation = "exp2";
                 break;
             }
+            case TrigonometryBlockOperations.Round: {
+                operation = "round";
+                break;
+            }
+            case TrigonometryBlockOperations.Floor: {
+                operation = "floor";
+                break;
+            }
+            case TrigonometryBlockOperations.Ceiling: {
+                operation = "ceil";
+                break;
+            }
         }
 
         state.compilationString += this._declareOutput(output, state) + ` = ${operation}(${this.input.associatedVariableName});\r\n`;

src/Materials/Node/Blocks/typeConverterBlock.ts

@@ -1,58 +0,0 @@
-import { NodeMaterialBlock } from '../nodeMaterialBlock';
-import { NodeMaterialBlockConnectionPointTypes } from '../nodeMaterialBlockConnectionPointTypes';
-import { NodeMaterialBuildState } from '../nodeMaterialBuildState';
-import { NodeMaterialConnectionPoint } from '../nodeMaterialBlockConnectionPoint';
-import { NodeMaterialBlockTargets } from '../nodeMaterialBlockTargets';
-import { _TypeStore } from '../../../Misc/typeStore';
-/**
- * Block used to convert color to vector and vice versa
- */
-export class TypeConverterBlock extends NodeMaterialBlock {
-    /**
-     * Creates a new TypeConverterBlock
-     * @param name defines the block name
-     */
-    public constructor(name: string) {
-        super(name, NodeMaterialBlockTargets.Neutral);
-
-        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.AutoDetect);
-        this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.InvertInput);
-
-        this._outputs[0]._typeConnectionSource = this._inputs[0];
-    }
-
-    /**
-     * Gets the current class name
-     * @returns the class name
-     */
-    public getClassName() {
-        return "TypeConverterBlock";
-    }
-
-    /**
-     * Gets the input component
-     */
-    public get input(): NodeMaterialConnectionPoint {
-        return this._inputs[0];
-    }
-
-    /**
-     * Gets the output component
-     */
-    public get output(): NodeMaterialConnectionPoint {
-        return this._outputs[0];
-    }
-
-    protected _buildBlock(state: NodeMaterialBuildState) {
-        super._buildBlock(state);
-
-        let input = this._inputs[0];
-        let output = this._outputs[0];
-
-        state.compilationString += this._declareOutput(output, state) + ` = ${input.associatedVariableName};\r\n`;
-
-        return this;
-    }
-}
-
-_TypeStore.RegisteredTypes["BABYLON.TypeConverterBlock"] = TypeConverterBlock;

src/Materials/Node/Blocks/vectorSplitterBlock.ts

@@ -102,9 +102,9 @@ export class VectorSplitterBlock extends NodeMaterialBlock {
 
     protected _inputRename(name: string) {
         switch (name) {
-            case "xy":
+            case "xy ":
                 return "xyIn";
-            case "xyz":
+            case "xyz ":
                     return "xyzIn";
             default:
                 return name;

src/Materials/Node/nodeMaterial.ts

@@ -521,7 +521,7 @@ export class NodeMaterial extends PushMaterial {
 
         // Vertex
         for (var vertexOutputNode of vertexNodes) {
-            vertexOutputNode.build(this._vertexCompilationState);
+            vertexOutputNode.build(this._vertexCompilationState, vertexNodes);
         }
 
         // Fragment
@@ -534,7 +534,7 @@ export class NodeMaterial extends PushMaterial {
         }
 
         for (var fragmentOutputNode of fragmentNodes) {
-            fragmentOutputNode.build(this._fragmentCompilationState);
+            fragmentOutputNode.build(this._fragmentCompilationState, fragmentNodes);
         }
 
         // Finalize
@@ -1044,6 +1044,16 @@ export class NodeMaterial extends PushMaterial {
             }
         }
 
+        for (var node of this._vertexOutputNodes) {
+            codeString += `nodeMaterial.addOutputNode(${node._codeVariableName});\r\n`;
+        }
+
+        for (var node of this._fragmentOutputNodes) {
+            codeString += `nodeMaterial.addOutputNode(${node._codeVariableName});\r\n`;
+        }
+
+        codeString += `nodeMaterial.build();\r\n`;
+
         return codeString;
     }
 

src/Materials/Node/nodeMaterialBlock.ts

@@ -22,7 +22,8 @@ export class NodeMaterialBlock {
     private _isFinalMerger = false;
     private _isInput = false;
 
-    protected _codeVariableName = "";
+    /** @hidden */
+    public _codeVariableName = "";
 
     /** @hidden */
     public _inputs = new Array<NodeMaterialConnectionPoint>();
@@ -191,7 +192,7 @@ export class NodeMaterialBlock {
      * @param name defines the connection point name
      * @param type defines the connection point type
      * @param isOptional defines a boolean indicating that this input can be omitted
-     * @param target defines the target to use to limit the connection point (will be VetexAndFragment by default)
+     * @param target defines the target to use to limit the connection point (will be VertexAndFragment by default)
      * @returns the current block
      */
     public registerInput(name: string, type: NodeMaterialBlockConnectionPointTypes, isOptional: boolean = false, target?: NodeMaterialBlockTargets) {
@@ -211,7 +212,7 @@ export class NodeMaterialBlock {
      * Register a new output. Must be called inside a block constructor
      * @param name defines the connection point name
      * @param type defines the connection point type
-     * @param target defines the target to use to limit the connection point (will be VetexAndFragment by default)
+     * @param target defines the target to use to limit the connection point (will be VertexAndFragment by default)
      * @returns the current block
      */
     public registerOutput(name: string, type: NodeMaterialBlockConnectionPointTypes, target?: NodeMaterialBlockTargets) {
@@ -383,8 +384,8 @@ export class NodeMaterialBlock {
         return true;
     }
 
-    private _processBuild(block: NodeMaterialBlock, state: NodeMaterialBuildState, input: NodeMaterialConnectionPoint) {
-        block.build(state);
+    private _processBuild(block: NodeMaterialBlock, state: NodeMaterialBuildState, input: NodeMaterialConnectionPoint, activeBlocks: NodeMaterialBlock[]) {
+        block.build(state, activeBlocks);
 
         if (state._vertexState && (block.target & this.target) === 0) { // context switch! We need a varying
             if ((!block.isInput && state.target !== block._buildTarget) // block was already emitted by vertex shader
@@ -402,10 +403,10 @@ export class NodeMaterialBlock {
     /**
      * Compile the current node and generate the shader code
      * @param state defines the current compilation state (uniforms, samplers, current string)
-     * @param contextSwitched indicates that the previous block was built for a different context (vertex vs. fragment)
+     * @param activeBlocks defines the list of active blocks (i.e. blocks to compile)
      * @returns true if already built
      */
-    public build(state: NodeMaterialBuildState, contextSwitched = false): boolean {
+    public build(state: NodeMaterialBuildState, activeBlocks: NodeMaterialBlock[]): boolean {
         if (this._buildId === state.sharedData.buildId) {
             return true;
         }
@@ -431,7 +432,7 @@ export class NodeMaterialBlock {
 
             let block = input.connectedPoint.ownerBlock;
             if (block && block !== this) {
-                this._processBuild(block, state, input);
+                this._processBuild(block, state, input, activeBlocks);
             }
         }
 
@@ -492,8 +493,8 @@ export class NodeMaterialBlock {
             for (var endpoint of output.endpoints) {
                 let block = endpoint.ownerBlock;
 
-                if (block && (block.target & state.target) !== 0) {
-                    this._processBuild(block, state, endpoint);
+                if (block && (block.target & state.target) !== 0 && activeBlocks.indexOf(block) !== -1) {
+                    this._processBuild(block, state, endpoint, activeBlocks);
                 }
             }
         }
@@ -552,7 +553,7 @@ export class NodeMaterialBlock {
                 codeString += connectedBlock._dumpCode(uniqueNames, alreadyDumped);
             }
 
-            codeString += `${connectedBlock._codeVariableName}.${connectedBlock._outputRename(connectedOutput.name)}.connectTo(${this._codeVariableName}.${this._outputRename(input.name)});\r\n`;
+            codeString += `${connectedBlock._codeVariableName}.${connectedBlock._outputRename(connectedOutput.name)}.connectTo(${this._codeVariableName}.${this._inputRename(input.name)});\r\n`;
         }
 
         // Outputs
@@ -613,6 +614,6 @@ export class NodeMaterialBlock {
 
     /** @hidden */
     public _deserialize(serializationObject: any, scene: Scene, rootUrl: string) {
-        this.name = serializationObject.name ;
+        this.name = serializationObject.name;
     }
 }

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -67,23 +67,6 @@ export class NodeMaterialConnectionPoint {
             return this._typeConnectionSource.type;
         }
 
-        if (this._type === NodeMaterialBlockConnectionPointTypes.InvertInput && this._typeConnectionSource) {
-            switch (this._typeConnectionSource.type) {
-                case NodeMaterialBlockConnectionPointTypes.Color3:
-                    return NodeMaterialBlockConnectionPointTypes.Vector3;
-
-                case NodeMaterialBlockConnectionPointTypes.Color4:
-                    return NodeMaterialBlockConnectionPointTypes.Vector4;
-
-                case NodeMaterialBlockConnectionPointTypes.Vector3:
-                    return NodeMaterialBlockConnectionPointTypes.Color3;
-
-                case NodeMaterialBlockConnectionPointTypes.Vector4:
-                    return NodeMaterialBlockConnectionPointTypes.Color4;
-            }
-            return this._typeConnectionSource.type;
-        }
-
         return this._type;
     }
 
@@ -197,6 +180,31 @@ export class NodeMaterialConnectionPoint {
      */
     public canConnectTo(connectionPoint: NodeMaterialConnectionPoint) {
         if (this.type !== connectionPoint.type && connectionPoint.type !== NodeMaterialBlockConnectionPointTypes.AutoDetect) {
+            // Equivalents
+            switch (this.type) {
+                case NodeMaterialBlockConnectionPointTypes.Vector3: {
+                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Color3) {
+                        return true;
+                    }
+                }
+                case NodeMaterialBlockConnectionPointTypes.Vector4: {
+                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Color4) {
+                        return true;
+                    }
+                }
+                case NodeMaterialBlockConnectionPointTypes.Color3: {
+                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Vector3) {
+                        return true;
+                    }
+                }
+                case NodeMaterialBlockConnectionPointTypes.Color4: {
+                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Vector4) {
+                        return true;
+                    }
+                }
+            }
+
+            // Accepted types
             return (connectionPoint.acceptedConnectionPointTypes && connectionPoint.acceptedConnectionPointTypes.indexOf(this.type) !== -1);
         }
 

src/Materials/Node/nodeMaterialBlockConnectionPointTypes.ts

@@ -21,7 +21,5 @@ export enum NodeMaterialBlockConnectionPointTypes {
     /** Detect type based on connection */
     AutoDetect = 1024,
     /** Output type that will be defined by input type */
-    BasedOnInput = 2048,
-    /** Output type that will be defined by inverting input type (color <-> vector) */
-    InvertInput = 4096
+    BasedOnInput = 2048
 }

src/PostProcesses/RenderPipeline/Pipelines/standardRenderingPipeline.ts

@@ -254,6 +254,11 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
     @serialize()
     public lensFlareDistortionStrength: number = 16.0;
     /**
+     * Configures the blur intensity used for for lens flare (halo)
+     */
+    @serialize()
+    public lensFlareBlurWidth: number = 512.0;
+    /**
      * Lens star texture must be used to simulate rays on the flares and is available
      * in the documentation
      */
@@ -956,7 +961,7 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
         this.lensFlarePostProcess = new PostProcess("HDRLensFlare", "standard", ["strength", "ghostDispersal", "haloWidth", "resolution", "distortionStrength"], ["lensColorSampler"], ratio / 2, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define LENS_FLARE", Constants.TEXTURETYPE_UNSIGNED_INT);
         this.addEffect(new PostProcessRenderEffect(scene.getEngine(), "HDRLensFlare", () => { return this.lensFlarePostProcess; }, true));
 
-        this._createBlurPostProcesses(scene, ratio / 4, 2);
+        this._createBlurPostProcesses(scene, ratio / 4, 2, "lensFlareBlurWidth");
 
         this.lensFlareComposePostProcess = new PostProcess("HDRLensFlareCompose", "standard", ["lensStarMatrix"], ["otherSampler", "lensDirtSampler", "lensStarSampler"], ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define LENS_FLARE_COMPOSE", Constants.TEXTURETYPE_UNSIGNED_INT);
         this.addEffect(new PostProcessRenderEffect(scene.getEngine(), "HDRLensFlareCompose", () => { return this.lensFlareComposePostProcess; }, true));

tests/validation/config.json

@@ -1,10 +1,15 @@
 {
     "root": "https://cdn.babylonjs.com",
-    "tests": [        
+    "tests": [    
         {
-            "title": "Node material",
+            "title": "Node material #1",
+            "playgroundId": "#USQNJ6#3",
+            "referenceImage": "node-material1.png"
+        },     
+        {
+            "title": "Node material #2",
             "playgroundId": "#WYM31D#3",
-            "referenceImage": "node-material.png"
+            "referenceImage": "node-material2.png"
         },
         {
             "title": "Basis loader",