Add Solid Particle System (SPS) Support to Node Particle Editor #17320

Soullnik · 2025-10-20T21:10:52Z

Overview

This PR integrates Babylon.js Solid Particle System (SPS) into the Node Particle Editor, enabling users to create and manage SPS-based particle systems through a visual node graph interface. This brings the power of SPS (instanced rendering, shape-based particles) to the node-based workflow.

Important Note

This is a proposal for discussion and requires future refactoring. The current implementation is created for community discussion as I don't have sufficient knowledge of the node ecosystem architecture. The goal is to gather feedback on the best approach for integrating SPS into the existing node graph system.

Features Added

1. SPS Node Graph Integration

SPSSystemBlock: Main SPS system node for managing particle systems
SPSCreateBlock: Node for defining particle shapes and counts
SPSInitBlock: Node for particle initialization logic
SPSUpdateBlock: Node for particle update logic
SPSMeshSourceBlock: Node for mesh shape sources (Box, Sphere, etc.)

Technical Implementation

Core SPS Blocks:

// SPSSystemBlock - Main SPS system
public createSystem(state: NodeParticleBuildState): SolidParticleSystem

// SPSCreateBlock - Particle shape definition
public _build(state: NodeParticleBuildState): ISPSCreateData

// SPSInitBlock - Particle initialization
public _build(state: NodeParticleBuildState): SPSUpdateData

// SPSUpdateBlock - Particle updating
public _build(state: NodeParticleBuildState): SPSUpdateData

// SPSMeshSourceBlock - Mesh shape sources
public _build(state: NodeParticleBuildState): Mesh

Usage Example

// Create SPS system with multiple particle types
const spsSystem = new SPSSystemBlock("SPS System");
const createBox = new SPSCreateBlock("Create Box Particles");
const createSphere = new SPSCreateBlock("Create Sphere Particles");

// Connect multiple particle sources
createBox.solidParticle.connectTo(spsSystem.solidParticle);
createSphere.solidParticle.connectTo(spsSystem.solidParticle);

// Add mesh sources
const boxMesh = new SPSMeshSourceBlock("Box Mesh");
const sphereMesh = new SPSMeshSourceBlock("Sphere Mesh");
boxMesh.mesh.connectTo(createBox.mesh);
sphereMesh.mesh.connectTo(createSphere.mesh);

Current Challenges & Seeking Solutions

1. Multiple Connection Architecture (Incomplete)

Challenge: SPS requires multiple SPSCreateBlock inputs to one SPSSystemBlock.
Current Implementation:

Added allowMultipleConnections flag
Implemented connectedPoints array to store multiple connections
Modified NodeParticleBlock.build() to traverse all connected blocks
Issues:
Visual representation of multiple connections is not fully working
Graph editor doesn't properly display all connections
Question: What's the best architectural approach for handling multiple input connections in the node graph system?

Questions

Multiple Connections Architecture: What's the best pattern for handling multiple inputs in the node graph system?
SPS Integration: Are there any SPS-specific considerations we should be aware of the implementation?
Future Extensibility: How can we make this system more extensible for other particle system?

The main goal is to bring SPS capabilities to the node-based workflow. Looking forward to feedback on the integration approach and suggestions for better solutions to the identified challenges!

This commit introduces several new blocks for the Solid Particle System (SPS) in the Node Particle Editor, enhancing the particle system capabilities. The following blocks have been added: - SPSMeshSourceBlock: Defines the mesh shape for SPS. - SPSCreateBlock: Creates an SPS with a base mesh. - SPSSystemBlock: Configures the Solid Particle System. - SPSInitParticleBlock: Initializes the update function for a specified range of particles. - SPSUpdatePositionBlock: Updates the position of particles. - SPSUpdateRotationBlock: Updates the rotation of particles. - SPSUpdateScalingBlock: Updates the scaling of particles. - SPSUpdateColorBlock: Updates the color of particles. - SPSUpdateVelocityBlock: Updates the velocity of particles. - SPSPhysicsBlock: Applies physics to particles. - SPSGetParticlePropertyBlock: Retrieves properties of particles. Additionally, the NodeParticleBuildState has been updated to include SPS context and delta time for physics calculations. The editor interface has been modified to accommodate these new blocks, improving the overall functionality and user experience of the particle system editor

