(CPU) ParticleSystem with custom fragmentshader


I would like to assign a custom fragmentshader to a ParticleSystem with animation sheet enabled.

According to the documentation ( Customizing Particles | Babylon.js Documentation ) I have to create an effect via Engine.createEffectForParticles() and provide the effect to the ParticleSystem constructor.

This successfully assigns the fragment shader to the particle system but the vertex shader doesn’t perform the uv calculation for the animation sheet.

Now the Engine.createEffectForParticles() says:

“Please note that some parameters like animation sheets … not supported in this configuration, except if you pass the particle system for which you want to create a custom effect in the last parameter”

Unfortunately the result is the same, the custom fragment shader is executed but the vertex shader still doesn’t setup the uvs correctly. Here is what I did:

let effect = engine.createEffectForParticles(“myeffect”,
, // uniforms
, // samplers
“”. // define string,
null, // fallbacks
null, // on compiled,
null, // on error



cc @Evgeni_Popov @sebavan

hey @HelmutB can you provide a repro in the playground ? would be really helpfull to help you.

Hi. We will transfer an example to PG.
As atm we need to use babylon version 5.0.0, can you let us know if there have been any changes regarding this issue/particles/shader in the newer versions?
Just in case if need to update the version, that is important to know.

Best. Werner

Hello sebavan,

Here is the playground without custom shader, where everything is working as expected:

With effect applied after creating the particle system (the particle system goes into the createEffectForParticles() method):

Now the other way around, the effect is created first and passed to the constructor of the ParticleSystem:

Looking at the captures from SpectorJS, it seems that only the non-effect version of the particle system uses the correct vertex shader when the animation sheet is enabled.
Otherwise a vertex shader which doesn’t perform the correct uv calculation is used.

Thank you for looking at that

Will be fixed by Fix ANIMATESHEET for custom particle effect by sebavan · Pull Request #13533 · BabylonJS/Babylon.js · GitHub

1 Like

Hello sebavan,

thanks for the quick reaction.

Adding the ‘#define ANIMATESHEET’ to the define string parameter to createEffectForParticles() solves the issue also in the older babylon version we are using :slight_smile:

Hello, and I found a small workaround recently while having the same issue.

  const defines: string[] = [];
  particleSystem.fillDefines(defines, particleSystem.blendMode);

  const effect = engine.createEffectForParticles(

  particleSystem.setCustomEffect(effect, particleSystem.blendMode);

Hello rdurnin,

your solution is better. It solves another issue I had as well :slight_smile: