Three.js, custom shader and png texture with transparency

Question

I have an extremely simple PNG texture: a grey circle with a transparent background.

PNG image with transparency

I use it as a uniform map for a THREE.ShaderMaterial:

var uniforms = THREE.UniformsUtils.merge( [basicShader.uniforms] );
uniforms['map'].value = THREE.ImageUtils.loadTexture( "img/particle.png" );
uniforms['size'].value = 100;
uniforms['opacity'].value = 0.5;
uniforms['psColor'].value = new THREE.Color( 0xffffff );

Here is my fragment shader (just part of it):

gl_FragColor = vec4( psColor, vOpacity );
gl_FragColor = gl_FragColor * texture2D( map,vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y ) );
gl_FragColor = gl_FragColor * vec4( vColor, 1.0 );

I applied the material to some particles (THREE.PointCloud mesh) and it works quite well:

Particles texture with transparency: OK!

But if i turn the camera of more than 180 degrees I see this:

Particles texture without transparency

I understand that the fragment shader is not correctly taking into account the alpha value of the PNG texture.

What is the best approach in this case, to get the right color and opacity (from custom attributes) and still get the alpha right from the PNG?

And why is it behaving correctly on one side?

WestLangley · Accepted Answer · 2015-06-24 22:12:12Z

12

Transparent objects must be rendered from back to front -- from furthest to closest. This is because of the depth buffer.

But PointCloud particles are not sorted based on distance from the camera. That would be too inefficient. The particles are always rendered in the same order, regardless of the camera position.

You have several work-arounds.

The first is to discard fragments for which the alpha is low. You can use a pattern like so:

if ( textureColor.a < 0.5 ) discard;

Another option is to set material.depthTest = false or material.depthWrite = false. You might not like the side effects, however, if you have other objects in the scene.

three.js r.71

answered Jun 24, 2015 at 22:12

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

taseenb Over a year ago

Great, I tried textureColor.a < 0.3 and looks perfect. Thanks also for the details, I understand better how the PointCloud works now.

taseenb Over a year ago

Well... actually looks better with < 0.5

Collectives™ on Stack Overflow

Three.js, custom shader and png texture with transparency

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related