ParticleHelper and JSON

I would like to use my own JSON with the ParticleHelper. In the helper documentation I read “Each effect can be described using a json file”.
But it seems there is no input or function to set its own JSON : Babylon.js Documentation

So my question is : Can we use a custom JSON file with the ParticleHelper and if yes how?

By the way I just discovered there is the ParticleHelper in BABYLON and I love it! Very powerful!

1 Like

Hi Pichy! Um… Babylon.js Documentation (playground search)

Just check one of those MANY… umm… oh, no returns in PG search for BaseAssetsUrl. hmm.

Maybe this line is enough… Babylon.js/particleHelper.ts at master · BabylonJS/Babylon.js · GitHub

That’s all I could dig-up… so far. I’ll keep sniffing-around. Teach us what you learn about it, ok? thx.

I’ll take a link to those particleHelper docs… if you have it handy (thx). I had problems finding them.

Stay tuned for actual USEFUL comments, from others, soon. :slight_smile:

Hello @Wingnut,

Yep as we can see in the particleHelper file, it seems there is no way yet to use its own JSON.
Eventually I ended up using a one simple particle system like this one :
And the explosion effect with this is enough for my needs.

Thanks for trying! :wink:

Hi P. I haven’t found the particleHelper file, yet, have I?


var sun = new BABYLON.ParticleHelper.CreateAsync("sun", scene).then(function(set) {

I don’t think first parameter “sun” is a particleSystem name. It is the name-of a TYPE of particleSet. (I think)

If you change line 139 first parameter… from “sun” to “fire”, then reRUN, the particleSet changes.

Line 137 reports BABYLON.ParticleHelper.BaseAssetsUrl = “”;


Be sure to notice the /systems/ in this line.

Sooooo… publish your particleSet.json at https://yourBaseUrl/systems/myPSet.json, and then set BABYLON.ParticleHelper.BaseAssetsUrl = “https://yourBaseUrl” before you execute the CreateAsync call:

var myP = new BABYLON.ParticleHelper.CreateAsync("myPSet", scene).then(function(set) {

Have you tried that? Just curious. I think it will work. I’m not qualified for this, but, at least it is a reply. :slight_smile:

I said you find the particleHelper file here: Babylon.js/particleHelper.ts at master · BabylonJS/Babylon.js · GitHub

And you can find the JSON files used in the particleHelper here: Babylon.js/assets/particles/systems at master · BabylonJS/Babylon.js · GitHub

I think your suggestion would work too.
But in my case, I need to change the particles colour at any time and it would mean creating a JSON file for any colour which is not very effective. That is why I wanted to have a JSON input in the particleHelper constructor so that I could simply update one colour directly in my Javascript code.
Eventually I choose to use a simple particleSystem for now and the result is already great!


Ahh. I thought you might have found a tutorial specifically-about particleHelpers. Sorry… I got confused, there.

Yeah, there’s some nice pre-fabs in the json folder. Someone has been busy. I could imagine a (physics) cannonball shot… that uses smoke and fire during flight, and explosion upon impact. Might look cooool.

Okay, I’m glad you found a good solution. Be well… nice exploring with you. Good luck on your projects!

Hey team!!
SO :slight_smile: by default the particle helper will pick the assets from here: Babylon.js/assets/particles/systems at master · BabylonJS/Babylon.js · GitHub. For instance when you use “sun” as the particle name it will pick this json:
Babylon.js/sun.json at master · BabylonJS/Babylon.js · GitHub

You can automatically generate a new JSON but configuring your particles systems and then call Babylon.js Documentation

As @Wingnut said you can change where the jsons are located by using BABYLON.ParticleHelper.BaseAssetsUrl

Doc: Use the Particle Helper - Babylon.js Documentation (which can greatly be improved by what I’ve just said here. So if anyone want to help :))

Thanks @Deltakosh ! Docs updated.

I couldn’t get the MD table to render… in GitHub ‘preview changes’ mode. I hope I didn’t accidentally damage your table, DK.

I also hope I didn’t say anything wrong. It has been a LONG time since I last edited a doc. I forgot how to do editing stuff. :confused:

I should have tried an exportSet in a playground… so I could provide a code/PG example in the docs.

The pre-made JSON sets seem to have multiple particleSystems defined.

Perhaps: var mySet = BABYLON.ParticleHelper.ExportSet( [includedPS1, includedPS2, includedPS3] ); ??

I guess that’s probably the correct syntax, or close. :open_mouth:

1 Like

Everything fine :wink:

This is correct :slight_smile:

Thankya! I left-out a closing parentheses… I see. Oh well. :slight_smile:

Ok, so, let’s go off-topic even further.

Remember WAY BACK when this worked:

NOP lines 83-85 and it will work again.

Yep, there’s our three famous ‘custom particle functions’. Is that feature dead, in newer BJS versions?

If NOT dead/obsolete, then… what will an ExportSet do with those? Will it include the custom functions… in the exported set?

Bet not. :slight_smile: Is this the end of “sparticles”? (sparticles = a goofy ‘sparkly particle’ custom update method that I got addicted-to.)

Update: Ahhh, we still have sparticles. YAY! Phew. I bet they quit sparkling after ExportSet.

And even worse… the pg#13 sparticles customUpdate function (line 63)… uses two auxiliary functions… randNumber() and doubleColor4(). ExportSet would need to be REAL smart… to “know” that those aux functions also need including in the json particleSet.

customUpdate(), randNumber(), and doubleColor4()… all need to be put in the set. OMG. torture! :slight_smile: This should work
Pinging @sebavan to check if this is modules related

my_startDirectionFunction() is the func causing the problem.

It is an old old PG… probably some outdated code in there. Perhaps wrong params or not enough params, or an error in line 24.


Yeah, startDirectionFunction() is a 3-param function these days, not a 4-parameter. emitPower, the first param, is obsolete, apparently.

1 Like

Yup It was part of the big particle enhancements that happened for 3.3.

1 Like

Wow! ExportSet-included particleSystems… DO carry-along their custom startPosition, startDirection, and update functions! COOOOOOOL!

In other words… umm… aw hell, I’ll use a playground:

Lines 84-86 show that ps1 uses 3 custom functions.

In line 132, I create (export) a particleSet called mySet, and dump its systems[0] to console in line 133.

You can drill the particleSet object yourself, but most important… lines 134-136 prove that our three custom functions… ARE included in the particleSet, and would travel-along fine WITH the particleSet. NICE!

Let’s take a look at one more thing… in the #21 playground. Look at lines 20-34, where two of my custom funcs are located. Notice that I call a ‘helper function’ called randomNumber()… often (line 61).

This function will NOT travel-along-with (be included-in) the exported mySet particleSet, because it is not a ‘member’ of particleSystem ps1.

So, let’s MAKE IT be a member of ps1, and see what happens.

Lines 72-80… we wait for ps1 to be created, and then add ps1.randomNumber function as a member.

Lines 20-34… we change all occurrences of randomNumber… to this.randomNumber.

Line 138 now proves that ps1.randomNumber is being included in mySet, and all is working perfectly.

Let’s take it a step further. This “overloading” of the particleSystem(s) that are included within particleSets… can have other handy uses. pg #23

In PG #23, I have added ANOTHER ps1 overload property at line 82 - Line 141 proves that the overload property is included in the mySet export. Sweet, huh? Yep!

BabylonJS has THE BEST cool-system inventors ANYWHERE, for sure! You guys ROCK!

BIG WARNING: I MIGHT be a fool. I might be examining a “ref” to ps1… when I do those console.log tests. IF that is the case, I am wrong about everything I have said… so far. In other words… when I do the console.logs of various ps1 properties, I might be examining the ACTUAL ps1 that resides in memory, and NOT the ps1 values that reside within the particleSet. (Wingy crosses fingers.) I am still quite inexperienced with the object inspector in my Firefox ESR (no Firebug).

I fear this IS the case, and that particleSets currently do not ‘honor’ custom particle funcs or property overloads. But hey, that’s why I’m talking. Experts are nearby… they’ll set me straight or teach me about future possibilities/plans to honor custom funcs within particleSets.

Readers are already thinking about the “tornado” particleSet, aren’t you? In other threads, we have been speaking about path3d’s. A tornado is NOT a simple cone emitter. Tornadoes do snake-like belly-dancer bends and swerves… which might dictate that a vertical path3D is used in the center of the effect, and the path is deformed from time-to-time.

Swarming. Weighted particles. Not an easy particle-emission rig/armature. The tornado will require a custom update function like nobody has EVER seen before. :open_mouth: Party on! Sorry for the long-winded yapping.

1 Like

Love this one:

1 Like

Totaly agree, really nice playground!

I love what the new particle update in 3.3.0 allow us to do! :wink:


Thx. Just goofin around. Probably should use ps1.metadata and not Rumor has it, the .metadata property is being installed on all sorts of things. :slight_smile:

This PG has only one custom function… myParticleUpdater at line 70… installed at line 133.

That custom func is also using the two overloaded helper funcs… ps1.doubleColor4() and ps1.randomNumber() - installed at lines 136-146. (yawn)

ps1.metadata is installed at line 149 (snore).

ParticleSet created at line 191 (slightly awake again)

Now let’s look at 202-204. See that?

CreateAsync(mySet, scene)

Wingnut tried to use an OBJECT variable in 1st param! It is supposed to be a string. The idiot thought he could NOP line 183, and then createAsync() the mySet variable… and re-create ps1 and start it… THAT way.

But nooooooo… the Gods of First Parameters “spake” upon me… “Thou shalst not put objects where strings should be”.

Obviously, they don’t know how important I am. :slight_smile:

Does anyone know if I can view mySet… as if it were already a JSON file? Do I need to serialize it, and then build some strange scrollerView panel or something? Help welcome, with that. Sorry for my JSON noobicity.

Hey Pichou! May I ask how you ended up using your own particle system?

For instance, if I am trying to simply customize or tweak the “sun” or “fire” presets, how would I do so?

Hi @Pattercat, welcome to the forum! Always great to see new people around here!

To answer your question I ended up using this particle system because it was enough for my need: (Press space to see the result)
You will see the building and ship explosions are using this exact particle system:
And so it was easy to custom it and change the color as I wanted.

For the sun and fire presets, I went deeper and came to this idea of changing the systems after it has been instantiated by the Particle Helper. Check line 140:
That way you can customize those presets with the color you want!

The not cool part is that you have to check to JSON file in order to see what gradient you must be removed and added from every system: Babylon.js/sun.json at master · BabylonJS/Babylon.js · GitHub

I hope to have answer your question.
I wish a wonderful day and a great tour on this forum :wink: