CODEWITHSUNDEEP
javascriptthree.js
Anvaka
Anvaka

Reputation: 15823

three.js transparent texture and shader material

I'm using a circle texture to render particles:

enter image description here

The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below:

enter image description here

The white particle is the nearest to the camera, the cyan (0x00ffff) is the second, and hibiscus color on the top right (0xC3206F looks pinkish) is the farthest.

As you can see the order is not correct. Ideally white circle should fully override cyan, and partially cover hibiscus. If I set depthTest: true for ShaderMaterial, the transparent regions of the texture become solid:

enter image description here

Here is the full source code: http://jsbin.com/mikimifipi/edit?js,output

I'm probably missing something with blending or messed up with the shaders. Can you please help?

Upvotes: 1

Views: 1608

Answers (1)

WestLangley
WestLangley

Reputation: 104783

  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

Upvotes: 3

Related Questions