Introducting the Node Particle Editor! (#16718)

- [x] On end trigger
- [x] On start trigger
- [x] support worldMatrix from emitter
- [x] Preview popup
- [x] Flow map
- [x] Expose emitter
- [x] Sprite sheet
- [x] Delay start
- [x] Particle trigger
- [x] Condition
- [x] Simple condition 
- [x] Auto expendable blocks
- [x] Basic update
- [x] Snippet & loading API
- [x] Teleport
- [x] Elbow
- [x] Custom Emitter Type
- [x] Trigonometrics
- [x] Converter



![image](https://github.com/user-attachments/assets/7c1c1de0-780e-4074-ba48-26282b4a2eff)

---------

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

Author: deltakosh

.vscode/launch.json

@@ -239,6 +239,20 @@
             "url": "http://localhost:1344",
             "preLaunchTask": "Node Render Graph Editor Serve (Dev)"
         },
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Node Particle Editor development (Edge)",
+            "url": "http://localhost:1345",
+            "preLaunchTask": "Node Particle Editor Serve (Dev)"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Node Particle Editor development (Chrome)",
+            "url": "http://localhost:1345",
+            "preLaunchTask": "Node Particle Editor Serve (Dev)"
+        },
         {
             /*
             Launch the playground to be use to test changes in dev packages

.vscode/tasks.json

@@ -467,6 +467,42 @@
             },
             "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
         },
+        {
+            "label": "Node Particle Editor Serve for core (Dev)",
+            "type": "shell",
+            "command": "npm",
+            "dependsOn": "CDN Serve and watch (Dev)",
+            "runOptions": {
+                "instanceLimit": 1
+            },
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "args": ["run", "serve", "-w", "@tools/node-particle-editor"],
+            "isBackground": true,
+            "presentation": {
+                "group": "serve"
+            },
+            "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
+        },
+        {
+            "label": "Node Particle Editor Serve (Dev)",
+            "type": "shell",
+            "command": "npm",
+            "dependsOn": "CDN Serve and watch (Dev)",
+            "runOptions": {
+                "instanceLimit": 1
+            },
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "args": ["run", "serve", "-w", "@tools/node-particle-editor"],
+            "isBackground": true,
+            "presentation": {
+                "group": "serve"
+            },
+            "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
+        },
         {
             "label": "VSM Serve for core (Dev)",
             "type": "shell",

package-lock.json

@@ -64,8 +64,8 @@
         "build:lts": "npm run build:assets && npm run build:source:lts",
         "build:source": "tsc -b ./tsconfig.devpackages.json",
         "build:source:lts": "npx nx run-many --target=compile --projects=@lts/core,@lts/gui,@lts/loaders,@lts/materials,@lts/post-processes,@lts/procedural-textures,@lts/serializers --parallel=1",
-        "build:umd": "nx run-many --target=build --parallel --maxParallel=6 --projects=babylonjs,babylonjs-gui,babylonjs-inspector,babylonjs-loaders,babylonjs-materials,babylonjs-serializers,babylonjs-post-process,babylonjs-procedural-textures,babylonjs-node-editor,babylonjs-node-geometry-editor,babylonjs-node-render-graph-editor,babylonjs-gui-editor,babylonjs-ktx2decoder,babylonjs-accessibility,babylonjs-addons",
-        "build:es6": "nx run-many --target=build --parallel --maxParallel=6 --projects=@babylonjs/core,@babylonjs/gui,@babylonjs/loaders,@babylonjs/materials,@babylonjs/serializers,@babylonjs/post-processes,@babylonjs/procedural-textures,@babylonjs/node-editor,@babylonjs/node-geometry-editor,@babylonjs/node-render-graph-editor,@babylonjs/inspector,@babylonjs/gui-editor,@babylonjs/viewer,@babylonjs/shared-ui-components,@babylonjs/addons,@babylonjs/accessibility,@babylonjs/ktx2decoder",
+        "build:umd": "nx run-many --target=build --parallel --maxParallel=6 --projects=babylonjs,babylonjs-gui,babylonjs-inspector,babylonjs-loaders,babylonjs-materials,babylonjs-serializers,babylonjs-post-process,babylonjs-procedural-textures,babylonjs-node-editor,babylonjs-node-geometry-editor,babylonjs-node-render-graph-editor,babylonjs-node-particle-editor,babylonjs-gui-editor,babylonjs-ktx2decoder,babylonjs-accessibility,babylonjs-addons",
+        "build:es6": "nx run-many --target=build --parallel --maxParallel=6 --projects=@babylonjs/core,@babylonjs/gui,@babylonjs/loaders,@babylonjs/materials,@babylonjs/serializers,@babylonjs/post-processes,@babylonjs/procedural-textures,@babylonjs/node-editor,@babylonjs/node-geometry-editor,@babylonjs/node-render-graph-editor,babylonjs-node-particle-editor,@babylonjs/inspector,@babylonjs/gui-editor,@babylonjs/viewer,@babylonjs/shared-ui-components,@babylonjs/addons,@babylonjs/accessibility,@babylonjs/ktx2decoder",
         "watch:shaders": "build-tools -c build-shaders --global --watch",
         "watch:assets": "build-tools -c pa --global --watch",
         "watch:source:dev": "tsc -b ./tsconfig.devpackages.json -w",

package.json

@@ -366,6 +366,11 @@ function GetPackageDeclaration(
             }
         }
 
+        // if the import is a return-type import from core, we remove the import and the dot
+        if (line.match(/import\("core(.*)"\)\./g)) {
+            line = line.replace(/import\("(.*)"\)\./g, "");
+        }
+
         if (excludeLine) {
             lines[i] = "";
         } else {
@@ -410,6 +415,9 @@ function GetPackageDeclaration(
             const devPackageToUse = isValidDevPackageName(localDevPackageMap, true) ? localDevPackageMap : devPackageName;
             const originalNamespace = getPublicPackageName(getPackageMappingByDevName(devPackageToUse).namespace);
             const namespace = getPublicPackageName(getPackageMappingByDevName(devPackageToUse).namespace, fullPath /*, fullPath*/);
