Adding support for texture in NPE converter (#17042)

Co-authored-by: David Catuhe <[email protected]>

Author: deltakosh

packages/dev/buildTools/src/webpackTools.ts

@@ -198,7 +198,7 @@ export const commonDevWebpackConfiguration = (
     let plugins: WebpackPluginInstance[] | undefined = additionalPlugins;
     if (devServerConfig && enableHotReload) {
         plugins = plugins ?? [];
-        plugins.push(new ReactRefreshWebpackPlugin());
+        plugins.push(new ReactRefreshWebpackPlugin({ overlay: !process.env.DISABLE_DEV_OVERLAY }));
     }
 
     return {

packages/dev/core/src/Particles/Node/Blocks/Emitters/createParticleBlock.ts

@@ -28,6 +28,7 @@ export class CreateParticleBlock extends NodeParticleBlock {
         this.registerInput("emitPower", NodeParticleBlockConnectionPointTypes.Float, true, 1);
         this.registerInput("lifeTime", NodeParticleBlockConnectionPointTypes.Float, true, 1);
         this.registerInput("color", NodeParticleBlockConnectionPointTypes.Color4, true, new Color4(1, 1, 1, 1));
+        this.registerInput("colorDead", NodeParticleBlockConnectionPointTypes.Color4, true, new Color4(0, 0, 0, 0));
         this.registerInput("scale", NodeParticleBlockConnectionPointTypes.Vector2, true, new Vector2(1, 1));
         this.registerInput("angle", NodeParticleBlockConnectionPointTypes.Float, true, 0);
         this.registerOutput("particle", NodeParticleBlockConnectionPointTypes.Particle);
@@ -62,18 +63,25 @@ export class CreateParticleBlock extends NodeParticleBlock {
         return this._inputs[2];
     }
 
+    /**
+     * Gets the color dead input component
+     */
+    public get colorDead(): NodeParticleConnectionPoint {
+        return this._inputs[3];
+    }
+
     /**
      * Gets the scale input component
      */
     public get scale(): NodeParticleConnectionPoint {
-        return this._inputs[3];
+        return this._inputs[4];
     }
 
     /**
      * Gets the angle input component
      */
     public get angle(): NodeParticleConnectionPoint {
-        return this._inputs[4];
+        return this._inputs[5];
     }
 
     /**
@@ -100,7 +108,10 @@ export class CreateParticleBlock extends NodeParticleBlock {
         system._colorCreation.process = (particle: Particle) => {
             state.particleContext = particle;
             particle.color.copyFrom(this.color.getConnectedValue(state));
-            particle.colorStep.copyFrom(particle.color);
+            system.colorDead.copyFrom(this.colorDead.getConnectedValue(state));
+            particle.initialColor.copyFrom(particle.color);
+            system.colorDead.subtractToRef(particle.initialColor, system._colorDiff);
+            system._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
         };
 
         system._sizeCreation.process = (particle: Particle) => {

packages/dev/core/src/Particles/Node/Blocks/Emitters/meshShapeBlock.ts

@@ -238,7 +238,9 @@ export class MeshShapeBlock extends NodeParticleBlock implements IShapeBlock {
                     bu * TmpVectors.Vector4[0].w + bv * TmpVectors.Vector4[1].w + bw * TmpVectors.Vector4[2].w
                 );
 
-                particle.colorStep.copyFrom(particle.color);
+                particle.initialColor.copyFrom(particle.color);
+                system.colorDead.subtractToRef(particle.initialColor, system._colorDiff);
+                system._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
             }
         };
 

packages/dev/core/src/Particles/Node/Blocks/Update/basicColorUpdateBlock.ts

@@ -0,0 +1,82 @@
+import { RegisterClass } from "../../../../Misc/typeStore";
+import { NodeParticleBlockConnectionPointTypes } from "../../Enums/nodeParticleBlockConnectionPointTypes";
+import { NodeParticleBlock } from "../../nodeParticleBlock";
+import type { NodeParticleConnectionPoint } from "../../nodeParticleBlockConnectionPoint";
+import type { NodeParticleBuildState } from "../../nodeParticleBuildState";
+import type { ThinParticleSystem } from "core/Particles/thinParticleSystem";
+import type { Particle } from "core/Particles/particle";
+import { _ConnectAtTheEnd } from "core/Particles/Queue/executionQueue";
+
+/**
+ * Block used to provide the basic update functionality for particle colors.
+ */
+export class BasicColorUpdateBlock extends NodeParticleBlock {
+    /**
+     * Create a new UpdateScaleBlock
+     * @param name defines the block name
+     */
+    public constructor(name: string) {
+        super(name);
+
+        this.registerInput("particle", NodeParticleBlockConnectionPointTypes.Particle);
+        this.registerOutput("output", NodeParticleBlockConnectionPointTypes.Particle);
+    }
+
+    /**
+     * Gets the particle component
+     */
+    public get particle(): NodeParticleConnectionPoint {
+        return this._inputs[0];
+    }
+
+    /**
+     * Gets the output component
+     */
+    public get output(): NodeParticleConnectionPoint {
+        return this._outputs[0];
+    }
+
+    /**
+     * Gets the current class name
+     * @returns the class name
+     */
+    public override getClassName() {
+        return "BasicColorUpdateBlock";
+    }
+
+    /**
+     * Builds the block
+     * @param state defines the current build state
+     */
+    public override _build(state: NodeParticleBuildState) {
+        const system = this.particle.getConnectedValue(state) as ThinParticleSystem;
+
+        const processColor = (particle: Particle) => {
+            state.particleContext = particle;
+            state.systemContext = system;
+
+            particle.colorStep.scaleToRef(system._scaledUpdateSpeed, system._scaledColorStep);
+            particle.color.addInPlace(system._scaledColorStep);
+
+            if (particle.color.a < 0) {
+                particle.color.a = 0;
+            }
+        };
+
+        const colorProcessing = {
+            process: processColor,
+            previousItem: null,
+            nextItem: null,
+        };
+
+        if (system._updateQueueStart) {
+            _ConnectAtTheEnd(colorProcessing, system._updateQueueStart);
+        } else {
+            system._updateQueueStart = colorProcessing;
+        }
+
+        this.output._storedValue = system;
+    }
+}
+
+RegisterClass("BABYLON.BasicColorUpdateBlock", BasicColorUpdateBlock);

packages/dev/core/src/Particles/Node/Blocks/index.ts

@@ -12,6 +12,7 @@ export * from "./Update/updateAngleBlock";
 export * from "./Update/updateAgeBlock";
 export * from "./Update/basicPositionUpdateBlock";
 export * from "./Update/basicSpriteUpdateBlock";
+export * from "./Update/basicColorUpdateBlock";
 export * from "./Update/updateSpriteCellIndexBlock";
 export * from "./Update/updateFlowMapBlock";
 export * from "./Update/updateAttractorBlock";

packages/dev/core/src/Particles/Node/Blocks/particleInputBlock.ts

@@ -137,6 +137,7 @@ export class ParticleInputBlock extends NodeParticleBlock {
                     break;
                 case NodeParticleContextualSources.Color:
                 case NodeParticleContextualSources.InitialColor:
+                case NodeParticleContextualSources.ColorDead:
                     this._type = NodeParticleBlockConnectionPointTypes.Color4;
                     break;
                 case NodeParticleContextualSources.Age:

packages/dev/core/src/Particles/Node/Blocks/particleSourceTextureBlock.ts

@@ -6,14 +6,15 @@ import type { NodeParticleConnectionPoint } from "../nodeParticleBlockConnection
 import type { NodeParticleBuildState } from "../nodeParticleBuildState";
 import type { Nullable } from "core/types";
 import { TextureTools } from "core/Misc/textureTools";
+import type { BaseTexture } from "../../../Materials/Textures/baseTexture";
 
 /**
  * Block used to provide a texture for particles in a particle system
  */
 export class ParticleTextureSourceBlock extends NodeParticleBlock {
     private _url: string = "";
     private _textureDataUrl: string = "";
-    private _sourceTexture: Nullable<Texture> = null;
+    private _sourceTexture: Nullable<BaseTexture> = null;
     private _cachedData: Nullable<{
         width: number;
         height: number;
@@ -65,13 +66,13 @@ export class ParticleTextureSourceBlock extends NodeParticleBlock {
      * Directly sets the texture to be used by this block.
      * This value will not be serialized.
      */
-    public set sourceTexture(value: Nullable<Texture>) {
+    public set sourceTexture(value: Nullable<BaseTexture>) {
         if (this._sourceTexture === value) {
             return;
         }
         this._cachedData = null;
         this._sourceTexture = value;
-        this._url = "";
+        this._url = (value as Texture).url || "";
         this._textureDataUrl = "";
     }
 
@@ -105,15 +106,15 @@ export class ParticleTextureSourceBlock extends NodeParticleBlock {
      * @returns a promise that resolves to the texture content, including width, height, and pixel data
      */
     async extractTextureContentAsync() {
-        if (!this.texture._storedValue) {
+        if (!this.texture._storedValue && !this._sourceTexture) {
             return null;
         }
 
         if (this._cachedData) {
             return this._cachedData;
         }
 
-        const texture = this.texture._storedValue;
+        const texture = this.texture._storedValue || this._sourceTexture;
         return await new Promise<
             Nullable<{
                 width: number;

packages/dev/core/src/Particles/Node/Enums/nodeParticleContextualSources.ts

@@ -31,4 +31,6 @@ export enum NodeParticleContextualSources {
     SpriteCellEnd = 0x0012,
     /** Initial Color */
     InitialColor = 0x0013,
+    /** Color Dead*/
+    ColorDead = 0x0014,
 }

packages/dev/core/src/Particles/Node/nodeParticleBuildState.ts

@@ -120,7 +120,9 @@ export class NodeParticleBuildState {
             case NodeParticleContextualSources.Color:
                 return this.particleContext.color;
             case NodeParticleContextualSources.InitialColor:
-                return this.particleContext.colorStep;
+                return this.particleContext.initialColor;
+            case NodeParticleContextualSources.ColorDead:
+                return this.systemContext.colorDead;
             case NodeParticleContextualSources.Age:
                 return this.particleContext.age;
             case NodeParticleContextualSources.Lifetime: