Smoke, fire, bubbles particles transparent distance sorting

Resources
1

7 Likes
2

image
image997Ă—453 40.3 KB

What causes this strange radial effect in the smoke?

1 Like
3

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

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
image751Ă—249 64.9 KB

4

I get the same effect here:

image
image782Ă—315 57 KB

Win 11
Chrome 103.0.5060.66
GTX 1080

5

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

6

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

Disabled “DoubleSide” and “blending”

image
image702Ă—287 51.1 KB

Maybe into fragmentshader need normalize value of alpha and rgb

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

image

7

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