Opposite block + varying fixes #6012

Playground/babylon.d.txt

@@ -51099,7 +51099,7 @@ declare module BABYLON {
          * Gets the b output component
          */
         readonly b: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -51241,6 +51241,18 @@ declare module BABYLON {
          */
         getBlockByName(name: string): Nullable<NodeMaterialBlock>;
         /**
+         * Get a block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required block or null if not found
+         */
+        getBlockByPredicate(predicate: (block: NodeMaterialBlock) => boolean): Nullable<NodeMaterialBlock>;
+        /**
+         * Get an input block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required input block or null if not found
+         */
+        getInputBlockByPredicate(predicate: (block: InputBlock) => boolean): Nullable<InputBlock>;
+        /**
          * Gets the list of input blocks attached to this material
          * @returns an array of InputBlocks
          */
@@ -51455,7 +51467,7 @@ declare module BABYLON {
          */
         readonly a: NodeMaterialConnectionPoint;
         readonly target: NodeMaterialBlockTargets;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         initializeDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
@@ -52136,7 +52148,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         provideFallbacks(mesh: AbstractMesh, fallbacks: EffectFallbacks): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
@@ -52183,7 +52195,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
@@ -52238,7 +52250,7 @@ declare module BABYLON {
          */
         readonly uvOutput: NodeMaterialConnectionPoint;
         initialize(state: NodeMaterialBuildState): void;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         replaceRepeatableContent(vertexShaderState: NodeMaterialBuildState, fragmentShaderState: NodeMaterialBuildState, mesh: AbstractMesh, defines: NodeMaterialDefines): void;
@@ -52279,49 +52291,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to compute fresnel value
-     */
-    export class FresnelBlock extends NodeMaterialBlock {
-        /**
-         * Create a new FresnelBlock
-         * @param name defines the block name
-         */
-        constructor(name: string);
-        /**
-         * Gets the current class name
-         * @returns the class name
-         */
-        getClassName(): string;
-        /**
-         * Gets the world position input component
-         */
-        readonly worldPosition: NodeMaterialConnectionPoint;
-        /**
-         * Gets the world normal input component
-         */
-        readonly worldNormal: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly cameraPosition: NodeMaterialConnectionPoint;
-        /**
-        * Gets the bias input component
-        */
-        readonly bias: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly power: NodeMaterialConnectionPoint;
-        /**
-         * Gets the fresnel output component
-         */
-        readonly fresnel: NodeMaterialConnectionPoint;
-        autoConfigure(material: NodeMaterial): void;
-        protected _buildBlock(state: NodeMaterialBuildState): this | undefined;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to add image processing support to fragment shader
      */
     export class ImageProcessingBlock extends NodeMaterialBlock {
@@ -52391,7 +52360,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
@@ -52437,7 +52406,7 @@ declare module BABYLON {
          * Gets the specular output component
          */
         readonly specularOutput: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         updateUniformsAndSamples(state: NodeMaterialBuildState, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -53059,6 +53028,102 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Block used to get the opposite of a value
+     */
+    export class OppositeBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new OppositeBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the input component
+         */
+        readonly input: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to get the view direction
+     */
+    export class ViewDirectionBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new ViewDirectionBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world position component
+         */
+        readonly worldPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the camera position component
+         */
+        readonly cameraPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to compute fresnel value
+     */
+    export class FresnelBlock extends NodeMaterialBlock {
+        /**
+         * Create a new FresnelBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world normal input component
+         */
+        readonly worldNormal: NodeMaterialConnectionPoint;
+        /**
+        * Gets the view direction input component
+        */
+        readonly viewDirection: NodeMaterialConnectionPoint;
+        /**
+        * Gets the bias input component
+        */
+        readonly bias: NodeMaterialConnectionPoint;
+        /**
+        * Gets the camera (or eye) position component
+        */
+        readonly power: NodeMaterialConnectionPoint;
+        /**
+         * Gets the fresnel output component
+         */
+        readonly fresnel: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
      * Effect Render Options
      */
     export interface IEffectRendererOptions {

dist/preview release/documentation.d.ts

@@ -51880,7 +51880,7 @@ declare module BABYLON {
          * Gets the b output component
          */
         readonly b: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -52025,6 +52025,18 @@ declare module BABYLON {
          */
         getBlockByName(name: string): Nullable<NodeMaterialBlock>;
         /**
+         * Get a block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required block or null if not found
+         */
+        getBlockByPredicate(predicate: (block: NodeMaterialBlock) => boolean): Nullable<NodeMaterialBlock>;
+        /**
+         * Get an input block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required input block or null if not found
+         */
+        getInputBlockByPredicate(predicate: (block: InputBlock) => boolean): Nullable<InputBlock>;
+        /**
          * Gets the list of input blocks attached to this material
          * @returns an array of InputBlocks
          */
@@ -52239,7 +52251,7 @@ declare module BABYLON {
          */
         readonly a: NodeMaterialConnectionPoint;
         readonly target: NodeMaterialBlockTargets;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         initializeDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
@@ -52951,7 +52963,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         provideFallbacks(mesh: AbstractMesh, fallbacks: EffectFallbacks): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
@@ -52998,7 +53010,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
@@ -53053,7 +53065,7 @@ declare module BABYLON {
          */
         readonly uvOutput: NodeMaterialConnectionPoint;
         initialize(state: NodeMaterialBuildState): void;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         replaceRepeatableContent(vertexShaderState: NodeMaterialBuildState, fragmentShaderState: NodeMaterialBuildState, mesh: AbstractMesh, defines: NodeMaterialDefines): void;
@@ -53095,49 +53107,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to compute fresnel value
-     */
-    export class FresnelBlock extends NodeMaterialBlock {
-        /**
-         * Create a new FresnelBlock
-         * @param name defines the block name
-         */
-        constructor(name: string);
-        /**
-         * Gets the current class name
-         * @returns the class name
-         */
-        getClassName(): string;
-        /**
-         * Gets the world position input component
-         */
-        readonly worldPosition: NodeMaterialConnectionPoint;
-        /**
-         * Gets the world normal input component
-         */
-        readonly worldNormal: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly cameraPosition: NodeMaterialConnectionPoint;
-        /**
-        * Gets the bias input component
-        */
-        readonly bias: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly power: NodeMaterialConnectionPoint;
-        /**
-         * Gets the fresnel output component
-         */
-        readonly fresnel: NodeMaterialConnectionPoint;
-        autoConfigure(material: NodeMaterial): void;
-        protected _buildBlock(state: NodeMaterialBuildState): this | undefined;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to add image processing support to fragment shader
      */
     export class ImageProcessingBlock extends NodeMaterialBlock {
@@ -53207,7 +53176,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
@@ -53253,7 +53222,7 @@ declare module BABYLON {
          * Gets the specular output component
          */
         readonly specularOutput: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         updateUniformsAndSamples(state: NodeMaterialBuildState, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -53878,6 +53847,102 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Block used to get the opposite of a value
+     */
+    export class OppositeBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new OppositeBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the input component
+         */
+        readonly input: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to get the view direction
+     */
+    export class ViewDirectionBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new ViewDirectionBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world position component
+         */
+        readonly worldPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the camera position component
+         */
+        readonly cameraPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to compute fresnel value
+     */
+    export class FresnelBlock extends NodeMaterialBlock {
+        /**
+         * Create a new FresnelBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world normal input component
+         */
+        readonly worldNormal: NodeMaterialConnectionPoint;
+        /**
+        * Gets the view direction input component
+        */
+        readonly viewDirection: NodeMaterialConnectionPoint;
+        /**
+        * Gets the bias input component
+        */
+        readonly bias: NodeMaterialConnectionPoint;
+        /**
+        * Gets the camera (or eye) position component
+        */
+        readonly power: NodeMaterialConnectionPoint;
+        /**
+         * Gets the fresnel output component
+         */
+        readonly fresnel: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
      * Effect Render Options
      */
     export interface IEffectRendererOptions {

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

@@ -40585,7 +40585,7 @@ var ActionTabsComponent = /** @class */ (function (_super) {
         _this.state = { selectedEntity: null, selectedIndex: initialIndex };
         return _this;
     }
-    ActionTabsComponent.prototype.componentWillMount = function () {
+    ActionTabsComponent.prototype.componentDidMount = function () {
         var _this = this;
         if (this.props.globalState) {
             this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add(function (entity) {
@@ -41561,7 +41561,7 @@ var RadioButtonLineComponent = /** @class */ (function (_super) {
         _this.state = { isSelected: _this.props.isSelected() };
         return _this;
     }
-    RadioButtonLineComponent.prototype.componentWillMount = function () {
+    RadioButtonLineComponent.prototype.componentDidMount = function () {
         var _this = this;
         this._onSelectionChangedObserver = this.props.onSelectionChangedObservable.add(function (value) {
             _this.setState({ isSelected: value === _this });
@@ -42037,7 +42037,7 @@ var TextureLinkLineComponent = /** @class */ (function (_super) {
         _this.state = { isDebugSelected: material && material.reservedDataStore && material.reservedDataStore.debugTexture === texture };
         return _this;
     }
-    TextureLinkLineComponent.prototype.componentWillMount = function () {
+    TextureLinkLineComponent.prototype.componentDidMount = function () {
         var _this = this;
         if (!this.props.onDebugSelectionChangeObservable) {
             return;
@@ -42572,20 +42572,16 @@ var DebugTabComponent = /** @class */ (function (_super) {
     function DebugTabComponent(props) {
         var _this = _super.call(this, props) || this;
         _this._physicsViewersEnabled = false;
-        return _this;
-    }
-    DebugTabComponent.prototype.componentWillMount = function () {
-        var scene = this.props.scene;
+        var scene = _this.props.scene;
         if (!scene) {
-            return;
+            return _this;
         }
         if (!scene.reservedDataStore) {
             scene.reservedDataStore = {};
         }
-        this._physicsViewersEnabled = scene.reservedDataStore.physicsViewer != null;
-    };
-    DebugTabComponent.prototype.componentWillUnmount = function () {
-    };
+        _this._physicsViewersEnabled = scene.reservedDataStore.physicsViewer != null;
+        return _this;
+    }
     DebugTabComponent.prototype.switchPhysicsViewers = function () {
         this._physicsViewersEnabled = !this._physicsViewersEnabled;
         var scene = this.props.scene;
@@ -42768,7 +42764,7 @@ var PropertyGridTabComponent = /** @class */ (function (_super) {
             this.forceUpdate();
         }
     };
-    PropertyGridTabComponent.prototype.componentWillMount = function () {
+    PropertyGridTabComponent.prototype.componentDidMount = function () {
         var _this = this;
         this._timerIntervalId = window.setInterval(function () { return _this.timerRefresh(); }, 500);
     };
@@ -42992,6 +42988,10 @@ var AnimationGroupGridComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         var animationGroup = _this.props.animationGroup;
         _this.state = { playButtonText: animationGroup.isPlaying ? "Pause" : "Play", currentFrame: 0 };
+        _this.connect(_this.props.animationGroup);
+        _this._onBeforeRenderObserver = _this.props.scene.onBeforeRenderObservable.add(function () {
+            _this.updateCurrentFrame(_this.props.animationGroup);
+        });
         return _this;
     }
     AnimationGroupGridComponent.prototype.disconnect = function (animationGroup) {
@@ -43033,13 +43033,6 @@ var AnimationGroupGridComponent = /** @class */ (function (_super) {
         }
         return true;
     };
-    AnimationGroupGridComponent.prototype.componentWillMount = function () {
-        var _this = this;
-        this.connect(this.props.animationGroup);
-        this._onBeforeRenderObserver = this.props.scene.onBeforeRenderObservable.add(function () {
-            _this.updateCurrentFrame(_this.props.animationGroup);
-        });
-    };
     AnimationGroupGridComponent.prototype.componentWillUnmount = function () {
         this.disconnect(this.props.animationGroup);
         if (this._onBeforeRenderObserver) {
@@ -43175,7 +43168,7 @@ var AnimationGridComponent = /** @class */ (function (_super) {
         }
         this.forceUpdate();
     };
-    AnimationGridComponent.prototype.componentWillMount = function () {
+    AnimationGridComponent.prototype.componentDidMount = function () {
         var _this = this;
         this._onBeforeRenderObserver = this.props.scene.onBeforeRenderObservable.add(function () {
             if (!_this._isPlaying || !_this._runningAnimatable) {
@@ -45669,18 +45662,17 @@ __webpack_require__.r(__webpack_exports__);
 var TexturePropertyGridComponent = /** @class */ (function (_super) {
     tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](TexturePropertyGridComponent, _super);
     function TexturePropertyGridComponent(props) {
-        return _super.call(this, props) || this;
-    }
-    TexturePropertyGridComponent.prototype.componentWillMount = function () {
-        var texture = this.props.texture;
+        var _this = _super.call(this, props) || this;
+        var texture = _this.props.texture;
         if (!texture || !texture.rootContainer) {
-            return;
+            return _this;
         }
         var adt = texture;
-        this._adtInstrumentation = new babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__["AdvancedDynamicTextureInstrumentation"](adt);
-        this._adtInstrumentation.captureRenderTime = true;
-        this._adtInstrumentation.captureLayoutTime = true;
-    };
+        _this._adtInstrumentation = new babylonjs_gui_2D_adtInstrumentation__WEBPACK_IMPORTED_MODULE_12__["AdvancedDynamicTextureInstrumentation"](adt);
+        _this._adtInstrumentation.captureRenderTime = true;
+        _this._adtInstrumentation.captureLayoutTime = true;
+        return _this;
+    }
     TexturePropertyGridComponent.prototype.componentWillUnmount = function () {
         if (this._adtInstrumentation) {
             this._adtInstrumentation.dispose();
@@ -46180,6 +46172,7 @@ var SkeletonPropertyGridComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._skeletonViewersEnabled = false;
         _this._skeletonViewers = new Array();
+        _this.checkSkeletonViewerState(_this.props);
         return _this;
     }
     SkeletonPropertyGridComponent.prototype.switchSkeletonViewers = function () {
@@ -46231,9 +46224,6 @@ var SkeletonPropertyGridComponent = /** @class */ (function (_super) {
         }
         this._skeletonViewersEnabled = (this._skeletonViewers.length > 0);
     };
-    SkeletonPropertyGridComponent.prototype.componentWillMount = function () {
-        this.checkSkeletonViewerState(this.props);
-    };
     SkeletonPropertyGridComponent.prototype.shouldComponentUpdate = function (nextProps) {
         if (nextProps.skeleton !== this.props.skeleton) {
             this.checkSkeletonViewerState(nextProps);
@@ -46772,7 +46762,7 @@ var RenderGridPropertyGridComponent = /** @class */ (function (_super) {
         _this.state = { isEnabled: false };
         return _this;
     }
-    RenderGridPropertyGridComponent.prototype.componentWillMount = function () {
+    RenderGridPropertyGridComponent.prototype.componentDidMount = function () {
         var scene = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["UtilityLayerRenderer"].DefaultKeepDepthUtilityLayer.utilityLayerScene;
         for (var _i = 0, _a = scene.meshes; _i < _a.length; _i++) {
             var mesh = _a[_i];
@@ -47073,28 +47063,26 @@ __webpack_require__.r(__webpack_exports__);
 var StatisticsTabComponent = /** @class */ (function (_super) {
     tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](StatisticsTabComponent, _super);
     function StatisticsTabComponent(props) {
-        return _super.call(this, props) || this;
-    }
-    StatisticsTabComponent.prototype.componentWillMount = function () {
-        var _this = this;
-        var scene = this.props.scene;
+        var _this = _super.call(this, props) || this;
+        var scene = _this.props.scene;
         if (!scene) {
-            return;
-        }
-        this._sceneInstrumentation = new babylonjs_Instrumentation_engineInstrumentation__WEBPACK_IMPORTED_MODULE_5__["SceneInstrumentation"](scene);
-        this._sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
-        this._sceneInstrumentation.captureRenderTargetsRenderTime = true;
-        this._sceneInstrumentation.captureFrameTime = true;
-        this._sceneInstrumentation.captureRenderTime = true;
-        this._sceneInstrumentation.captureInterFrameTime = true;
-        this._sceneInstrumentation.captureParticlesRenderTime = true;
-        this._sceneInstrumentation.captureSpritesRenderTime = true;
-        this._sceneInstrumentation.capturePhysicsTime = true;
-        this._sceneInstrumentation.captureAnimationsTime = true;
-        this._engineInstrumentation = new babylonjs_Instrumentation_engineInstrumentation__WEBPACK_IMPORTED_MODULE_5__["EngineInstrumentation"](scene.getEngine());
-        this._engineInstrumentation.captureGPUFrameTime = true;
-        this._timerIntervalId = window.setInterval(function () { return _this.forceUpdate(); }, 500);
-    };
+            return _this;
+        }
+        _this._sceneInstrumentation = new babylonjs_Instrumentation_engineInstrumentation__WEBPACK_IMPORTED_MODULE_5__["SceneInstrumentation"](scene);
+        _this._sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
+        _this._sceneInstrumentation.captureRenderTargetsRenderTime = true;
+        _this._sceneInstrumentation.captureFrameTime = true;
+        _this._sceneInstrumentation.captureRenderTime = true;
+        _this._sceneInstrumentation.captureInterFrameTime = true;
+        _this._sceneInstrumentation.captureParticlesRenderTime = true;
+        _this._sceneInstrumentation.captureSpritesRenderTime = true;
+        _this._sceneInstrumentation.capturePhysicsTime = true;
+        _this._sceneInstrumentation.captureAnimationsTime = true;
+        _this._engineInstrumentation = new babylonjs_Instrumentation_engineInstrumentation__WEBPACK_IMPORTED_MODULE_5__["EngineInstrumentation"](scene.getEngine());
+        _this._engineInstrumentation.captureGPUFrameTime = true;
+        _this._timerIntervalId = window.setInterval(function () { return _this.forceUpdate(); }, 500);
+        return _this;
+    }
     StatisticsTabComponent.prototype.componentWillUnmount = function () {
         if (this._sceneInstrumentation) {
             this._sceneInstrumentation.dispose();
@@ -47356,7 +47344,7 @@ var ToolsTabComponent = /** @class */ (function (_super) {
         _this.state = { tag: "Record video" };
         return _this;
     }
-    ToolsTabComponent.prototype.componentWillMount = function () {
+    ToolsTabComponent.prototype.componentDidMount = function () {
         if (!BABYLON.GLTF2Export) {
             babylonjs_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_5__["Tools"].LoadScript("https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js", function () {
             });
@@ -47775,7 +47763,7 @@ var HeaderComponent = /** @class */ (function (_super) {
         _this.state = { isBackVisible: false };
         return _this;
     }
-    HeaderComponent.prototype.componentWillMount = function () {
+    HeaderComponent.prototype.componentDidMount = function () {
         var _this = this;
         if (!this.props.onSelectionChangedObservable) {
             return;
@@ -48059,7 +48047,7 @@ var CameraTreeItemComponent = /** @class */ (function (_super) {
         camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
         this.setState({ isActive: true });
     };
-    CameraTreeItemComponent.prototype.componentWillMount = function () {
+    CameraTreeItemComponent.prototype.componentDidMount = function () {
         var _this = this;
         var camera = this.props.camera;
         var scene = camera.getScene();
@@ -48542,7 +48530,7 @@ var SceneTreeItemComponent = /** @class */ (function (_super) {
         }
         return true;
     };
-    SceneTreeItemComponent.prototype.componentWillMount = function () {
+    SceneTreeItemComponent.prototype.componentDidMount = function () {
         var _this = this;
         if (!this.props.onSelectionChangedObservable) {
             return;
@@ -49087,7 +49075,7 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
         }
         this.forceUpdate();
     };
-    SceneExplorerComponent.prototype.componentWillMount = function () {
+    SceneExplorerComponent.prototype.componentDidMount = function () {
         var _this = this;
         this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add(function (entity) {
             if (_this.state.selectedEntity !== entity) {

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

@@ -149,7 +149,6 @@ declare module INSPECTOR {
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -188,7 +187,7 @@ declare module INSPECTOR {
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -197,8 +196,6 @@ declare module INSPECTOR {
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -476,7 +473,7 @@ declare module INSPECTOR {
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -570,7 +567,6 @@ declare module INSPECTOR {
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -634,7 +630,7 @@ declare module INSPECTOR {
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -901,7 +897,6 @@ declare module INSPECTOR {
         connect(animationGroup: BABYLON.AnimationGroup): void;
         updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -1176,7 +1171,7 @@ declare module INSPECTOR {
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -1195,7 +1190,6 @@ declare module INSPECTOR {
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -1320,7 +1314,7 @@ declare module INSPECTOR {
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -1342,7 +1336,7 @@ declare module INSPECTOR {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -1376,7 +1370,7 @@ declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -1415,7 +1409,7 @@ declare module INSPECTOR {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -1480,7 +1474,7 @@ declare module INSPECTOR {
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -1722,7 +1716,7 @@ declare module INSPECTOR {
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -1762,7 +1756,7 @@ declare module INSPECTOR {
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {

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

@@ -173,7 +173,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/statisticsTabComp
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -218,7 +217,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ren
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -228,8 +227,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/debugTabComponent
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -554,7 +551,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/textureLinkLineC
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -667,7 +664,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -744,7 +740,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/radioLineCompone
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -1122,7 +1118,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         connect(animationGroup: AnimationGroup): void;
         updateCurrentFrame(animationGroup: AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -1524,7 +1519,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -1549,7 +1544,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mes
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -1716,7 +1710,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGridTabCo
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -1740,7 +1734,7 @@ declare module "babylonjs-inspector/components/headerComponent" {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -1780,7 +1774,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/toolsTabComponent
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -1823,7 +1817,7 @@ declare module "babylonjs-inspector/components/actionTabs/actionTabsComponent" {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -1897,7 +1891,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/cameraTree
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -2190,7 +2184,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/sceneTreeI
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -2235,7 +2229,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/sceneExplorerCompon
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
@@ -2466,7 +2460,6 @@ declare module INSPECTOR {
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -2505,7 +2498,7 @@ declare module INSPECTOR {
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -2514,8 +2507,6 @@ declare module INSPECTOR {
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -2793,7 +2784,7 @@ declare module INSPECTOR {
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -2887,7 +2878,6 @@ declare module INSPECTOR {
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -2951,7 +2941,7 @@ declare module INSPECTOR {
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -3218,7 +3208,6 @@ declare module INSPECTOR {
         connect(animationGroup: BABYLON.AnimationGroup): void;
         updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -3493,7 +3482,7 @@ declare module INSPECTOR {
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -3512,7 +3501,6 @@ declare module INSPECTOR {
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -3637,7 +3625,7 @@ declare module INSPECTOR {
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -3659,7 +3647,7 @@ declare module INSPECTOR {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -3693,7 +3681,7 @@ declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -3732,7 +3720,7 @@ declare module INSPECTOR {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -3797,7 +3785,7 @@ declare module INSPECTOR {
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -4039,7 +4027,7 @@ declare module INSPECTOR {
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -4079,7 +4067,7 @@ declare module INSPECTOR {
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -68344,6 +68344,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 var BlockTools = /** @class */ (function () {
     function BlockTools() {
     }
@@ -68409,6 +68411,10 @@ var BlockTools = /** @class */ (function () {
                 return new babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["SubtractBlock"]("Subtract");
             case "StepBlock":
                 return new babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["StepBlock"]("Step");
+            case "OppositeBlock":
+                return new babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["OppositeBlock"]("Opposite");
+            case "ViewDirectionBlock":
+                return new babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["ViewDirectionBlock"]("View direction");
             case "CosBlock": {
                 var cosBlock = new babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["TrigonometryBlock"]("Cos");
                 cosBlock.operation = babylonjs_Materials_Node_Blocks_Fragment_alphaTestBlock__WEBPACK_IMPORTED_MODULE_0__["TrigonometryBlockOperations"].Cos;
@@ -70848,7 +70854,7 @@ var LogComponent = /** @class */ (function (_super) {
         _this.state = { logs: [] };
         return _this;
     }
-    LogComponent.prototype.componentWillMount = function () {
+    LogComponent.prototype.componentDidMount = function () {
         var _this = this;
         this.props.globalState.onLogRequiredObservable.add(function (log) {
             var currentLogs = _this.state.logs;
@@ -70940,7 +70946,7 @@ var NodeListComponent = /** @class */ (function (_super) {
         // Block types used to create the menu from
         var allBlocks = {
             Animation: ["BonesBlock", "MorphTargetsBlock"],
-            Basic_Math: ["AddBlock", "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock"],
+            Basic_Math: ["AddBlock", "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OppositeBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "TimeBlock"],
             Interpolation: ["LerpBlock"],
@@ -70949,7 +70955,7 @@ var NodeListComponent = /** @class */ (function (_super) {
             Output_Blocks: ["VertexOutputBlock", "FragmentOutputBlock", "AlphaTestBlock"],
             Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
             Round: ["StepBlock", "RoundBlock", "CeilingBlock", "FloorBlock"],
-            Scene_Attributes: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "ReflectionTextureBlock"],
+            Scene_Attributes: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "ReflectionTextureBlock", "ViewDirectionBlock"],
             Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block"],
             Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock"],
         };
@@ -71360,7 +71366,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
         _this.state = { currentNode: null };
         return _this;
     }
-    PropertyTabComponent.prototype.componentWillMount = function () {
+    PropertyTabComponent.prototype.componentDidMount = function () {
         var _this = this;
         this.props.globalState.onSelectionChangedObservable.add(function (block) {
             _this.setState({ currentNode: block });

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

@@ -54292,7 +54292,7 @@ declare module "babylonjs/Materials/Node/Blocks/Dual/reflectionTextureBlock" {
          * Gets the b output component
          */
         readonly b: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -54453,6 +54453,18 @@ declare module "babylonjs/Materials/Node/nodeMaterial" {
          */
         getBlockByName(name: string): Nullable<NodeMaterialBlock>;
         /**
+         * Get a block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required block or null if not found
+         */
+        getBlockByPredicate(predicate: (block: NodeMaterialBlock) => boolean): Nullable<NodeMaterialBlock>;
+        /**
+         * Get an input block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required input block or null if not found
+         */
+        getInputBlockByPredicate(predicate: (block: InputBlock) => boolean): Nullable<InputBlock>;
+        /**
          * Gets the list of input blocks attached to this material
          * @returns an array of InputBlocks
          */
@@ -54678,7 +54690,7 @@ declare module "babylonjs/Materials/Node/Blocks/Dual/textureBlock" {
          */
         readonly a: NodeMaterialConnectionPoint;
         readonly target: NodeMaterialBlockTargets;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         initializeDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
@@ -55431,7 +55443,7 @@ declare module "babylonjs/Materials/Node/Blocks/Vertex/bonesBlock" {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         provideFallbacks(mesh: AbstractMesh, fallbacks: EffectFallbacks): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
@@ -55483,7 +55495,7 @@ declare module "babylonjs/Materials/Node/Blocks/Vertex/instancesBlock" {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
@@ -55545,7 +55557,7 @@ declare module "babylonjs/Materials/Node/Blocks/Vertex/morphTargetsBlock" {
          */
         readonly uvOutput: NodeMaterialConnectionPoint;
         initialize(state: NodeMaterialBuildState): void;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         replaceRepeatableContent(vertexShaderState: NodeMaterialBuildState, fragmentShaderState: NodeMaterialBuildState, mesh: AbstractMesh, defines: NodeMaterialDefines): void;
@@ -55595,53 +55607,6 @@ declare module "babylonjs/Materials/Node/Blocks/Fragment/alphaTestBlock" {
         _deserialize(serializationObject: any, scene: Scene, rootUrl: string): void;
     }
 }
-declare module "babylonjs/Materials/Node/Blocks/Fragment/fresnelBlock" {
-    import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
-    import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
-    import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
-    import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
-    /**
-     * Block used to compute fresnel value
-     */
-    export class FresnelBlock extends NodeMaterialBlock {
-        /**
-         * Create a new FresnelBlock
-         * @param name defines the block name
-         */
-        constructor(name: string);
-        /**
-         * Gets the current class name
-         * @returns the class name
-         */
-        getClassName(): string;
-        /**
-         * Gets the world position input component
-         */
-        readonly worldPosition: NodeMaterialConnectionPoint;
-        /**
-         * Gets the world normal input component
-         */
-        readonly worldNormal: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly cameraPosition: NodeMaterialConnectionPoint;
-        /**
-        * Gets the bias input component
-        */
-        readonly bias: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly power: NodeMaterialConnectionPoint;
-        /**
-         * Gets the fresnel output component
-         */
-        readonly fresnel: NodeMaterialConnectionPoint;
-        autoConfigure(material: NodeMaterial): void;
-        protected _buildBlock(state: NodeMaterialBuildState): this | undefined;
-    }
-}
 declare module "babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock" {
     import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
     import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
@@ -55686,7 +55651,6 @@ declare module "babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock" {
 declare module "babylonjs/Materials/Node/Blocks/Fragment/index" {
     export * from "babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock";
     export * from "babylonjs/Materials/Node/Blocks/Fragment/alphaTestBlock";
-    export * from "babylonjs/Materials/Node/Blocks/Fragment/fresnelBlock";
     export * from "babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock";
 }
 declare module "babylonjs/Materials/Node/Blocks/Dual/fogBlock" {
@@ -55733,7 +55697,7 @@ declare module "babylonjs/Materials/Node/Blocks/Dual/fogBlock" {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
@@ -55789,7 +55753,7 @@ declare module "babylonjs/Materials/Node/Blocks/Dual/lightBlock" {
          * Gets the specular output component
          */
         readonly specularOutput: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         updateUniformsAndSamples(state: NodeMaterialBuildState, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -56476,6 +56440,113 @@ declare module "babylonjs/Materials/Node/Blocks/stepBlock" {
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
 }
+declare module "babylonjs/Materials/Node/Blocks/oppositeBlock" {
+    import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
+    import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
+    import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
+    /**
+     * Block used to get the opposite of a value
+     */
+    export class OppositeBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new OppositeBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the input component
+         */
+        readonly input: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module "babylonjs/Materials/Node/Blocks/viewDirectionBlock" {
+    import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
+    import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
+    import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
+    import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
+    /**
+     * Block used to get the view direction
+     */
+    export class ViewDirectionBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new ViewDirectionBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world position component
+         */
+        readonly worldPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the camera position component
+         */
+        readonly cameraPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module "babylonjs/Materials/Node/Blocks/fresnelBlock" {
+    import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
+    import { NodeMaterialBuildState } from "babylonjs/Materials/Node/nodeMaterialBuildState";
+    import { NodeMaterialConnectionPoint } from "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint";
+    import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
+    /**
+     * Block used to compute fresnel value
+     */
+    export class FresnelBlock extends NodeMaterialBlock {
+        /**
+         * Create a new FresnelBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world normal input component
+         */
+        readonly worldNormal: NodeMaterialConnectionPoint;
+        /**
+        * Gets the view direction input component
+        */
+        readonly viewDirection: NodeMaterialConnectionPoint;
+        /**
+        * Gets the bias input component
+        */
+        readonly bias: NodeMaterialConnectionPoint;
+        /**
+        * Gets the camera (or eye) position component
+        */
+        readonly power: NodeMaterialConnectionPoint;
+        /**
+         * Gets the fresnel output component
+         */
+        readonly fresnel: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
 declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/Vertex/index";
     export * from "babylonjs/Materials/Node/Blocks/Fragment/index";
@@ -56499,6 +56570,9 @@ declare module "babylonjs/Materials/Node/Blocks/index" {
     export * from "babylonjs/Materials/Node/Blocks/divideBlock";
     export * from "babylonjs/Materials/Node/Blocks/subtractBlock";
     export * from "babylonjs/Materials/Node/Blocks/stepBlock";
+    export * from "babylonjs/Materials/Node/Blocks/oppositeBlock";
+    export * from "babylonjs/Materials/Node/Blocks/viewDirectionBlock";
+    export * from "babylonjs/Materials/Node/Blocks/fresnelBlock";
 }
 declare module "babylonjs/Materials/Node/Optimizers/index" {
     export * from "babylonjs/Materials/Node/Optimizers/nodeMaterialOptimizer";
@@ -116803,7 +116877,7 @@ declare module BABYLON {
          * Gets the b output component
          */
         readonly b: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -116948,6 +117022,18 @@ declare module BABYLON {
          */
         getBlockByName(name: string): Nullable<NodeMaterialBlock>;
         /**
+         * Get a block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required block or null if not found
+         */
+        getBlockByPredicate(predicate: (block: NodeMaterialBlock) => boolean): Nullable<NodeMaterialBlock>;
+        /**
+         * Get an input block by its name
+         * @param predicate defines the predicate used to find the good candidate
+         * @returns the required input block or null if not found
+         */
+        getInputBlockByPredicate(predicate: (block: InputBlock) => boolean): Nullable<InputBlock>;
+        /**
          * Gets the list of input blocks attached to this material
          * @returns an array of InputBlocks
          */
@@ -117162,7 +117248,7 @@ declare module BABYLON {
          */
         readonly a: NodeMaterialConnectionPoint;
         readonly target: NodeMaterialBlockTargets;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         initializeDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         isReady(): boolean;
@@ -117874,7 +117960,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         provideFallbacks(mesh: AbstractMesh, fallbacks: EffectFallbacks): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
@@ -117921,7 +118007,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
     }
@@ -117976,7 +118062,7 @@ declare module BABYLON {
          */
         readonly uvOutput: NodeMaterialConnectionPoint;
         initialize(state: NodeMaterialBuildState): void;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         replaceRepeatableContent(vertexShaderState: NodeMaterialBuildState, fragmentShaderState: NodeMaterialBuildState, mesh: AbstractMesh, defines: NodeMaterialDefines): void;
@@ -118018,49 +118104,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Block used to compute fresnel value
-     */
-    export class FresnelBlock extends NodeMaterialBlock {
-        /**
-         * Create a new FresnelBlock
-         * @param name defines the block name
-         */
-        constructor(name: string);
-        /**
-         * Gets the current class name
-         * @returns the class name
-         */
-        getClassName(): string;
-        /**
-         * Gets the world position input component
-         */
-        readonly worldPosition: NodeMaterialConnectionPoint;
-        /**
-         * Gets the world normal input component
-         */
-        readonly worldNormal: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly cameraPosition: NodeMaterialConnectionPoint;
-        /**
-        * Gets the bias input component
-        */
-        readonly bias: NodeMaterialConnectionPoint;
-        /**
-        * Gets the camera (or eye) position component
-        */
-        readonly power: NodeMaterialConnectionPoint;
-        /**
-         * Gets the fresnel output component
-         */
-        readonly fresnel: NodeMaterialConnectionPoint;
-        autoConfigure(material: NodeMaterial): void;
-        protected _buildBlock(state: NodeMaterialBuildState): this | undefined;
-    }
-}
-declare module BABYLON {
-    /**
      * Block used to add image processing support to fragment shader
      */
     export class ImageProcessingBlock extends NodeMaterialBlock {
@@ -118130,7 +118173,7 @@ declare module BABYLON {
          * Gets the output component
          */
         readonly output: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
         protected _buildBlock(state: NodeMaterialBuildState): this;
@@ -118176,7 +118219,7 @@ declare module BABYLON {
          * Gets the specular output component
          */
         readonly specularOutput: NodeMaterialConnectionPoint;
-        autoConfigure(): void;
+        autoConfigure(material: NodeMaterial): void;
         prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         updateUniformsAndSamples(state: NodeMaterialBuildState, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines): void;
         bind(effect: Effect, nodeMaterial: NodeMaterial, mesh?: Mesh): void;
@@ -118801,6 +118844,102 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Block used to get the opposite of a value
+     */
+    export class OppositeBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new OppositeBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the input component
+         */
+        readonly input: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to get the view direction
+     */
+    export class ViewDirectionBlock extends NodeMaterialBlock {
+        /**
+         * Creates a new ViewDirectionBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world position component
+         */
+        readonly worldPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the camera position component
+         */
+        readonly cameraPosition: NodeMaterialConnectionPoint;
+        /**
+         * Gets the output component
+         */
+        readonly output: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
+     * Block used to compute fresnel value
+     */
+    export class FresnelBlock extends NodeMaterialBlock {
+        /**
+         * Create a new FresnelBlock
+         * @param name defines the block name
+         */
+        constructor(name: string);
+        /**
+         * Gets the current class name
+         * @returns the class name
+         */
+        getClassName(): string;
+        /**
+         * Gets the world normal input component
+         */
+        readonly worldNormal: NodeMaterialConnectionPoint;
+        /**
+        * Gets the view direction input component
+        */
+        readonly viewDirection: NodeMaterialConnectionPoint;
+        /**
+        * Gets the bias input component
+        */
+        readonly bias: NodeMaterialConnectionPoint;
+        /**
+        * Gets the camera (or eye) position component
+        */
+        readonly power: NodeMaterialConnectionPoint;
+        /**
+         * Gets the fresnel output component
+         */
+        readonly fresnel: NodeMaterialConnectionPoint;
+        autoConfigure(material: NodeMaterial): void;
+        protected _buildBlock(state: NodeMaterialBuildState): this;
+    }
+}
+declare module BABYLON {
+    /**
      * Effect Render Options
      */
     export interface IEffectRendererOptions {

inspector/src/components/actionTabs/actionTabsComponent.tsx

@@ -50,7 +50,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
         this.state = { selectedEntity: null, selectedIndex: initialIndex }
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.globalState) {
             this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
                 this.setState({ selectedEntity: entity, selectedIndex: 0 });

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

@@ -18,7 +18,7 @@ export class RadioButtonLineComponent extends React.Component<IRadioButtonLineCo
         this.state = { isSelected: this.props.isSelected() };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._onSelectionChangedObserver = this.props.onSelectionChangedObservable.add((value) => {
             this.setState({ isSelected: value === this });
         });

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

@@ -35,7 +35,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         this.state = { isDebugSelected: material && material.reservedDataStore && material.reservedDataStore.debugTexture === texture };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.onDebugSelectionChangeObservable) {
             return;
         }

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

@@ -13,9 +13,7 @@ export class DebugTabComponent extends PaneComponent {
 
     constructor(props: IPaneComponentProps) {
         super(props);
-    }
 
-    componentWillMount() {
         const scene = this.props.scene;
 
         if (!scene) {
@@ -29,9 +27,6 @@ export class DebugTabComponent extends PaneComponent {
         this._physicsViewersEnabled = scene.reservedDataStore.physicsViewer != null;
     }
 
-    componentWillUnmount() {
-    }
-
     switchPhysicsViewers() {
         this._physicsViewersEnabled = !this._physicsViewersEnabled;
         const scene = this.props.scene;

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

@@ -104,7 +104,7 @@ export class PropertyGridTabComponent extends PaneComponent {
         }
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._timerIntervalId = window.setInterval(() => this.timerRefresh(), 500);
     }
 

inspector/src/components/actionTabs/tabs/propertyGrids/animationGroupPropertyGridComponent.tsx

@@ -31,6 +31,12 @@ export class AnimationGroupGridComponent extends React.Component<IAnimationGroup
 
         const animationGroup = this.props.animationGroup;
         this.state = { playButtonText: animationGroup.isPlaying ? "Pause" : "Play", currentFrame: 0 };
+
+        this.connect(this.props.animationGroup);
+
+        this._onBeforeRenderObserver = this.props.scene.onBeforeRenderObservable.add(() => {
+            this.updateCurrentFrame(this.props.animationGroup);
+        });        
     }
 
     disconnect(animationGroup: AnimationGroup) {
@@ -78,14 +84,6 @@ export class AnimationGroupGridComponent extends React.Component<IAnimationGroup
         return true;
     }
 
-    componentWillMount() {
-        this.connect(this.props.animationGroup);
-
-        this._onBeforeRenderObserver = this.props.scene.onBeforeRenderObservable.add(() => {
-            this.updateCurrentFrame(this.props.animationGroup);
-        });
-    }
-
     componentWillUnmount() {
         this.disconnect(this.props.animationGroup);
 

inspector/src/components/actionTabs/tabs/propertyGrids/animationPropertyGridComponent.tsx

@@ -89,7 +89,7 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
         this.forceUpdate();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._onBeforeRenderObserver = this.props.scene.onBeforeRenderObservable.add(() => {
             if (!this._isPlaying || !this._runningAnimatable) {
                 return;

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

@@ -37,9 +37,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
 
     constructor(props: ITexturePropertyGridComponentProps) {
         super(props);
-    }
 
-    componentWillMount() {
         const texture = this.props.texture;
 
         if (!texture || !(texture as any).rootContainer) {

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

@@ -26,6 +26,8 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
 
     constructor(props: ISkeletonPropertyGridComponentProps) {
         super(props);
+        
+        this.checkSkeletonViewerState(this.props);
     }
 
     switchSkeletonViewers() {
@@ -81,10 +83,6 @@ export class SkeletonPropertyGridComponent extends React.Component<ISkeletonProp
         this._skeletonViewersEnabled = (this._skeletonViewers.length > 0);
     }
 
-    componentWillMount() {
-        this.checkSkeletonViewerState(this.props);
-    }
-
     shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps) {
         if (nextProps.skeleton !== this.props.skeleton) {
             this.checkSkeletonViewerState(nextProps);

inspector/src/components/actionTabs/tabs/propertyGrids/renderGridPropertyGridComponent.tsx

@@ -25,7 +25,7 @@ export class RenderGridPropertyGridComponent extends React.Component<IRenderGrid
         this.state = { isEnabled: false };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         const scene = UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
 
         for (var mesh of scene.meshes) {

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

@@ -18,9 +18,7 @@ export class StatisticsTabComponent extends PaneComponent {
 
     constructor(props: IPaneComponentProps) {
         super(props);
-    }
 
-    componentWillMount() {
         const scene = this.props.scene;
 
         if (!scene) {

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

@@ -28,7 +28,7 @@ export class ToolsTabComponent extends PaneComponent {
         this.state = { tag: "Record video" };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!(BABYLON as any).GLTF2Export) {
             Tools.LoadScript("https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js", () => {
             });

inspector/src/components/headerComponent.tsx

@@ -25,7 +25,7 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps, { is
         this.state = { isBackVisible: false };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.onSelectionChangedObservable) {
             return;
         }

inspector/src/components/sceneExplorer/entities/cameraTreeItemComponent.tsx

@@ -39,7 +39,7 @@ export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComp
         this.setState({ isActive: true });
     }
 
-    componentWillMount() {
+    componentDidMount() {
         const camera = this.props.camera;
         const scene = camera.getScene();
         this._onActiveCameraObserver = scene.onActiveCameraChanged.add(() => {

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -69,7 +69,7 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
         return true;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.onSelectionChangedObservable) {
             return;
         }

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -78,7 +78,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         this.forceUpdate();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
             if (this.state.selectedEntity !== entity) {
                 this.setState({ selectedEntity: entity });

nodeEditor/src/components/log/logComponent.tsx

@@ -23,7 +23,7 @@ export class LogComponent extends React.Component<ILogComponentProps, { logs: Lo
         this.state = { logs: [] };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.props.globalState.onLogRequiredObservable.add(log => {
             let currentLogs = this.state.logs;
             currentLogs.push(log);

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -23,7 +23,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         this.state = { currentNode: null };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.props.globalState.onSelectionChangedObservable.add(block => {
             this.setState({ currentNode: block });
         });

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

@@ -85,17 +85,17 @@ export class FogBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.view.isConnected) {
-            let viewInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.View);
+            let viewInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.View);
 
             if (!viewInput) {
-                viewInput = new InputBlock("view")
+                viewInput = new InputBlock("view");
                 viewInput.setAsWellKnownValue(NodeMaterialWellKnownValues.View);
             }
             viewInput.output.connectTo(this.view);
         }
         if (!this.fogColor.isConnected) {
-            let fogColorInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.FogColor);
-            
+            let fogColorInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.FogColor);
+
             if (!fogColorInput) {
                 fogColorInput = new InputBlock("fogColor", undefined, NodeMaterialBlockConnectionPointTypes.Color3);
                 fogColorInput.setAsWellKnownValue(NodeMaterialWellKnownValues.FogColor);

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

@@ -86,8 +86,8 @@ export class LightBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.cameraPosition.isConnected) {
-            let cameraPositionInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition)
-            
+            let cameraPositionInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition);
+
             if (!cameraPositionInput) {
                 cameraPositionInput = new InputBlock("cameraPosition");
                 cameraPositionInput.setAsWellKnownValue(NodeMaterialWellKnownValues.CameraPosition);

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

@@ -146,8 +146,8 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.position.isConnected) {
-            let positionInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "position");
-           
+            let positionInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "position");
+
             if (!positionInput) {
                 positionInput = new InputBlock("position");
                 positionInput.setAsAttribute();
@@ -156,8 +156,8 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         }
 
         if (!this.world.isConnected) {
-            let worldInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.World);
-            
+            let worldInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.World);
+
             if (!worldInput) {
                 worldInput = new InputBlock("world");
                 worldInput.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
@@ -166,7 +166,7 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         }
 
         if (!this.cameraPosition.isConnected) {
-            let cameraPositionInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition);
+            let cameraPositionInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition);
 
             if (!cameraPositionInput) {
                 cameraPositionInput = new InputBlock("cameraPosition");
@@ -176,7 +176,7 @@ export class ReflectionTextureBlock extends NodeMaterialBlock {
         }
 
         if (!this.view.isConnected) {
-            let viewInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.View);
+            let viewInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.View);
 
             if (!viewInput) {
                 viewInput = new InputBlock("view");

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

@@ -147,7 +147,7 @@ export class TextureBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.uv.isConnected) {
-            let uvInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "uv");
+            let uvInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "uv");
 
             if (!uvInput) {
                 uvInput = new InputBlock("uv");

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

@@ -95,7 +95,7 @@ export class BonesBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.matricesIndices.isConnected) {
-            let matricesIndicesInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "matricesIndices");
+            let matricesIndicesInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "matricesIndices");
 
             if (!matricesIndicesInput) {
                 matricesIndicesInput = new InputBlock("matricesIndices");
@@ -104,7 +104,7 @@ export class BonesBlock extends NodeMaterialBlock {
             matricesIndicesInput.output.connectTo(this.matricesIndices);
         }
         if (!this.matricesWeights.isConnected) {
-            let matricesWeightsInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "matricesWeights");
+            let matricesWeightsInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "matricesWeights");
 
             if (!matricesWeightsInput) {
                 matricesWeightsInput = new InputBlock("matricesWeights");
@@ -113,13 +113,13 @@ export class BonesBlock extends NodeMaterialBlock {
             matricesWeightsInput.output.connectTo(this.matricesWeights);
         }
         if (!this.world.isConnected) {
-            let worldInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.World);
-            
+            let worldInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.World);
+
             if (!worldInput) {
                 worldInput = new InputBlock("world");
                 worldInput.setAsWellKnownValue(NodeMaterialWellKnownValues.World);
             }
-            worldInput.output.connectTo(this.world);            
+            worldInput.output.connectTo(this.world);
         }
     }
 

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

@@ -82,7 +82,7 @@ export class InstancesBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.world0.connectedPoint) {
-            let world0Input = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "world0");
+            let world0Input = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "world0");
 
             if (!world0Input) {
                 world0Input = new InputBlock("world0");
@@ -91,7 +91,7 @@ export class InstancesBlock extends NodeMaterialBlock {
             world0Input.output.connectTo(this.world0);
         }
         if (!this.world1.connectedPoint) {
-            let world1Input = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "world1");
+            let world1Input = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "world1");
 
             if (!world1Input) {
                 world1Input = new InputBlock("world1");
@@ -100,7 +100,7 @@ export class InstancesBlock extends NodeMaterialBlock {
             world1Input.output.connectTo(this.world1);
         }
         if (!this.world2.connectedPoint) {
-            let world2Input = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "world2");
+            let world2Input = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "world2");
 
             if (!world2Input) {
                 world2Input = new InputBlock("world2");
@@ -109,7 +109,7 @@ export class InstancesBlock extends NodeMaterialBlock {
             world2Input.output.connectTo(this.world2);
         }
         if (!this.world3.connectedPoint) {
-            let world3Input = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "world3");
+            let world3Input = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "world3");
 
             if (!world3Input) {
                 world3Input = new InputBlock("world3");
@@ -118,7 +118,7 @@ export class InstancesBlock extends NodeMaterialBlock {
             world3Input.output.connectTo(this.world3);
         }
         if (!this.world.connectedPoint) {
-            let worldInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "world");
+            let worldInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "world");
 
             if (!worldInput) {
                 worldInput = new InputBlock("world");

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

@@ -106,17 +106,17 @@ export class MorphTargetsBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.position.isConnected) {
-            let positionInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "position");
-           
+            let positionInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "position");
+
             if (!positionInput) {
                 positionInput = new InputBlock("position");
                 positionInput.setAsAttribute();
             }
-            positionInput.output.connectTo(this.position);    
+            positionInput.output.connectTo(this.position);
         }
         if (!this.normal.isConnected) {
-            let normalInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "normal");
-           
+            let normalInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "normal");
+
             if (!normalInput) {
                 normalInput = new InputBlock("normal");
                 normalInput.setAsAttribute("normal");
@@ -124,8 +124,8 @@ export class MorphTargetsBlock extends NodeMaterialBlock {
             normalInput.output.connectTo(this.normal);
         }
         if (!this.tangent.isConnected) {
-            let tangentInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "tangent");
-           
+            let tangentInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "tangent");
+
             if (!tangentInput) {
                 tangentInput = new InputBlock("tangent");
                 tangentInput.setAsAttribute("tangent");
@@ -133,8 +133,8 @@ export class MorphTargetsBlock extends NodeMaterialBlock {
             tangentInput.output.connectTo(this.tangent);
         }
         if (!this.uv.isConnected) {
-            let uvInput = material.getInputBlockByPredicate(b => b.isAttribute && b.name === "uv");
-           
+            let uvInput = material.getInputBlockByPredicate((b) => b.isAttribute && b.name === "uv");
+
             if (!uvInput) {
                 uvInput = new InputBlock("uv");
                 uvInput.setAsAttribute("uv");

src/Materials/Node/Blocks/viewDirectionBlock.ts

@@ -55,13 +55,13 @@ export class ViewDirectionBlock extends NodeMaterialBlock {
 
     public autoConfigure(material: NodeMaterial) {
         if (!this.cameraPosition.isConnected) {
-            let cameraPositionInput = material.getInputBlockByPredicate(b => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition)
+            let cameraPositionInput = material.getInputBlockByPredicate((b) => b.wellKnownValue === NodeMaterialWellKnownValues.CameraPosition);
 
             if (!cameraPositionInput) {
                 cameraPositionInput = new InputBlock("cameraPosition");
                 cameraPositionInput.setAsWellKnownValue(NodeMaterialWellKnownValues.CameraPosition);
             }
-            cameraPositionInput.output.connectTo(this.cameraPosition);            
+            cameraPositionInput.output.connectTo(this.cameraPosition);
         }
     }
 

src/Materials/Node/nodeMaterialBlock.ts

@@ -398,8 +398,9 @@ export class NodeMaterialBlock {
                 || (block.isInput && (block as InputBlock).isAttribute) // block is an attribute
             ) {
                 let connectedPoint = input.connectedPoint!;
-                state._vertexState._emitVaryingFromString("v_" + connectedPoint.associatedVariableName, state._getGLType(connectedPoint.type));
-                state._vertexState.compilationString += `${"v_" + connectedPoint.associatedVariableName} = ${connectedPoint.associatedVariableName};\r\n`;
+                if (state._vertexState._emitVaryingFromString("v_" + connectedPoint.associatedVariableName, state._getGLType(connectedPoint.type))) {
+                    state._vertexState.compilationString += `${"v_" + connectedPoint.associatedVariableName} = ${connectedPoint.associatedVariableName};\r\n`;
+                }
                 input.associatedVariableName = "v_" + connectedPoint.associatedVariableName;
                 input._enforceAssociatedVariableName = true;
             }