Fix #7167

nodeEditor/src/blockTools.ts

@@ -61,10 +61,13 @@ import { Rotate2dBlock } from 'babylonjs/Materials/Node/Blocks/rotate2dBlock';
 import { DerivativeBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/derivativeBlock';
 import { RefractBlock } from 'babylonjs/Materials/Node/Blocks/refractBlock';
 import { ReflectBlock } from 'babylonjs/Materials/Node/Blocks/reflectBlock';
+import { DesaturateBlock } from 'babylonjs/Materials/Node/Blocks/desaturateBlock';
 
 export class BlockTools {
     public static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial) {
         switch (data) {
+            case "DesaturateBlock":
+                return new DesaturateBlock("Desaturate");                  
             case "RefractBlock":
                 return new RefractBlock("Refract");               
             case "ReflectBlock":

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -119,7 +119,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         const allBlocks = {
             Animation: ["BonesBlock", "MorphTargetsBlock"],
             Basic_Math: ["AddBlock",  "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock", "LengthBlock", "DistanceBlock", "NegateBlock", "RandomNumberBlock", "ReciprocalBlock"],
-            Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock"],
+            Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock", "DesaturateBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
             Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "ReflectionTextureBlock", "TimeBlock", "DeltaTimeBlock"],
             Interpolation: ["LerpBlock", "StepBlock", "SmoothStepBlock", "NLerpBlock"],
@@ -147,7 +147,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
 
             if (blockList.length) {
                 blockMenu.push(
-                    <LineContainerComponent key={key + " blocks"} title={key.replace("_", " ")} closed={false}>
+                    <LineContainerComponent key={key + " blocks"} title={key.replace("__", ":").replace("_", " ")} closed={false}>
                         {blockList}
                     </LineContainerComponent>
                 );

src/Materials/Node/Blocks/colorMergerBlock.ts

@@ -16,11 +16,11 @@ export class ColorMergerBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Fragment);
 
+        this.registerInput("rgb ", NodeMaterialBlockConnectionPointTypes.Color3, true);
         this.registerInput("r", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("g", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("b", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("a", NodeMaterialBlockConnectionPointTypes.Float, true);  
-        this.registerInput("rgb ", NodeMaterialBlockConnectionPointTypes.Color3, true);
 
         this.registerOutput("rgba", NodeMaterialBlockConnectionPointTypes.Color4);
         this.registerOutput("rgb", NodeMaterialBlockConnectionPointTypes.Color3);
@@ -35,37 +35,37 @@ export class ColorMergerBlock extends NodeMaterialBlock {
     }
 
     /**
-     * Gets the r component (input)
+     * Gets the rgb component (input)
      */
-    public get r(): NodeMaterialConnectionPoint {
+    public get rgbIn(): NodeMaterialConnectionPoint {
         return this._inputs[0];
     }
 
     /**
-     * Gets the g component (input)
+     * Gets the r component (input)
      */
-    public get g(): NodeMaterialConnectionPoint {
+    public get r(): NodeMaterialConnectionPoint {
         return this._inputs[1];
     }
 
     /**
-     * Gets the b component (input)
+     * Gets the g component (input)
      */
-    public get b(): NodeMaterialConnectionPoint {
+    public get g(): NodeMaterialConnectionPoint {
         return this._inputs[2];
     }
 
     /**
-     * Gets the a component (input)
+     * Gets the b component (input)
      */
-    public get a(): NodeMaterialConnectionPoint {
+    public get b(): NodeMaterialConnectionPoint {
         return this._inputs[3];
     }
 
     /**
-     * Gets the rgb component (input)
+     * Gets the a component (input)
      */
-    public get rgbIn(): NodeMaterialConnectionPoint {
+    public get a(): NodeMaterialConnectionPoint {
         return this._inputs[4];
     }
 

src/Materials/Node/Blocks/desaturateBlock.ts

@@ -0,0 +1,71 @@
+import { NodeMaterialBlock } from '../nodeMaterialBlock';
+import { NodeMaterialBlockConnectionPointTypes } from '../Enums/nodeMaterialBlockConnectionPointTypes';
+import { NodeMaterialBuildState } from '../nodeMaterialBuildState';
+import { NodeMaterialConnectionPoint } from '../nodeMaterialBlockConnectionPoint';
+import { NodeMaterialBlockTargets } from '../Enums/nodeMaterialBlockTargets';
+import { _TypeStore } from '../../../Misc/typeStore';
+/**
+ * Block used to desaturate a color
+ */
+export class DesaturateBlock extends NodeMaterialBlock {
+    /**
+     * Creates a new DesaturateBlock
+     * @param name defines the block name
+     */
+    public constructor(name: string) {
+        super(name, NodeMaterialBlockTargets.Neutral);
+
+        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color3);
+        this.registerInput("level", NodeMaterialBlockConnectionPointTypes.Float);
+        this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Color3);
+    }
+
+    /**
+     * Gets the current class name
+     * @returns the class name
+     */
+    public getClassName() {
+        return "DesaturateBlock";
+    }
+
+    /**
+     * Gets the color operand input component
+     */
+    public get color(): NodeMaterialConnectionPoint {
+        return this._inputs[0];
+    }
+
+    /**
+     * Gets the level operand input component
+     */
+    public get level(): NodeMaterialConnectionPoint {
+        return this._inputs[1];
+    }
+
+    /**
+     * Gets the output component
+     */
+    public get output(): NodeMaterialConnectionPoint {
+        return this._outputs[0];
+    }
+
+    protected _buildBlock(state: NodeMaterialBuildState) {
+        super._buildBlock(state);
+
+        let output = this._outputs[0];
+        let color = this.color;
+        let colorName = color.associatedVariableName;
+        let tempMin = state._getFreeVariableName("colorMin");
+        let tempMax= state._getFreeVariableName("colorMax");
+        let tempMerge= state._getFreeVariableName("colorMerge");
+
+        state.compilationString += `float ${tempMin} = min(min(${colorName}.x, ${colorName}.y), ${colorName}.z);\r\n`;
+        state.compilationString += `float ${tempMax} = max(max(${colorName}.x, ${colorName}.y), ${colorName}.z);\r\n`;
+        state.compilationString += `float ${tempMerge} = 0.5 * (${tempMin} + ${tempMax});\r\n`;
+        state.compilationString += this._declareOutput(output, state) + ` = mix(${colorName}, vec3(${tempMerge}, ${tempMerge}, ${tempMerge}), ${this.level.associatedVariableName});\r\n`;
+
+        return this;
+    }
+}
+
+_TypeStore.RegisteredTypes["BABYLON.DesaturateBlock"] = DesaturateBlock;

src/Materials/Node/Blocks/index.ts

@@ -44,3 +44,4 @@ export * from "./normalBlendBlock";
 export * from "./rotate2dBlock";
 export * from "./reflectBlock";
 export * from "./refractBlock";
+export * from "./desaturateBlock";

src/Materials/Node/Blocks/vectorMergerBlock.ts

@@ -16,12 +16,12 @@ export class VectorMergerBlock extends NodeMaterialBlock {
     public constructor(name: string) {
         super(name, NodeMaterialBlockTargets.Neutral);
 
+        this.registerInput("xyz ", NodeMaterialBlockConnectionPointTypes.Vector3, true);
+        this.registerInput("xy ", NodeMaterialBlockConnectionPointTypes.Vector2, true);
         this.registerInput("x", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("y", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("z", NodeMaterialBlockConnectionPointTypes.Float, true);
         this.registerInput("w", NodeMaterialBlockConnectionPointTypes.Float, true);
-        this.registerInput("xy ", NodeMaterialBlockConnectionPointTypes.Vector2, true);
-        this.registerInput("xyz ", NodeMaterialBlockConnectionPointTypes.Vector3, true);
 
         this.registerOutput("xyzw", NodeMaterialBlockConnectionPointTypes.Vector4);
         this.registerOutput("xyz", NodeMaterialBlockConnectionPointTypes.Vector3);
@@ -34,47 +34,47 @@ export class VectorMergerBlock extends NodeMaterialBlock {
      */
     public getClassName() {
         return "VectorMergerBlock";
-    }
+    } 
 
     /**
-     * Gets the x component (input)
+     * Gets the xyz component (input)
      */
-    public get x(): NodeMaterialConnectionPoint {
+    public get xyzIn(): NodeMaterialConnectionPoint {
         return this._inputs[0];
     }
-
+    
     /**
-     * Gets the y component (input)
+     * Gets the xy component (input)
      */
-    public get y(): NodeMaterialConnectionPoint {
+    public get xyIn(): NodeMaterialConnectionPoint {
         return this._inputs[1];
-    }
+    }     
 
     /**
-     * Gets the z component (input)
+     * Gets the x component (input)
      */
-    public get z(): NodeMaterialConnectionPoint {
+    public get x(): NodeMaterialConnectionPoint {
         return this._inputs[2];
     }
 
     /**
-     * Gets the w component (input)
+     * Gets the y component (input)
      */
-    public get w(): NodeMaterialConnectionPoint {
+    public get y(): NodeMaterialConnectionPoint {
         return this._inputs[3];
     }
 
     /**
-     * Gets the xy component (input)
+     * Gets the z component (input)
      */
-    public get xyIn(): NodeMaterialConnectionPoint {
+    public get z(): NodeMaterialConnectionPoint {
         return this._inputs[4];
-    }    
+    }
 
     /**
-     * Gets the xyz component (input)
+     * Gets the w component (input)
      */
-    public get xyzIn(): NodeMaterialConnectionPoint {
+    public get w(): NodeMaterialConnectionPoint {
         return this._inputs[5];
     }