This commit introduces several new blocks for the Solid Particle System (SPS) in the Node Particle Editor, improving the functionality and flexibility of the particle system. The following blocks have been added: - SPSMeshSourceBlock: Defines the mesh shape for SPS. - SPSCreateBlock: Creates an SPS with a base mesh. - SPSSystemBlock: Configures the Solid Particle System. - SPSInitBlock: Initializes particles with configurable parameters (position, velocity, color, etc.). - SPSUpdateBlock: Generates update functions for particle properties. Additionally, the connection point types have been updated to reflect the new Solid Particle System structure, and the editor interface has been modified to accommodate these enhancements, improving the overall user experience.

This commit enhances the Solid Particle System by ensuring that the mesh is built and particles are initialized before rendering. The `buildMesh` and `initParticles` methods are now called during the setup process, improving the overall functionality. Additionally, the cleanup process has been updated to properly dispose of the mesh when the system is stopped, ensuring better resource management.

…SystemSet This commit modifies the initialization of the Node Particle System by changing the method from `setToDefaultSPS` to `setToDefault`, aligning it with the updated API and improving consistency in the codebase.

…icleBlock This commit introduces an `isStarted` flag to the Solid Particle System to track its initialization state, preventing unnecessary operations when stopping the system. Additionally, the NodeParticleBlock has been updated to allow multiple connections for input points, improving flexibility. The SPSUpdateBlock has been integrated into various components, enhancing the Node Particle Editor's functionality and user experience.

This commit adds a new internal property `_connectedPoints` to the `NodeParticleConnectionPoint` class, allowing it to maintain multiple connections. The connection and disconnection logic has been updated to handle multiple connections appropriately. Additionally, a new getter method `connectedPoints` has been introduced to retrieve the array of connected points. In the `GraphCanvasComponent`, the connection check has been refined to consider the `allowMultipleConnections` property, improving the connection management logic.

…functionality This commit enhances the Solid Particle System by streamlining the start and stop methods, ensuring proper initialization and cleanup of particles. The ISPSData interface has been updated to enforce required properties for SPS update data, while the SPSCreateBlock now defaults the particle count to 1. Additionally, the Node Particle Editor has been updated to introduce a mode selection feature, allowing users to switch between Standard and SPS modes, improving usability and flexibility in particle system management.

…ate logic This commit simplifies the particle initialization and update processes within the SPSSystemBlock. The logic for creating and managing connected points has been optimized, allowing for a more efficient retrieval of connected values. Additionally, the updateParticle method has been enhanced to directly utilize shape IDs for better performance and clarity. These changes improve the overall functionality and maintainability of the Solid Particle System.

…isposal and multi-connection support This commit updates the SolidParticleSystem to ensure proper disposal of the mesh when stopping the system, enhancing resource management. Additionally, the NodeParticleSystemSet has been modified to support multiple connections for input points, improving flexibility in particle system configurations. A new method, setToDefaultSPS, has been introduced to streamline the setup of Solid Particle Systems, further enhancing usability and functionality.

bjsplat · 2025-10-20T21:12:33Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

deltakosh · 2025-10-20T21:22:22Z

Multiple Connections Architecture: Look at what I did for the GradientBlock
Future Extensibility: Not sure to follow. What are the other particle system? Note that NPE is based on the premise that the update loop is CPU side.

packages/dev/sharedUiComponents/src/nodeGraphSystem/interfaces/portData.ts

bjsplat · 2025-10-20T21:36:07Z

Building or testing the sandbox has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17320/merge/testResults/

bjsplat · 2025-10-20T21:37:47Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17320/merge/testResults/

bjsplat · 2025-10-20T21:41:19Z

Graph tools CI has failed you can find the test results at:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17320/merge/testResults/

deltakosh · 2025-10-20T21:44:26Z

Question for you: How does it integrate with current update nodes that take a particle as parameter?

deltakosh · 2025-10-21T01:39:07Z

