# How to create sparks effect

**URL:** <https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381>\
**Category:** Questions\
**Created:** [May 14, 2022, 8:37am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381 "2022-05-14T08:37:12Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Cri5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/_cri5/32/13066_2.png) [@\_Cri5](https://forum.babylonjs.com/u/_Cri5)\
**Post date:** [May 14, 2022, 8:37am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/1 "2022-05-14T08:37:12Z")

</div>

Any ideas how to create like a sparks effect?

This is my attempt to do it: [Babylon.js Playground](https://playground.babylonjs.com/#BNUCHZ)

It is really really simple. I think what it lacks is the trail effect, gravity(optional) and maybe some glow effect with a glow layer.

---

<div class="post-metadata">

**Author:** ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)\
**Post date:** [May 14, 2022, 7:51pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/2 "2022-05-14T19:51:44Z")

</div>

This is awesome! You could try adding some color randomization, and I do think a glow layer would help. Keep up the good work!

---

<div class="post-metadata">

**Author:** ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)\
**Post date:** [May 14, 2022, 8:23pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/3 "2022-05-14T20:23:50Z")

</div>

Also…  
Here is a quick pg with some random colors for the whole system:

> **[Babylon.js Playground](https://playground.babylonjs.com/#BNUCHZ%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I think random color variation for individual particles could be really cool, though that might not be implemented in the engine yet.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [May 14, 2022, 8:49pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/4 "2022-05-14T20:49:08Z")

</div>

Also there’s a tutorial here on particle systems that has a trail effect and then an explosion that could help. 🙂 There’s another nice one with a fireball trailer too but I forgot to bookmark it, maybe I can find it again…

> **[Particle Systems | Babylon.js Documentation](https://doc.babylonjs.com/guidedLearning/createAGame/particleSystems#setting-up-the-particle-systems)**
>
> Dive into some deeper game creation methods and techniques.

Edit: here it is, there’s several particle systems, the one for the fireballs has nice trailing and gravity effects IMO. It’s created with the [particle helper](https://doc.babylonjs.com/divingDeeper/particles/particle_system/particleHelper), but you can find/save the settings for that particle system in the Inspector after pressing spacebar to start the explosion 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#X37LS1%23101)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![\_Cri5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/_cri5/32/13066_2.png) [@\_Cri5](https://forum.babylonjs.com/u/_Cri5)\
**Post date:** [May 15, 2022, 12:58am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/5 "2022-05-15T00:58:01Z")

</div>

Nice! It looks great.

---

<div class="post-metadata">

**Author:** ![\_Cri5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/_cri5/32/13066_2.png) [@\_Cri5](https://forum.babylonjs.com/u/_Cri5)\
**Post date:** [May 16, 2022, 4:23am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/6 "2022-05-16T04:23:48Z")

</div>

This is what I came up with:

> **[Babylon.js Playground](https://playground.babylonjs.com/#E49X27%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I still think it lacks glow and trails so it can feel more realistic.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [May 16, 2022, 7:39pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/7 "2022-05-16T19:39:07Z")

</div>

A quick search by “glow particle” on the forum leads to this great topic 🙂 [Glowing particles - Tutorials and tips - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/glowing-particles/25965)

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [May 16, 2022, 8:31pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/8 "2022-05-16T20:31:35Z")

</div>

these are really nice looking  
.[https://playground.babylonjs.com/#NIHF76#2](https://playground.babylonjs.com/#NIHF76#2)

here is a video and playground for using the nme to create particles.

[![](https://img.youtube.com/vi/fZvZMXDoVp4/maxresdefault.jpg "Node Material Editor Particles!!!!") ](https://www.youtube.com/watch?v=fZvZMXDoVp4)

> **[Babylon.js Playground](https://playground.babylonjs.com/#ENNIV2%230)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Besides the NME video and example, there is also a 3 part series on the babylon youtube channel for the particle editor.

here are some reference images of sparks. your pg kind of reminded me of industrial style sparks, so that was kinda what i was going for.

google search “weld”

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/5/d5285d8faf85da9960bd96aa140bce3966b53876.jpeg)

google search “metal saw sparks”  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/5/f5eaac53c8726b605b6a76cc6953539b6276135d.jpeg)

---

<div class="post-metadata">

**Author:** ![dalidaliW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dalidaliw/32/28108_2.png) [@dalidaliW](https://forum.babylonjs.com/u/dalidaliW)\
**Post date:** [July 28, 2023, 4:59am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/9 "2023-07-28T04:59:40Z")

</div>

I’m sorry to o

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/5/d5285d8faf85da9960bd96aa140bce3966b53876.jpeg)  
pen up the topic a year ago, how to achieve this electric spark effect,

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [July 28, 2023, 10:49am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/10 "2023-07-28T10:49:40Z")

</div>

Please avoid posting in multiple threads for a same topic. It won’t make the answers faster nor more accurate. All it does is ‘dilute’ the topic among multiple posts. I have linked your question to this thread.  
Now you just need to wait for others to give you their approach to it (as I said, there are multiple approaches to it) 😃 Meanwhile, have a great day 🕶

Linked to:

> [@Can you help me achieve such an electric spark effect](https://forum.babylonjs.com/t/can-you-help-me-achieve-such-an-electric-spark-effect/42753):
>
> can you help me achieve such an electric spark effect [R]

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [July 28, 2023, 1:58pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/11 "2023-07-28T13:58:50Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/0/60f45f036a79876a1dcb4cb7d52d235ba9a07abf.jpeg)

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#31BHE7%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#31BHE7%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [July 28, 2023, 2:48pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/12 "2023-07-28T14:48:22Z")

</div>

Sparks without smoke is boring… 🙂

[Smoke Effect | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#RU4R2A)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [July 29, 2023, 6:33am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/13 "2023-07-29T06:33:29Z")

</div>

> [@CodingCrusader](#):
>
> Sparks without smoke is boring

Totally agree. 👍

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [July 29, 2023, 12:12pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/14 "2023-07-29T12:12:33Z")

</div>

upgrade

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/a/5aed6a14670890d13cb2432ab63c9cc18c398f98.jpeg)

[Smoke & Sparks Effect | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#RU4R2A#1)

---

<div class="post-metadata">

**Author:** ![DavidL](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/davidl/32/34549_2.png) [@DavidL](https://forum.babylonjs.com/u/DavidL)\
**Post date:** [July 29, 2023, 7:05pm UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/15 "2023-07-29T19:05:19Z")

</div>

Could you slow that down a little, and point the extra particles to float up? You almost have a campfire there!

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [July 30, 2023, 6:19am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/16 "2023-07-30T06:19:45Z")

</div>

Sure!

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/e/4e66b4a3b0daae2c8834312aee648d6ece67068b.jpeg)

[Smoke & Sparks & Lights Effect | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#RU4R2A#2)

There is a bug in the trail.

* * *

Version 2 without TrailMesh

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/f/dfca735221b0b01672769f69d55df8622cd820de.jpeg)

[Smoke & Sparks & Lights Effect Vers 2 | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#RU4R2A#3)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [July 30, 2023, 6:22am UTC](https://forum.babylonjs.com/t/how-to-create-sparks-effect/30381/17 "2023-07-30T06:22:18Z")

</div>

> [@DavidL](#):
>
> slow that down a little, and point the extra particles to float up

Agreed. The effect is not there for me in this PG and is also fairly complex for something that could remain rather ‘simple’ (my opinion, of course). On the other, I don’t think it’s ours to actually create the FX. I believe a combination of smoke, particles and eventually either spritesheet or uv anim or greasedLines for the spark. Eventually parts of all in a node material… would certainly make for a good effect.
