Skip to content Skip to sidebar Skip to footer

Three.js Transparent Texture And Shader Material

I'm using a circle texture to render particles: The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However

Solution 1:

  1. The particles are rendered in the order specified by BufferGeometry.

  2. If depthTest = true, the material is not becoming solid, as you claim -- the particles behind it (and rendered later) are simply not being rendered at all.

  3. You can improve some artifacts by setting if ( tColor.a < 0.5 ) discard;.

  4. You likely should not be premultiplying your fragment shader output RGB by alpha. That is not the correct thing to do when using the default alpha-blending in three.js. It is also is what is causing the ring to appear around the white disk.

three.js r.71

Post a Comment for "Three.js Transparent Texture And Shader Material"