Ok @Soullnik the more I think about it, the more I struggle to see it working. My main problem is that we cannot share anything with the main blocks. Which blocks will work in both mode? I feel like we are stuffing spa in but it makes not a lot of sense.

deltakosh · 2025-10-21T01:58:44Z

Lol sorry I'm thinking too much lol. I think all the nodes working on base types will work still. But all nodes working on particles needs to be hidden. Then it means we need to provide an update node for sps. Same way: update position, etc...

Soullnik · 2025-10-21T07:46:13Z

Multiple Connections Architecture: Look at what I did for the GradientBlock

Future Extensibility: Not sure to follow. What are the other particle system? Note that NPE is based on the premise that the update loop is CPU side.

i will check gradientBlock

The second question was about architecture - I had to modify NodeParticleSystemSet to support SPS:

private _systemBlocks: (SystemBlock | SPSSystemBlock)[] = [];

This union type works for now, but if we add more particle system types, we'd need:

private _systemBlocks: (SystemBlock | SPSSystemBlock | GPUSystemBlock)[] = [];

…y connection logic This commit streamlines the connection management within the NodeParticleBlock and NodeParticleConnectionPoint classes by removing the support for multiple connections. The `registerInput` method has been simplified, and the logic for handling connected points has been optimized. Additionally, the GraphCanvasComponent has been updated to reflect these changes, enhancing the overall clarity and maintainability of the codebase.

…agement This commit introduces the `unregisterInput` method to the NodeParticleBlock class, allowing for the dynamic removal of input connections. The method handles disconnection and notifies observers of input changes. Additionally, it removes commented-out code from the SPSCreateBlock and refines the input management logic in the SPSSystemBlock, enhancing overall clarity and maintainability of the particle system components.

bjsplat · 2025-10-21T12:51:55Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

…terface to simplify connection management. This change aligns with recent refactoring efforts to streamline connection logic across the node graph system.

bjsplat · 2025-10-21T12:53:47Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

deltakosh · 2025-10-21T15:24:03Z

Multiple Connections Architecture: Look at what I did for the GradientBlock

Future Extensibility: Not sure to follow. What are the other particle system? Note that NPE is based on the premise that the update loop is CPU side.

i will check gradientBlock

The second question was about architecture - I had to modify NodeParticleSystemSet to support SPS:
private _systemBlocks: (SystemBlock | SPSSystemBlock)[] = [];
This union type works for now, but if we add more particle system types, we'd need:
private _systemBlocks: (SystemBlock | SPSSystemBlock | GPUSystemBlock)[] = [];

I think that works. Other option will be to have a NodeParticleSystemSet

…zation and update logic This commit removes the `isStarted` flag from the SolidParticleSystem, streamlining the start and stop methods. The ISPSUpdateData interface has been updated to make properties optional, enhancing flexibility in particle updates. Additionally, the SPSInitBlock and SPSUpdateBlock have been refactored to only assign update functions when the corresponding properties are connected, optimizing performance. The SPSSystemBlock has been improved to manage the SolidParticleSystem lifecycle more effectively, ensuring proper disposal and initialization of particles.

bjsplat · 2025-10-28T10:04:08Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

Soullnik · 2025-10-29T07:14:00Z

@deltakosh I’m running into an issue disposing previously created SPS instances. I see that _build inside SPSCreateBlock is called twice for different scenes. What’s the correct way to dispose the previouse SPS associated with the scene?

…ck and enhance particle configuration This commit introduces the new SPSParticleConfigBlock for configuring particle parameters such as mesh, count, material, and initialization/update blocks. The SPSCreateBlock has been refactored to utilize this new block, streamlining the creation of particles. Additionally, the ISPSData interface has been updated to reflect the new configuration structure, and various blocks have been adjusted to improve their connection logic and overall functionality within the particle system.

- Added support for the `SolidParticleConfig` connection point type in the `BlockTools` class, enhancing the color mapping and type detection logic. - Removed obsolete connection point types (`Camera` and `Function`) to streamline the code and improve clarity. These changes improve the organization and maintainability of the node particle editor's block tools.

