Particle Monkey Take 2

[Pryme8]

WEBGPU ONLY NO FALLBACK (YET)

So in the past I have dabbled with web GPU based particle systems, but this time I decided to just kind of wing it and play off the stuff I learned with the first time approaching this. Also with learning a bunch of things from Sprite Monkey Editor by Ape Aviary I was able to kind of come at this with a similar perspective.

Basically I have been hacking since late afternoon Friday and have come up with this… Yes I know there are probably bugs and it might not be the most efficient system yet buuuuuut introducing!

ParicleMonkey

ParticleMonkey

I have it hosted on a digital ocean thing right now but will have it all url masked later blah blah…

Anyways features, Im gonna let claude take the wheel on this part:

Tech stack: Vue 3 · TypeScript · Vite · Babylon.js 8 · WebGPU (WebGL 2 fallback) · Firebase




Core Renderer

GPU-accelerated compute shader particle simulation via WebGPU

Automatic fallback to WebGL 2 for unsupported browsers

Hundreds of thousands of particles with near-zero CPU overhead

Emitter & Particle Properties

Spawn rate, min/max lifetime, min/max scale, min/max velocity, gravity, min/max mass, min/max rotation angle

World space toggle (particles inherit emitter movement or stay fixed in world)

Emitter shapes: Box, Point, Sphere, Cone — each with position/rotation offsets and a live wireframe preview

Over-Lifetime Curves

Scale over Lifetime — multi-stop gradient with multiply or add blend mode

Color over Lifetime — RGBA stops

Rotation over Lifetime — multi-stop with multiply/add

Mass over Lifetime — multi-stop with multiply/add

Color gradient (spawn-time randomisation) with multiple RGBA stops

Texture & Sprite Sheet Support

Custom image textures (PNG, etc.) per emitter

Texture atlas with configurable cell size and atlas dimensions

Animated sprite sheet playback (cols, rows, start/end cell, frame rate, loop)

Multiply and Additive blend modes

Random or sequential texture pick modes

Timeline & Curve Editor

Per-system timeline with track lanes for each emitter

Playhead scrubbing, zoom/pan, ruler ticks

Finite (duration-based) and infinite playback modes with looping

Play/Stop transport controls

Full keyframe curve editor — drag knots, add/remove keyframes, multiple curve tool modes

Scene Hierarchy (Navigator)

Tree view of all Systems → Anchors → Emitters in DFS order

Add/remove/rename systems, anchors, and emitters inline

Collapsible hierarchy with parent-child relationships

Effectors (kill volumes, colliders) per system

Noise Mask Effectors

Noise types: Value, Perlin, Simplex, Cellular, Curl

World or local space

Animatable offset (X/Y/Z), scale, invert, and octave parameters

Event & Binding System

Fully typed event bus: system:start/end, emitter:start/end, effector:start/end, particle:spawn/die, particle:killed, particle:bounce

Spawn bindings (⚡) — wire any particle event to trigger another emitter, with configurable trigger conditions

Property Tracks (Keyframe Animation)

Animate any emitter or anchor property over time using keyframe curves

Curves live directly on track/anchor definitions and are serialised with the effect

Community & Sharing

One-click Publish — serialises the full effect (PMX/PSX JSON format), uploads textures to Firebase Storage, writes metadata to Firestore

Name, description, and tags on publish

Community gallery on the landing page — paginated grid sortable by Newest, Most Liked, Most Downloaded, Most Viewed

Viewer page — standalone fullscreen player that restores the author's exact camera framing

Like, download, and comment on any published effect

Fork — open any community effect directly into the editor as a new copy

Firebase Authentication (sign up / log in)

User profile page

Author and admin delete controls

Ok now that we have that AI garble out of the way, effectively its an editor to make cool particle systems there is a bug with alpha as denoted by this forum thread: Custom GPU Particle System Cant use Alpha? - #2 by Pryme8

But other than that and some quirks its pretty nifty.

So you have all sorts of Effectors and Anchors and Events and even a Animation and Strip editor!

Most properties can all be animated and timed.

Oh and did I mention exports we have exports. So there are two file types pmx and psx one is for whole projects one is for singular effects but moving on.

Another cool feature is the commmmunity… yeah you can publish your effects with an entire attribution chain if someone uses your effect its pretty rad.

The big bummer in the room is I have not publish the runtime packages for this yet, you gotta wait. Eventually you will be able to export the entire particle package, do an npm install and load it up into your game with a simple parsing interface and BAM. All these cool particle systems and textures and events you can subscribe to for in game responses… its honestly gonna be the bees knees.

So yeah…. Check it out!

Oh wait wait oh yeah.. I should probably give some instructions…. so first Hierarchy.

You got this thing where you can spawn new emitters, systems, bindings and anchors. Just kinda like mess around with it. (The event system is really cool you can spawn other systems on particle deaths or respond to a ton of things)

Second you got a props panel:

this thing should update for what you have selected and you can edit all the default values of things its pretty sweet.

Next we got the timeline editor:

There are strips and stuff you can use to say when certain things have effects and such, oh and zoom into the timline and pan things like that but waaait there is more

