Transparent textures issue

Hi, I currently have some problems with transparent textures, when I render the scene they hide some of my models and unit.

I think it’s the same problem than here : viewtopic.php?f=43&t=3368

But the solution doesn’t work in my case.

Here some examples:

And my code:

		this.context = this.element.getContext("experimental-webgl",{
			alpha:     false,
			depth:     true,
			stencil:   false,
			antialias: false,
			premultipliedAlpha: false
		});
	gl.clearColor( 0.0, 0.0, 0.0, 1.0);
	gl.clearDepth( 1.0 );

	gl.enable( gl.DEPTH_TEST );
	gl.depthFunc( gl.LEQUAL );

	gl.enable( gl.BLEND );
	gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

For each frames:

gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

I will be very happy to fix this weird thing… Thanks in advance !

Try this.

Before rendering transparent stuffs:

gl.colorMask(true, true, true, false);

And restore the state just after:

gl.colorMask(true, true, true, true);

This fixed my problem with semi-transparency, but it may be the same issue somehow. Please, let me know if it fixes your problem.

Hi, thank you for the answer :slight_smile:

I tested with the following code :

	var textures = this.MODELS.textures;
	for ( var i in textures ) {
		if ( textures[i].alpha ) {
			gl.colorMask(true, true, true, false);
			gl.bindTexture( gl.TEXTURE_2D, textures[i].image );
			gl.drawArrays(  gl.TRIANGLES,  textures[i].vertIndex, textures[i].vertLen );
			gl.colorMask(true, true, true, true);
		}
		else {
			gl.bindTexture( gl.TEXTURE_2D, textures[i].image );
			gl.drawArrays(  gl.TRIANGLES,  textures[i].vertIndex, textures[i].vertLen );
		}
	}

But it doesn’t fixed the bug.

Is it possible that this bug is due to the fact that i don’t use Normal vectors ? ( I don’t calculate them yet…).

Well, I find a solution:

In the fragment shader:

if ( texture.a ) discard;

I don’t think it’s the better way to do this, but it work.

I’m allways open for other ways.