Replacing basic update blocks on Particles to NPE converter (#17375)

VicenteCartas · web-flow · commit d8d976a0d74f · 2025-10-31T02:00:36.000Z
With this change, when converting from particles to NPE, several nodes change: - Dead Color is now an input block. - BasicPositionUpdate is represented with all its nodes instead of the simplification - BasicColorUpdate is also represented with all its nodes instead of the simplification PG to test: #0K3AQ2#3670 Before: <img width="1225" height="727" alt="image" src="https://github.com/user-attachments/assets/7a35868c-b870-4415-998c-5179094ee301" /> After: <img width="1073" height="878" alt="image" src="https://github.com/user-attachments/assets/08fbd3cf-5aaa-4803-a0dd-9ad8491e02a2" />
diff --git a/packages/dev/core/src/Particles/Node/Blocks/particleInputBlock.ts b/packages/dev/core/src/Particles/Node/Blocks/particleInputBlock.ts
@@ -140,6 +140,8 @@ export class ParticleInputBlock extends NodeParticleBlock {
                 case NodeParticleContextualSources.Color:
                 case NodeParticleContextualSources.InitialColor:
                 case NodeParticleContextualSources.ColorDead:
+                case NodeParticleContextualSources.ColorStep:
+                case NodeParticleContextualSources.ScaledColorStep:
                     this._type = NodeParticleBlockConnectionPointTypes.Color4;
                     break;
                 case NodeParticleContextualSources.Age:
diff --git a/packages/dev/core/src/Particles/Node/Enums/nodeParticleContextualSources.ts b/packages/dev/core/src/Particles/Node/Enums/nodeParticleContextualSources.ts
@@ -35,4 +35,8 @@ export enum NodeParticleContextualSources {
     ColorDead = 0x0014,
     /** Initial Direction */
     InitialDirection = 0x0015,
+    /** Color Step */
+    ColorStep = 0x0016,
+    /** Scaled Color Step */
+    ScaledColorStep = 0x0017,
 }
diff --git a/packages/dev/core/src/Particles/Node/nodeParticleBuildState.ts b/packages/dev/core/src/Particles/Node/nodeParticleBuildState.ts
@@ -141,6 +141,11 @@ export class NodeParticleBuildState {
                 return this.systemContext.startSpriteCellID;
             case NodeParticleContextualSources.InitialDirection:
                 return this.particleContext._initialDirection;
+            case NodeParticleContextualSources.ColorStep:
+                return this.particleContext.colorStep;
+            case NodeParticleContextualSources.ScaledColorStep:
+                this.particleContext.colorStep.scaleToRef(this.systemContext._scaledUpdateSpeed, this.systemContext._scaledColorStep);
+                return this.systemContext._scaledColorStep;
         }
 
         return null;
diff --git a/packages/dev/core/src/Particles/Node/nodeParticleSystemSet.helper.ts b/packages/dev/core/src/Particles/Node/nodeParticleSystemSet.helper.ts
@@ -1,32 +1,54 @@
 import type { Nullable } from "core/types";
 import type { ParticleSystem } from "../particleSystem";
-import { NodeParticleSystemSet } from "./nodeParticleSystemSet";
-import { SystemBlock } from "./Blocks/systemBlock";
-import { CreateParticleBlock } from "./Blocks/Emitters/createParticleBlock";
-import { BoxShapeBlock } from "./Blocks/Emitters/boxShapeBlock";
 import type { IShapeBlock } from "./Blocks/Emitters/IShapeBlock";
 import type { Vector3 } from "core/Maths/math.vector";
+import type { Color4 } from "core/Maths/math.color";
 import type { NodeParticleConnectionPoint } from "./nodeParticleBlockConnectionPoint";
 import type { BoxParticleEmitter } from "../EmitterTypes/boxParticleEmitter";
 import type { PointParticleEmitter } from "../EmitterTypes/pointParticleEmitter";
 import type { SphereParticleEmitter } from "../EmitterTypes/sphereParticleEmitter";
 import type { CylinderParticleEmitter, MeshParticleEmitter } from "../EmitterTypes";
 import type { Mesh } from "core/Meshes/mesh";
+import type { Texture } from "core/Materials/Textures/texture";
+
+import { NodeParticleSystemSet } from "./nodeParticleSystemSet";
+import { SystemBlock } from "./Blocks/systemBlock";
+import { CreateParticleBlock } from "./Blocks/Emitters/createParticleBlock";
+import { BoxShapeBlock } from "./Blocks/Emitters/boxShapeBlock";
 import { ParticleInputBlock } from "./Blocks/particleInputBlock";
 import { PointShapeBlock } from "./Blocks/Emitters/pointShapeBlock";
 import { SphereShapeBlock } from "./Blocks/Emitters/sphereShapeBlock";
 import { CylinderShapeBlock } from "./Blocks/Emitters/cylinderShapeBlock";
 import { MeshShapeBlock } from "./Blocks/Emitters/meshShapeBlock";
 import { ParticleTextureSourceBlock } from "./Blocks/particleSourceTextureBlock";
-import type { Texture } from "../../Materials/Textures/texture";
-import { BasicPositionUpdateBlock } from "./Blocks/Update/basicPositionUpdateBlock";
-import { BasicColorUpdateBlock } from "./Blocks/Update/basicColorUpdateBlock";
 import { ParticleRandomBlock } from "./Blocks/particleRandomBlock";
+import { ParticleConverterBlock } from "./Blocks/particleConverterBlock";
+import { ParticleMathBlock, ParticleMathBlockOperations } from "./Blocks/particleMathBlock";
+import { UpdateColorBlock } from "./Blocks/Update/updateColorBlock";
+import { UpdatePositionBlock } from "./Blocks/Update/updatePositionBlock";
+import { NodeParticleContextualSources } from "./Enums/nodeParticleContextualSources";
 
-function _CreateAndConnectInput(connectionPoint: NodeParticleConnectionPoint, name: string, defaultValue: Vector3 | number) {
-    const input = new ParticleInputBlock(name);
-    input.value = defaultValue;
-    input.output.connectTo(connectionPoint);
+/**
+ * Converts a ParticleSystem to a NodeParticleSystemSet.
+ * @param name The name of the node particle system set.
+ * @param particleSystems The particle systems to convert.
+ * @returns The converted node particle system set or null if conversion failed.
+ * #0K3AQ2#3670
+ */
+export async function ConvertToNodeParticleSystemSetAsync(name: string, particleSystems: ParticleSystem[]): Promise<Nullable<NodeParticleSystemSet>> {
+    if (!particleSystems || !particleSystems.length) {
+        return null;
+    }
+
+    const nodeParticleSystemSet = new NodeParticleSystemSet(name);
+    const promises: Promise<void>[] = [];
+
+    for (const particleSystem of particleSystems) {
+        promises.push(_ExtractDatafromParticleSystemAsync(particleSystem, nodeParticleSystemSet));
+    }
+
+    await Promise.all(promises);
+    return nodeParticleSystemSet;
 }
 
 async function _ExtractDatafromParticleSystemAsync(particleSystem: ParticleSystem, target: NodeParticleSystemSet) {
@@ -36,59 +58,59 @@ async function _ExtractDatafromParticleSystemAsync(particleSystem: ParticleSyste
     system.emitRate = particleSystem.emitRate;
 
     // Create particle
-    const createParticleBlock = new CreateParticleBlock("Create particle");
+    const createParticleBlock = new CreateParticleBlock("Create Particle");
 
     // Shape
     let shapeBlock: Nullable<IShapeBlock> = null;
     switch (particleSystem.particleEmitterType.getClassName()) {
         case "BoxParticleEmitter": {
             const source = particleSystem.particleEmitterType as BoxParticleEmitter;
-            shapeBlock = new BoxShapeBlock("Box shape");
+            shapeBlock = new BoxShapeBlock("Box Shape");
 
             const target = shapeBlock as BoxShapeBlock;
-            _CreateAndConnectInput(target.direction1, "Direction 1", source.direction1);
-            _CreateAndConnectInput(target.direction2, "Direction 2", source.direction2);
-            _CreateAndConnectInput(target.minEmitBox, "Min Emit Box", source.minEmitBox);
-            _CreateAndConnectInput(target.maxEmitBox, "Max Emit Box", source.maxEmitBox);
+            _CreateAndConnectInput("Direction 1", source.direction1, target.direction1);
+            _CreateAndConnectInput("Direction 2", source.direction2, target.direction2);
+            _CreateAndConnectInput("Min Emit Box", source.minEmitBox, target.minEmitBox);
+            _CreateAndConnectInput("Max Emit Box", source.maxEmitBox, target.maxEmitBox);
             break;
         }
         case "PointParticleEmitter": {
             const source = particleSystem.particleEmitterType as PointParticleEmitter;
-            shapeBlock = new PointShapeBlock("Point shape");
+            shapeBlock = new PointShapeBlock("Point Shape");
 
             const target = shapeBlock as PointShapeBlock;
-            _CreateAndConnectInput(target.direction1, "Direction 1", source.direction1);
-            _CreateAndConnectInput(target.direction2, "Direction 2", source.direction2);
+            _CreateAndConnectInput("Direction 1", source.direction1, target.direction1);
+            _CreateAndConnectInput("Direction 2", source.direction2, target.direction2);
             break;
         }
         case "SphereParticleEmitter": {
             const source = particleSystem.particleEmitterType as SphereParticleEmitter;
-            shapeBlock = new SphereShapeBlock("Sphere shape");
+            shapeBlock = new SphereShapeBlock("Sphere Shape");
 
             const target = shapeBlock as SphereShapeBlock;
-            _CreateAndConnectInput(target.radius, "Radius", source.radius);
-            _CreateAndConnectInput(target.radiusRange, "Radius Range", source.radiusRange);
-            _CreateAndConnectInput(target.directionRandomizer, "Direction Randomizer", source.directionRandomizer);
+            _CreateAndConnectInput("Radius", source.radius, target.radius);
+            _CreateAndConnectInput("Radius Range", source.radiusRange, target.radiusRange);
+            _CreateAndConnectInput("Direction Randomizer", source.directionRandomizer, target.directionRandomizer);
             break;
         }
         case "CylinderParticleEmitter": {
             const source = particleSystem.particleEmitterType as CylinderParticleEmitter;
-            shapeBlock = new CylinderShapeBlock("Cylinder shape");
+            shapeBlock = new CylinderShapeBlock("Cylinder Shape");
 
             const target = shapeBlock as CylinderShapeBlock;
-            _CreateAndConnectInput(target.height, "Height", source.height);
-            _CreateAndConnectInput(target.radius, "Radius", source.radius);
-            _CreateAndConnectInput(target.radiusRange, "Radius Range", source.radiusRange);
-            _CreateAndConnectInput(target.directionRandomizer, "Direction Randomizer", source.directionRandomizer);
+            _CreateAndConnectInput("Height", source.height, target.height);
+            _CreateAndConnectInput("Radius", source.radius, target.radius);
+            _CreateAndConnectInput("Radius Range", source.radiusRange, target.radiusRange);
+            _CreateAndConnectInput("Direction Randomizer", source.directionRandomizer, target.directionRandomizer);
             break;
         }
         case "MeshParticleEmitter": {
             const source = particleSystem.particleEmitterType as MeshParticleEmitter;
-            shapeBlock = new MeshShapeBlock("Mesh shape");
+            shapeBlock = new MeshShapeBlock("Mesh Shape");
 
             const target = shapeBlock as MeshShapeBlock;
-            _CreateAndConnectInput(target.direction1, "Direction 1", source.direction1);
-            _CreateAndConnectInput(target.direction2, "Direction 2", source.direction2);
+            _CreateAndConnectInput("Direction 1", source.direction1, target.direction1);
+            _CreateAndConnectInput("Direction 2", source.direction2, target.direction2);
 
             target.mesh = source.mesh as Mesh;
             break;
@@ -100,45 +122,26 @@ async function _ExtractDatafromParticleSystemAsync(particleSystem: ParticleSyste
     }
 
     createParticleBlock.particle.connectTo(shapeBlock.particle);
-    createParticleBlock.colorDead.value = particleSystem.colorDead;
 
-    // Color
-    const color0Block = new ParticleInputBlock("Color0");
-    color0Block.value = particleSystem.color1;
-
-    const color1Block = new ParticleInputBlock("Color1");
-    color1Block.value = particleSystem.color2;
+    // Dead color
+    _CreateAndConnectInput("Dead Color", particleSystem.colorDead, createParticleBlock.colorDead);
 
+    // Color
     const randomColorBlock = new ParticleRandomBlock("Random Color");
-    color0Block.output.connectTo(randomColorBlock.min);
-    color1Block.output.connectTo(randomColorBlock.max);
-
+    _CreateAndConnectInput("Color 1", particleSystem.color1, randomColorBlock.min);
+    _CreateAndConnectInput("Color 2", particleSystem.color2, randomColorBlock.max);
     randomColorBlock.output.connectTo(createParticleBlock.color);
 
     // Emit power
-    const minEmitPowerBlock = new ParticleInputBlock("Min Emit Power");
-    minEmitPowerBlock.value = particleSystem.minEmitPower;
-
-    const maxEmitPowerBlock = new ParticleInputBlock("Max Emit Power");
-    maxEmitPowerBlock.value = particleSystem.maxEmitPower;
-
     const randomEmitPowerBlock = new ParticleRandomBlock("Random Emit Power");
-    minEmitPowerBlock.output.connectTo(randomEmitPowerBlock.min);
-    maxEmitPowerBlock.output.connectTo(randomEmitPowerBlock.max);
-
+    _CreateAndConnectInput("Min Emit Power", particleSystem.minEmitPower, randomEmitPowerBlock.min);
+    _CreateAndConnectInput("Max Emit Power", particleSystem.maxEmitPower, randomEmitPowerBlock.max);
     randomEmitPowerBlock.output.connectTo(createParticleBlock.emitPower);
 
     // Lifetime
-    const minLifetimeBlock = new ParticleInputBlock("Min Lifetime");
-    minLifetimeBlock.value = particleSystem.minLifeTime;
-
-    const maxLifetimeBlock = new ParticleInputBlock("Max Lifetime");
-    maxLifetimeBlock.value = particleSystem.maxLifeTime;
-
     const randomLifetimeBlock = new ParticleRandomBlock("Random Lifetime");
-    minLifetimeBlock.output.connectTo(randomLifetimeBlock.min);
-    maxLifetimeBlock.output.connectTo(randomLifetimeBlock.max);
-
+    _CreateAndConnectInput("Min Lifetime", particleSystem.minLifeTime, randomLifetimeBlock.min);
+    _CreateAndConnectInput("Max Lifetime", particleSystem.maxLifeTime, randomLifetimeBlock.max);
     randomLifetimeBlock.output.connectTo(createParticleBlock.lifeTime);
 
     // Texture
@@ -152,37 +155,53 @@ async function _ExtractDatafromParticleSystemAsync(particleSystem: ParticleSyste
     textureBlock.texture.connectTo(system.texture);
 
     // Default position update
-    const basicPositionUpdateBlock = new BasicPositionUpdateBlock("Position update");
-    shapeBlock.output.connectTo(basicPositionUpdateBlock.particle);
+    const positionUpdateblock = new UpdatePositionBlock("Position update");
+    shapeBlock.output.connectTo(positionUpdateblock.particle);
+
+    const addPositionBlock = new ParticleMathBlock("Add Position");
+    addPositionBlock.operation = ParticleMathBlockOperations.Add;
+    _CreateAndConnectContextual("Position", NodeParticleContextualSources.Position, addPositionBlock.left);
+    _CreateAndConnectContextual("Scaled Direction", NodeParticleContextualSources.ScaledDirection, addPositionBlock.right);
+    addPositionBlock.output.connectTo(positionUpdateblock.position);
 
     // Default color update
-    const basicColorUpdateBlock = new BasicColorUpdateBlock("Color update");
-    basicPositionUpdateBlock.output.connectTo(basicColorUpdateBlock.particle);
-    basicColorUpdateBlock.output.connectTo(system.particle);
+    const colorUpdateblock = new UpdateColorBlock("Color update");
+    positionUpdateblock.output.connectTo(colorUpdateblock.particle);
+
+    const addColorBlock = new ParticleMathBlock("Add Color");
+    addColorBlock.operation = ParticleMathBlockOperations.Add;
+    _CreateAndConnectContextual("Color", NodeParticleContextualSources.Color, addColorBlock.left);
+    _CreateAndConnectContextual("Scaled Color Step", NodeParticleContextualSources.ScaledColorStep, addColorBlock.right);
+    addColorBlock.output.connectTo(colorUpdateblock.color);
+
+    const decomposeColorBlock = new ParticleConverterBlock("Decompose Color");
+    addColorBlock.output.connectTo(decomposeColorBlock.colorIn);
+
+    // Clamp alpha to be >= 0
+    const maxAlphaBlock = new ParticleMathBlock("Alpha >= 0");
+    maxAlphaBlock.operation = ParticleMathBlockOperations.Max;
+    decomposeColorBlock.wOut.connectTo(maxAlphaBlock.left);
+    _CreateAndConnectInput("Zero", 0, maxAlphaBlock.right);
+
+    const composeColorBlock = new ParticleConverterBlock("Compose Color");
+    decomposeColorBlock.xyzOut.connectTo(composeColorBlock.xyzIn);
+    maxAlphaBlock.output.connectTo(composeColorBlock.wIn);
+    composeColorBlock.colorOut.connectTo(colorUpdateblock.color);
+
+    colorUpdateblock.output.connectTo(system.particle);
 
     // Register
     target.systemBlocks.push(system);
 }
 
-/**
- * Converts a ParticleSystem to a NodeParticleSystemSet.
- * @param name The name of the node particle system set.
- * @param particleSystems The particle systems to convert.
- * @returns The converted node particle system set or null if conversion failed.
- * #0K3AQ2#3627
- */
-export async function ConvertToNodeParticleSystemSetAsync(name: string, particleSystems: ParticleSystem[]): Promise<Nullable<NodeParticleSystemSet>> {
-    if (!particleSystems || !particleSystems.length) {
-        return null;
-    }
-
-    const nodeParticleSystemSet = new NodeParticleSystemSet(name);
-    const promises: Promise<void>[] = [];
-
-    for (const particleSystem of particleSystems) {
-        promises.push(_ExtractDatafromParticleSystemAsync(particleSystem, nodeParticleSystemSet));
-    }
+function _CreateAndConnectInput(inputBlockName: string, value: number | Vector3 | Color4, outputToConnectTo: NodeParticleConnectionPoint) {
+    const input = new ParticleInputBlock(inputBlockName);
+    input.value = value;
+    input.output.connectTo(outputToConnectTo);
+}
 
-    await Promise.all(promises);
-    return nodeParticleSystemSet;
+function _CreateAndConnectContextual(contextualBlockName: string, contextValue: NodeParticleContextualSources, outputToConnectTo: NodeParticleConnectionPoint): void {
+    const input = new ParticleInputBlock(contextualBlockName);
+    input.contextualValue = contextValue;
+    input.output.connectTo(outputToConnectTo);
 }
diff --git a/packages/tools/nodeParticleEditor/src/blockTools.ts b/packages/tools/nodeParticleEditor/src/blockTools.ts
@@ -238,6 +238,16 @@ export class BlockTools {
                 block.contextualValue = NodeParticleContextualSources.SpriteCellStart;
                 return block;
             }
+            case "ColorStepBlock": {
+                const block = new ParticleInputBlock("Color Step");
+                block.contextualValue = NodeParticleContextualSources.ColorStep;
+                return block;
+            }
+            case "ScaledColorStepBlock": {
+                const block = new ParticleInputBlock("Scaled Color Step");
+                block.contextualValue = NodeParticleContextualSources.ScaledColorStep;
+                return block;
+            }
             case "TimeBlock": {
                 const block = new ParticleInputBlock("Time");
                 block.systemSource = NodeParticleSystemSources.Time;
diff --git a/packages/tools/nodeParticleEditor/src/components/nodeList/nodeListComponent.tsx b/packages/tools/nodeParticleEditor/src/components/nodeList/nodeListComponent.tsx
@@ -120,6 +120,8 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         VectorLengthBlock: "Block used to get the length of a vector",
         LocalVariableBlock: "Block used to store local values (eg. within a loop)",
         FresnelBlock: "Block used to compute the Fresnel term",
+        ColorStepBlock: "Contextual block to get the expected color step of a particle",
+        ScaledColorStepBlock: "Contextual block to get the expected scaled color step of a particle",
     };
 
     private _customFrameList: { [key: string]: string };
@@ -275,6 +277,8 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                 "SpriteCellStartBlock",
                 "SpriteCellIndexBlock",
                 "InitialDirectionBlock",
+                "ColorStepBlock",
+                "ScaledColorStepBlock",
             ],
         };
 
diff --git a/packages/tools/nodeParticleEditor/src/graphSystem/display/inputDisplayManager.ts b/packages/tools/nodeParticleEditor/src/graphSystem/display/inputDisplayManager.ts
@@ -119,6 +119,12 @@ export class InputDisplayManager implements IDisplayManager {
                 case NodeParticleContextualSources.SpriteCellStart:
                     value = "Sprite Cell Start";
                     break;
+                case NodeParticleContextualSources.ColorStep:
+                    value = "Color Step";
+                    break;
+                case NodeParticleContextualSources.ScaledColorStep:
+                    value = "Scaled Color Step";
+                    break;
             }
         } else {
             switch (inputBlock.type) {

Original file line number	Diff line number	Diff line change
`@@ -35,4 +35,8 @@ export enum NodeParticleContextualSources {`
`35`	`35`	`ColorDead = 0x0014,`
`36`	`36`	`/** Initial Direction */`
`37`	`37`	`InitialDirection = 0x0015,`
	`38`	`+ /** Color Step */`
	`39`	`+ ColorStep = 0x0016,`
	`40`	`+ /** Scaled Color Step */`
	`41`	`+ ScaledColorStep = 0x0017,`
`38`	`42`	`}`