double click on a strip and you get a curve editor to set keyframes an animate all sort of nifty values for each thing. If you are on the select tool and double click an keyframe you can input values directly pro tip.

Anyways there are tons more things to discover buuuuut Ill make tutorial videos for that if people actually seem interested.

So the moral of this story, is I’m paying for this server… you are welcome. Hopefully this is a valid rending technique and we can get a whole library of cool community effects for people to use in their projects. Even if not, then dont matter… I got a cool particle system and editor for my TTCG that Im working on (Tactical Trading Card Game). and it needed (did not need) it… so yeah take that.

[Pryme8]

Ok added some new cool stuff.

Sub Emitters! You can instead of emit particles you can emit emitters that behave in the same manor as a particle but its a spawning system itself. (This is done by GPU buffer readback)

Emitter Velocity Inheritance. You can now toggle the emitter to depart its angular and linear velocity to the particles when they spawn!

Burst Mode emitters, Instead of emit over time at a rate you can do a whole load all at once!

Sphere emitter place on surface and inheriting the velocity from its placement normal scaled!

Precache user overrides, sometimes the auto calculations for precaching assets goes nuts so you have the option to set it to specific values to match your specific situation.

So now we have all sorts of fancy tools to make particle systems. Once the alpha bug is worked out this thing is going to be a beast,

I’m no particle artist so it would be cool if some VFX inclined users could start making some cool effects. You can sign up with your google account right now.

There is a plan on releasing the runtime libraries is very soon because I need it for the game that’s in the works.

Yes I’m sure there are some bugs still but if users start posting screenshots of adverse behavior and any console errors (its should be stable so I have not seen any errors yet) then ill address them and make sure this is something worth using.

oh and also http://particlemonkey.com redirect to the host now!

[AlitarSemiramis]

Cool project! (and the Sprite Editor too!). Always happy to see people doing projects with particles and sprites

[Soullnik]

Very cool, I’m also implementing an effect-editor for BJSEditor Effect editor by Soullnik · Pull Request #755 · BabylonJS/Editor · GitHub. Do you plan to implement effects with solid particles, since a very large number of effects are created using two techniques?

[Pryme8]

yeah solid particles are next!

I really wanted the events and sub spawners all hashed out first which they are working well (still some quirks and I need to do an optimization pass).

But as of now you can spawn both particles or emitters from an emitter and both of those are effected by the same effector stack so Id assume once its solid particles it will be the same but ill just have to do AABB on some an overlapping sphere stuff for when they are 3d meshes and not just a point.

You can animate the different values on the effectors and parent them in different systems or as sub effectors and things so its pretty powerful with what we got now, I could probably come up with some other ones too like a flow attractor or something.

This was only started this on Friday and just did a whole weekend jam session on it so I’m sure there are things that are missing and need to be refined. Also need to do the webGL fallback at some point.

[Pryme8]

Just pushed the Alpha channel fix should deploy pretty quick.

[Pryme8]

During my lunch break today I was able to deploy the updates for gif previews and exporting. A demos page with examples of the runtime hooks and some fixes to the system including updates to the vortex effector.

[Pryme8]

@Soullnik I added solid particles for you! Basically a GPU readback gets associated to a thin Instance of the mesh and it just gets treated like a particle that way all physics and timings are all still not hitting the CPU.

So you can upload a glb and it assumes that the very first child of the root transform is the geometry you are including. There is no Collison changes for the physics involved but you can at least link into the custom shader for it and set specific shader values its pretty dope. Ive also done some refinements and fixed up how the community files are stored.

It would be really cool to see other people trying to make effects. If there are some questions about how to use the interface I encourage people to ask Ill write up documentation and tutorials!

In the mean time here is the first effect I made with solid partiles.

Now its to the point now that this is stable and has all the features I need to use it in my games that have been needing more robust particles.

I have a more generalized project editor that is in the works that this will tie into. Basically this is just going to be a plugin in a larger eco system.

[Soullnik]

There are several aspects of the UI that could be improved (this is purely my opinion).

1. Create a behavior section where you can add color over time, etc., so as not to clutter the interface with behaviors the user doesn’t use.
2. Add the ability to select a specific mesh from the loaded GLB that we want to use in solid particles.
3. The ability to pause the animation and manually navigate through the animation frames.

[Pryme8]

I like the first suggestion for sure good idea.

The second one should not be to hard to implement as well.

Now that timeline request though is a doozy, it would require me to make the entire system determistic which is possible but quite the lift. That probably won’t happen for some time. I need to do the webGL fallback first probably.

[Soullnik]

I also didn’t quite understand how to use saved effects in Babylon. Will you provide some kind of loader or manager for them in the future?

[Pryme8]

Yessir there is a runtime loader for it that I need to publish the npm link for and I have demos of how to use the system, link into events, spawn new instances and control properties through script.

I’m out of town this weekend or id publish it today for you. When I get back to town I’ll get you that info.

Also make sure you don’t lean too heavy into this unless you want webGPU to be a requirement for now. I’m not chomping at the bit to do backwards compatibility on this.