+            if (fullPath.indexOf("nodeParticleBuildState") !== -1) {
+                console.log(`Replacing ${alias} with ${namespace}.${realClassName} in ${fullPath} for package ${devPackageToUse} (${originalNamespace})`);
+            }
             if (namespace !== defaultModuleName || originalNamespace !== namespace || alias !== realClassName) {
                 const matchRegex = new RegExp(`([ <])(${alias})([^\\w])`, "g");
                 if (exported) {

packages/dev/buildTools/src/generateDeclaration.ts

@@ -16,6 +16,7 @@ export type DevPackageName =
     | "node-editor"
     | "node-geometry-editor"
     | "node-render-graph-editor"
+    | "node-particle-editor"
     | "gui-editor"
     | "accessibility"
     | "viewer"
@@ -34,6 +35,7 @@ export type UMDPackageName =
     | "babylonjs-node-editor"
     | "babylonjs-node-geometry-editor"
     | "babylonjs-node-render-graph-editor"
+    | "babylonjs-node-particle-editor"
     | "babylonjs-gui-editor"
     | "babylonjs-accessibility"
     | "babylonjs-viewer"
@@ -53,6 +55,7 @@ export type NamespacePackageName =
     | "BABYLON.NodeEditor"
     | "BABYLON.NodeGeometryEditor"
     | "BABYLON.NodeRenderGraphEditor"
+    | "BABYLON.NodeParticleEditor"
     | "BABYLON.GuiEditor"
     | "BABYLON.Accessibility"
     | "ADDONS"
@@ -64,6 +67,7 @@ export type NamespacePackageName =
     | "BABYLON.NodeEditor.SharedUIComponents"
     | "BABYLON.NodeGeometryEditor.SharedUIComponents"
     | "BABYLON.NodeRenderGraphEditor.SharedUIComponents"
+    | "BABYLON.NodeParticleEditor.SharedUIComponents"
     | "BABYLON.GuiEditor.SharedUIComponents";
 export type ES6PackageName =
     | "@babylonjs/core"
@@ -76,6 +80,7 @@ export type ES6PackageName =
     | "@babylonjs/node-editor"
     | "@babylonjs/node-geometry-editor"
     | "@babylonjs/node-render-graph-editor"
+    | "@babylonjs/node-particle-editor"
     | "@babylonjs/gui-editor"
     | "@babylonjs/accessibility"
     | "@babylonjs/post-processes"
@@ -127,6 +132,10 @@ export const umdPackageMapping: { [key in UMDPackageName]: { baseDir: string; ba
         baseDir: "nodeRenderGraphEditor",
         baseFilename: "babylon.nodeRenderGraphEditor",
     },
+    "babylonjs-node-particle-editor": {
+        baseDir: "nodeParticleEditor",
+        baseFilename: "babylon.nodeParticleEditor",
+    },
     "babylonjs-gui-editor": {
         baseDir: "guiEditor",
         baseFilename: "babylon.guiEditor",
@@ -198,6 +207,12 @@ const packageMapping: {
             // }
             return "babylonjs-node-render-graph-editor";
         },
+        "node-particle-editor": (_filePath?: string) => {
+            // if (filePath && filePath.indexOf("sharedUiComponents") !== -1) {
+            //     return "babylonjs-shared-ui-components";
+            // }
+            return "babylonjs-node-particle-editor";
+        },
         "gui-editor": (_filePath?: string) => {
             // if (filePath && filePath.indexOf("sharedUiComponents") !== -1) {
             //     return "babylonjs-shared-ui-components";
@@ -223,6 +238,7 @@ const packageMapping: {
         "node-editor": "@babylonjs/node-editor",
         "node-geometry-editor": "@babylonjs/node-geometry-editor",
         "node-render-graph-editor": "@babylonjs/node-render-graph-editor",
+        "node-particle-editor": "@babylonjs/node-particle-editor",
         "gui-editor": "@babylonjs/gui-editor",
         accessibility: "@babylonjs/accessibility",
         "post-processes": "@babylonjs/post-processes",
@@ -243,6 +259,7 @@ const packageMapping: {
         "node-editor": "@babylonjs/esm",
         "node-geometry-editor": "@babylonjs/esm",
         "node-render-graph-editor": "@babylonjs/esm",
+        "node-particle-editor": "@babylonjs/esm",
         "gui-editor": "@babylonjs/esm",
         accessibility: "@babylonjs/accessibility",
         "post-processes": "@babylonjs/esm",
@@ -335,6 +352,17 @@ const packageMapping: {
             }
             return "BABYLON.NodeRenderGraphEditor";
         },
+        "node-particle-editor": (filePath?: string) => {
+            if (filePath) {
+                if (filePath.includes("shared-ui-components/") || filePath.includes("/sharedUiComponents/")) {
+                    // was .endsWith
+                    return "BABYLON.NodeParticleEditor.SharedUIComponents";
+                } else if (filePath.includes("babylonjs-gltf2interface")) {
+                    return "BABYLON.GLTF2";
+                }
+            }
+            return "BABYLON.NodeParticleEditor";
+        },
         "gui-editor": (filePath?: string) => {
             if (filePath) {
                 if (filePath.includes("shared-ui-components/") || filePath.includes("/sharedUiComponents/")) {

packages/dev/buildTools/src/packageMapping.ts

@@ -22,6 +22,12 @@ export class CustomParticleEmitter implements IParticleEmitterType {
      */
     public particleDestinationGenerator: (index: number, particle: Nullable<Particle>, outDestination: Vector3) => void = () => {};
 
+    /**
+     * Gets or sets the direction generator that will create the initial direction of each particle.
+     *  * Index will be provided when used with GPU particle. Particle will be provided when used with CPU particles
+     */
+    public particleDirectionGenerator: (index: number, particle: Nullable<Particle>, outDestination: Vector3) => void = () => {};
+
     /**
      * Creates a new instance CustomParticleEmitter
      */
@@ -37,7 +43,9 @@ export class CustomParticleEmitter implements IParticleEmitterType {
     public startDirectionFunction(worldMatrix: Matrix, directionToUpdate: Vector3, particle: Particle, isLocal: boolean): void {
         const tmpVector = TmpVectors.Vector3[0];
 
-        if (this.particleDestinationGenerator) {
+        if (this.particleDirectionGenerator) {
+            this.particleDirectionGenerator(-1, particle, tmpVector);
+        } else if (this.particleDestinationGenerator) {
             this.particleDestinationGenerator(-1, particle, tmpVector);
 
             // Get direction

packages/dev/core/src/Particles/EmitterTypes/customParticleEmitter.ts

@@ -332,6 +332,10 @@ export interface IParticleSystem {
      * An event triggered when the system is stopped
      */
     onStoppedObservable: Observable<IParticleSystem>;
+    /**
+     * An event triggered when the system is started
+     */
+    onStartedObservable: Observable<IParticleSystem>;
     /**
      * Clones the particle system.
      * @param name The name of the cloned object