Fix #7150

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

@@ -79,7 +79,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
 
                 </div>
                 <div className="options">
-                    <select onChange={evt => this.updateValue(evt.target.value)} value={this.state.value}>
+                    <select onChange={evt => this.updateValue(evt.target.value)} value={this.state.value || ""}>
                         {
                             this.props.options.map(option => {
                                 return (

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

@@ -18,14 +18,14 @@ export interface ITextureLinkLineComponentProps {
     texture: Nullable<BaseTexture>;
     material?: Material;
     onSelectionChangedObservable?: Observable<any>;
-    onDebugSelectionChangeObservable?: Observable<BaseTexture>;
+    onDebugSelectionChangeObservable?: Observable<TextureLinkLineComponent>;
     propertyName?: string;
     onTextureCreated?: (texture: BaseTexture) => void;
     customDebugAction?: (state: boolean) => void
 }
 
 export class TextureLinkLineComponent extends React.Component<ITextureLinkLineComponentProps, { isDebugSelected: boolean }> {
-    private _onDebugSelectionChangeObserver: Nullable<Observer<BaseTexture>>;
+    private _onDebugSelectionChangeObserver: Nullable<Observer<TextureLinkLineComponent>>;
 
     constructor(props: ITextureLinkLineComponentProps) {
         super(props);
@@ -40,8 +40,8 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         if (!this.props.onDebugSelectionChangeObservable) {
             return;
         }
-        this._onDebugSelectionChangeObserver = this.props.onDebugSelectionChangeObservable.add((texture) => {
-            if (this.props.texture !== texture) {
+        this._onDebugSelectionChangeObserver = this.props.onDebugSelectionChangeObservable.add((line) => {
+            if (line !== this) {
                 this.setState({ isDebugSelected: false });
             }
         });
@@ -58,10 +58,16 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
             let newState = !this.state.isDebugSelected;
             this.props.customDebugAction(newState);
             this.setState({ isDebugSelected: newState });
+            
+            if (this.props.onDebugSelectionChangeObservable) {
+                this.props.onDebugSelectionChangeObservable.notifyObservers(this);
+            }
+
             return;
         }
 
         const texture = this.props.texture;
+
         const material = this.props.material;
 
         if (!material || !texture) {
@@ -115,7 +121,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         texture.level = 1.0;
 
         if (this.props.onDebugSelectionChangeObservable) {
-            this.props.onDebugSelectionChangeObservable.notifyObservers(texture!);
+            this.props.onDebugSelectionChangeObservable.notifyObservers(this);
         }
 
         if (needToDisposeCheckMaterial) {

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
-import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { BackgroundMaterial } from "babylonjs/Materials/Background/backgroundMaterial";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
@@ -23,7 +22,7 @@ interface IBackgroundMaterialPropertyGridComponentProps {
 }
 
 export class BackgroundMaterialPropertyGridComponent extends React.Component<IBackgroundMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
 
     constructor(props: IBackgroundMaterialPropertyGridComponentProps) {
         super(props);

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

@@ -15,7 +15,6 @@ import { Color3LineComponent } from '../../../lines/color3LineComponent';
 import { Vector3LineComponent } from '../../../lines/vector3LineComponent';
 import { Vector4LineComponent } from '../../../lines/vector4LineComponent';
 import { Vector2LineComponent } from '../../../lines/vector2LineComponent';
-import { BaseTexture } from 'babylonjs/Materials/Textures/baseTexture';
 import { TextureLinkLineComponent } from '../../../lines/textureLinkLineComponent';
 import { SliderLineComponent } from '../../../lines/sliderLineComponent';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
@@ -29,7 +28,7 @@ interface INodeMaterialPropertyGridComponentProps {
 }
 
 export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
     
     constructor(props: INodeMaterialPropertyGridComponentProps) {
         super(props);

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
-import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { PBRMaterial } from "babylonjs/Materials/PBR/pbrMaterial";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
@@ -25,7 +24,7 @@ interface IPBRMaterialPropertyGridComponentProps {
 }
 
 export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
     constructor(props: IPBRMaterialPropertyGridComponentProps) {
         super(props);
     }
@@ -42,7 +41,7 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
         this.props.material.debugMode = state ? 63 : 0;
     }
 
-    renderTextures(onDebugSelectionChangeObservable: Observable<BaseTexture>) {
+    renderTextures(onDebugSelectionChangeObservable: Observable<TextureLinkLineComponent>) {
         const material = this.props.material;
 
         return (

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
-import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { PBRMetallicRoughnessMaterial } from "babylonjs/Materials/PBR/pbrMetallicRoughnessMaterial";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
@@ -22,7 +21,7 @@ interface IPBRMetallicRoughnessMaterialPropertyGridComponentProps {
 }
 
 export class PBRMetallicRoughnessMaterialPropertyGridComponent extends React.Component<IPBRMetallicRoughnessMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
 
     constructor(props: IPBRMetallicRoughnessMaterialPropertyGridComponentProps) {
         super(props);

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
-import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { PBRSpecularGlossinessMaterial } from "babylonjs/Materials/PBR/pbrSpecularGlossinessMaterial";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
@@ -22,7 +21,7 @@ interface IPBRSpecularGlossinessMaterialPropertyGridComponentProps {
 }
 
 export class PBRSpecularGlossinessMaterialPropertyGridComponent extends React.Component<IPBRSpecularGlossinessMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
 
     constructor(props: IPBRSpecularGlossinessMaterialPropertyGridComponentProps) {
         super(props);

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
-import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
 
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
@@ -23,7 +22,7 @@ interface IStandardMaterialPropertyGridComponentProps {
 }
 
 export class StandardMaterialPropertyGridComponent extends React.Component<IStandardMaterialPropertyGridComponentProps> {
-    private _onDebugSelectionChangeObservable = new Observable<BaseTexture>();
+    private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
 
     constructor(props: IStandardMaterialPropertyGridComponentProps) {
         super(props);

nodeEditor/src/blockTools.ts

@@ -58,10 +58,13 @@ import { WorleyNoise3DBlock } from 'babylonjs/Materials/Node/Blocks/worleyNoise3
 import { SimplexPerlin3DBlock } from 'babylonjs/Materials/Node/Blocks/simplexPerlin3DBlock';
 import { NormalBlendBlock } from 'babylonjs/Materials/Node/Blocks/normalBlendBlock';
 import { Rotate2dBlock } from 'babylonjs/Materials/Node/Blocks/rotate2dBlock';
+import { DerivativeBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/derivativeBlock';
 
 export class BlockTools {
     public static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial) {
         switch (data) {
+            case "DerivativeBlock":
+                return new DerivativeBlock("Derivative");               
             case "Rotate2dBlock":
                 return new Rotate2dBlock("Rotate2d");            
             case "NormalBlendBlock":

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -131,7 +131,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             Round: ["RoundBlock", "CeilingBlock", "FloorBlock"],
             Scene: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "LightInformationBlock", "ViewDirectionBlock", "PerturbNormalBlock", "NormalBlendBlock"],
             Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block", "SqrtBlock", "PowBlock", "LogBlock", "ArcCosBlock", "ArcSinBlock", "TanBlock", "ArcTanBlock", "FractBlock", "SignBlock", "ArcTan2Block", "DegreesToRadiansBlock", "RadiansToDegreesBlock", "SawToothWaveBlock", "TriangleWaveBlock", "SquareWaveBlock"],
-            Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock", "Rotate2dBlock"],
+            Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock", "Rotate2dBlock", "DerivativeBlock"],
         }
 
         // Create node menu

nodeEditor/src/sharedComponents/optionsLineComponent.tsx

@@ -90,7 +90,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
 
                 </div>
                 <div className={"options" + (this.props.className ? " " + this.props.className : "")}>
-                    <select onChange={evt => this.updateValue(evt.target.value)} value={this.state.value}>
+                    <select onChange={evt => this.updateValue(evt.target.value)} value={this.state.value || ""}>
                         {
                             this.props.options.map(option => {
                                 return (

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

@@ -0,0 +1,74 @@
+import { NodeMaterialBlock } from '../../nodeMaterialBlock';
+import { NodeMaterialBlockConnectionPointTypes } from '../../Enums/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialBuildState } from '../../nodeMaterialBuildState';
+import { NodeMaterialBlockTargets } from '../../Enums/nodeMaterialBlockTargets';
+import { NodeMaterialConnectionPoint } from '../../nodeMaterialBlockConnectionPoint';
+import { _TypeStore } from '../../../../Misc/typeStore';
+
+/**
+ * Block used to get the derivative value on x and y of a given input
+ */
+export class DerivativeBlock extends NodeMaterialBlock {
+    /**
+     * Create a new DerivativeBlock
+     * @param name defines the block name
+     */
+    public constructor(name: string) {
+        super(name, NodeMaterialBlockTargets.Fragment);
+
+        this.registerInput("input", NodeMaterialBlockConnectionPointTypes.AutoDetect, false);
+        this.registerOutput("dx", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
+        this.registerOutput("dy", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
+
+        this._outputs[0]._typeConnectionSource = this._inputs[0];
+        this._outputs[1]._typeConnectionSource = this._inputs[0];
+    }
+
+    /**
+     * Gets the current class name
+     * @returns the class name
+     */
+    public getClassName() {
+        return "DerivativeBlock";
+    }
+
+    /**
+     * Gets the input component
+     */
+    public get input(): NodeMaterialConnectionPoint {
+        return this._inputs[0];
+    }
+
+    /**
+     * Gets the derivative output on x
+     */
+    public get dx(): NodeMaterialConnectionPoint {
+        return this._outputs[0];
+    }
+
+    /**
+     * Gets the derivative output on y
+     */
+    public get dy(): NodeMaterialConnectionPoint {
+        return this._outputs[1];
+    }
+
+    protected _buildBlock(state: NodeMaterialBuildState) {
+        super._buildBlock(state);
+
+        let dx = this._outputs[0];
+        let dy = this._outputs[1];
+
+        if (dx.hasEndpoints) {
+            state.compilationString += this._declareOutput(dx, state) + ` = dFdx(${this.input.associatedVariableName});\r\n`;
+        }
+
+        if (dy.hasEndpoints) {
+            state.compilationString += this._declareOutput(dy, state) + ` = dFdy(${this.input.associatedVariableName});\r\n`;
+        }
+
+        return this;
+    }
+}
+
+_TypeStore.RegisteredTypes["BABYLON.DerivativeBlock"] = DerivativeBlock;

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

@@ -3,4 +3,5 @@ export * from "./fragmentOutputBlock";
 export * from "./imageProcessingBlock";
 export * from "./perturbNormalBlock";
 export * from "./discardBlock";
-export * from "./frontFacingBlock";
+export * from "./frontFacingBlock";
+export * from "./derivativeBlock";

src/Materials/Node/Blocks/crossBlock.ts

@@ -17,15 +17,16 @@ export class CrossBlock extends NodeMaterialBlock {
 
         this.registerInput("left", NodeMaterialBlockConnectionPointTypes.AutoDetect);
         this.registerInput("right", NodeMaterialBlockConnectionPointTypes.AutoDetect);
-        this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
+        this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Vector3);
 
-        this._outputs[0]._typeConnectionSource = this._inputs[0];
         this._linkConnectionTypes(0, 1);
 
         this._inputs[0].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float);
         this._inputs[0].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Matrix);
+        this._inputs[0].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector2);
         this._inputs[1].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float);
         this._inputs[1].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Matrix);
+        this._inputs[1].excludedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Vector2);
     }
 
     /**
@@ -62,7 +63,7 @@ export class CrossBlock extends NodeMaterialBlock {
 
         let output = this._outputs[0];
 
-        state.compilationString += this._declareOutput(output, state) + ` = cross(${this.left.associatedVariableName}, ${this.right.associatedVariableName});\r\n`;
+        state.compilationString += this._declareOutput(output, state) + ` = cross(${this.left.associatedVariableName}.xyz, ${this.right.associatedVariableName}.xyz);\r\n`;
 
         return this;
     }