bjsplat · 2025-11-26T07:35:20Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-11-26T07:50:48Z

Snapshot stored with reference name:
refs/pull/17320/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/17320/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/17320/merge
https://gui.babylonjs.com/?snapshot=refs/pull/17320/merge
https://nme.babylonjs.com/?snapshot=refs/pull/17320/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/17320/merge#BCU1XR#0

bjsplat · 2025-11-26T07:52:55Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17320/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17320/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17320/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/17320/merge/guiEditor/

bjsplat · 2025-11-26T07:55:19Z

Interaction tests

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/testResults/interactionplaywright/index.html

bjsplat · 2025-11-26T08:01:20Z

Devhost visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/testResults/devhostplaywright/index.html

bjsplat · 2025-11-26T08:04:50Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-11-26T08:07:58Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17320/merge/testResults/webgpuplaywright/index.html

Soullnik · 2025-11-26T14:51:10Z

@deltakosh I think I have completed the basic implementation

deltakosh · 2025-12-01T16:22:49Z

Hey there! just fyi that I'm out for a month so please bear with me and I'll review your updates in jan! Thanks a lot for your patience.

In the meantime @VicenteCartas can help you in the interim

deltakosh · 2025-12-01T17:09:04Z

Ok a few comments:

Icons are off for the new types:

- Icons are not working for the particle type:

I'll add the rest in the code base review! We are getting there ;)

deltakosh · 2025-12-01T17:10:17Z

packages/dev/core/src/Particles/Node/Blocks/SolidParticle/createSolidParticleBlock.ts

+
+    public constructor(name: string) {
+        super(name);
+        this.registerInput(`config-${this._entryCount - 1}`, NodeParticleBlockConnectionPointTypes.SolidParticleConfig);


Can we name it MergeBlock maybe? The neme seems off (like we already created the SPS)

deltakosh · 2025-12-01T17:12:25Z

packages/dev/core/src/Particles/Node/Blocks/SolidParticle/nodeMaterialSourceBlock.ts

+/**
+ * Block used to load a node material for SPS
+ */
+export class NodeMaterialSourceBlock extends NodeParticleBlock {


This should not be a block. This could be set by code but not in the editor. We only have things in the editor that we can fully configure. Here there is a texture property but what if my nme has 5 textures?

This block should be removed

deltakosh · 2025-12-01T17:13:41Z

packages/dev/core/src/Particles/Node/Blocks/SolidParticle/updateSolidParticleBlock.ts

+/**
+ * Block used to generate update function for SPS particles
+ */
+export class UpdateSolidParticleBlock extends NodeParticleBlock {


I would like to have some kind of parity with the particle mode. So instead of one big chunky Update all block I'd like to have one update per feature (like update position, update velocity, etc..)

deltakosh · 2025-12-01T17:14:50Z

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

                case NodeParticleContextualSources.SpriteCellEnd:
                case NodeParticleContextualSources.SpriteCellStart:
                case NodeParticleContextualSources.SpriteCellIndex:
+                case NodeParticleContextualSources.SolidParticleIndex:


We may need more contextuals like velocity, scaling, rotation.

deltakosh · 2025-12-01T17:15:20Z

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

+    /** Mesh */
+    Mesh = 0x8000,
+    /** Material */
+    Material = 0x10000,


Material should be removed. For mesh icon probably reuse the one from NGE :)

deltakosh · 2025-12-01T17:15:49Z

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

+    /** Solid Particle */
+    SolidParticle = 0x2000,
+    /** Solid Particle Config */
+    SolidParticleConfig = 0x4000,


I would remove config here. The only thing that travels is the SolidParticle

deltakosh · 2025-12-01T17:16:05Z

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

    /** Direction Scale */
    DirectionScale = 0x0020,
+    /** Solid Particle Index */
+    SolidParticleIndex = 0x0021,


See earlier, we need more contextuals

deltakosh · 2025-12-01T17:17:15Z

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

            case NodeParticleContextualSources.Lifetime:
                return this.particleContext.lifeTime;
            case NodeParticleContextualSources.Angle:
+                if (this.particleContext instanceof SolidParticle) {


maybe have a boolean at the beginning of the file to avoid checking all the time?

deltakosh · 2025-12-01T17:18:46Z

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

    }

+    public setToDefaultSps() {
+        this.clear();


This one must be far simpler. The default cannot be 2 screens wide like now :)

It must be the bare minimum to get a moving SPS. Plus it forces import of too many blocks so size wise it is not ok

deltakosh · 2025-12-01T17:21:51Z

packages/tools/nodeParticleEditor/src/components/preview/previewManager.ts

        this._scene.ambientColor = new Color3(1, 1, 1);
        this._camera = new ArcRotateCamera("Camera", 0, 0.8, 4, Vector3.Zero(), this._scene);

+        const sunLight = new DirectionalLight("sun", new Vector3(-1, -1, -1), this._scene);


the total particles and update loop strings are not updated in the SPS mode

deltakosh · 2025-12-01T17:23:16Z

packages/tools/nodeParticleEditor/src/graphSystem/properties/genericNodePropertyComponent.tsx

                    );
                    break;
                }
