Transparency glitching and depthWrite and depthTest don't seem to help

Questions
1

Having trouble with the exhaust. It is PointsMaterial. Here is with depthWrite true/false. Both equally glitching. Any suggestions?

			var material2 = new THREE.PointsMaterial({
				color: 				0xffffff,
				size: 				1,
				sizeAttenuation: 	true,
				map: 				this.jetray_particles.sprite,
				alphaTest: 			this.jetray_particles.transparency_threshold,
				transparent: 		true,
				opacity: 			this.jetray_particles.opacity,
				blending: 			THREE.NormalBlending,
				depthWrite: 		true,
				depthTest: 			true,
			});

			//material2.color.setHSL(1.0, 1.0, 1.0);
			this.jetray_particles.meshes.right.getWorldPosition(pos2);
			var px = pos2.x;
			var py = pos2.y;
			var pz = pos2.z;
			vertices2.push(px, py, pz);
			geometry2.setAttribute("position", new THREE.Float32BufferAttribute(vertices2, 3));
			var particle2 = new THREE.Points(geometry2, material2);
2

This might be a good use case for something like alpha dither/ alpha hash. One way to approximate that would be to pick some small dither textures (something like “blue noise”), assign to each smoke particle .alphaMap with screenspace UV coordinates, and gradually decrease .alphaTest until the particle disappears. You can keep .transparent=false and avoid the artifacts in that case.

3

Also – are the settings of the 2nd video depthWrite=false? Are the car/character and ground using transparent=false? I’m not sure why occlusion is visibly weird in that example…

4

Yes, setting every world mesh to transparent=false seems to help a lot (=

It’s not perfect but it’s much better.

Thanks @donmccurdy

Alpha-dither + alpha-test is a nice thing to try as well. If alpha bugs continue I will give that a go.

1 Like