Add the RampGradient and BlendMultiply blocks

nodeEditor/src/blockTools.ts

@@ -73,6 +73,8 @@ import { RefractionBlock } from 'babylonjs/Materials/Node/Blocks/PBR/refractionB
 import { SubSurfaceBlock } from 'babylonjs/Materials/Node/Blocks/PBR/subSurfaceBlock';
 import { CurrentScreenBlock } from 'babylonjs/Materials/Node/Blocks/Dual/currentScreenBlock';
 import { ParticleTextureBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleTextureBlock';
+import { ParticleRampGradientBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleRampGradientBlock';
+import { ParticleBlendMultiplyBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleBlendMultiplyBlock';
 
 export class BlockTools {
     public static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial) {
@@ -485,6 +487,10 @@ export class BlockTools {
                 u.setAsAttribute("particle_texturemask");
                 return u;
             }
+            case "ParticleRampGradientBlock":
+                return new ParticleRampGradientBlock("ParticleRampGradient");
+            case "ParticleBlendMultiplyBlock":
+                return new ParticleBlendMultiplyBlock("ParticleBlendMultiply");
         }
 
         return null;

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -137,6 +137,8 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         "ParticleTextureBlock": "The particle texture",
         "ParticleColorBlock": "The particle color",
         "ParticleTextureMaskBlock": "The particle texture mask",
+        "ParticleRampGradientBlock": "The particle ramp gradient block",
+        "ParticleBlendMultiplyBlock": "The particle blend multiply block",
     };
 
     constructor(props: INodeListComponentProps) {
@@ -173,7 +175,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             Mesh: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "PerturbNormalBlock", "NormalBlendBlock" , "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock", "WorldPositionBlock", "WorldNormalBlock", "WorldTangentBlock", "FrontFacingBlock"],
             Noises: ["RandomNumberBlock", "SimplexPerlin3DBlock", "WorleyNoise3DBlock"],
             Output_Nodes: ["VertexOutputBlock", "FragmentOutputBlock", "DiscardBlock"],
-            Particle: ["ParticleColorBlock", "ParticleTextureBlock", "ParticleTextureMaskBlock", "ParticleUVBlock"],
+            Particle: ["ParticleBlendMultiplyBlock", "ParticleColorBlock", "ParticleRampGradientBlock", "ParticleTextureBlock", "ParticleTextureMaskBlock", "ParticleUVBlock"],
             PBR: ["PBRMetallicRoughnessBlock", "AmbientOcclusionBlock", "AnisotropyBlock", "ClearCoatBlock", "ReflectionBlock", "ReflectivityBlock", "RefractionBlock", "SheenBlock", "SubSurfaceBlock"],
             PostProcess: ["Position2DBlock", "CurrentScreenBlock"],
             Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],

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

@@ -1,2 +1,4 @@
 
 export * from "./particleTextureBlock";
+export * from "./particleRampGradientBlock";
+export * from "./particleBlendMultiplyBlock";

src/Materials/Node/Blocks/Particle/particleBlendMultiplyBlock.ts

@@ -0,0 +1,95 @@
+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 for the particle blend multiply section
+  */
+export class ParticleBlendMultiplyBlock extends NodeMaterialBlock {
+
+    /**
+     * Create a new ParticleBlendMultiplyBlock
+     * @param name defines the block name
+     */
+    public constructor(name: string) {
+        super(name, NodeMaterialBlockTargets.Fragment);
+
+        this._isUnique = true;
+
+        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color4, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("alphaTexture", NodeMaterialBlockConnectionPointTypes.Float, false, NodeMaterialBlockTargets.Fragment);
+        this.registerInput("alphaColor", NodeMaterialBlockConnectionPointTypes.Float, false, NodeMaterialBlockTargets.Fragment);
+
+        this.registerOutput("blendColor", NodeMaterialBlockConnectionPointTypes.Color4, NodeMaterialBlockTargets.Fragment);
+    }
+
+    /**
+     * Gets the current class name
+     * @returns the class name
+     */
+    public getClassName() {
+        return "ParticleBlendMultiplyBlock";
+    }
+
+    /**
+     * Gets the color input component
+     */
+    public get color(): NodeMaterialConnectionPoint {
+        return this._inputs[0];
+    }
+
+    /**
+     * Gets the alphaTexture input component
+     */
+    public get alphaTexture(): NodeMaterialConnectionPoint {
+        return this._inputs[1];
+    }
+
+    /**
+     * Gets the alphaColor input component
+     */
+    public get alphaColor(): NodeMaterialConnectionPoint {
+        return this._inputs[2];
+    }
+
+    /**
+     * Gets the blendColor output component
+     */
+    public get blendColor(): NodeMaterialConnectionPoint {
+        return this._outputs[0];
+    }
+
+    /**
+     * Initialize the block and prepare the context for build
+     * @param state defines the state that will be used for the build
+     */
+    public initialize(state: NodeMaterialBuildState) {
+        state._excludeVariableName("sourceAlpha");
+    }
+
+    protected _buildBlock(state: NodeMaterialBuildState) {
+        super._buildBlock(state);
+
+        if (state.target === NodeMaterialBlockTargets.Vertex) {
+            return;
+        }
+
+        state.compilationString += `
+            #ifdef BLENDMULTIPLYMODE
+                ${this._declareOutput(this.blendColor, state)};
+                float sourceAlpha = ${this.alphaColor.associatedVariableName} * ${this.alphaTexture.associatedVariableName};
+                ${this.blendColor.associatedVariableName}.rgb = ${this.color.associatedVariableName}.rgb * sourceAlpha + vec3(1.0) * (1.0 - sourceAlpha);
+                ${this.blendColor.associatedVariableName}.a = ${this.color.associatedVariableName}.a;
+            #else
+                ${this._declareOutput(this.blendColor, state)} = ${this.color.associatedVariableName};
+            #endif
+        `;
+
+        return this;
+    }
+}
+
+_TypeStore.RegisteredTypes["BABYLON.ParticleBlendMultiplyBlock"] = ParticleBlendMultiplyBlock;

src/Materials/Node/Blocks/Particle/particleRampGradientBlock.ts

@@ -0,0 +1,97 @@
+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 for the particle ramp gradient section
+ */
+export class ParticleRampGradientBlock extends NodeMaterialBlock {
+
+    /**
+     * Create a new ParticleRampGradientBlock
+     * @param name defines the block name
+     */
+    public constructor(name: string) {
+        super(name, NodeMaterialBlockTargets.Fragment);
+
+        this._isUnique = true;
+
+        this.registerInput("color", NodeMaterialBlockConnectionPointTypes.Color4, false, NodeMaterialBlockTargets.Fragment);
+
+        this.registerOutput("rampColor", NodeMaterialBlockConnectionPointTypes.Color4, NodeMaterialBlockTargets.Fragment);
+    }
+
+    /**
+     * Gets the current class name
+     * @returns the class name
+     */
+    public getClassName() {
+        return "ParticleRampGradientBlock";
+    }
+
+    /**
+     * Gets the color input component
+     */
+    public get color(): NodeMaterialConnectionPoint {
+        return this._inputs[0];
+    }
+
+    /**
+     * Gets the rampColor output component
+     */
+    public get rampColor(): NodeMaterialConnectionPoint {
+        return this._outputs[0];
+    }
+
+    /**
+     * Initialize the block and prepare the context for build
+     * @param state defines the state that will be used for the build
+     */
+    public initialize(state: NodeMaterialBuildState) {
+        state._excludeVariableName("remapRanges");
+        state._excludeVariableName("rampSampler");
+        state._excludeVariableName("baseColor");
+        state._excludeVariableName("alpha");
+        state._excludeVariableName("remappedColorIndex");
+        state._excludeVariableName("rampColor");
+        state._excludeVariableName("finalAlpha");
+    }
+
+    protected _buildBlock(state: NodeMaterialBuildState) {
+        super._buildBlock(state);
+
+        if (state.target === NodeMaterialBlockTargets.Vertex) {
+            return;
+        }
+
+        state._emit2DSampler("rampSampler");
+        state._emitVaryingFromString("remapRanges", "vec4", "RAMPGRADIENT");
+
+        state.compilationString += `
+            #ifdef RAMPGRADIENT
+                vec4 baseColor = ${this.color.associatedVariableName};
+                float alpha = ${this.color.associatedVariableName}.a;
+
+                float remappedColorIndex = clamp((alpha - remapRanges.x) / remapRanges.y, 0.0, 1.0);
+
+                vec4 rampColor = texture2D(rampSampler, vec2(1.0 - remappedColorIndex, 0.));
+                baseColor.rgb *= rampColor.rgb;
+
+                // Remapped alpha
+                float finalAlpha = baseColor.a;
+                baseColor.a = clamp((alpha * rampColor.a - remapRanges.z) / remapRanges.w, 0.0, 1.0);
+
+                ${this._declareOutput(this.rampColor, state)} = baseColor;
+            #else
+                ${this._declareOutput(this.rampColor, state)} = ${this.color.associatedVariableName};
+            #endif
+        `;
+
+        return this;
+    }
+}
+
+_TypeStore.RegisteredTypes["BABYLON.ParticleRampGradientBlock"] = ParticleRampGradientBlock;