+                case PropertyTypeForEdition.String: {


I think that if we remove nodematerial, there is no more need for string (Trying to keep things as simple as possible)

deltakosh · 2025-12-01T17:23:42Z

...ls/nodeParticleEditor/src/graphSystem/properties/nodeMaterialSourceNodePropertyComponent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";


This should be removed

VicenteCartas · 2025-12-01T20:58:01Z

I am now looking at this PR. Please ping me here if you have any questions.

Mikalai Lazitski added 9 commits October 10, 2025 19:53

deltakosh marked this pull request as draft October 20, 2025 21:22

deltakosh reviewed Oct 20, 2025

View reviewed changes

packages/dev/sharedUiComponents/src/nodeGraphSystem/interfaces/portData.ts Outdated Show resolved Hide resolved

Mikalai Lazitski added 2 commits October 21, 2025 11:24

Remove optional allowMultipleConnections property from IPortData in…

396662b

…terface to simplify connection management. This change aligns with recent refactoring efforts to streamline connection logic across the node graph system.

Soullnik marked this pull request as ready for review November 27, 2025 17:59

Soullnik requested a review from deltakosh November 29, 2025 20:29

sebavan marked this pull request as draft December 1, 2025 16:18

deltakosh requested a review from VicenteCartas December 1, 2025 16:59

deltakosh marked this pull request as ready for review December 1, 2025 17:03

deltakosh reviewed Dec 1, 2025

View reviewed changes

deltakosh marked this pull request as draft December 1, 2025 17:24

Add Solid Particle System (SPS) Support to Node Particle Editor #17320

Are you sure you want to change the base?

Add Solid Particle System (SPS) Support to Node Particle Editor #17320

Conversation

Soullnik commented Oct 20, 2025

Overview

Important Note

Features Added

1. SPS Node Graph Integration

Technical Implementation

Core SPS Blocks:

Usage Example

Current Challenges & Seeking Solutions

1. Multiple Connection Architecture (Incomplete)

Questions

Uh oh!

bjsplat commented Oct 20, 2025

Uh oh!

deltakosh commented Oct 20, 2025

Uh oh!

Uh oh!

bjsplat commented Oct 20, 2025

Uh oh!

bjsplat commented Oct 20, 2025

Uh oh!

bjsplat commented Oct 20, 2025

Uh oh!

deltakosh commented Oct 20, 2025

Uh oh!

deltakosh commented Oct 21, 2025

Uh oh!

deltakosh commented Oct 21, 2025

Uh oh!

Soullnik commented Oct 21, 2025

Uh oh!

bjsplat commented Oct 21, 2025

Uh oh!

bjsplat commented Oct 21, 2025

Uh oh!

deltakosh commented Oct 21, 2025

Uh oh!

bjsplat commented Oct 28, 2025

Uh oh!

Soullnik commented Oct 29, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

bjsplat commented Nov 26, 2025

Uh oh!

Soullnik commented Nov 26, 2025

Uh oh!

deltakosh commented Dec 1, 2025

Uh oh!

deltakosh commented Dec 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment