Revert "Nightly"

Playground/babylon.d.txt

@@ -49259,7 +49259,7 @@ declare module BABYLON {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module BABYLON {
@@ -49890,18 +49890,10 @@ declare module BABYLON {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point
@@ -64547,7 +64539,7 @@ declare module BABYLON.GLTF2.Exporter.Extensions {
          * @param scale
          * @param scene
          */
-        private _textureTransformTextureAsync;
+        textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture>;
     }
 }
 declare module BABYLON.GLTF2.Exporter.Extensions {

dist/preview release/babylon.d.ts

@@ -50028,7 +50028,7 @@ declare module BABYLON {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module BABYLON {
@@ -50678,18 +50678,10 @@ declare module BABYLON {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point

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

@@ -52242,7 +52242,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module "babylonjs/Materials/Node/nodeMaterialBuildStateSharedData" {
@@ -52929,18 +52929,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point
@@ -112057,7 +112049,7 @@ declare module BABYLON {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module BABYLON {
@@ -112707,18 +112699,10 @@ declare module BABYLON {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point

dist/preview release/documentation.d.ts

@@ -50028,7 +50028,7 @@ declare module BABYLON {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module BABYLON {
@@ -50678,18 +50678,10 @@ declare module BABYLON {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point
@@ -65603,7 +65595,7 @@ declare module BABYLON.GLTF2.Exporter.Extensions {
          * @param scale
          * @param scene
          */
-        private _textureTransformTextureAsync;
+        textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture>;
     }
 }
 declare module BABYLON.GLTF2.Exporter.Extensions {

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-inspector"] = factory(require("babylonjs-gui"), require("babylonjs-loaders"), require("babylonjs-serializers"), require("babylonjs"));
 	else
 		root["INSPECTOR"] = factory(root["BABYLON"]["GUI"], root["BABYLON"], root["BABYLON"], root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_controls_image__, __WEBPACK_EXTERNAL_MODULE_babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_serializers_glTF_2_0_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_adtInstrumentation__, __WEBPACK_EXTERNAL_MODULE_babylonjs_loaders_glTF_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_serializers_glTF_2_0_index__, __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -36045,7 +36045,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lines/textLineComponent */ "./components/actionTabs/lines/textLineComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/control */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/control */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/sliderLineComponent */ "./components/actionTabs/lines/sliderLineComponent.tsx");
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./components/actionTabs/lines/floatLineComponent.tsx");
@@ -36346,7 +36346,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commonControlPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/image */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs-gui/2D/controls/image */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/floatLineComponent */ "./components/actionTabs/lines/floatLineComponent.tsx");
 /* harmony import */ var _lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../lines/checkBoxLineComponent */ "./components/actionTabs/lines/checkBoxLineComponent.tsx");
@@ -36760,7 +36760,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commonControlPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs-gui/2D/controls/textBlock */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs-gui/2D/controls/textBlock */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lineContainerComponent */ "./components/actionTabs/lineContainerComponent.tsx");
 /* harmony import */ var _lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../lines/textInputLineComponent */ "./components/actionTabs/lines/textInputLineComponent.tsx");
@@ -37884,7 +37884,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../lines/optionsLineComponent */ "./components/actionTabs/lines/optionsLineComponent.tsx");
 /* harmony import */ var _lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../lines/fileButtonLineComponent */ "./components/actionTabs/lines/fileButtonLineComponent.tsx");
 /* harmony import */ var _lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../lines/valueLineComponent */ "./components/actionTabs/lines/valueLineComponent.tsx");
-/* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! babylonjs-gui/2D/adtInstrumentation */ "babylonjs-gui/2D/controls/image");
+/* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! babylonjs-gui/2D/adtInstrumentation */ "babylonjs-gui/2D/adtInstrumentation");
 /* harmony import */ var babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__);
 /* harmony import */ var _customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../customPropertyGridComponent */ "./components/actionTabs/tabs/propertyGrids/customPropertyGridComponent.tsx");
 
@@ -42427,14 +42427,14 @@ var Tools = /** @class */ (function () {
 
 /***/ }),
 
-/***/ "babylonjs-gui/2D/controls/image":
+/***/ "babylonjs-gui/2D/adtInstrumentation":
 /*!************************************************************************************************************************!*\
   !*** external {"root":["BABYLON","GUI"],"commonjs":"babylonjs-gui","commonjs2":"babylonjs-gui","amd":"babylonjs-gui"} ***!
   \************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_controls_image__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_gui_2D_adtInstrumentation__;
 
 /***/ }),
 

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

@@ -1,81 +1,6 @@
 /// <reference types="react" />
 declare module NODEEDITOR {
     /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        getInputFromBlock(): void;
-        createLinkModel(): LinkModel;
-        getValue: Function;
-        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
-declare module NODEEDITOR {
-    interface ITextLineComponentProps {
-        label: string;
-        value: string;
-        color?: string;
-        underline?: boolean;
-        onLink?: () => void;
-    }
-    export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-        constructor(props: ITextLineComponentProps);
-        onLink(): void;
-        renderContent(): JSX.Element;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * Generic node model which stores information about a node editor block
-     */
-    export class GenericNodeModel extends DefaultNodeModel {
-        /**
-         * Labels for the block
-         */
-        header: string;
-        /**
-         * BABYLON.Vector2 for the node if it exists
-         */
-        vector2: BABYLON.Nullable<BABYLON.Vector2>;
-        /**
-         * BABYLON.Vector3 for the node if it exists
-         */
-        vector3: BABYLON.Nullable<BABYLON.Vector3>;
-        /**
-         * BABYLON.Vector4 for the node if it exists
-         */
-        vector4: BABYLON.Nullable<BABYLON.Vector4>;
-        /**
-         * BABYLON.Matrix for the node if it exists
-         */
-        matrix: BABYLON.Nullable<BABYLON.Matrix>;
-        /**
-         * Constructs the node model
-         */
-        constructor();
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
-        renderProperties(globalState: GlobalState): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
      * GenericNodeWidgetProps
      */
     export interface GenericNodeWidgetProps {
@@ -219,7 +144,6 @@ declare module NODEEDITOR {
          */
         constructor();
         renderProperties(globalState: GlobalState): JSX.Element;
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
     }
 }
 declare module NODEEDITOR {
@@ -296,6 +220,36 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class NodeCreationOptions {
+        column: number;
+        nodeMaterialBlock?: BABYLON.NodeMaterialBlock;
+        type?: string;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        private _engine;
+        private _model;
+        private _nodes;
+        /**
+         * Current row/column position used when adding new nodes
+         */
+        private _rowPos;
+        /**
+         * Creates a node and recursivly creates its parent nodes from it's input
+         * @param nodeMaterialBlock
+         */
+        createNodeFromObject(options: NodeCreationOptions): GenericNodeModel | TextureNodeModel;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        constructor(props: IGraphEditorProps);
+        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): GenericNodeModel | TextureNodeModel;
+        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): GenericNodeModel | TextureNodeModel | null;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface INumericInputComponentProps {
         label: string;
         value: number;
@@ -357,7 +311,7 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface IVector2PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: BABYLON.NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
         render(): JSX.Element;
@@ -397,161 +351,73 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface IVector3PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: BABYLON.NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
         render(): JSX.Element;
     }
 }
 declare module NODEEDITOR {
-    export interface ICheckBoxLineComponentProps {
-        label: string;
-        target?: any;
-        propertyName?: string;
-        isSelected?: () => boolean;
-        onSelect?: (value: boolean) => void;
-        onValueChanged?: () => void;
-        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    }
-    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
-        isSelected: boolean;
-    }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
-        private _localChange;
-        constructor(props: ICheckBoxLineComponentProps);
-        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
-            isSelected: boolean;
-        }): boolean;
-        onChange(): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    class ListLineOption {
-        label: string;
-        value: number;
-    }
-    interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: ListLineOption[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    }
-    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-        value: number;
-    }> {
-        private _localChange;
-        constructor(props: IOptionsLineComponentProps);
-        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-            value: number;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    interface IInputPropertyTabComponentProps {
-        globalState: GlobalState;
-        inputNode: InputNodeModel;
-    }
-    export class InputPropertyTabComponentProps extends React.Component<IInputPropertyTabComponentProps> {
-        constructor(props: IInputPropertyTabComponentProps);
-        renderValue(globalState: GlobalState): JSX.Element | null;
-        setDefaultValue(): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
     /**
      * Generic node model which stores information about a node editor block
      */
-    export class InputNodeModel extends DefaultNodeModel {
-        connection?: BABYLON.NodeMaterialConnectionPoint;
+    export class GenericNodeModel extends DefaultNodeModel {
         /**
-         * Constructs the node model
+         * Labels for the block
          */
-        constructor();
-        renderProperties(globalState: GlobalState): JSX.Element | null;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * GenericNodeWidgetProps
-     */
-    export interface InputNodeWidgetProps {
-        node: BABYLON.Nullable<InputNodeModel>;
-        globalState: GlobalState;
-    }
-    /**
-     * Used to display a node block for the node editor
-     */
-    export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
+        headerLabels: Array<{
+            text: string;
+        }>;
         /**
-         * Creates a GenericNodeWidget
-         * @param props
+         * BABYLON.Vector2 for the node if it exists
          */
-        constructor(props: InputNodeWidgetProps);
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * Node factory which creates editor nodes
-     */
-    export class InputNodeFactory extends SRD.AbstractNodeFactory {
-        private _globalState;
+        vector2: BABYLON.Nullable<BABYLON.Vector2>;
         /**
-         * Constructs a GenericNodeFactory
+         * BABYLON.Vector3 for the node if it exists
          */
-        constructor(globalState: GlobalState);
+        vector3: BABYLON.Nullable<BABYLON.Vector3>;
         /**
-         * Generates a node widget
-         * @param diagramEngine diagram engine
-         * @param node node to generate
-         * @returns node widget jsx
+         * BABYLON.Vector4 for the node if it exists
          */
-        generateReactWidget(diagramEngine: SRD.DiagramEngine, node: InputNodeModel): JSX.Element;
+        vector4: BABYLON.Nullable<BABYLON.Vector4>;
         /**
-         * Gets a new instance of a node model
-         * @returns input node model
+         * BABYLON.Matrix for the node if it exists
+         */
+        matrix: BABYLON.Nullable<BABYLON.Matrix>;
+        /**
+         * Constructs the node model
          */
-        getNewInstance(): InputNodeModel;
+        constructor();
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: BABYLON.NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
+        renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
 declare module NODEEDITOR {
-    interface IGraphEditorProps {
-        globalState: GlobalState;
-    }
-    export class NodeCreationOptions {
-        column: number;
-        nodeMaterialBlock?: BABYLON.NodeMaterialBlock;
-        type?: string;
-        connection?: BABYLON.NodeMaterialConnectionPoint;
-    }
-    export class GraphEditor extends React.Component<IGraphEditorProps> {
-        private _engine;
-        private _model;
-        private _nodes;
+    /**
+     * Port model for the generic node
+     */
+    export class GenericPortModel extends PortModel {
         /**
-         * Current row/column position used when adding new nodes
+         * If the port is input or output
          */
-        private _rowPos;
+        position: string | "input" | "output";
         /**
-         * Creates a node and recursivly creates its parent nodes from it's input
-         * @param nodeMaterialBlock
+         * What the port is connected to
          */
-        createNodeFromObject(options: NodeCreationOptions): DefaultNodeModel;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        constructor(props: IGraphEditorProps);
-        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): DefaultNodeModel;
-        render(): JSX.Element;
+        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
+        getNodeModel(): GenericNodeModel;
+        link(outPort: GenericPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        getInputFromBlock(): void;
+        createLinkModel(): LinkModel;
+        getValue: Function;
+        static SortInputOutput(a: BABYLON.Nullable<GenericPortModel>, b: BABYLON.Nullable<GenericPortModel>): {
+            input: GenericPortModel;
+            output: GenericPortModel;
+        } | null;
     }
 }
 declare module NODEEDITOR {
@@ -564,13 +430,14 @@ declare module NODEEDITOR {
          */
         block: BABYLON.Nullable<BABYLON.NodeMaterialBlock>;
         ports: {
-            [s: string]: DefaultPortModel;
+            [s: string]: GenericPortModel;
         };
         /**
          * Constructs the node model
          */
         constructor(key: string);
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: BABYLON.NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
         renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
@@ -580,7 +447,6 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<DefaultNodeModel>>;
-        onRebuildRequiredObservable: BABYLON.Observable<void>;
     }
 }
 declare module NODEEDITOR {

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

@@ -1,95 +1,9 @@
 /// <reference types="react" />
-declare module "babylonjs-node-editor/components/diagram/defaultPortModel" {
-    import { LinkModel, PortModel } from "storm-react-diagrams";
-    import { Nullable } from 'babylonjs/types';
-    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
-    /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: Nullable<NodeMaterialConnectionPoint>;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        syncWithNodeMaterialConnectionPoint(connection: NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        getInputFromBlock(): void;
-        createLinkModel(): LinkModel;
-        getValue: Function;
-        static SortInputOutput(a: Nullable<DefaultPortModel>, b: Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
-declare module "babylonjs-node-editor/sharedComponents/textLineComponent" {
-    import * as React from "react";
-    interface ITextLineComponentProps {
-        label: string;
-        value: string;
-        color?: string;
-        underline?: boolean;
-        onLink?: () => void;
-    }
-    export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-        constructor(props: ITextLineComponentProps);
-        onLink(): void;
-        renderContent(): JSX.Element;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-node-editor/components/diagram/generic/genericNodeModel" {
-    import { Nullable } from 'babylonjs/types';
-    import { Vector2, Vector3, Vector4, Matrix } from 'babylonjs/Maths/math';
-    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
-    import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
-    import { GraphEditor, NodeCreationOptions } from "babylonjs-node-editor/graphEditor";
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    /**
-     * Generic node model which stores information about a node editor block
-     */
-    export class GenericNodeModel extends DefaultNodeModel {
-        /**
-         * Labels for the block
-         */
-        header: string;
-        /**
-         * Vector2 for the node if it exists
-         */
-        vector2: Nullable<Vector2>;
-        /**
-         * Vector3 for the node if it exists
-         */
-        vector3: Nullable<Vector3>;
-        /**
-         * Vector4 for the node if it exists
-         */
-        vector4: Nullable<Vector4>;
-        /**
-         * Matrix for the node if it exists
-         */
-        matrix: Nullable<Matrix>;
-        /**
-         * Constructs the node model
-         */
-        constructor();
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
-        renderProperties(globalState: GlobalState): JSX.Element;
-    }
-}
 declare module "babylonjs-node-editor/components/diagram/generic/genericNodeWidget" {
     import * as React from "react";
+    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
     import { Nullable } from 'babylonjs/types';
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
     /**
      * GenericNodeWidgetProps
      */
@@ -243,8 +157,6 @@ declare module "babylonjs-node-editor/components/diagram/texture/textureNodeMode
     import { Texture } from 'babylonjs/Materials/Textures/texture';
     import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodeCreationOptions, GraphEditor } from "babylonjs-node-editor/graphEditor";
-    import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
     /**
      * Texture node model which stores information about a node editor block
      */
@@ -258,7 +170,6 @@ declare module "babylonjs-node-editor/components/diagram/texture/textureNodeMode
          */
         constructor();
         renderProperties(globalState: GlobalState): JSX.Element;
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
     }
 }
 declare module "babylonjs-node-editor/sharedComponents/textureLineComponent" {
@@ -343,6 +254,42 @@ declare module "babylonjs-node-editor/components/diagram/texture/textureNodeFact
         getNewInstance(): TextureNodeModel;
     }
 }
+declare module "babylonjs-node-editor/graphEditor" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-node-editor/globalState";
+    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
+    import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { TextureNodeModel } from "babylonjs-node-editor/components/diagram/texture/textureNodeModel";
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class NodeCreationOptions {
+        column: number;
+        nodeMaterialBlock?: NodeMaterialBlock;
+        type?: string;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        private _engine;
+        private _model;
+        private _nodes;
+        /**
+         * Current row/column position used when adding new nodes
+         */
+        private _rowPos;
+        /**
+         * Creates a node and recursivly creates its parent nodes from it's input
+         * @param nodeMaterialBlock
+         */
+        createNodeFromObject(options: NodeCreationOptions): GenericNodeModel | TextureNodeModel;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        constructor(props: IGraphEditorProps);
+        addNodeFromClass(ObjectClass: typeof NodeMaterialBlock): GenericNodeModel | TextureNodeModel;
+        addValueNode(type: string, column?: number, connection?: NodeMaterialConnectionPoint): GenericNodeModel | TextureNodeModel | null;
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-node-editor/sharedComponents/numericInputComponent" {
     import * as React from "react";
     interface INumericInputComponentProps {
@@ -410,10 +357,10 @@ declare module "babylonjs-node-editor/sharedComponents/vector2LineComponent" {
 declare module "babylonjs-node-editor/components/propertyTab/properties/vector2PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
     interface IVector2PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
         render(): JSX.Element;
@@ -457,197 +404,98 @@ declare module "babylonjs-node-editor/sharedComponents/vector3LineComponent" {
 declare module "babylonjs-node-editor/components/propertyTab/properties/vector3PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
     interface IVector3PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
         render(): JSX.Element;
     }
 }
-declare module "babylonjs-node-editor/sharedComponents/checkBoxLineComponent" {
-    import * as React from "react";
-    import { Observable } from "babylonjs/Misc/observable";
-    import { PropertyChangedEvent } from "babylonjs-node-editor/sharedComponents/propertyChangedEvent";
-    export interface ICheckBoxLineComponentProps {
-        label: string;
-        target?: any;
-        propertyName?: string;
-        isSelected?: () => boolean;
-        onSelect?: (value: boolean) => void;
-        onValueChanged?: () => void;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
-        isSelected: boolean;
-    }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
-        private _localChange;
-        constructor(props: ICheckBoxLineComponentProps);
-        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
-            isSelected: boolean;
-        }): boolean;
-        onChange(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-node-editor/sharedComponents/optionsLineComponent" {
-    import * as React from "react";
-    import { Observable } from "babylonjs/Misc/observable";
-    import { PropertyChangedEvent } from "babylonjs-node-editor/sharedComponents/propertyChangedEvent";
-    class ListLineOption {
-        label: string;
-        value: number;
-    }
-    interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: ListLineOption[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-        value: number;
-    }> {
-        private _localChange;
-        constructor(props: IOptionsLineComponentProps);
-        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-            value: number;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-node-editor/components/diagram/input/inputNodePropertyComponent" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { InputNodeModel } from "babylonjs-node-editor/components/diagram/input/inputNodeModel";
-    interface IInputPropertyTabComponentProps {
-        globalState: GlobalState;
-        inputNode: InputNodeModel;
-    }
-    export class InputPropertyTabComponentProps extends React.Component<IInputPropertyTabComponentProps> {
-        constructor(props: IInputPropertyTabComponentProps);
-        renderValue(globalState: GlobalState): JSX.Element | null;
-        setDefaultValue(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-node-editor/components/diagram/input/inputNodeModel" {
+declare module "babylonjs-node-editor/components/diagram/generic/genericNodeModel" {
+    import { Nullable } from 'babylonjs/types';
+    import { Vector2, Vector3, Vector4, Matrix } from 'babylonjs/Maths/math';
     import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
+    import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
+    import { GraphEditor, NodeCreationOptions } from "babylonjs-node-editor/graphEditor";
+    import { GenericPortModel } from "babylonjs-node-editor/components/diagram/generic/genericPortModel";
     import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
     import { GlobalState } from "babylonjs-node-editor/globalState";
     /**
      * Generic node model which stores information about a node editor block
      */
-    export class InputNodeModel extends DefaultNodeModel {
-        connection?: NodeMaterialConnectionPoint;
+    export class GenericNodeModel extends DefaultNodeModel {
         /**
-         * Constructs the node model
+         * Labels for the block
          */
-        constructor();
-        renderProperties(globalState: GlobalState): JSX.Element | null;
-    }
-}
-declare module "babylonjs-node-editor/components/diagram/input/inputNodeWidget" {
-    import * as React from "react";
-    import { InputNodeModel } from "babylonjs-node-editor/components/diagram/input/inputNodeModel";
-    import { Nullable } from 'babylonjs/types';
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    /**
-     * GenericNodeWidgetProps
-     */
-    export interface InputNodeWidgetProps {
-        node: Nullable<InputNodeModel>;
-        globalState: GlobalState;
-    }
-    /**
-     * Used to display a node block for the node editor
-     */
-    export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
+        headerLabels: Array<{
+            text: string;
+        }>;
         /**
-         * Creates a GenericNodeWidget
-         * @param props
+         * Vector2 for the node if it exists
          */
-        constructor(props: InputNodeWidgetProps);
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-node-editor/components/diagram/input/inputNodeFactory" {
-    import * as SRD from "storm-react-diagrams";
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { InputNodeModel } from "babylonjs-node-editor/components/diagram/input/inputNodeModel";
-    /**
-     * Node factory which creates editor nodes
-     */
-    export class InputNodeFactory extends SRD.AbstractNodeFactory {
-        private _globalState;
+        vector2: Nullable<Vector2>;
         /**
-         * Constructs a GenericNodeFactory
+         * Vector3 for the node if it exists
          */
-        constructor(globalState: GlobalState);
+        vector3: Nullable<Vector3>;
         /**
-         * Generates a node widget
-         * @param diagramEngine diagram engine
-         * @param node node to generate
-         * @returns node widget jsx
+         * Vector4 for the node if it exists
          */
-        generateReactWidget(diagramEngine: SRD.DiagramEngine, node: InputNodeModel): JSX.Element;
+        vector4: Nullable<Vector4>;
         /**
-         * Gets a new instance of a node model
-         * @returns input node model
+         * Matrix for the node if it exists
          */
-        getNewInstance(): InputNodeModel;
+        matrix: Nullable<Matrix>;
+        /**
+         * Constructs the node model
+         */
+        constructor();
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
+        renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
-declare module "babylonjs-node-editor/graphEditor" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+declare module "babylonjs-node-editor/components/diagram/generic/genericPortModel" {
+    import { LinkModel, PortModel } from "storm-react-diagrams";
+    import { Nullable } from 'babylonjs/types';
     import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-    import { DefaultNodeModel } from "babylonjs-node-editor/components/diagram/defaultNodeModel";
-    interface IGraphEditorProps {
-        globalState: GlobalState;
-    }
-    export class NodeCreationOptions {
-        column: number;
-        nodeMaterialBlock?: NodeMaterialBlock;
-        type?: string;
-        connection?: NodeMaterialConnectionPoint;
-    }
-    export class GraphEditor extends React.Component<IGraphEditorProps> {
-        private _engine;
-        private _model;
-        private _nodes;
+    import { GenericNodeModel } from "babylonjs-node-editor/components/diagram/generic/genericNodeModel";
+    /**
+     * Port model for the generic node
+     */
+    export class GenericPortModel extends PortModel {
         /**
-         * Current row/column position used when adding new nodes
+         * If the port is input or output
          */
-        private _rowPos;
+        position: string | "input" | "output";
         /**
-         * Creates a node and recursivly creates its parent nodes from it's input
-         * @param nodeMaterialBlock
+         * What the port is connected to
          */
-        createNodeFromObject(options: NodeCreationOptions): DefaultNodeModel;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        constructor(props: IGraphEditorProps);
-        addNodeFromClass(ObjectClass: typeof NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: NodeMaterialConnectionPoint): DefaultNodeModel;
-        render(): JSX.Element;
+        connection: Nullable<NodeMaterialConnectionPoint>;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        syncWithNodeMaterialConnectionPoint(connection: NodeMaterialConnectionPoint): void;
+        getNodeModel(): GenericNodeModel;
+        link(outPort: GenericPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        getInputFromBlock(): void;
+        createLinkModel(): LinkModel;
+        getValue: Function;
+        static SortInputOutput(a: Nullable<GenericPortModel>, b: Nullable<GenericPortModel>): {
+            input: GenericPortModel;
+            output: GenericPortModel;
+        } | null;
     }
 }
 declare module "babylonjs-node-editor/components/diagram/defaultNodeModel" {
     import { NodeModel, DiagramModel } from "storm-react-diagrams";
     import { Nullable } from 'babylonjs/types';
     import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+    import { GenericPortModel } from "babylonjs-node-editor/components/diagram/generic/genericPortModel";
     import { GraphEditor, NodeCreationOptions } from "babylonjs-node-editor/graphEditor";
+    import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { DefaultPortModel } from "babylonjs-node-editor/components/diagram/defaultPortModel";
     /**
      * Generic node model which stores information about a node editor block
      */
@@ -657,13 +505,14 @@ declare module "babylonjs-node-editor/components/diagram/defaultNodeModel" {
          */
         block: Nullable<NodeMaterialBlock>;
         ports: {
-            [s: string]: DefaultPortModel;
+            [s: string]: GenericPortModel;
         };
         /**
          * Constructs the node model
          */
         constructor(key: string);
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
         renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
@@ -677,7 +526,6 @@ declare module "babylonjs-node-editor/globalState" {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         onSelectionChangedObservable: Observable<Nullable<DefaultNodeModel>>;
-        onRebuildRequiredObservable: Observable<void>;
     }
 }
 declare module "babylonjs-node-editor/sharedComponents/popup" {
@@ -717,81 +565,6 @@ declare module "babylonjs-node-editor" {
 /// <reference types="react" />
 declare module NODEEDITOR {
     /**
-     * Port model
-     */
-    export class DefaultPortModel extends PortModel {
-        /**
-         * If the port is input or output
-         */
-        position: string | "input" | "output";
-        /**
-         * What the port is connected to
-         */
-        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
-        static idCounter: number;
-        constructor(name: string, type?: string);
-        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
-        getNodeModel(): DefaultNodeModel;
-        link(outPort: DefaultPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
-        getInputFromBlock(): void;
-        createLinkModel(): LinkModel;
-        getValue: Function;
-        static SortInputOutput(a: BABYLON.Nullable<DefaultPortModel>, b: BABYLON.Nullable<DefaultPortModel>): {
-            input: DefaultPortModel;
-            output: DefaultPortModel;
-        } | null;
-    }
-}
-declare module NODEEDITOR {
-    interface ITextLineComponentProps {
-        label: string;
-        value: string;
-        color?: string;
-        underline?: boolean;
-        onLink?: () => void;
-    }
-    export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-        constructor(props: ITextLineComponentProps);
-        onLink(): void;
-        renderContent(): JSX.Element;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * Generic node model which stores information about a node editor block
-     */
-    export class GenericNodeModel extends DefaultNodeModel {
-        /**
-         * Labels for the block
-         */
-        header: string;
-        /**
-         * BABYLON.Vector2 for the node if it exists
-         */
-        vector2: BABYLON.Nullable<BABYLON.Vector2>;
-        /**
-         * BABYLON.Vector3 for the node if it exists
-         */
-        vector3: BABYLON.Nullable<BABYLON.Vector3>;
-        /**
-         * BABYLON.Vector4 for the node if it exists
-         */
-        vector4: BABYLON.Nullable<BABYLON.Vector4>;
-        /**
-         * BABYLON.Matrix for the node if it exists
-         */
-        matrix: BABYLON.Nullable<BABYLON.Matrix>;
-        /**
-         * Constructs the node model
-         */
-        constructor();
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
-        renderProperties(globalState: GlobalState): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
      * GenericNodeWidgetProps
      */
     export interface GenericNodeWidgetProps {
@@ -935,7 +708,6 @@ declare module NODEEDITOR {
          */
         constructor();
         renderProperties(globalState: GlobalState): JSX.Element;
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
     }
 }
 declare module NODEEDITOR {
@@ -1012,6 +784,36 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class NodeCreationOptions {
+        column: number;
+        nodeMaterialBlock?: BABYLON.NodeMaterialBlock;
+        type?: string;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        private _engine;
+        private _model;
+        private _nodes;
+        /**
+         * Current row/column position used when adding new nodes
+         */
+        private _rowPos;
+        /**
+         * Creates a node and recursivly creates its parent nodes from it's input
+         * @param nodeMaterialBlock
+         */
+        createNodeFromObject(options: NodeCreationOptions): GenericNodeModel | TextureNodeModel;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        constructor(props: IGraphEditorProps);
+        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): GenericNodeModel | TextureNodeModel;
+        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): GenericNodeModel | TextureNodeModel | null;
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
     interface INumericInputComponentProps {
         label: string;
         value: number;
@@ -1073,7 +875,7 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface IVector2PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: BABYLON.NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
         render(): JSX.Element;
@@ -1113,161 +915,73 @@ declare module NODEEDITOR {
 declare module NODEEDITOR {
     interface IVector3PropertyTabComponentProps {
         globalState: GlobalState;
-        connection: BABYLON.NodeMaterialConnectionPoint;
+        node: GenericNodeModel;
     }
     export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
         render(): JSX.Element;
     }
 }
 declare module NODEEDITOR {
-    export interface ICheckBoxLineComponentProps {
-        label: string;
-        target?: any;
-        propertyName?: string;
-        isSelected?: () => boolean;
-        onSelect?: (value: boolean) => void;
-        onValueChanged?: () => void;
-        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    }
-    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
-        isSelected: boolean;
-    }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
-        private _localChange;
-        constructor(props: ICheckBoxLineComponentProps);
-        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
-            isSelected: boolean;
-        }): boolean;
-        onChange(): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    class ListLineOption {
-        label: string;
-        value: number;
-    }
-    interface IOptionsLineComponentProps {
-        label: string;
-        target: any;
-        propertyName: string;
-        options: ListLineOption[];
-        noDirectUpdate?: boolean;
-        onSelect?: (value: number) => void;
-        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
-    }
-    export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-        value: number;
-    }> {
-        private _localChange;
-        constructor(props: IOptionsLineComponentProps);
-        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-            value: number;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    interface IInputPropertyTabComponentProps {
-        globalState: GlobalState;
-        inputNode: InputNodeModel;
-    }
-    export class InputPropertyTabComponentProps extends React.Component<IInputPropertyTabComponentProps> {
-        constructor(props: IInputPropertyTabComponentProps);
-        renderValue(globalState: GlobalState): JSX.Element | null;
-        setDefaultValue(): void;
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
     /**
      * Generic node model which stores information about a node editor block
      */
-    export class InputNodeModel extends DefaultNodeModel {
-        connection?: BABYLON.NodeMaterialConnectionPoint;
+    export class GenericNodeModel extends DefaultNodeModel {
         /**
-         * Constructs the node model
+         * Labels for the block
          */
-        constructor();
-        renderProperties(globalState: GlobalState): JSX.Element | null;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * GenericNodeWidgetProps
-     */
-    export interface InputNodeWidgetProps {
-        node: BABYLON.Nullable<InputNodeModel>;
-        globalState: GlobalState;
-    }
-    /**
-     * Used to display a node block for the node editor
-     */
-    export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
+        headerLabels: Array<{
+            text: string;
+        }>;
         /**
-         * Creates a GenericNodeWidget
-         * @param props
+         * BABYLON.Vector2 for the node if it exists
          */
-        constructor(props: InputNodeWidgetProps);
-        render(): JSX.Element;
-    }
-}
-declare module NODEEDITOR {
-    /**
-     * Node factory which creates editor nodes
-     */
-    export class InputNodeFactory extends SRD.AbstractNodeFactory {
-        private _globalState;
+        vector2: BABYLON.Nullable<BABYLON.Vector2>;
         /**
-         * Constructs a GenericNodeFactory
+         * BABYLON.Vector3 for the node if it exists
          */
-        constructor(globalState: GlobalState);
+        vector3: BABYLON.Nullable<BABYLON.Vector3>;
         /**
-         * Generates a node widget
-         * @param diagramEngine diagram engine
-         * @param node node to generate
-         * @returns node widget jsx
+         * BABYLON.Vector4 for the node if it exists
          */
-        generateReactWidget(diagramEngine: SRD.DiagramEngine, node: InputNodeModel): JSX.Element;
+        vector4: BABYLON.Nullable<BABYLON.Vector4>;
         /**
-         * Gets a new instance of a node model
-         * @returns input node model
+         * BABYLON.Matrix for the node if it exists
          */
-        getNewInstance(): InputNodeModel;
+        matrix: BABYLON.Nullable<BABYLON.Matrix>;
+        /**
+         * Constructs the node model
+         */
+        constructor();
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: BABYLON.NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
+        renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
 declare module NODEEDITOR {
-    interface IGraphEditorProps {
-        globalState: GlobalState;
-    }
-    export class NodeCreationOptions {
-        column: number;
-        nodeMaterialBlock?: BABYLON.NodeMaterialBlock;
-        type?: string;
-        connection?: BABYLON.NodeMaterialConnectionPoint;
-    }
-    export class GraphEditor extends React.Component<IGraphEditorProps> {
-        private _engine;
-        private _model;
-        private _nodes;
+    /**
+     * Port model for the generic node
+     */
+    export class GenericPortModel extends PortModel {
         /**
-         * Current row/column position used when adding new nodes
+         * If the port is input or output
          */
-        private _rowPos;
+        position: string | "input" | "output";
         /**
-         * Creates a node and recursivly creates its parent nodes from it's input
-         * @param nodeMaterialBlock
+         * What the port is connected to
          */
-        createNodeFromObject(options: NodeCreationOptions): DefaultNodeModel;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        constructor(props: IGraphEditorProps);
-        addNodeFromClass(ObjectClass: typeof BABYLON.NodeMaterialBlock): DefaultNodeModel;
-        addValueNode(type: string, column?: number, connection?: BABYLON.NodeMaterialConnectionPoint): DefaultNodeModel;
-        render(): JSX.Element;
+        connection: BABYLON.Nullable<BABYLON.NodeMaterialConnectionPoint>;
+        static idCounter: number;
+        constructor(name: string, type?: string);
+        syncWithNodeMaterialConnectionPoint(connection: BABYLON.NodeMaterialConnectionPoint): void;
+        getNodeModel(): GenericNodeModel;
+        link(outPort: GenericPortModel): LinkModel<import("storm-react-diagrams").LinkModelListener>;
+        getInputFromBlock(): void;
+        createLinkModel(): LinkModel;
+        getValue: Function;
+        static SortInputOutput(a: BABYLON.Nullable<GenericPortModel>, b: BABYLON.Nullable<GenericPortModel>): {
+            input: GenericPortModel;
+            output: GenericPortModel;
+        } | null;
     }
 }
 declare module NODEEDITOR {
@@ -1280,13 +994,14 @@ declare module NODEEDITOR {
          */
         block: BABYLON.Nullable<BABYLON.NodeMaterialBlock>;
         ports: {
-            [s: string]: DefaultPortModel;
+            [s: string]: GenericPortModel;
         };
         /**
          * Constructs the node model
          */
         constructor(key: string);
-        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]): void;
+        prepareConnection(type: string, outPort: GenericPortModel, connection?: BABYLON.NodeMaterialConnectionPoint): void;
+        prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor): void;
         renderProperties(globalState: GlobalState): JSX.Element | null;
     }
 }
@@ -1296,7 +1011,6 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<DefaultNodeModel>>;
-        onRebuildRequiredObservable: BABYLON.Observable<void>;
     }
 }
 declare module NODEEDITOR {

dist/preview release/postProcessesLibrary/babylon.asciiArtPostProcess.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-post-process"] = factory(require("babylonjs"));
 	else
 		root["POSTPROCESSES"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -357,7 +357,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AsciiArtFontTexture", function() { return AsciiArtFontTexture; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AsciiArtPostProcess", function() { return AsciiArtPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _asciiart_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./asciiart.fragment */ "./asciiArt/asciiart.fragment.ts");
 
@@ -578,7 +578,7 @@ var AsciiArtPostProcess = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "asciiartPixelShader", function() { return asciiartPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'asciiartPixelShader';
@@ -640,14 +640,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/Textures/texture":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__;
 
 /***/ })
 

dist/preview release/postProcessesLibrary/babylon.digitalRainPostProcess.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-post-process"] = factory(require("babylonjs"));
 	else
 		root["POSTPROCESSES"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -357,7 +357,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DigitalRainFontTexture", function() { return DigitalRainFontTexture; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DigitalRainPostProcess", function() { return DigitalRainPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _digitalrain_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./digitalrain.fragment */ "./digitalRain/digitalrain.fragment.ts");
 
@@ -584,7 +584,7 @@ var DigitalRainPostProcess = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "digitalrainPixelShader", function() { return digitalrainPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'digitalrainPixelShader';
@@ -646,14 +646,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/Textures/texture":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__;
 
 /***/ })
 

dist/preview release/postProcessesLibrary/babylon.oceanPostProcess.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-post-process"] = factory(require("babylonjs"));
 	else
 		root["POSTPROCESSES"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -401,7 +401,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "oceanPostProcessPixelShader", function() { return oceanPostProcessPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'oceanPostProcessPixelShader';
@@ -424,7 +424,7 @@ var oceanPostProcessPixelShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OceanPostProcess", function() { return OceanPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/Textures/texture */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/Textures/texture */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _oceanPostProcess_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./oceanPostProcess.fragment */ "./ocean/oceanPostProcess.fragment.ts");
 
@@ -628,14 +628,14 @@ var OceanPostProcess = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/Textures/texture":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__;
 
 /***/ })
 

dist/preview release/postProcessesLibrary/babylonjs.postProcess.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-post-process"] = factory(require("babylonjs"));
 	else
 		root["POSTPROCESSES"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -357,7 +357,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AsciiArtFontTexture", function() { return AsciiArtFontTexture; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AsciiArtPostProcess", function() { return AsciiArtPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _asciiart_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./asciiart.fragment */ "./asciiArt/asciiart.fragment.ts");
 
@@ -578,7 +578,7 @@ var AsciiArtPostProcess = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "asciiartPixelShader", function() { return asciiartPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'asciiartPixelShader';
@@ -621,7 +621,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DigitalRainFontTexture", function() { return DigitalRainFontTexture; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DigitalRainPostProcess", function() { return DigitalRainPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _digitalrain_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./digitalrain.fragment */ "./digitalRain/digitalrain.fragment.ts");
 
@@ -848,7 +848,7 @@ var DigitalRainPostProcess = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "digitalrainPixelShader", function() { return digitalrainPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'digitalrainPixelShader';
@@ -973,7 +973,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "oceanPostProcessPixelShader", function() { return oceanPostProcessPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'oceanPostProcessPixelShader';
@@ -996,7 +996,7 @@ var oceanPostProcessPixelShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OceanPostProcess", function() { return OceanPostProcess; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/Textures/texture */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/Textures/texture */ "babylonjs/Materials/Textures/texture");
 /* harmony import */ var babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _oceanPostProcess_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./oceanPostProcess.fragment */ "./ocean/oceanPostProcess.fragment.ts");
 
@@ -1200,14 +1200,14 @@ var OceanPostProcess = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/Textures/texture":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_Textures_texture__;
 
 /***/ })
 

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

@@ -300,13 +300,14 @@ _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___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
+/* 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___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 _shaders_textureTransform_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shaders/textureTransform.fragment */ "./glTF/2.0/shaders/textureTransform.fragment.ts");
 
 
 
+
 var NAME = "KHR_texture_transform";
 
 /**
@@ -328,12 +329,6 @@ var KHR_texture_transform = /** @class */ (function () {
     KHR_texture_transform.prototype.preExportTextureAsync = function (context, babylonTexture, mimeType) {
         var _this = this;
         return new Promise(function (resolve, reject) {
-            var scene = babylonTexture.getScene();
-            if (!scene) {
-                reject(context + ": \"scene\" is not defined for Babylon texture " + babylonTexture.name + "!");
-                return;
-            }
-            // TODO: this doesn't take into account rotation center values
             var texture_transform_extension = {};
             if (babylonTexture.uOffset !== 0 || babylonTexture.vOffset !== 0) {
                 texture_transform_extension.offset = [babylonTexture.uOffset, babylonTexture.vOffset];
@@ -346,9 +341,19 @@ var KHR_texture_transform = /** @class */ (function () {
             }
             if (!Object.keys(texture_transform_extension).length) {
                 resolve(babylonTexture);
-                return;
             }
-            return _this._textureTransformTextureAsync(babylonTexture, scene);
+            var scale = texture_transform_extension.scale ? new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](texture_transform_extension.scale[0], texture_transform_extension.scale[1]) : babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"].One();
+            var rotation = texture_transform_extension.rotation != null ? texture_transform_extension.rotation : 0;
+            var offset = texture_transform_extension.offset ? new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](texture_transform_extension.offset[0], texture_transform_extension.offset[1]) : babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
+            var scene = babylonTexture.getScene();
+            if (!scene) {
+                reject(context + ": \"scene\" is not defined for Babylon texture " + babylonTexture.name + "!");
+            }
+            else {
+                _this.textureTransformTextureAsync(babylonTexture, offset, rotation, scale, scene).then(function (texture) {
+                    resolve(texture);
+                });
+            }
         });
     };
     /**
@@ -359,11 +364,11 @@ var KHR_texture_transform = /** @class */ (function () {
      * @param scale
      * @param scene
      */
-    KHR_texture_transform.prototype._textureTransformTextureAsync = function (babylonTexture, scene) {
-        return new Promise(function (resolve) {
-            var proceduralTexture = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["ProceduralTexture"]("" + babylonTexture.name, babylonTexture.getSize(), "textureTransform", scene);
+    KHR_texture_transform.prototype.textureTransformTextureAsync = function (babylonTexture, offset, rotation, scale, scene) {
+        return new Promise(function (resolve, reject) {
+            var proceduralTexture = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["ProceduralTexture"]("" + babylonTexture.name, babylonTexture.getSize(), "textureTransform", scene);
             if (!proceduralTexture) {
-                babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].Log("Cannot create procedural texture for " + babylonTexture.name + "!");
+                babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Tools"].Log("Cannot create procedural texture for " + babylonTexture.name + "!");
                 resolve(babylonTexture);
             }
             proceduralTexture.setTexture("textureSampler", babylonTexture);

dist/preview release/serializers/babylonjs.serializers.d.ts

@@ -1023,7 +1023,7 @@ declare module BABYLON.GLTF2.Exporter.Extensions {
          * @param scale
          * @param scene
          */
-        private _textureTransformTextureAsync;
+        textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture>;
     }
 }
 declare module BABYLON.GLTF2.Exporter.Extensions {

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

@@ -478,13 +478,14 @@ _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___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
+/* 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___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 _shaders_textureTransform_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shaders/textureTransform.fragment */ "./glTF/2.0/shaders/textureTransform.fragment.ts");
 
 
 
+
 var NAME = "KHR_texture_transform";
 
 /**
@@ -506,12 +507,6 @@ var KHR_texture_transform = /** @class */ (function () {
     KHR_texture_transform.prototype.preExportTextureAsync = function (context, babylonTexture, mimeType) {
         var _this = this;
         return new Promise(function (resolve, reject) {
-            var scene = babylonTexture.getScene();
-            if (!scene) {
-                reject(context + ": \"scene\" is not defined for Babylon texture " + babylonTexture.name + "!");
-                return;
-            }
-            // TODO: this doesn't take into account rotation center values
             var texture_transform_extension = {};
             if (babylonTexture.uOffset !== 0 || babylonTexture.vOffset !== 0) {
                 texture_transform_extension.offset = [babylonTexture.uOffset, babylonTexture.vOffset];
@@ -524,9 +519,19 @@ var KHR_texture_transform = /** @class */ (function () {
             }
             if (!Object.keys(texture_transform_extension).length) {
                 resolve(babylonTexture);
-                return;
             }
-            return _this._textureTransformTextureAsync(babylonTexture, scene);
+            var scale = texture_transform_extension.scale ? new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](texture_transform_extension.scale[0], texture_transform_extension.scale[1]) : babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"].One();
+            var rotation = texture_transform_extension.rotation != null ? texture_transform_extension.rotation : 0;
+            var offset = texture_transform_extension.offset ? new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](texture_transform_extension.offset[0], texture_transform_extension.offset[1]) : babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
+            var scene = babylonTexture.getScene();
+            if (!scene) {
+                reject(context + ": \"scene\" is not defined for Babylon texture " + babylonTexture.name + "!");
+            }
+            else {
+                _this.textureTransformTextureAsync(babylonTexture, offset, rotation, scale, scene).then(function (texture) {
+                    resolve(texture);
+                });
+            }
         });
     };
     /**
@@ -537,11 +542,11 @@ var KHR_texture_transform = /** @class */ (function () {
      * @param scale
      * @param scene
      */
-    KHR_texture_transform.prototype._textureTransformTextureAsync = function (babylonTexture, scene) {
-        return new Promise(function (resolve) {
-            var proceduralTexture = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["ProceduralTexture"]("" + babylonTexture.name, babylonTexture.getSize(), "textureTransform", scene);
+    KHR_texture_transform.prototype.textureTransformTextureAsync = function (babylonTexture, offset, rotation, scale, scene) {
+        return new Promise(function (resolve, reject) {
+            var proceduralTexture = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["ProceduralTexture"]("" + babylonTexture.name, babylonTexture.getSize(), "textureTransform", scene);
             if (!proceduralTexture) {
-                babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].Log("Cannot create procedural texture for " + babylonTexture.name + "!");
+                babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Tools"].Log("Cannot create procedural texture for " + babylonTexture.name + "!");
                 resolve(babylonTexture);
             }
             proceduralTexture.setTexture("textureSampler", babylonTexture);

dist/preview release/serializers/babylonjs.serializers.module.d.ts

@@ -1048,7 +1048,10 @@ declare module "babylonjs-serializers/glTF/2.0/shaders/textureTransform.fragment
 declare module "babylonjs-serializers/glTF/2.0/Extensions/KHR_texture_transform" {
     import { ImageMimeType } from "babylonjs-gltf2interface";
     import { Nullable } from "babylonjs/types";
+    import { Vector2 } from "babylonjs/Maths/math";
+    import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
     import { Texture } from "babylonjs/Materials/Textures/texture";
+    import { Scene } from "babylonjs/scene";
     import { IGLTFExporterExtensionV2 } from "babylonjs-serializers/glTF/2.0/glTFExporterExtension";
     import { _Exporter } from "babylonjs-serializers/glTF/2.0/glTFExporter";
     import "babylonjs-serializers/glTF/2.0/shaders/textureTransform.fragment";
@@ -1075,7 +1078,7 @@ declare module "babylonjs-serializers/glTF/2.0/Extensions/KHR_texture_transform"
          * @param scale
          * @param scene
          */
-        private _textureTransformTextureAsync;
+        textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture>;
     }
 }
 declare module "babylonjs-serializers/glTF/2.0/Extensions/KHR_lights_punctual" {
@@ -2201,7 +2204,7 @@ declare module BABYLON.GLTF2.Exporter.Extensions {
          * @param scale
          * @param scene
          */
-        private _textureTransformTextureAsync;
+        textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture>;
     }
 }
 declare module BABYLON.GLTF2.Exporter.Extensions {

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

@@ -52242,7 +52242,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module "babylonjs/Materials/Node/nodeMaterialBuildStateSharedData" {
@@ -52929,18 +52929,10 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point
@@ -112057,7 +112049,7 @@ declare module BABYLON {
         /** WorldViewProjection */
         WorldViewProjection = 6,
         /** Will be filled by the block itself */
-        Automatic = 7
+        BlockBased = 7
     }
 }
 declare module BABYLON {
@@ -112707,18 +112699,10 @@ declare module BABYLON {
         setAsAttribute(attributeName?: string): NodeMaterialConnectionPoint;
         /**
          * Set the source of this connection point to a well known value
-         * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+         * @param value define the well known value to use (world, view, etc...)
          * @returns the current connection point
          */
-        setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint;
-        /**
-         * Gets a boolean indicating that the current connection point is a well known value
-         */
-        readonly isWellKnownValue: boolean;
-        /**
-         * Gets or sets the current well known value or null if not defined as well know value
-         */
-        wellKnownValue: Nullable<NodeMaterialWellKnownValues>;
+        setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint;
         private _getTypeLength;
         /**
          * Connect this point to another connection point

nodeEditor/src/components/diagram/defaultNodeModel.ts

@@ -3,6 +3,7 @@ import { Nullable } from 'babylonjs/types';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
 import { GraphEditor, NodeCreationOptions } from '../../graphEditor';
+import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
 import { GlobalState } from '../../globalState';
 import { DefaultPortModel } from './defaultPortModel';
 
@@ -24,6 +25,10 @@ export class DefaultNodeModel extends NodeModel {
         super(key);
     }
 
+    prepareConnection(type: string, outPort: DefaultPortModel, connection?: NodeMaterialConnectionPoint) {
+
+    }
+
     prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]) {
         this.block = options.nodeMaterialBlock || null;
 
@@ -61,6 +66,9 @@ export class DefaultNodeModel extends NodeModel {
 
                 let link = connectedNode.ports[connection.connectedPoint.name].link(inputPort);
                 model.addAll(link);
+
+            } else if (connection.isAttribute) {
+
             } else {
                 // Create value node for the connection
                 var type = ""

nodeEditor/src/components/diagram/diagram.scss

@@ -8,10 +8,6 @@
         color:white;
     }
 
-    &.attribute {
-        background: orange;
-    }
-
     &.output {
         background: blue;
         color:white;
@@ -31,13 +27,6 @@
         overflow: hidden;
     }
 
-    .value {
-        height: 34px;
-        text-align: center;
-        font-size: 20px;
-        font-weight: bold;
-    }
-
     .inputs {
         .input-port {
             display: grid;

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

@@ -4,8 +4,11 @@ import { Vector2, Vector3, Vector4, Matrix } from 'babylonjs/Maths/math';
 import { DefaultNodeModel } from '../defaultNodeModel';
 import { DiagramModel } from 'storm-react-diagrams/dist/@types/src/models/DiagramModel';
 import { GraphEditor, NodeCreationOptions } from '../../../graphEditor';
+import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { Vector2PropertyTabComponent } from '../../../components/propertyTab/properties/vector2PropertyTabComponent';
 import { GlobalState } from '../../../globalState';
-import { TextLineComponent } from '../../../sharedComponents/textLineComponent';
+import { Vector3PropertyTabComponent } from '../../../components/propertyTab/properties/vector3PropertyTabComponent';
+import { DefaultPortModel } from '../defaultPortModel';
 
 /**
  * Generic node model which stores information about a node editor block
@@ -39,6 +42,51 @@ export class GenericNodeModel extends DefaultNodeModel {
         super("generic");
     }
 
+    prepareConnection(type: string, outPort: DefaultPortModel, connection?: NodeMaterialConnectionPoint) {
+        switch (type) {
+            case "Vector2":
+                outPort.getValue = () => {
+                    return this.vector2;
+                }
+                if (connection && connection.value) {
+                    this.vector2 = connection.value
+                } else {
+                    this.vector2 = new Vector2()
+                }
+                break;
+            case "Vector3":
+                outPort.getValue = () => {
+                    return this.vector3;
+                }
+                if (connection && connection.value) {
+                    this.vector3 = connection.value
+                } else {
+                    this.vector3 = new Vector3()
+                }
+                break;
+            case "Vector4":
+                outPort.getValue = () => {
+                    return this.vector4;
+                }
+                if (connection && connection.value) {
+                    this.vector4 = connection.value
+                } else {
+                    this.vector4 = new Vector4(0, 0, 0, 1)
+                }
+                break;
+            case "Matrix":
+                outPort.getValue = () => {
+                    return this.matrix;
+                }
+                if (connection && connection.value) {
+                    this.matrix = connection.value
+                } else {
+                    this.matrix = new Matrix();
+                }
+                break;
+        }
+    }
+
     prepare(options: NodeCreationOptions, nodes: Array<DefaultNodeModel>, model: DiagramModel, graphEditor: GraphEditor, filterInputs: string[]) {
         if (options.nodeMaterialBlock) {
             this.header = options.nodeMaterialBlock.name;
@@ -48,11 +96,17 @@ export class GenericNodeModel extends DefaultNodeModel {
     }
 
     renderProperties(globalState: GlobalState) {
+        if (this.vector2) {
+            return (
+                <Vector2PropertyTabComponent globalState={globalState} node={this} />
+            );
+        }
+        if (this.vector3) {
+            return (
+                <Vector3PropertyTabComponent globalState={globalState} node={this} />
+            );
+        }
 
-        return (
-            <div>
-                <TextLineComponent label="Type" value={this.block!.getClassName()} />
-            </div>
-        );
+        return null;
     }
 }

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

@@ -46,8 +46,9 @@ export class GenericNodeWidget extends React.Component<GenericNodeWidgetProps, G
         var header = "";
         var inputPorts = new Array<JSX.Element>()
         var outputPorts = new Array<JSX.Element>()
+        var value = <div></div>
         if (this.props.node) {
-            // Header label
+            // Header labels
             if (this.props.node.header) {
                 header = this.props.node.header;
             }
@@ -82,7 +83,7 @@ export class GenericNodeWidget extends React.Component<GenericNodeWidgetProps, G
         }
 
         return (
-            <div className={"diagramBlock" + (outputPorts.length === 0 ? " output" : "")}>
+            <div className={"diagramBlock"}>
                 <div className="header">
                     {header}
                 </div>
@@ -92,6 +93,7 @@ export class GenericNodeWidget extends React.Component<GenericNodeWidgetProps, G
                 <div className="outputs">
                     {outputPorts}
                 </div>
+                {value}
             </div>
         );
     }

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

@@ -1,14 +1,33 @@
 import * as React from "react";
+import { Nullable } from 'babylonjs/types';
+import { Vector2, Vector3, Vector4, Matrix } from 'babylonjs/Maths/math';
 import { DefaultNodeModel } from '../defaultNodeModel';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { Vector2PropertyTabComponent } from '../../propertyTab/properties/vector2PropertyTabComponent';
 import { GlobalState } from '../../../globalState';
-import { InputPropertyTabComponentProps } from './inputNodePropertyComponent';
+import { Vector3PropertyTabComponent } from '../../propertyTab/properties/vector3PropertyTabComponent';
+import { DefaultPortModel } from '../defaultPortModel';
 
 /**
  * Generic node model which stores information about a node editor block
  */
 export class InputNodeModel extends DefaultNodeModel {
-    public connection?: NodeMaterialConnectionPoint;
+	/**
+	 * Vector2 for the node if it exists
+	 */
+    public vector2: Nullable<Vector2> = null;
+	/**
+	 * Vector3 for the node if it exists
+	 */
+    public vector3: Nullable<Vector3> = null;
+	/**
+	 * Vector4 for the node if it exists
+	 */
+    public vector4: Nullable<Vector4> = null;
+	/**
+	 * Matrix for the node if it exists
+	 */
+    public matrix: Nullable<Matrix> = null;
 
 	/**
 	 * Constructs the node model
@@ -17,13 +36,42 @@ export class InputNodeModel extends DefaultNodeModel {
         super("input");
     }
 
-    renderProperties(globalState: GlobalState) {
-        if (!this.connection) {
-            return null;
+    prepareConnection(type: string, outPort: DefaultPortModel, connection?: NodeMaterialConnectionPoint) {
+        switch (type) {
+            case "Vector2":
+                this.vector2 = new Vector2()
+                break;
+            case "Vector3":
+                this.vector3 = new Vector3()
+                break;
+            case "Vector4":
+                this.vector4 = new Vector4(0, 0, 0, 1)
+                break;
+            case "Matrix":
+                this.matrix = new Matrix();
+                break;
         }
+    }
 
+    renderValue(globalState: GlobalState) {
+        if (this.vector2) {
+            return (
+                <Vector2PropertyTabComponent globalState={globalState} node={this} />
+            );
+        }
+        if (this.vector3) {
+            return (
+                <Vector3PropertyTabComponent globalState={globalState} node={this} />
+            );
+        }
+        return null;
+    }
+
+    renderProperties(globalState: GlobalState) {
         return (
-            <InputPropertyTabComponentProps globalState={globalState} inputNode={this} />
+            <div>
+                {this.renderValue(globalState)}
+            </div>
         );
     }
 }

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

@@ -1,106 +0,0 @@
-
-import * as React from "react";
-import { Vector2PropertyTabComponent } from '../../propertyTab/properties/vector2PropertyTabComponent';
-import { Vector3PropertyTabComponent } from '../../propertyTab/properties/vector3PropertyTabComponent';
-import { CheckBoxLineComponent } from '../../../sharedComponents/checkBoxLineComponent';
-import { GlobalState } from '../../../globalState';
-import { InputNodeModel } from './inputNodeModel';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
-import { OptionsLineComponent } from '../../../sharedComponents/optionsLineComponent';
-import { NodeMaterialWellKnownValues } from 'babylonjs/Materials/Node/nodeMaterialWellKnownValues';
-import { Vector2, Vector3, Matrix } from 'babylonjs/Maths/math';
-
-interface IInputPropertyTabComponentProps {
-    globalState: GlobalState;
-    inputNode: InputNodeModel;
-}
-
-export class InputPropertyTabComponentProps extends React.Component<IInputPropertyTabComponentProps> {
-
-    constructor(props: IInputPropertyTabComponentProps) {
-        super(props)
-    }
-
-    renderValue(globalState: GlobalState) {
-        let connection = this.props.inputNode.connection!;
-        switch (connection.type) {
-            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                return (
-                    <Vector2PropertyTabComponent globalState={globalState} connection={connection} />
-                );
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-            case NodeMaterialBlockConnectionPointTypes.Vector3OrColor3:
-                return (
-                    <Vector3PropertyTabComponent globalState={globalState} connection={connection} />
-                );
-        }
-        return null;
-    }
-
-    setDefaultValue() {
-        let connection = this.props.inputNode.connection!;
-        switch (connection.type) {
-            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                connection.value = Vector2.Zero();
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-            case NodeMaterialBlockConnectionPointTypes.Vector3OrColor3:
-                connection.value = Vector3.Zero();
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Matrix:
-                connection.value = Matrix.Identity();
-                break;
-        }
-    }
-
-    render() {
-        let connection = this.props.inputNode.connection!;
-
-        var wellKnownOptions = [
-            { label: "World", value: NodeMaterialWellKnownValues.World },
-            { label: "WorldxView", value: NodeMaterialWellKnownValues.WorldView },
-            { label: "WorldxViewxProjection", value: NodeMaterialWellKnownValues.WorldViewProjection },
-            { label: "View", value: NodeMaterialWellKnownValues.View },
-            { label: "ViewxProjection", value: NodeMaterialWellKnownValues.ViewProjection },
-            { label: "Projection", value: NodeMaterialWellKnownValues.Projection },
-            { label: "Automatic", value: NodeMaterialWellKnownValues.Automatic },
-        ];
-
-        return (
-            <div>
-                <CheckBoxLineComponent label="Is mesh attribute" onSelect={value => {
-                    connection!.isAttribute = value;
-                    this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                    this.forceUpdate();
-                }} isSelected={() => connection!.isAttribute} />
-                {
-                    connection.isUniform &&
-                    <CheckBoxLineComponent label="Is well known value" onSelect={value => {
-                        if (value) {
-                            connection!.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
-                        } else {
-                            connection!.setAsWellKnownValue(null);
-                            this.setDefaultValue();
-                        }
-                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                        this.forceUpdate();
-                    }} isSelected={() => connection!.isWellKnownValue} />
-                }
-                {
-                    connection.isUniform && !connection.isWellKnownValue &&
-                    this.renderValue(this.props.globalState)
-                }
-                {
-                    connection.isUniform && connection.isWellKnownValue &&
-                    <OptionsLineComponent label="Well known value" options={wellKnownOptions} target={connection} propertyName="wellKnownValue" onSelect={(value: any) => {
-                        connection.setAsWellKnownValue(value);
-                        this.forceUpdate();
-                        this.props.globalState.onRebuildRequiredObservable.notifyObservers();
-                    }} />
-                }
-            </div>
-        );
-    }
-}

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

@@ -4,7 +4,6 @@ import { InputNodeModel } from './inputNodeModel';
 import { Nullable } from 'babylonjs/types';
 import { GlobalState } from '../../../globalState';
 import { DefaultPortModel } from '../defaultPortModel';
-import { NodeMaterialWellKnownValues } from 'babylonjs/Materials/Node/nodeMaterialWellKnownValues';
 
 /**
  * GenericNodeWidgetProps
@@ -55,49 +54,14 @@ export class InputNodeWidget extends React.Component<InputNodeWidgetProps> {
                 break;
             }
         }
-
-        let connection = this.props.node!.connection!;
-        let value = "";
-
-        if (connection.isAttribute) {
-            value = "mesh." + connection.name;
-        } else if (connection.isWellKnownValue) {
-            switch (connection.wellKnownValue) {
-                case NodeMaterialWellKnownValues.World:
-                    value = "World";
-                    break;
-                case NodeMaterialWellKnownValues.WorldView:
-                    value = "World x View";
-                    break;
-                case NodeMaterialWellKnownValues.WorldViewProjection:
-                    value = "World x View x Projection";
-                    break;
-                case NodeMaterialWellKnownValues.View:
-                    value = "View";
-                    break;
-                case NodeMaterialWellKnownValues.ViewProjection:
-                    value = "View x Projection";
-                    break;
-                case NodeMaterialWellKnownValues.Projection:
-                    value = "Projection";
-                    break;
-                case NodeMaterialWellKnownValues.Automatic:
-                    value = "Automatic";
-                    break;
-            }
-        }
-
         return (
-            <div className={"diagramBlock input" + (connection.isAttribute ? " attribute" : "")}>
+            <div className={"diagramBlock input"}>
                 <div className="header">
                     {port!.name}
                 </div>
                 <div className="outputs">
                     {outputPorts}
                 </div>
-                <div className="value">
-                    {value}
-                </div>
             </div>
         );
     }

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

@@ -39,6 +39,7 @@ export class TextureNodeWidget extends React.Component<TextureNodeWidgetProps> {
     render() {
         var inputPorts = new Array<JSX.Element>();
         var outputPorts = new Array<JSX.Element>();
+        var value = <div></div>
         if (this.props.node) {
             // Input/Output ports
             for (var key in this.props.node.ports) {
@@ -67,6 +68,13 @@ export class TextureNodeWidget extends React.Component<TextureNodeWidgetProps> {
                     )
                 }
             }
+
+            // Display the view depending on the value type of the node
+            if (this.props.node.texture) {
+                value = (
+                    <TextureLineComponent ref="textureView" width={200} height={180} texture={this.props.node.texture} hideChannelSelect={true} />
+                )
+            }
         }
 
         return (
@@ -80,10 +88,7 @@ export class TextureNodeWidget extends React.Component<TextureNodeWidgetProps> {
                 <div className="outputs">
                     {outputPorts}
                 </div>
-                {
-                    this.props.node && this.props.node.texture &&
-                    <TextureLineComponent ref="textureView" width={200} height={180} texture={this.props.node.texture} hideChannelSelect={true} />
-                }
+                {value}
             </div>
         );
     }

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -35,19 +35,18 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
     render() {
         // Block types used to create the menu from
         const allBlocks = {
-            Vertex: [BonesBlock, InstancesBlock, MorphTargetsBlock],
-            Fragment: [AlphaTestBlock, , ImageProcessingBlock, RGBAMergerBlock, RGBASplitterBlock, TextureBlock],
-            Outputs: [VertexOutputBlock, FragmentOutputBlock],
+            Fragment: [AlphaTestBlock, FragmentOutputBlock, ImageProcessingBlock, RGBAMergerBlock, RGBASplitterBlock, TextureBlock],
+            Vertex: [BonesBlock, InstancesBlock, MorphTargetsBlock, VertexOutputBlock],
             Dual: [FogBlock],
-            Math: [AddBlock, ClampBlock, MatrixMultiplicationBlock, MultiplyBlock, Vector2TransformBlock, Vector3TransformBlock, Vector4TransformBlock],
-            Inputs: ["Texture", "Vector2", "Vector3", "Matrix"],
+            Other: [AddBlock, ClampBlock, MatrixMultiplicationBlock, MultiplyBlock, Vector2TransformBlock, Vector3TransformBlock, Vector4TransformBlock],
+            Value: ["Texture", "Vector2", "Vector3", "Matrix"],
         }
 
         // Create node menu
         var blockMenu = []
         for (var key in allBlocks) {
             var blockList = (allBlocks as any)[key].map((b: any) => {
-                var label = typeof b === "string" ? b : b.prototype.getClassName().replace("Block", "")
+                var label = typeof b === "string" ? b : b.prototype.getClassName()
                 var onClick = typeof b === "string" ? () => { this.props.onAddValueNode(b) } : () => { this.props.onAddNodeFromClass(b) };
                 return <ButtonLineComponent label={label} onClick={onClick} />
             })

nodeEditor/src/components/propertyTab/properties/vector2PropertyTabComponent.tsx

@@ -1,19 +1,20 @@
 
 import * as React from "react";
 import { GlobalState } from '../../../globalState';
+import { GenericNodeModel } from '../../diagram/generic/genericNodeModel';
 import { Vector2LineComponent } from '../../../sharedComponents/vector2LineComponent';
-import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { InputNodeModel } from '../../diagram/input/inputNodeModel';
 
 interface IVector2PropertyTabComponentProps {
     globalState: GlobalState;
-    connection: NodeMaterialConnectionPoint;
+    node: GenericNodeModel | InputNodeModel;
 }
 
 export class Vector2PropertyTabComponent extends React.Component<IVector2PropertyTabComponentProps> {
 
     render() {
         return (
-            <Vector2LineComponent label="Value" target={this.props.connection} propertyName="value"></Vector2LineComponent>
+            <Vector2LineComponent label="Value" target={this.props.node} propertyName="vector2"></Vector2LineComponent>
         );
     }
 }

nodeEditor/src/components/propertyTab/properties/vector3PropertyTabComponent.tsx

@@ -1,19 +1,20 @@
 
 import * as React from "react";
 import { GlobalState } from '../../../globalState';
+import { GenericNodeModel } from '../../diagram/generic/genericNodeModel';
 import { Vector3LineComponent } from '../../../sharedComponents/vector3LineComponent';
-import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { InputNodeModel } from '../../diagram/input/inputNodeModel';
 
 interface IVector3PropertyTabComponentProps {
     globalState: GlobalState;
-    connection: NodeMaterialConnectionPoint;
+    node: GenericNodeModel | InputNodeModel;
 }
 
 export class Vector3PropertyTabComponent extends React.Component<IVector3PropertyTabComponentProps> {
 
     render() {
         return (
-            <Vector3LineComponent label="Value" target={this.props.connection} propertyName="value"></Vector3LineComponent>
+            <Vector3LineComponent label="Value" target={this.props.node} propertyName="vector3"></Vector3LineComponent>
         );
     }
 }

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -117,145 +117,4 @@
         }  
     }
 
-    
-    .checkBoxLine {
-        padding-left: $line-padding-left;
-        height: 30px;
-        display: grid;
-        grid-template-columns: 1fr auto;
-
-        .label {
-            grid-column: 1;
-            display: flex;
-            align-items: center;
-        }
-
-        .checkBox {
-            grid-column: 2;
-            
-            display: flex;
-            align-items: center;
-
-            .lbl {
-                position: relative;
-                display: block;
-                height: 14px;
-                width: 34px;
-                margin-right: 5px;
-                background: #898989;
-                border-radius: 100px;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-
-            .lbl:after {
-                position: absolute;
-                left: 3px;
-                top: 2px;
-                display: block;
-                width: 10px;
-                height: 10px;
-                border-radius: 100px;
-                background: #fff;
-                box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
-                content: '';
-                transition: all 0.15s ease;
-            }
-
-            .lbl:active:after { 
-                transform: scale(1.15, 0.85); 
-            }
-
-            .cbx:checked ~ label { 
-                background: rgb(51, 122, 183);
-            }
-
-            .cbx:checked ~ label:after {
-                left: 20px;
-                background: rgb(22, 73, 117);
-            }
-
-            .hidden { 
-                display: none; 
-            }               
-        }                    
-    }  
-
-    .listLine {
-        padding-left: $line-padding-left;
-        height: 30px;
-        display: grid;
-        grid-template-columns: 1fr auto;
-
-
-        .label {
-            grid-column: 1;
-            display: flex;
-            align-items: center;
-        }
-
-        .options {
-            grid-column: 2;
-            
-            display: flex;
-            align-items: center;   
-            margin-right: 5px;
-
-            select {
-                width: 115px;
-            }
-        }                    
-    }  
-    
-    .textLine {
-        padding-left: $line-padding-left;
-        height: 30px;
-        display: grid;
-        grid-template-columns: 1fr auto;
-
-        .label {
-            grid-column: 1;
-            display: flex;
-            align-items: center;
-        }
-
-        .link-value {
-            grid-column: 2;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            text-align: end;
-            opacity: 0.8;
-            margin:5px;
-            margin-top: 6px;
-            max-width: 140px;
-            text-decoration: underline;
-            cursor: pointer;
-        }
-
-        .value {
-            grid-column: 2;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            text-align: end;
-            opacity: 0.8;
-            margin:5px;
-            margin-top: 6px;
-            max-width: 200px;
-            -webkit-user-select: text; 
-            -moz-user-select: text;   
-            -ms-user-select: text;    
-            user-select: text;                
-
-            &.check {
-                color: green;
-            }
-
-            &.uncheck {
-                color: red;
-            }  
-        }
-    }    
-
 }

nodeEditor/src/globalState.ts

@@ -8,5 +8,4 @@ export class GlobalState {
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
     onSelectionChangedObservable = new Observable<Nullable<DefaultNodeModel>>();
-    onRebuildRequiredObservable = new Observable<void>();
 }

nodeEditor/src/graphEditor.tsx

@@ -20,8 +20,8 @@ import { DefaultNodeModel } from './components/diagram/defaultNodeModel';
 import { TextureNodeModel } from './components/diagram/texture/textureNodeModel';
 import { DefaultPortModel } from './components/diagram/defaultPortModel';
 import { InputNodeFactory } from './components/diagram/input/inputNodeFactory';
+import { TextureBlock } from 'babylonjs';
 import { InputNodeModel } from './components/diagram/input/inputNodeModel';
-import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/textureBlock';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -49,7 +49,6 @@ export class NodeCreationOptions {
     column: number;
     nodeMaterialBlock?: NodeMaterialBlock;
     type?: string;
-    connection?: NodeMaterialConnectionPoint;
 }
 
 export class GraphEditor extends React.Component<IGraphEditorProps> {
@@ -88,7 +87,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             }
         } else {
             outputNode = new InputNodeModel();
-            (outputNode as InputNodeModel).connection = options.connection;
         }
         this._nodes.push(outputNode)
         outputNode.setPosition(1600 - (300 * options.column), 210 * this._rowPos[options.column])
@@ -189,13 +187,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     console.log("node deleted")
                 }
             }
-        });
-
-        this.props.globalState.onRebuildRequiredObservable.add(() => {
-            if (this.props.globalState.nodeMaterial) {
-                this.props.globalState.nodeMaterial.build();
-            }
-        });
+        })
 
         // Load graph of nodes from the material
         if (this.props.globalState.nodeMaterial) {
@@ -232,9 +224,15 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
     }
 
     addValueNode(type: string, column = 0, connection?: NodeMaterialConnectionPoint) {
-        var localNode = this.createNodeFromObject({ column: column, type: type, connection: connection })
+        if (connection && connection.isAttribute) {
+            this.forceUpdate();
+            return null;
+        }
+        var localNode = this.createNodeFromObject({ column: column, type: type })
         var outPort = new DefaultPortModel(type, "output");
 
+        localNode.prepareConnection(type, outPort, connection);
+
         localNode.addPort(outPort);
         this.forceUpdate();
 

nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-
-export interface ICheckBoxLineComponentProps {
-    label: string;
-    target?: any;
-    propertyName?: string;
-    isSelected?: () => boolean;
-    onSelect?: (value: boolean) => void;
-    onValueChanged?: () => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-}
-
-export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean }> {
-    private static _UniqueIdSeed = 0;
-    private _uniqueId: number;
-    private _localChange = false;
-    constructor(props: ICheckBoxLineComponentProps) {
-        super(props);
-
-        this._uniqueId = CheckBoxLineComponent._UniqueIdSeed++;
-
-        if (this.props.isSelected) {
-            this.state = { isSelected: this.props.isSelected() };
-        } else {
-            this.state = { isSelected: this.props.target[this.props.propertyName!] === true };
-        }
-    }
-
-    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean }) {
-        var currentState: boolean;
-
-        if (this.props.isSelected) {
-            currentState = nextProps.isSelected!();
-        } else {
-            currentState = nextProps.target[nextProps.propertyName!] === true;
-        }
-
-        if (currentState !== nextState.isSelected || this._localChange) {
-            nextState.isSelected = currentState;
-            this._localChange = false;
-            return true;
-        }
-        return false;
-    }
-
-    onChange() {
-        this._localChange = true;
-        if (this.props.onSelect) {
-            this.props.onSelect(!this.state.isSelected);
-        } else {
-            if (this.props.onPropertyChangedObservable) {
-                this.props.onPropertyChangedObservable.notifyObservers({
-                    object: this.props.target,
-                    property: this.props.propertyName!,
-                    value: !this.state.isSelected,
-                    initialValue: this.state.isSelected
-                });
-            }
-
-            this.props.target[this.props.propertyName!] = !this.state.isSelected;
-        }
-
-        if (this.props.onValueChanged) {
-            this.props.onValueChanged();
-        }
-
-        this.setState({ isSelected: !this.state.isSelected });
-    }
-
-    render() {
-        return (
-            <div className="checkBoxLine">
-                <div className="label">
-                    {this.props.label}
-                </div>
-                <div className="checkBox">
-                    <input type="checkbox" id={"checkbox" + this._uniqueId} className="cbx hidden" checked={this.state.isSelected} onChange={() => this.onChange()} />
-                    <label htmlFor={"checkbox" + this._uniqueId} className="lbl"></label>
-                </div>
-            </div>
-        );
-    }
-}

nodeEditor/src/sharedComponents/optionsLineComponent.tsx

@@ -1,95 +0,0 @@
-import * as React from "react";
-
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "./propertyChangedEvent";
-
-class ListLineOption {
-    public label: string;
-    public value: number;
-}
-
-interface IOptionsLineComponentProps {
-    label: string,
-    target: any,
-    propertyName: string,
-    options: ListLineOption[],
-    noDirectUpdate?: boolean,
-    onSelect?: (value: number) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
-}
-
-export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number }> {
-    private _localChange = false;
-
-    constructor(props: IOptionsLineComponentProps) {
-        super(props);
-
-        this.state = { value: props.target[props.propertyName] };
-    }
-
-    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number }) {
-        if (this._localChange) {
-            this._localChange = false;
-            return true;
-        }
-
-        const newValue = nextProps.target[nextProps.propertyName];
-        if (newValue != null && newValue !== nextState.value) {
-            nextState.value = newValue;
-            return true;
-        }
-        return false;
-    }
-
-    raiseOnPropertyChanged(newValue: number, previousValue: number) {
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: newValue,
-            initialValue: previousValue
-        });
-    }
-
-    updateValue(valueString: string) {
-        const value = parseInt(valueString);
-        this._localChange = true;
-
-        const store = this.state.value;
-        if (!this.props.noDirectUpdate) {
-            this.props.target[this.props.propertyName] = value;
-        }
-        this.setState({ value: value });
-
-        this.raiseOnPropertyChanged(value, store);
-
-        if (this.props.onSelect) {
-            this.props.onSelect(value);
-        }
-    }
-
-    render() {
-        return (
-            <div className="listLine">
-                <div className="label">
-                    {this.props.label}
-
-                </div>
-                <div className="options">
-                    <select onChange={evt => this.updateValue(evt.target.value)} value={this.state.value}>
-                        {
-                            this.props.options.map(option => {
-                                return (
-                                    <option key={option.label} value={option.value}>{option.label}</option>
-                                )
-                            })
-                        }
-                    </select>
-                </div>
-            </div>
-        );
-    }
-}

nodeEditor/src/sharedComponents/textLineComponent.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-interface ITextLineComponentProps {
-    label: string;
-    value: string;
-    color?: string;
-    underline?: boolean;
-    onLink?: () => void;
-}
-
-export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-    constructor(props: ITextLineComponentProps) {
-        super(props);
-    }
-
-    onLink() {
-        if (!this.props.onLink) {
-            return;
-        }
-
-        this.props.onLink();
-    }
-
-    renderContent() {
-        if (this.props.onLink) {
-            return (
-                <div className="link-value" title={this.props.value} onClick={() => this.onLink()}>
-                    {this.props.value || "no name"}
-                </div>
-            )
-        }
-        return (
-            <div className="value" title={this.props.value} style={{ color: this.props.color ? this.props.color : "" }}>
-                {this.props.value || "no name"}
-            </div>
-        )
-    }
-
-    render() {
-        return (
-            <div className={this.props.underline ? "textLine underline" : "textLine"}>
-                <div className="label">
-                    {this.props.label}
-                </div>
-                {this.renderContent()}
-            </div>
-        );
-    }
-}

serializers/src/glTF/2.0/Extensions/KHR_texture_transform.ts

@@ -1,7 +1,9 @@
 import { ImageMimeType } from "babylonjs-gltf2interface";
 
 import { Nullable } from "babylonjs/types";
+import { Vector2 } from "babylonjs/Maths/math";
 import { Tools } from "babylonjs/Misc/tools";
+import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { Texture } from "babylonjs/Materials/Textures/texture";
 import { ProceduralTexture } from "babylonjs/Materials/Textures/Procedurals/proceduralTexture";
 import { Scene } from "babylonjs/scene";
@@ -50,14 +52,6 @@ export class KHR_texture_transform implements IGLTFExporterExtensionV2 {
 
     public preExportTextureAsync(context: string, babylonTexture: Texture, mimeType: ImageMimeType): Nullable<Promise<Texture>> {
         return new Promise((resolve, reject) => {
-            const scene = babylonTexture.getScene();
-            if (!scene) {
-                reject(`${context}: "scene" is not defined for Babylon texture ${babylonTexture.name}!`);
-                return;
-            }
-
-            // TODO: this doesn't take into account rotation center values
-
             const texture_transform_extension: IKHRTextureTransform = {};
 
             if (babylonTexture.uOffset !== 0 || babylonTexture.vOffset !== 0) {
@@ -74,10 +68,20 @@ export class KHR_texture_transform implements IGLTFExporterExtensionV2 {
 
             if (!Object.keys(texture_transform_extension).length) {
                 resolve(babylonTexture);
-                return;
             }
 
-            return this._textureTransformTextureAsync(babylonTexture, scene);
+            const scale = texture_transform_extension.scale ? new Vector2(texture_transform_extension.scale[0], texture_transform_extension.scale[1]) : Vector2.One();
+            const rotation = texture_transform_extension.rotation != null ? texture_transform_extension.rotation : 0;
+            const offset = texture_transform_extension.offset ? new Vector2(texture_transform_extension.offset[0], texture_transform_extension.offset[1]) : Vector2.Zero();
+            const scene = babylonTexture.getScene();
+            if (!scene) {
+                reject(`${context}: "scene" is not defined for Babylon texture ${babylonTexture.name}!`);
+            }
+            else {
+                this.textureTransformTextureAsync(babylonTexture, offset, rotation, scale, scene).then((texture) => {
+                    resolve(texture as Texture);
+                });
+            }
         });
     }
 
@@ -89,8 +93,8 @@ export class KHR_texture_transform implements IGLTFExporterExtensionV2 {
      * @param scale
      * @param scene
      */
-    private _textureTransformTextureAsync(babylonTexture: Texture, scene: Scene): Promise<Texture> {
-        return new Promise((resolve) => {
+    public textureTransformTextureAsync(babylonTexture: Texture, offset: Vector2, rotation: number, scale: Vector2, scene: Scene): Promise<BaseTexture> {
+        return new Promise((resolve, reject) => {
             const proceduralTexture = new ProceduralTexture(`${babylonTexture.name}`, babylonTexture.getSize(), "textureTransform", scene);
             if (!proceduralTexture) {
                 Tools.Log(`Cannot create procedural texture for ${babylonTexture.name}!`);
@@ -105,7 +109,7 @@ export class KHR_texture_transform implements IGLTFExporterExtensionV2 {
                 proceduralTexture.render();
                 resolve(proceduralTexture);
             } else {
-                proceduralTexture.getEffect().executeWhenCompiled(() => {
+                (proceduralTexture as any).getEffect().executeWhenCompiled(() => {
                     proceduralTexture.render();
                     resolve(proceduralTexture);
                 });

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

@@ -83,10 +83,10 @@ export class FogBlock extends NodeMaterialBlock {
             this.view.setAsWellKnownValue(NodeMaterialWellKnownValues.View);
         }
         if (!this.fogColor.connectedPoint) {
-            this.fogColor.setAsWellKnownValue(NodeMaterialWellKnownValues.Automatic);
+            this.fogColor.setAsWellKnownValue(NodeMaterialWellKnownValues.BlockBased);
         }
         if (!this.fogParameters.connectedPoint) {
-            this.fogParameters.setAsWellKnownValue(NodeMaterialWellKnownValues.Automatic);
+            this.fogParameters.setAsWellKnownValue(NodeMaterialWellKnownValues.BlockBased);
         }
         this._outputs[0].isVarying = true;
     }

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -181,31 +181,13 @@ export class NodeMaterialConnectionPoint {
 
     /**
      * Set the source of this connection point to a well known value
-     * @param value define the well known value to use (world, view, etc...) or null to switch to manual value
+     * @param value define the well known value to use (world, view, etc...)
      * @returns the current connection point
      */
-    public setAsWellKnownValue(value: Nullable<NodeMaterialWellKnownValues>): NodeMaterialConnectionPoint {
-        this.wellKnownValue = value;
-        return this;
-    }
-
-    /**
-     * Gets a boolean indicating that the current connection point is a well known value
-     */
-    public get isWellKnownValue(): boolean {
-        return this._wellKnownValue != null;
-    }
-
-    /**
-     * Gets or sets the current well known value or null if not defined as well know value
-     */
-    public get wellKnownValue(): Nullable<NodeMaterialWellKnownValues> {
-        return this._wellKnownValue;
-    }
-
-    public set wellKnownValue(value: Nullable<NodeMaterialWellKnownValues>) {
+    public setAsWellKnownValue(value: NodeMaterialWellKnownValues): NodeMaterialConnectionPoint {
         this.isUniform = true;
         this._wellKnownValue = value;
+        return this;
     }
 
     private _getTypeLength(type: NodeMaterialBlockConnectionPointTypes) {

src/Materials/Node/nodeMaterialWellKnownValues.ts

@@ -15,5 +15,5 @@ export enum NodeMaterialWellKnownValues {
     /** WorldViewProjection */
     WorldViewProjection = 6,
     /** Will be filled by the block itself */
-    Automatic = 7
+    BlockBased = 7
 }