# Smoke, fire, bubbles particles transparent distance sorting

**URL:** <https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919>\
**Category:** Resources\
**Created:** [July 3, 2022, 8:38am UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919 "2022-07-03T08:38:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 3, 2022, 8:38am UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/1 "2022-07-03T08:38:48Z")

</div>

https://codepen.io/illuminsi/embed/preview/rNYWdWd?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=rNYWdWd

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [July 3, 2022, 1:09pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/2 "2022-07-03T13:09:16Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/2/52fb475aa2c5a3c2b36f90edff150fd1ba2fbf3e.jpeg)

What causes this strange radial effect in the smoke?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 3, 2022, 3:47pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/3 "2022-07-03T15:47:02Z")

</div>

I dont know. I have windows 10, PC, GoogleChrome  
Try delete some settings in material

```javascript
mat["sprite"]=new THREE.ShaderMaterial({
uniforms:{
map:{value:[tex["smoke"],tex["fire"],tex["grass"]]},
time:{value:0}
},
vertexShader:vs["sprite"],
fragmentShader:fs["sprite"],
side:THREE.DoubleSide,
transparent:true,
depthWrite:false,
blending:THREE.CustomBlending,
blendEquation:THREE.AddEquation,
blendSrc:THREE.OneFactor,
blendDst:THREE.OneMinusSrcAlphaFactor
});

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4d588461e3768e54693ff222f618ecd32c123fbb.jpeg)

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [July 4, 2022, 12:25pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/4 "2022-07-04T12:25:54Z")

</div>

I get the same effect here:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/7337ae18fc704323879b45931e943a5ccf2c77b5.jpeg)

Win 11  
Chrome 103.0.5060.66  
GTX 1080

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [July 4, 2022, 12:42pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/5 "2022-07-04T12:42:50Z")

</div>

Same here, Windows 10, Chrome, Titan X. Seems to be generally the transparency.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 4, 2022, 4:20pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/6 "2022-07-04T16:20:37Z")

</div>

Windows 10, Google chrome 103.0.5060.114 (64 bit).  
AMD Radeon RX 560 Series.

Disabled “DoubleSide” and “blending”

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/2/925155c61f899be085e1b5b7684f4325544dd3d0.jpeg)  
Maybe into fragmentshader need normalize value of alpha and rgb

```javascript
gl_FragColor.rgb*=gl_FragColor.a;
gl_FragColor.a*=vBlend;

```

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/352eb3ab29363020b37ddf16f053e69029a859f4.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 5, 2022, 10:15am UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/7 "2022-07-05T10:15:45Z")

</div>

Tested on another compute and notebook (laptop). No artifacts.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 16, 2025, 12:54pm UTC](https://discourse.threejs.org/t/smoke-fire-bubbles-particles-transparent-distance-sorting/39919/8 "2025-01-16T12:54:06Z")

</div>

Fixed bug for some videocards. The problem was from the float equality comparison which was resulting to false, because of the float precision margin errors of GPU.  
Solution 1: replace `if(texNum == 0.0)` to `if((texNum - 0.0) < 0.00001)`  
Solution 2: add `float tex_num_2=round(tex_num);`  
Solution 3: add `float tex_num_2=floor(num+0.5);`

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/7/876bd1adbbc6991ffa55e1851752a655e2ac5f94.jpeg)