0

My particles are not all rendering as transparent. In the below image you can see that some of the images are surrounded by a box of the background color (clip images behind them), while others are not (do not clip images behind them).

enter image description here

This is the PNG file I'm using: enter image description here

I load the image and create the material like this:

    cimage = THREE.ImageUtils.loadTexture( '/models/candy/c1.png' )
    cmat = new THREE.ParticleSystemMaterial
        size: 100
        map: cimage
        transparent: true

Why are the particles not all transparent?

I've found this related question but none of the solutions are really want I want:

  • depthWrite/depthTest = false: I want the particles to affect the depth, they should be overlapped correctly.
  • sortParticles = true: only works if one particlesystem is present, the squares still appear for other particle systems
  • alphaTest = 0.5: this comes closest, but the borders of the images are either not clean, or still have a background color.
Community
  • 1
  • 1
edA-qa mort-ora-y
  • 30,295
  • 39
  • 137
  • 267

1 Answers1

1

You need to sort the particlesystem to get correct transparent levels.

particlesystem.sortParticles = true

When you have multiple particlesystems that are viewed together, then you have 3 options:

  • play around with the alphaTest property because that discards fragments that have an alpha less then defined
  • You can do is combine both particles systems and give it another shadermaterial. This makes it possible to sort them again as one.
  • The last option is to write your own postplugin in webglrenderer. (this is difficult)
Gero3
  • 2,817
  • 1
  • 22
  • 21
  • I just updated my question to indicate this approach doesn't work if there are multipl ParticleSystem's involved. – edA-qa mort-ora-y Dec 31 '13 at 06:37
  • Three.js doesn't provide this functionality (yet). The best thing I can suggest is to play around with the alphaTest property because that discards fragments that have an alpha less then defined. The other thing you can do is combine both particles systems and give it another shadermaterial. This makes it possible to sort them again as one. The last option is to write your own postplugin in webglrenderer. With the first 2 I can help as long as there is a playground to play with it. The last one is really a bit too complex for the return. – Gero3 Dec 31 '13 at 07:38
  • Okay. I'm using alphaTest for now, works well enough for the demo. I'll end up having to write my own shader however, since I also need to rotate the particles. – edA-qa mort-ora-y Dec 31 '13 at 08:14