Particle system blocking one another

Questions
,
1

hello! I have a issue with my particle system. My particles rotate around an object, and they seem fine, until one particle comes in front of another and blocks the one behind it, it should still be visible because of the transparent. This does not happen all the time, sometimes when 2 particles come one in front of another (from camera view) you can see the further particle (like you should with transparent property set to true). it fixes when I set depthtest to false, but then I don’t get the rotation effect I want. I think its because of the render order. I saw a fix using .sort() and camera.distanceTo, but I dont know how to implement it with three.points. this is my code. and rotateParticle is in the render function. Thanks!

  var particleCount = 300
  var particles = new THREE.Geometry()
  var  pMaterial = new THREE.PointsMaterial({
         color: 0xffffff,
         size: 0.25,
         map: textureLoader.load("./textures/particle.png"),
         blending: THREE.AdditiveBlending,
         transparent: true,
         opacity: 0.4, 
    });
  for (var p = 0; p < particleCount; p++) {
    var pX = getRndFloat(-15, 15),
          pY = getRndFloat(-10, 10),
          pZ = getRndFloat(-15, 15),
          particle = new THREE.Vector3(pX, pY, pZ);
    particles.vertices.push(particle);
  }
  var particleSystemPoints = new THREE.Points(
    particles,
    pMaterial
  );
  scene.add(particleSystemPoints);
2

Can you please explain in more detail this statement. What is the expected “rotation effect” and how does it look like with disabled depth testing?

3

well, the particles rotate around an object, and they are supposed to go behind it and not be seen, with depthtest to false they are seen through the mesh. they are basically orbiting the mesh

4

Instead of setting depthTest to false, can you please keep the default value (true) and set depthWrite to false?

5

ohh great, I will try it in the morning and give feedback!

6

It worked!! Thanks a lot!

1 Like