Fix #16989 (#17013)

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

Author: deltakosh

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

@@ -0,0 +1,98 @@
+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";
+import { Vector3 } from "../../../../Maths/math.vector";
+import { editableInPropertyPage, PropertyTypeForEdition } from "../../../../Decorators/nodeDecorator";
+
+/**
+ * Block used to align the angle of a particle to its direction
+ * We assume the sprite is facing +Y
+ * NPE: #W5054F
+ * PG: #H5RP91
+ */
+export class AlignAngleBlock extends NodeParticleBlock {
+    /**
+     * Gets or sets the strenght of the flow map effect
+     */
+    @editableInPropertyPage("alignment", PropertyTypeForEdition.Float, "ADVANCED", { embedded: true, notifiers: { rebuild: true }, min: -0, max: 2 * Math.PI })
+    public alignment = Math.PI / 2; // Default to 90 degrees, aligning +Y with direction
+
+    /**
+     * Create a new AlignAngleBlock
+     * @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 "AlignAngleBlock";
+    }
+
+    /**
+     * Builds the block
+     * @param state defines the current build state
+     */
+    public override _build(state: NodeParticleBuildState) {
+        const system = this.particle.getConnectedValue(state) as ThinParticleSystem;
+
+        this.output._storedValue = system;
+
+        const tempVector3 = new Vector3();
+
+        const processAngle = (particle: Particle) => {
+            const cam = state.scene.activeCamera;
+            if (!cam) {
+                return;
+            }
+            const dir = particle.direction;
+            const view = cam.getViewMatrix();
+
+            const dirInView = Vector3.TransformNormalToRef(dir, view, tempVector3);
+
+            // Angle so sprite’s +Y aligns with projected direction
+            const angle = Math.atan2(dirInView.y, dirInView.x) + this.alignment;
+            particle.angle = angle; // radians
+        };
+
+        const angleProcessing = {
+            process: processAngle,
+            previousItem: null,
+            nextItem: null,
+        };
+
+        if (system._updateQueueStart) {
+            _ConnectAtTheEnd(angleProcessing, system._updateQueueStart);
+        } else {
+            system._updateQueueStart = angleProcessing;
+        }
+    }
+}
+
+RegisterClass("BABYLON.AlignAngleBlock", AlignAngleBlock);

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

@@ -15,6 +15,7 @@ export * from "./Update/basicSpriteUpdateBlock";
 export * from "./Update/updateSpriteCellIndexBlock";
 export * from "./Update/updateFlowMapBlock";
 export * from "./Update/updateAttractorBlock";
+export * from "./Update/alignAngleBlock";
 export * from "./Emitters/index";
 export * from "./particleGradientValueBlock";
 export * from "./particleGradientBlock";

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

@@ -40,7 +40,6 @@ export interface INodeParticleEditorOptions {
 
 /**
  * Defines a set of particle systems defined as a node graph.
- * @experimental This API is experimental and may change in future releases.
  * NPE: #K6F1ZB#1
  * PG: #ZT509U#1
  */

packages/tools/nodeParticleEditor/src/blockTools.ts

@@ -36,13 +36,16 @@ import { CustomShapeBlock } from "core/Particles/Node/Blocks/Emitters/customShap
 import { CylinderShapeBlock } from "core/Particles/Node/Blocks/Emitters/cylinderShapeBlock";
 import { MeshShapeBlock } from "core/Particles/Node/Blocks/Emitters/meshShapeBlock";
 import { UpdateAttractorBlock } from "core/Particles/Node/Blocks/Update/updateAttractorBlock";
+import { AlignAngleBlock } from "core/Particles/Node/Blocks/Update/alignAngleBlock";
 
 /**
  * Static class for BlockTools
  */
 export class BlockTools {
     public static GetBlockFromString(data: string) {
         switch (data) {
+            case "AlignAngleBlock":
+                return new AlignAngleBlock("Align angle");
             case "CreateParticleBlock":
                 return new CreateParticleBlock("Create particle");
             case "EqualBlock": {

packages/tools/nodeParticleEditor/src/components/nodeList/nodeListComponent.tsx

@@ -111,6 +111,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         OrBlock: "Conditional block set to Or",
         AndBlock: "Conditional block set to And",
         CreateParticleBlock: "Block used to create a particle with properties such as emit power, lifetime, color, scale, and angle",
+        AlignAngleBlock: "Block used to align the angle of a particle to its direction",
     };
 
     private _customFrameList: { [key: string]: string };
@@ -209,6 +210,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                 "UpdateSpriteCellIndexBlock",
                 "UpdateFlowMapBlock",
                 "UpdateAttractorBlock",
+                "AlignAngleBlock",
             ],
             Triggers: ["TriggerBlock"],
             Setup: ["CreateParticleBlock", "SetupSpriteSheetBlock"],

packages/tools/tests/test/visualization/ReferenceImages/npe-angle-align.png

@@ -1,6 +1,11 @@
 {
     "root": "https://cdn.babylonjs.com",
     "tests": [
+        {
+            "title": "NPE - Angle align",
+            "playgroundId": "#H5RP91",
+            "referenceImage": "npe-angle-align.png"
+        },
         {
             "title": "SPZ v3 - Splat",
             "playgroundId": "#V7CV8W#3",