# Making Explosions

**URL:** <https://discourse.threejs.org/t/making-explosions/92366>\
**Category:** Questions\
**Tags:** particle-emiter, webgpu\
**Created:** [June 23, 2026, 6:49pm UTC](https://discourse.threejs.org/t/making-explosions/92366 "2026-06-23T18:49:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [June 23, 2026, 6:49pm UTC](https://discourse.threejs.org/t/making-explosions/92366/1 "2026-06-23T18:49:31Z")

</div>

I have been playing around with variations of [this](https://threejs.org/examples/?q=webgpu%20particle#webgpu_particles) WebPU particle emitter (mostly just the smoke part).

How does this work? It appears that simply initializing values is enough to make it to work. Is there an underlying particle subroutine that these instructions activate? Conversely, how do you make the particles fade away and stop the emitter?

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [June 28, 2026, 8:57pm UTC](https://discourse.threejs.org/t/making-explosions/92366/2 "2026-06-28T20:57:02Z")

</div>

To answer my own question:

Instead of making the smoke fade away, I made the smoke plume progressively smaller.

In the original example, the particles are defined within the setup as smokeInstancedSprite. So I made this definition available externally. I also defined the size multiplier externally (e.g. SmkSiz) and then referenced this value in the setup.

In the variables, I added:

```javascript
const smokeInstancedSprite = 0;
let SmkSiz = 40;

```

In the setup, I changed following lines to this:

```javascript
smokeInstancedSprite = new THREE.Mesh(new THREE.PlaneGeometry(1,1),smokeNodeMaterial);
smokeInstancedSprite.scale.setScalar(SmkSiz);

```

The first line no longer has the leading const since it is defined externally and the second line references SmkSiz.

In the compute section, I added these instructions:

```javascript
smokeInstancedSprite.scale.setScalar(SmkSiz);
if (SmkSiz) SmkSiz = SmkSiz - 0.01;
if (SmkSiz < 0) SmkSiz = 0;

```

The results is that the smoke plume slowly gets smaller. (Is it reducing only one particle per frame?)

Once it is down to zero, I can remove the smoke emitter from the scene. I generally do not use the scene.add command to make the smoke visible. Instead, I attach the smoke to a visible object using an object.add command. So to remove the now invisible smoke from the scene, I can use an object.remove command.

I don’t want to remove the smoke entirely from memory, since I can re-use it many times elsewhere. When I do that, I can restore the smoke to the original size by resetting the SmkSiz to the original value.

Let my know if there is a better way to do this.

[Here](https://codepen.io/editor/Phil_Crowther/pen/019f1179-4cc8-771b-a143-3b118053d6be) is a CodePen example.

MORE (Jul 1)  
I have modified the program to include all of the parts of the explosion in a single Explosion Group. Furthermore, the overall explosion has been modified so that you can repeat the explosion once the original explosion has died down. Or you could initialize several Explosion Groups so that one is always available when you need it.