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

Playground/babylon.d.txt

@@ -39862,6 +39862,10 @@ declare module BABYLON {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -50384,7 +50388,7 @@ declare module BABYLON {
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -50394,7 +50398,7 @@ declare module BABYLON {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -50697,6 +50701,12 @@ declare module BABYLON {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -51153,6 +51163,61 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {
@@ -52038,61 +52103,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Helper class to push actions to a pool of workers.
      */
     export class WorkerPool implements IDisposable {

dist/preview release/babylon.d.ts

@@ -40579,6 +40579,10 @@ declare module BABYLON {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -51163,7 +51167,7 @@ declare module BABYLON {
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -51173,7 +51177,7 @@ declare module BABYLON {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -51478,6 +51482,12 @@ declare module BABYLON {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -51954,6 +51964,61 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {
@@ -52848,61 +52913,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Helper class to push actions to a pool of workers.
      */
     export class WorkerPool implements IDisposable {

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

@@ -41989,6 +41989,10 @@ declare module "babylonjs/Cameras/VR/vrExperienceHelper" {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -53525,14 +53529,14 @@ declare module "babylonjs/Materials/Node/Optimizers/nodeMaterialOptimizer" {
         optimize(vertexOutputNodes: NodeMaterialBlock[], fragmentOutputNodes: NodeMaterialBlock[]): void;
     }
 }
-declare module "babylonjs/Materials/Node/Blocks/vectorTransformBlock" {
+declare module "babylonjs/Materials/Node/Blocks/transformBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
     import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -53542,7 +53546,7 @@ declare module "babylonjs/Materials/Node/Blocks/vectorTransformBlock" {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -53866,6 +53870,12 @@ declare module "babylonjs/Materials/Node/nodeMaterial" {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -54367,6 +54377,74 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         FogColor = 8
     }
 }
+declare module "babylonjs/Maths/math.vertexFormat" {
+    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
+    /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module "babylonjs/Maths/math" {
+    export * from "babylonjs/Maths/math.axis";
+    export * from "babylonjs/Maths/math.color";
+    export * from "babylonjs/Maths/math.constants";
+    export * from "babylonjs/Maths/math.frustum";
+    export * from "babylonjs/Maths/math.path";
+    export * from "babylonjs/Maths/math.plane";
+    export * from "babylonjs/Maths/math.size";
+    export * from "babylonjs/Maths/math.vector";
+    export * from "babylonjs/Maths/math.vertexFormat";
+    export * from "babylonjs/Maths/math.viewport";
+}
 declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBlockConnectionPointTypes } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes";
@@ -55267,7 +55345,7 @@ declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/clampBlock";
     export * from "babylonjs/Materials/Node/Blocks/crossBlock";
     export * from "babylonjs/Materials/Node/Blocks/dotBlock";
-    export * from "babylonjs/Materials/Node/Blocks/vectorTransformBlock";
+    export * from "babylonjs/Materials/Node/Blocks/transformBlock";
 }
 declare module "babylonjs/Materials/Node/Optimizers/index" {
     export * from "babylonjs/Materials/Node/Optimizers/nodeMaterialOptimizer";
@@ -55424,74 +55502,6 @@ declare module "babylonjs/Materials/index" {
     export * from "babylonjs/Materials/Node/index";
     export * from "babylonjs/Materials/effectRenderer";
 }
-declare module "babylonjs/Maths/math.vertexFormat" {
-    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
-    /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module "babylonjs/Maths/math" {
-    export * from "babylonjs/Maths/math.axis";
-    export * from "babylonjs/Maths/math.color";
-    export * from "babylonjs/Maths/math.constants";
-    export * from "babylonjs/Maths/math.frustum";
-    export * from "babylonjs/Maths/math.path";
-    export * from "babylonjs/Maths/math.plane";
-    export * from "babylonjs/Maths/math.size";
-    export * from "babylonjs/Maths/math.vector";
-    export * from "babylonjs/Maths/math.vertexFormat";
-    export * from "babylonjs/Maths/math.viewport";
-}
 declare module "babylonjs/Maths/index" {
     export * from "babylonjs/Maths/math.scalar";
     export * from "babylonjs/Maths/math";
@@ -104233,6 +104243,10 @@ declare module BABYLON {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -114817,7 +114831,7 @@ declare module BABYLON {
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -114827,7 +114841,7 @@ declare module BABYLON {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -115132,6 +115146,12 @@ declare module BABYLON {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -115608,6 +115628,61 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {
@@ -116502,61 +116577,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Helper class to push actions to a pool of workers.
      */
     export class WorkerPool implements IDisposable {

dist/preview release/documentation.d.ts

@@ -40579,6 +40579,10 @@ declare module BABYLON {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -51163,7 +51167,7 @@ declare module BABYLON {
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -51173,7 +51177,7 @@ declare module BABYLON {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -51478,6 +51482,12 @@ declare module BABYLON {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -51954,6 +51964,61 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {
@@ -52848,61 +52913,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Helper class to push actions to a pool of workers.
      */
     export class WorkerPool implements IDisposable {

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

@@ -41989,6 +41989,10 @@ declare module "babylonjs/Cameras/VR/vrExperienceHelper" {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -53525,14 +53529,14 @@ declare module "babylonjs/Materials/Node/Optimizers/nodeMaterialOptimizer" {
         optimize(vertexOutputNodes: NodeMaterialBlock[], fragmentOutputNodes: NodeMaterialBlock[]): void;
     }
 }
-declare module "babylonjs/Materials/Node/Blocks/vectorTransformBlock" {
+declare module "babylonjs/Materials/Node/Blocks/transformBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
     import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -53542,7 +53546,7 @@ declare module "babylonjs/Materials/Node/Blocks/vectorTransformBlock" {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -53866,6 +53870,12 @@ declare module "babylonjs/Materials/Node/nodeMaterial" {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -54367,6 +54377,74 @@ declare module "babylonjs/Materials/Node/nodeMaterialWellKnownValues" {
         FogColor = 8
     }
 }
+declare module "babylonjs/Maths/math.vertexFormat" {
+    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
+    /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module "babylonjs/Maths/math" {
+    export * from "babylonjs/Maths/math.axis";
+    export * from "babylonjs/Maths/math.color";
+    export * from "babylonjs/Maths/math.constants";
+    export * from "babylonjs/Maths/math.frustum";
+    export * from "babylonjs/Maths/math.path";
+    export * from "babylonjs/Maths/math.plane";
+    export * from "babylonjs/Maths/math.size";
+    export * from "babylonjs/Maths/math.vector";
+    export * from "babylonjs/Maths/math.vertexFormat";
+    export * from "babylonjs/Maths/math.viewport";
+}
 declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBlockConnectionPointTypes } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes";
@@ -55267,7 +55345,7 @@ declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/clampBlock";
     export * from "babylonjs/Materials/Node/Blocks/crossBlock";
     export * from "babylonjs/Materials/Node/Blocks/dotBlock";
-    export * from "babylonjs/Materials/Node/Blocks/vectorTransformBlock";
+    export * from "babylonjs/Materials/Node/Blocks/transformBlock";
 }
 declare module "babylonjs/Materials/Node/Optimizers/index" {
     export * from "babylonjs/Materials/Node/Optimizers/nodeMaterialOptimizer";
@@ -55424,74 +55502,6 @@ declare module "babylonjs/Materials/index" {
     export * from "babylonjs/Materials/Node/index";
     export * from "babylonjs/Materials/effectRenderer";
 }
-declare module "babylonjs/Maths/math.vertexFormat" {
-    import { Vector3, Vector2 } from "babylonjs/Maths/math.vector";
-    /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module "babylonjs/Maths/math" {
-    export * from "babylonjs/Maths/math.axis";
-    export * from "babylonjs/Maths/math.color";
-    export * from "babylonjs/Maths/math.constants";
-    export * from "babylonjs/Maths/math.frustum";
-    export * from "babylonjs/Maths/math.path";
-    export * from "babylonjs/Maths/math.plane";
-    export * from "babylonjs/Maths/math.size";
-    export * from "babylonjs/Maths/math.vector";
-    export * from "babylonjs/Maths/math.vertexFormat";
-    export * from "babylonjs/Maths/math.viewport";
-}
 declare module "babylonjs/Maths/index" {
     export * from "babylonjs/Maths/math.scalar";
     export * from "babylonjs/Maths/math";
@@ -104233,6 +104243,10 @@ declare module BABYLON {
          * The deviceOrientationCamera that is used as a fallback when vr device is not connected.
          */
         readonly vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
+        /**
+         * The html button that is used to trigger entering into VR.
+         */
+        readonly vrButton: Nullable<HTMLButtonElement>;
         private readonly _teleportationRequestInitiated;
         /**
          * Defines wether or not Pointer lock should be requested when switching to
@@ -114817,7 +114831,7 @@ declare module BABYLON {
     /**
      * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
      */
-    export class VectorTransformBlock extends NodeMaterialBlock {
+    export class TransformBlock extends NodeMaterialBlock {
         /**
          * Defines the value to use to complement W value to transform it to a Vector4
          */
@@ -114827,7 +114841,7 @@ declare module BABYLON {
          */
         complementZ: number;
         /**
-         * Creates a new VectorTransformBlock
+         * Creates a new TransformBlock
          * @param name defines the block name
          */
         constructor(name: string);
@@ -115132,6 +115146,12 @@ declare module BABYLON {
          */
         serialize(): any;
         /**
+         * Clear the current graph and load a new one from a serialization object
+         * @param source defines the JSON representation of the material
+         * @param rootUrl defines the root URL to use to load textures and relative dependencies
+         */
+        loadFromSerialization(source: any, rootUrl?: string): void;
+        /**
          * Creates a node material from parsed material data
          * @param source defines the JSON representation of the material
          * @param scene defines the hosting scene
@@ -115608,6 +115628,61 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Contains position and normal vectors for a vertex
+     */
+    export class PositionNormalVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /**
+         * Creates a PositionNormalVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3);
+        /**
+         * Clones the PositionNormalVertex
+         * @returns the cloned PositionNormalVertex
+         */
+        clone(): PositionNormalVertex;
+    }
+    /**
+     * Contains position, normal and uv vectors for a vertex
+     */
+    export class PositionNormalTextureVertex {
+        /** the position of the vertex (defaut: 0,0,0) */
+        position: Vector3;
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal: Vector3;
+        /** the uv of the vertex (default: 0,0) */
+        uv: Vector2;
+        /**
+         * Creates a PositionNormalTextureVertex
+         * @param position the position of the vertex (defaut: 0,0,0)
+         * @param normal the normal of the vertex (defaut: 0,1,0)
+         * @param uv the uv of the vertex (default: 0,0)
+         */
+        constructor(
+        /** the position of the vertex (defaut: 0,0,0) */
+        position?: Vector3, 
+        /** the normal of the vertex (defaut: 0,1,0) */
+        normal?: Vector3, 
+        /** the uv of the vertex (default: 0,0) */
+        uv?: Vector2);
+        /**
+         * Clones the PositionNormalTextureVertex
+         * @returns the cloned PositionNormalTextureVertex
+         */
+        clone(): PositionNormalTextureVertex;
+    }
+}
+declare module BABYLON {
+    /**
      * Block used to expose an input value
      */
     export class InputBlock extends NodeMaterialBlock {
@@ -116502,61 +116577,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Contains position and normal vectors for a vertex
-     */
-    export class PositionNormalVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /**
-         * Creates a PositionNormalVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3);
-        /**
-         * Clones the PositionNormalVertex
-         * @returns the cloned PositionNormalVertex
-         */
-        clone(): PositionNormalVertex;
-    }
-    /**
-     * Contains position, normal and uv vectors for a vertex
-     */
-    export class PositionNormalTextureVertex {
-        /** the position of the vertex (defaut: 0,0,0) */
-        position: Vector3;
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal: Vector3;
-        /** the uv of the vertex (default: 0,0) */
-        uv: Vector2;
-        /**
-         * Creates a PositionNormalTextureVertex
-         * @param position the position of the vertex (defaut: 0,0,0)
-         * @param normal the normal of the vertex (defaut: 0,1,0)
-         * @param uv the uv of the vertex (default: 0,0)
-         */
-        constructor(
-        /** the position of the vertex (defaut: 0,0,0) */
-        position?: Vector3, 
-        /** the normal of the vertex (defaut: 0,1,0) */
-        normal?: Vector3, 
-        /** the uv of the vertex (default: 0,0) */
-        uv?: Vector2);
-        /**
-         * Clones the PositionNormalTextureVertex
-         * @returns the cloned PositionNormalTextureVertex
-         */
-        clone(): PositionNormalTextureVertex;
-    }
-}
-declare module BABYLON {
-    /**
      * Helper class to push actions to a pool of workers.
      */
     export class WorkerPool implements IDisposable {

dist/preview release/what's new.md

@@ -77,7 +77,7 @@
 ### Ray
 - Added `Ray.intersectsAxis` to translate screen to axis coordinates without checking collisions ([horusscope](https://github.com/horusscope))
 
-### GUI  
+### GUI
 - Added `disableMobilePrompt` option to InputText for OculusQuest(and other android base VR devices) ([shinyoshiaki](https://github.com/shinyoshiaki))
 
 ### Documentation
@@ -101,6 +101,7 @@
 - Avoid exception when disposing of Ammo cloth physics ([TrevorDev](https://github.com/TrevorDev))
 - Make planeDragGizmo usable on its own ([TrevorDev](https://github.com/TrevorDev))
 - Fix useObjectOrienationForDragging for pointerDragBehavior when using a single axis drag ([TrevorDev](https://github.com/TrevorDev))
+- Fix VR button not positioning correctly in canvas ([haroldma](https://github.com/haroldma))
 
 ## Breaking changes
 - Setting mesh.scaling to a new vector will no longer automatically call forceUpdate (this should be done manually when needed) ([TrevorDev](https://github.com/TrevorDev))

nodeEditor/src/blockTools.ts

@@ -0,0 +1,112 @@
+import { AlphaTestBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/alphaTestBlock';
+import { BonesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/bonesBlock';
+import { InstancesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/instancesBlock';
+import { MorphTargetsBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/morphTargetsBlock';
+import { ImageProcessingBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock';
+import { RGBAMergerBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbaMergerBlock';
+import { RGBASplitterBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbaSplitterBlock';
+import { RGBMergerBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbMergerBlock';
+import { RGBSplitterBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbSplitterBlock';
+import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/textureBlock';
+import { LightBlock } from 'babylonjs/Materials/Node/Blocks/Dual/lightBlock';
+import { FogBlock } from 'babylonjs/Materials/Node/Blocks/Dual/fogBlock';
+import { VertexOutputBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/vertexOutputBlock';
+import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
+import { AddBlock } from 'babylonjs/Materials/Node/Blocks/addBlock';
+import { ClampBlock } from 'babylonjs/Materials/Node/Blocks/clampBlock';
+import { CrossBlock } from 'babylonjs/Materials/Node/Blocks/crossBlock';
+import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
+import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
+import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
+
+export class BlockTools {
+    public static GetBlockFromString(data: string) {
+        switch (data) {
+            case "BonesBlock":
+                return new BonesBlock("Bones");
+            case "InstancesBlock":
+                return new InstancesBlock("Instances");
+            case "MorphTargetsBlock":
+                return new MorphTargetsBlock("MorphTargets");
+            case "AlphaTestBlock":
+                return new AlphaTestBlock("AlphaTest");
+            case "ImageProcessingBlock":
+                return new ImageProcessingBlock("ImageProcessing");
+            case "RGBAMergerBlock":
+                return new RGBAMergerBlock("RGBAMerger");
+            case "RGBASplitterBlock":
+                return new RGBASplitterBlock("RGBASplitter");
+            case "RGBMergerBlock":
+                return new RGBMergerBlock("RGBMerger");
+            case "RGBSplitterBlock":
+                return new RGBSplitterBlock("RGBSplitter");
+            case "TextureBlock":
+                return new TextureBlock("Texture");
+            case "LightBlock":
+                return new LightBlock("Lights");
+            case "FogBlock":
+                return new FogBlock("Fog");
+            case "VertexOutputBlock":
+                return new VertexOutputBlock("VertexOutput");
+            case "FragmentOutputBlock":
+                return new FragmentOutputBlock("FragmentOutput");
+            case "AddBlock":
+                return new AddBlock("Add");
+            case "ClampBlock":
+                return new ClampBlock("Clamp");
+            case "CrossBlock":
+                return new CrossBlock("Dot");
+            case "DotBlock":
+                return new DotBlock("Dot");
+            case "MultiplyBlock":
+                return new MultiplyBlock("Multiply");
+            case "TransformBlock":
+                return new TransformBlock("Transform");
+        }
+
+        return null;
+    }
+
+    public static GetConnectionNodeTypeFromString(type: string) {
+        switch (type) {
+            case "Float":
+                return NodeMaterialBlockConnectionPointTypes.Float;
+            case "Vector2":
+                return NodeMaterialBlockConnectionPointTypes.Vector2;
+            case "Vector3":
+                return NodeMaterialBlockConnectionPointTypes.Vector3;
+            case "Vector4":
+                return NodeMaterialBlockConnectionPointTypes.Vector4;
+            case "Matrix":
+                return NodeMaterialBlockConnectionPointTypes.Matrix;
+            case "Color3":
+                return NodeMaterialBlockConnectionPointTypes.Color3;
+            case "Color4":
+                return NodeMaterialBlockConnectionPointTypes.Color4;
+        }
+
+        return NodeMaterialBlockConnectionPointTypes.AutoDetect;
+    }
+
+    public static GetStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes) {
+        switch (type){
+            case NodeMaterialBlockConnectionPointTypes.Float:
+                return "Float";
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                return "Vector2";
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+                return "Vector3";
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                return "Vector4";
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                return "Color3";
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return "Color4";
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                return "Matrix";
+        }
+
+        return "";
+    }
+}

nodeEditor/src/components/diagram/diagram.scss

@@ -8,6 +8,8 @@
 }
           
 .srd-port {
+    grid-column: 1;
+    grid-row: 1;
     background: rgb(0, 192, 255);
     border-radius: 10px;
     border: black 4px solid;
@@ -15,6 +17,10 @@
     &.connected {
         background: #CAB422;
     }
+
+    &:hover {
+        background: greenyellow !important;
+    }
 }
 
 .diagramBlock {
@@ -107,6 +113,18 @@
                 align-content: center;
                 margin-left: -11px;
 
+                .input-port-type {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    display: grid;
+                    align-items: center;
+                    justify-items: center;
+
+                    img {
+                        width: 12px;
+                    }
+                }
             }
 
             .input-port-label {
@@ -134,6 +152,19 @@
                 grid-row: 1;
                 display: grid;
                 align-content: center;
+
+                .output-port-type {
+                    pointer-events: none;
+                    grid-column: 1;
+                    grid-row: 1;
+                    display: grid;
+                    align-items: center;
+                    justify-items: center;
+
+                    img {
+                        width: 12px;
+                    }
+                }
             }
 
             .output-port-label {

nodeEditor/src/components/diagram/portHelper.tsx

@@ -3,9 +3,31 @@ import { PortWidget } from "storm-react-diagrams";
 import { DefaultNodeModel } from './defaultNodeModel';
 import { DefaultPortModel } from './defaultPortModel';
 import { Nullable } from 'babylonjs/types';
+import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
 
 
 export class PortHelper {
+    private static _GetPortTypeIndicator(connection: NodeMaterialConnectionPoint): Nullable<JSX.Element> {
+        switch (connection.type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+            case NodeMaterialBlockConnectionPointTypes.Int:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABESURBVDhPY/z//z8DJYAJSpMNRg3Ab4APEL+GYhAbK8AXjSCNIhAmwxsgFoUwUQFNvZAJxCCbQRjExgpGU+LAG8DAAAA+ghAthzG18wAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPY/z//z8DJYAJSpMN8BngA8SvoRjExgrweQGkUQTCZHgDxKIQJiqgqRcygRhkMwiD2FjB4I4FosBoNA6DaGRgAABqpx09dHGG2QAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPY/z//z8DJYAJSmMDPkD8GopBbKwAnwtAGkUgTIY3QCwKYaICfC4gCuAzIBOIQTaDMIiNFYwG4mgggsCQD0QGBgD0QypNGzDYqQAAAABJRU5ErkJggg=="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABRSURBVDhPY/z//z8DJYAJSpMN0A3wAeLXUAxiwwAucQYGkBeQ8GsghgEQm5A45V6AmwTFIUAMsgGEQWxC4gyDLxZIBqPpAAiQTQPiIZcOGBgAyCDrTTmX3gcAAAAASUVORK5CYII="></img>;
+            case NodeMaterialBlockConnectionPointTypes.Matrix:
+                return <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABuSURBVDhPY/z//z8DJYAJSpMN0A3wAeLXUAxiwwAucQZ0L4AUiECYOMEbIBaFMGnghUwoDQKhQMwIxSA2DCCrwfACCMAEQBqRAVZxqnuBZEB1A9DjHgZwsQdpOgDZAMLo6QAmTjAdkAQo9AIDAwD62SHFU/Hk8QAAAABJRU5ErkJggg=="></img>;
+        }
+
+        return null;
+    }
+
     public static GenerateOutputPorts(node: Nullable<DefaultNodeModel>, ignoreLabel: boolean) {
         if (!node) {
             return new Array<JSX.Element>();
@@ -14,6 +36,8 @@ export class PortHelper {
         for (var key in node.ports) {
             let port = node.ports[key] as DefaultPortModel;
             if (port.position === "output") {
+                let typeIndicator = this._GetPortTypeIndicator(port.connection!);
+
                 outputPorts.push(
                     <div key={key} className="output-port">
                         {
@@ -24,6 +48,11 @@ export class PortHelper {
                         }
                         <div className="output-port-plug">
                             <PortWidget key={key} name={port.name} node={node} className={port.connection && port.connection.endpoints.length > 0 ? "connected" : ""} />
+                            <div className="output-port-type"> 
+                                {
+                                    typeIndicator
+                                }                                
+                            </div>
                         </div>
                     </div>
                 );
@@ -40,12 +69,19 @@ export class PortHelper {
         let inputPorts = [];
         for (var key in node.ports) {
             let port = node.ports[key] as DefaultPortModel;
-            if (port.position === "input") {
+            if (port.position === "input") {                
+                let typeIndicator = this._GetPortTypeIndicator(port.connection!);
+
                 if (!includeOnly || includeOnly.indexOf(port.name) !== -1) {
                     inputPorts.push(
                         <div key={key} className="input-port">
                             <div className="input-port-plug">
                                 <PortWidget key={key} name={port.name} node={node} className={port.connection && port.connection.connectedPoint ? "connected" : ""} />
+                                <div className="input-port-type"> 
+                                    {
+                                        typeIndicator
+                                    }                                
+                                </div>
                             </div>
                             <div className="input-port-label">
                                 {port.name}

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -15,9 +15,9 @@ export class NodeListComponent extends React.Component<INodeListComponentProps>
         // Block types used to create the menu from
         const allBlocks = {
             Vertex: ["BonesBlock", "InstancesBlock", "MorphTargetsBlock"],
-            Fragment: ["AlphaTestBlock", "ImageProcessingBlock", "RGBAMergerBlock", "RGBASplitterBlock", "TextureBlock", "LightBlock", "FogBlock"],
+            Fragment: ["AlphaTestBlock", "ImageProcessingBlock", "RGBAMergerBlock", "RGBASplitterBlock", "RGBMergerBlock", "RGBSplitterBlock", "TextureBlock", "LightBlock", "FogBlock"],
             Outputs: ["VertexOutputBlock", "FragmentOutputBlock"],
-            Math: ["AddBlock", "ClampBlock", "CrossBlock", "DotBlock", "MultiplyBlock", "VectorTransformBlock"],
+            Math: ["AddBlock", "ClampBlock", "CrossBlock", "DotBlock", "MultiplyBlock", "TransformBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "Matrix"],
         }
 

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -230,6 +230,7 @@
         display: grid;
         align-items: center;
         justify-items: stretch;
+        padding-bottom: 5px;
 
         input[type="file"] {
             display: none;
@@ -241,6 +242,7 @@
             margin: 5px 10px;
             color:white;
             padding: 4px 5px;
+            padding-top: 0px;
             opacity: 0.9;
             cursor: pointer;
             text-align: center;

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -6,6 +6,8 @@ import { DefaultNodeModel } from '../../components/diagram/defaultNodeModel';
 import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
 import { StringTools } from '../../stringTools';
+import { FileButtonLineComponent } from '../../sharedComponents/fileButtonLineComponent';
+import { Tools } from 'babylonjs/Misc/tools';
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -26,6 +28,17 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         });
     }
 
+    load(file: File) {
+        Tools.ReadFile(file, (data) => {
+            let decoder = new TextDecoder("utf-8");
+            let serializationObject = JSON.parse(decoder.decode(data));
+
+            this.props.globalState.nodeMaterial!.loadFromSerialization(serializationObject, "");
+            
+            this.props.globalState.onResetRequiredObservable.notifyObservers();
+        }, undefined, true);
+    }
+
     render() {
         if (this.state.currentNode) {
             return (
@@ -66,7 +79,12 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                             this.props.globalState.onReOrganizedRequiredObservable.notifyObservers();
                         }} />
                     </LineContainerComponent>
-                    <LineContainerComponent title="FILE">
+                    <LineContainerComponent title="FILE">                        
+                        <FileButtonLineComponent label="Load" onClick={(file) => this.load(file)} accept=".json" />
+                        <ButtonLineComponent label="Save" onClick={() => {
+                            let json = JSON.stringify(this.props.globalState.nodeMaterial!.serialize());
+                            StringTools.DownloadAsFile(json, "nodeMaterial.json");
+                        }} />
                         <ButtonLineComponent label="Export shaders" onClick={() => {
                             StringTools.DownloadAsFile(this.props.globalState.nodeMaterial!.compiledShaders, "shaders.txt");
                         }} />

nodeEditor/src/globalState.ts

@@ -15,4 +15,5 @@ export class GlobalState {
     onZoomToFitRequiredObservable = new Observable<void>();
     onReOrganizedRequiredObservable = new Observable<void>();
     onLogRequiredObservable = new Observable<LogEntry>();
+    onErrorMessageDialogRequiredObservable = new Observable<string>();
 }

nodeEditor/src/graphEditor.tsx

@@ -31,22 +31,8 @@ import { DataStorage } from './dataStorage';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPointTypes';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { Nullable } from 'babylonjs/types';
-import { BonesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/bonesBlock';
-import { InstancesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/instancesBlock';
-import { MorphTargetsBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/morphTargetsBlock';
-import { AlphaTestBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/alphaTestBlock';
-import { ImageProcessingBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock';
-import { RGBAMergerBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbaMergerBlock';
-import { RGBASplitterBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/rgbaSplitterBlock';
-import { FogBlock } from 'babylonjs/Materials/Node/Blocks/Dual/fogBlock';
-import { VertexOutputBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/vertexOutputBlock';
-import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
-import { AddBlock } from 'babylonjs/Materials/Node/Blocks/addBlock';
-import { ClampBlock } from 'babylonjs/Materials/Node/Blocks/clampBlock';
-import { CrossBlock } from 'babylonjs/Materials/Node/Blocks/crossBlock';
-import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
-import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
-import { VectorTransformBlock } from 'babylonjs/Materials/Node/Blocks/vectorTransformBlock';
+import { MessageDialogComponent } from './sharedComponents/messageDialog';
+import { BlockTools } from './blockTools';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -77,6 +63,7 @@ export class NodeCreationOptions {
 }
 
 export class GraphEditor extends React.Component<IGraphEditorProps> {
+    private readonly NodeWidth = 100;
     private _engine: DiagramEngine;
     private _model: DiagramModel;
 
@@ -180,7 +167,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             this.reOrganize();
         })
 
-        this.build();
+        this.build(true);
     }
 
     distributeGraph() {
@@ -211,8 +198,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         for (var nodeName in this._model.nodes) {
             let node = this._model.nodes[nodeName];
             let size = {
-                width: node.width,
-                height: node.height
+                width: node.width | 200,
+                height: node.height | 100
             };
             output.push({ id: node.id, metadata: { ...size, id: node.id } });
         }
@@ -251,13 +238,13 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         }
     }
 
-    build() {
+    build(needToWait = false) {
         // setup the diagram model
         this._model = new DiagramModel();
 
         // Listen to events
         this._model.addListener({
-            nodesUpdated: (e) => {
+            nodesUpdated: (e) => {                
                 if (!e.isCreated) {
                     // Block is deleted
                     let targetBlock = (e.node as GenericNodeModel).block;
@@ -273,16 +260,39 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                 if (!e.isCreated) {
                     // Link is deleted
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                    var link = DefaultPortModel.SortInputOutput(e.link.sourcePort as DefaultPortModel, e.link.targetPort as DefaultPortModel);
+                    let sourcePort = e.link.sourcePort as DefaultPortModel;
+
+                    var link = DefaultPortModel.SortInputOutput(sourcePort, e.link.targetPort as DefaultPortModel);
                     if (link) {
-                        if (link.input.connection) {
-                            if (link.output.connection) {
+                        if (link.input.connection && link.output.connection) {
+                            if (link.input.connection.connectedPoint && link.input.connection.connectedPoint.ownerBlock !== link.output.connection.ownerBlock) {
                                 // Disconnect standard nodes
-                                link.output.connection.disconnectFrom(link.input.connection)
-                                link.input.syncWithNodeMaterialConnectionPoint(link.input.connection)
-                                link.output.syncWithNodeMaterialConnectionPoint(link.output.connection)
+                                link.output.connection.disconnectFrom(link.input.connection);
+                                link.input.syncWithNodeMaterialConnectionPoint(link.input.connection);
+                                link.output.syncWithNodeMaterialConnectionPoint(link.output.connection);
                             }
                         }
+                    } else {
+                        if (!e.link.targetPort && e.link.sourcePort) {
+                            // Drag from input port, we are going to build an input for it                            
+                            let input = e.link.sourcePort as DefaultPortModel;
+                            let nodeModel = this.addValueNode(BlockTools.GetStringFromConnectionNodeType(input.connection!.type));
+                            let link = nodeModel.ports.output.link(input);
+
+                            nodeModel.x = e.link.points[1].x - this.NodeWidth;
+                            nodeModel.y = e.link.points[1].y;
+
+                            setTimeout(() => {
+                                this._model.addLink(link);
+                                input.syncWithNodeMaterialConnectionPoint(input.connection!);
+                                nodeModel.ports.output.syncWithNodeMaterialConnectionPoint(nodeModel.ports.output.connection!);                                 
+
+                                this.forceUpdate();
+                            }, 1);
+                           
+                            nodeModel.ports.output.connection!.connectTo(input.connection!);
+                            this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                        }
                     }
                     this.forceUpdate();
                     return;
@@ -301,12 +311,21 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                                 for (var key in link.input.links) {
                                     let other = link.input.links[key];
 
-                                    if (other.getSourcePort() !== link.output) {
+                                    if ((other.getSourcePort() as DefaultPortModel).connection  !== (link.output as DefaultPortModel).connection && 
+                                        (other.getTargetPort() as DefaultPortModel).connection  !== (link.output as DefaultPortModel).connection
+                                    ) {
                                         other.remove();
                                     }
                                 }
 
-                                link.output.connection.connectTo(link.input.connection);
+                                try {
+                                    link.output.connection.connectTo(link.input.connection);
+                                }        
+                                catch (err) {
+                                    link.output.remove();
+                                    this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry(err, true));
+                                    this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(err);
+                                }
 
                                 this.forceUpdate();
                             }
@@ -341,7 +360,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             this.forceUpdate();
 
             this.reOrganize();
-        }, 500);
+        }, needToWait ? 500 : 1);
     }
 
     reOrganize() {
@@ -360,30 +379,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
     }
 
     addValueNode(type: string) {
-        let nodeType: NodeMaterialBlockConnectionPointTypes = NodeMaterialBlockConnectionPointTypes.Vector3;
-        switch (type) {
-            case "Float":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Float;
-                break;
-            case "Vector2":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Vector2;
-                break;
-            case "Vector3":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Vector3;
-                break;
-            case "Vector4":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Vector4;
-                break;
-            case "Matrix":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Matrix;
-                break;
-            case "Color3":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Color3;
-                break;
-            case "Color4":
-                nodeType = NodeMaterialBlockConnectionPointTypes.Color4;
-                break;
-        }
+        let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
 
         let newInputBlock = new InputBlock(type, undefined, nodeType);
         newInputBlock.setDefaultValue();
@@ -438,64 +434,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         if (data.indexOf("Block") === -1) {
             nodeModel = this.addValueNode(data);
         } else {
-            let block: Nullable<NodeMaterialBlock> = null;
-
-            switch (data) {
-                case "BonesBlock":
-                    block = new BonesBlock("Bones");
-                    break;
-                case "InstancesBlock":
-                    block = new InstancesBlock("Instances");
-                    break;
-                case "MorphTargetsBlock":
-                    block = new MorphTargetsBlock("MorphTargets");
-                    break;
-                case "AlphaTestBlock":
-                    block = new AlphaTestBlock("AlphaTest");
-                    break;
-                case "ImageProcessingBlock":
-                    block = new ImageProcessingBlock("ImageProcessing");
-                    break;
-                case "RGBAMergerBlock":
-                    block = new RGBAMergerBlock("RGBAMerger");
-                    break;
-                case "RGBASplitterBlock":
-                    block = new RGBASplitterBlock("RGBASplitter");
-                    break;
-                case "TextureBlock":
-                    block = new TextureBlock("Texture");
-                    break;
-                case "LightBlock":
-                    block = new LightBlock("Lights");
-                    break;
-                case "FogBlock":
-                    block = new FogBlock("Fog");
-                    break;
-                case "VertexOutputBlock":
-                    block = new VertexOutputBlock("VertexOutput");
-                    break;
-                case "FragmentOutputBlock":
-                    block = new FragmentOutputBlock("FragmentOutput");
-                    break;
-                case "AddBlock":
-                    block = new AddBlock("Add");
-                    break;
-                case "ClampBlock":
-                    block = new ClampBlock("Clamp");
-                    break;
-                case "CrossBlock":
-                    block = new CrossBlock("Dot");
-                    break;
-                case "DotBlock":
-                    block = new DotBlock("Dot");
-                    break;
-                case "MultiplyBlock":
-                    block = new MultiplyBlock("Multiply");
-                    break;
-                case "VectorTransformBlock":
-                    block = new VectorTransformBlock("VectorTransform");
-                    break;
-            }
+            let block = BlockTools.GetBlockFromString(data);          
 
             if (block) {
                 nodeModel = this.createNodeFromObject({ nodeMaterialBlock: block });
@@ -505,7 +444,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
         if (nodeModel) {
             const zoomLevel = this._engine.diagramModel.getZoomLevel() / 100.0;
 
-            let x = (event.clientX - event.currentTarget.offsetLeft - this._engine.diagramModel.getOffsetX() - 100) / zoomLevel;
+            let x = (event.clientX - event.currentTarget.offsetLeft - this._engine.diagramModel.getOffsetX() - this.NodeWidth) / zoomLevel;
             let y = (event.clientY - event.currentTarget.offsetTop - this._engine.diagramModel.getOffsetY() - 20) / zoomLevel;
             nodeModel.setPosition(x, y);
         }
@@ -539,7 +478,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                             event.preventDefault();
                         }}
                     >
-                        <DiagramWidget className="diagram" deleteKeys={[46]} ref={"test"} inverseZoom={true} diagramEngine={this._engine} maxNumberPointsPerLink={0} />
+                        <DiagramWidget className="diagram" deleteKeys={[46]} ref={"test"} 
+                        allowLooseLinks={false}
+                        inverseZoom={true} diagramEngine={this._engine} maxNumberPointsPerLink={0} />
                     </div>
 
                     <div id="rightGrab"
@@ -552,7 +493,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     <PropertyTabComponent globalState={this.props.globalState} />
 
                     <LogComponent globalState={this.props.globalState} />
-                </div>
+                </div>                
+                <MessageDialogComponent globalState={this.props.globalState} />
             </Portal>
         );
 

nodeEditor/src/main.scss

@@ -45,4 +45,66 @@
 #log-console {
     grid-row: 2;
     grid-column: 3;
+}
+
+.dialog-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0.1, 0.1, 0.1, 0.3);
+    display: grid;
+    font-family: "acumin-pro";
+    top:0;
+
+    .dialog {
+        align-self: center;
+        justify-self: center;
+        min-height: 140px;
+        max-width: 400px;
+        border-radius: 10px;
+        background: white;
+
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: calc(100% - 50px) 50px;
+
+        .dialog-message {
+            grid-row: 1;
+            grid-column: 1;
+            margin-top: 20px;
+            padding: 10px;
+            font-size: 18px;
+            color: black;
+        }
+
+        .dialog-buttons {
+            grid-row: 2;
+            grid-column: 1;
+            display: grid;
+            grid-template-rows: 100%;
+            grid-template-columns: 100%;
+            color: white;
+
+            .dialog-button-ok {
+                cursor: pointer;
+                justify-self: center;
+                background:green;
+                min-width: 80px;
+                justify-content: center;
+                display: grid;
+                align-content: center;
+                align-self: center;
+                height: 35px;      
+                border-radius: 10px;
+
+                &:hover {
+                    opacity: 0.8;
+                }
+
+                &.error {
+                    background: red;
+                }
+            }
+        }
+    }
 }

nodeEditor/src/sharedComponents/messageDialog.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { GlobalState } from '../globalState';
+
+interface IMessageDialogComponentProps {
+    globalState: GlobalState
+}
+
+export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, { message: string, isError: boolean }> {
+    constructor(props: IMessageDialogComponentProps) {
+        super(props);
+
+        this.state = {message: "", isError: false};
+
+        this.props.globalState.onErrorMessageDialogRequiredObservable.add((message: string) => {
+            this.setState({message: message, isError: true});
+        });
+    }
+
+    render() {
+        if (!this.state.message) {
+            return null;
+        }
+
+        return (
+            <div className="dialog-container">
+                <div className="dialog">
+                    <div className="dialog-message">
+                        {
+                            this.state.message
+                        }
+                    </div>
+                    <div className="dialog-buttons">
+                        <div className={"dialog-button-ok" + (this.state.isError ? " error" : "")} onClick={() => this.setState({message: ""})}>
+                            OK
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/Cameras/VR/vrExperienceHelper.ts

@@ -298,7 +298,7 @@ export class OnAfterEnteringVRObservableEvent {
 export class VRExperienceHelper {
     private _scene: Scene;
     private _position: Vector3;
-    private _btnVR: HTMLButtonElement;
+    private _btnVR: Nullable<HTMLButtonElement>;
     private _btnVRDisplayed: boolean;
 
     // Can the system support WebVR, even if a headset isn't plugged in?
@@ -616,6 +616,13 @@ export class VRExperienceHelper {
         return this._vrDeviceOrientationCamera;
     }
 
+    /**
+     * The html button that is used to trigger entering into VR.
+     */
+    public get vrButton(): Nullable<HTMLButtonElement> {
+        return this._btnVR;
+    }
+
     private get _teleportationRequestInitiated(): boolean {
         var result = this._cameraGazer._teleportationRequestInitiated
             || (this._leftController !== null && this._leftController._teleportationRequestInitiated)
@@ -882,7 +889,7 @@ export class VRExperienceHelper {
         }
         if (!this._fullscreenVRpresenting && this._canvas) {
             this.exitVR();
-            if (!this._useCustomVRButton) {
+            if (!this._useCustomVRButton && this._btnVR) {
                 this._btnVR.style.top = this._canvas.offsetTop + this._canvas.offsetHeight - 70 + "px";
                 this._btnVR.style.left = this._canvas.offsetLeft + this._canvas.offsetWidth - 100 + "px";
             }
@@ -921,14 +928,15 @@ export class VRExperienceHelper {
     }
 
     private moveButtonToBottomRight() {
-        if (this._canvas && !this._useCustomVRButton) {
-            this._btnVR.style.top = this._canvas.offsetTop + this._canvas.offsetHeight - 70 + "px";
-            this._btnVR.style.left = this._canvas.offsetLeft + this._canvas.offsetWidth - 100 + "px";
+        if (this._canvas && !this._useCustomVRButton && this._btnVR) {
+            const rect: ClientRect = this._canvas.getBoundingClientRect();
+            this._btnVR.style.top = rect.top + rect.height - 70 + "px";
+            this._btnVR.style.left = rect.left + rect.width - 100 + "px";
         }
     }
 
     private displayVRButton() {
-        if (!this._useCustomVRButton && !this._btnVRDisplayed) {
+        if (!this._useCustomVRButton && !this._btnVRDisplayed && this._btnVR) {
             document.body.appendChild(this._btnVR);
             this._btnVRDisplayed = true;
         }
@@ -2029,7 +2037,7 @@ export class VRExperienceHelper {
         if (this._vrDeviceOrientationCamera) {
             this._vrDeviceOrientationCamera.dispose();
         }
-        if (!this._useCustomVRButton && this._btnVR.parentNode) {
+        if (!this._useCustomVRButton  && this._btnVR && this._btnVR.parentNode) {
             document.body.removeChild(this._btnVR);
         }
 

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

@@ -31,7 +31,7 @@ export class FogBlock extends NodeMaterialBlock {
         this.registerInput("view", NodeMaterialBlockConnectionPointTypes.Matrix, false, NodeMaterialBlockTargets.Vertex);
 
         // Fragment
-        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3OrColor4, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
         this.registerInput("fogColor", NodeMaterialBlockConnectionPointTypes.Color3, false, NodeMaterialBlockTargets.Fragment);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
@@ -132,8 +132,8 @@ export class FogBlock extends NodeMaterialBlock {
 
             state.compilationString += `#ifdef FOG\r\n`;
             state.compilationString += `float ${tempFogVariablename} = CalcFogFactor(${this._fogDistanceName}, ${this._fogParameters});\r\n`;
-            state.compilationString += this._declareOutput(output, state) + ` = ${tempFogVariablename} * ${color.associatedVariableName}.rgb + (1.0 - ${tempFogVariablename}) * ${fogColor.associatedVariableName};\r\n`;
-            state.compilationString += `#else\r\n${this._declareOutput(output, state)} =  ${color.associatedVariableName}.rgb;\r\n`;
+            state.compilationString += this._declareOutput(output, state) + ` = ${tempFogVariablename} * ${color.associatedVariableName} + (1.0 - ${tempFogVariablename}) * ${fogColor.associatedVariableName};\r\n`;
+            state.compilationString += `#else\r\n${this._declareOutput(output, state)} =  ${color.associatedVariableName};\r\n`;
             state.compilationString += `#endif\r\n`;
         } else {
             let worldPos = this.worldPosition;

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

@@ -17,7 +17,8 @@ export class RGBASplitterBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Fragment);
 
-        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.Vector4OrColor4);
+        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.Color4);
+        this.registerOutput("rgb", NodeMaterialBlockConnectionPointTypes.Color3);
         this.registerOutput("r", NodeMaterialBlockConnectionPointTypes.Float);
         this.registerOutput("g", NodeMaterialBlockConnectionPointTypes.Float);
         this.registerOutput("b", NodeMaterialBlockConnectionPointTypes.Float);
@@ -43,11 +44,15 @@ export class RGBASplitterBlock extends NodeMaterialBlock {
         super._buildBlock(state);
 
         let input = this.input;
-        let rOutput = this._outputs[0];
-        let gOutput = this._outputs[1];
-        let bOutput = this._outputs[2];
-        let aOutput = this._outputs[3];
+        let rgbOutput = this._outputs[0];
+        let rOutput = this._outputs[1];
+        let gOutput = this._outputs[2];
+        let bOutput = this._outputs[3];
+        let aOutput = this._outputs[4];
 
+        if (rgbOutput.connectedBlocks.length > 0) {
+            state.compilationString += this._declareOutput(rgbOutput, state) + ` = ${input.associatedVariableName}.rgb;\r\n`;
+        }
         if (rOutput.connectedBlocks.length > 0) {
             state.compilationString += this._declareOutput(rOutput, state) + ` = ${input.associatedVariableName}.r;\r\n`;
         }

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

@@ -4,12 +4,13 @@ import { NodeMaterialBlockConnectionPointMode } from '../../NodeMaterialBlockCon
 import { NodeMaterialWellKnownValues } from '../../nodeMaterialWellKnownValues';
 import { Nullable } from '../../../../types';
 import { Effect } from '../../../../Materials/effect';
-import { Matrix, Vector2, Vector3 } from '../../../../Maths/math.vector';
+import { Matrix, Vector2, Vector3, Vector4 } from '../../../../Maths/math.vector';
 import { Scene } from '../../../../scene';
 import { NodeMaterialConnectionPoint } from '../../nodeMaterialBlockConnectionPoint';
 import { NodeMaterialBuildState } from '../../nodeMaterialBuildState';
 import { NodeMaterialBlockTargets } from '../../nodeMaterialBlockTargets';
 import { _TypeStore } from '../../../../Misc/typeStore';
+import { Color3, Color4 } from '../../../../Maths/math';
 
 /**
  * Block used to expose an input value
@@ -255,10 +256,17 @@ export class InputBlock extends NodeMaterialBlock {
                 this.value = Vector2.Zero();
                 break;
             case NodeMaterialBlockConnectionPointTypes.Vector3:
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-            case NodeMaterialBlockConnectionPointTypes.Vector3OrColor3:
                 this.value = Vector3.Zero();
                 break;
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                this.value = Vector4.Zero();
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+                this.value = Color3.White();
+                break;
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                this.value = new Color4(1, 1, 1, 1);
+                break;
             case NodeMaterialBlockConnectionPointTypes.Matrix:
                 this.value = Matrix.Identity();
                 break;

src/Materials/Node/Blocks/Vertex/bonesBlock.ts

@@ -25,8 +25,8 @@ export class BonesBlock extends NodeMaterialBlock {
 
         this.registerInput("matricesIndices", NodeMaterialBlockConnectionPointTypes.Vector4);
         this.registerInput("matricesWeights", NodeMaterialBlockConnectionPointTypes.Vector4);
-        this.registerInput("matricesIndicesExtra", NodeMaterialBlockConnectionPointTypes.Vector4);
-        this.registerInput("matricesWeightsExtra", NodeMaterialBlockConnectionPointTypes.Vector4);
+        this.registerInput("matricesIndicesExtra", NodeMaterialBlockConnectionPointTypes.Vector4, true);
+        this.registerInput("matricesWeightsExtra", NodeMaterialBlockConnectionPointTypes.Vector4, true);
         this.registerInput("world", NodeMaterialBlockConnectionPointTypes.Matrix);
 
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Matrix);
@@ -104,16 +104,6 @@ export class BonesBlock extends NodeMaterialBlock {
             matricesWeightsInput.setAsAttribute("matricesWeights");
             matricesWeightsInput.output.connectTo(this.matricesWeights);
         }
-        if (!this.matricesIndicesExtra.isConnected) {
-            let matricesIndicesExtraInput = new InputBlock("matricesIndicesExtra", undefined, NodeMaterialBlockConnectionPointTypes.Vector4);
-            matricesIndicesExtraInput.setAsAttribute("matricesIndicesExtra");
-            matricesIndicesExtraInput.output.connectTo(this.matricesIndicesExtra);
-        }
-        if (!this.matricesWeightsExtra.isConnected) {
-            let matricesWeightsExtraInput = new InputBlock("matricesWeightsExtra", undefined, NodeMaterialBlockConnectionPointTypes.Vector4);
-            matricesWeightsExtraInput.setAsAttribute("matricesWeightsExtra");
-            matricesWeightsExtraInput.output.connectTo(this.matricesWeightsExtra);
-        }
         if (!this.world.isConnected) {
             let worldInput = new InputBlock("world", undefined, NodeMaterialBlockConnectionPointTypes.Matrix);
             worldInput.setAsWellKnownValue(NodeMaterialWellKnownValues.World);

src/Materials/Node/Blocks/index.ts

@@ -7,4 +7,4 @@ export * from "./addBlock";
 export * from "./clampBlock";
 export * from "./crossBlock";
 export * from "./dotBlock";
-export * from "./vectorTransformBlock";
+export * from "./transformBlock";

src/Materials/Node/Blocks/multiplyBlock.ts

@@ -16,10 +16,11 @@ export class MultiplyBlock extends NodeMaterialBlock {
         super(name, NodeMaterialBlockTargets.Neutral);
 
         this.registerInput("left", NodeMaterialBlockConnectionPointTypes.AutoDetect);
-        this.registerInput("right", NodeMaterialBlockConnectionPointTypes.AutoDetect);
+        this.registerInput("right", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
 
         this._outputs[0]._typeConnectionSource = this._inputs[0];
+        this._inputs[1]._typeConnectionSource = this._inputs[0];
     }
 
     /**

src/Materials/Node/Blocks/vectorTransformBlock.ts

@@ -8,7 +8,7 @@ import { _TypeStore } from '../../../Misc/typeStore';
 /**
  * Block used to transform a vector (2, 3 or 4) with a matrix. It will generate a Vector4
  */
-export class VectorTransformBlock extends NodeMaterialBlock {
+export class TransformBlock extends NodeMaterialBlock {
     /**
      * Defines the value to use to complement W value to transform it to a Vector4
      */
@@ -20,7 +20,7 @@ export class VectorTransformBlock extends NodeMaterialBlock {
     public complementZ = 0;
 
     /**
-     * Creates a new VectorTransformBlock
+     * Creates a new TransformBlock
      * @param name defines the block name
      */
     public constructor(name: string) {
@@ -36,7 +36,7 @@ export class VectorTransformBlock extends NodeMaterialBlock {
      * @returns the class name
      */
     public getClassName() {
-        return "VectorTransformBlock";
+        return "TransformBlock";
     }
 
     /**
@@ -84,4 +84,4 @@ export class VectorTransformBlock extends NodeMaterialBlock {
     }
 }
 
-_TypeStore.RegisteredTypes["BABYLON.VectorTransformBlock"] = VectorTransformBlock;
+_TypeStore.RegisteredTypes["BABYLON.TransformBlock"] = TransformBlock;

src/Materials/Node/nodeMaterial.ts

@@ -19,7 +19,7 @@ import { ImageProcessingConfiguration, IImageProcessingConfigurationDefines } fr
 import { Nullable } from '../../types';
 import { VertexBuffer } from '../../Meshes/buffer';
 import { Tools } from '../../Misc/tools';
-import { VectorTransformBlock } from './Blocks/vectorTransformBlock';
+import { TransformBlock } from './Blocks/transformBlock';
 import { VertexOutputBlock } from './Blocks/Vertex/vertexOutputBlock';
 import { FragmentOutputBlock } from './Blocks/Fragment/fragmentOutputBlock';
 import { InputBlock } from './Blocks/Input/inputBlock';
@@ -847,14 +847,14 @@ export class NodeMaterial extends PushMaterial {
         var worldInput = new InputBlock("world");
         worldInput.setAsWellKnownValue(BABYLON.NodeMaterialWellKnownValues.World);
 
-        var worldPos = new VectorTransformBlock("worldPos");
+        var worldPos = new TransformBlock("worldPos");
         positionInput.connectTo(worldPos);
         worldInput.connectTo(worldPos);
 
         var viewProjectionInput = new InputBlock("viewProjection");
         viewProjectionInput.setAsWellKnownValue(BABYLON.NodeMaterialWellKnownValues.ViewProjection);
 
-        var worldPosdMultipliedByViewProjection = new VectorTransformBlock("worldPos * viewProjectionTransform");
+        var worldPosdMultipliedByViewProjection = new TransformBlock("worldPos * viewProjectionTransform");
         worldPos.connectTo(worldPosdMultipliedByViewProjection);
         viewProjectionInput.connectTo(worldPosdMultipliedByViewProjection);
 
@@ -924,14 +924,12 @@ export class NodeMaterial extends PushMaterial {
     }
 
     /**
-     * Creates a node material from parsed material data
+     * Clear the current graph and load a new one from a serialization object
      * @param source defines the JSON representation of the material
-     * @param scene defines the hosting scene
      * @param rootUrl defines the root URL to use to load textures and relative dependencies
-     * @returns a new node material
      */
-    public static Parse(source: any, scene: Scene, rootUrl: string = ""): NodeMaterial {
-        let nodeMaterial = SerializationHelper.Parse(() => new NodeMaterial(source.name, scene), source, scene, rootUrl);
+    public loadFromSerialization(source: any, rootUrl: string = "") {
+        this.clear();
 
         let map: {[key: number]: NodeMaterialBlock} = {};
 
@@ -940,7 +938,7 @@ export class NodeMaterial extends PushMaterial {
             let blockType = _TypeStore.GetClass(parsedBlock.customType);
             if (blockType) {
                 let block: NodeMaterialBlock = new blockType();
-                block._deserialize(parsedBlock, scene, rootUrl);
+                block._deserialize(parsedBlock, this.getScene(), rootUrl);
                 map[parsedBlock.id] = block;
             }
         }
@@ -968,8 +966,21 @@ export class NodeMaterial extends PushMaterial {
 
         // Outputs
         for (var outputNodeId of source.outputNodes) {
-            nodeMaterial.addOutputNode(map[outputNodeId]);
+            this.addOutputNode(map[outputNodeId]);
         }
+    }
+
+    /**
+     * Creates a node material from parsed material data
+     * @param source defines the JSON representation of the material
+     * @param scene defines the hosting scene
+     * @param rootUrl defines the root URL to use to load textures and relative dependencies
+     * @returns a new node material
+     */
+    public static Parse(source: any, scene: Scene, rootUrl: string = ""): NodeMaterial {
+        let nodeMaterial = SerializationHelper.Parse(() => new NodeMaterial(source.name, scene), source, scene, rootUrl);
+
+        nodeMaterial.loadFromSerialization(source, rootUrl);
 
         return nodeMaterial;
     }