View Full Version : Managing the transparency textures

03-13-2011, 09:11 PM

I've made a map creator for cs 1.6 and now i pass it to 3D with WEBGL, and i've a lot of problem with the transparency...

The function :

gl.glAlphaFunc(gl.GREATER, 0.1);

Is not supported so i've bug with my texture ...

Please, how to resolve it ? i don't want to sort all my block for show :

1 - all the block without transparency
2 - transparency block from farest to closest

Boring to code and i'm sure that it will be slowest :/

if you want to see the map creator (with this bug for now) :

03-13-2011, 09:16 PM
Oups i give you the french version, and i can't modify the post so here is the english one :


Your comments are appreciated :)

03-14-2011, 05:44 AM
Wrong forum? :)

03-14-2011, 10:35 AM
No - this is the right forum.

In WebGL (and in OpenGL-ES 2.0 - on which WebGL is based), there is no support for the entire "AlphaTest" mechanism.

You don't need it because you can do it in your fragment shader. So instead of saying:

gl.alphaTest ( gl.GREATER, 0.5 ) ;

(or whatever) - instead, you write into your fragment shader:

if ( output.a < 0.5 ) discard ;
gl_FragColor = output ;

...which achieves the right effect - if the alpha of the output is less than 0.5 then throw the pixel away without rendering it.

-- Steve

03-14-2011, 03:46 PM
Thank for the admin, he move the topic...

It look simple for you SteveBaker, but i don't know where i put this 2 lines of code :/

Here is my 2 shaders taken from : http://learningwebgl.com/lessons/lesson10/

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {

gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));


<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec2 vTextureCoord;

void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;

It's the only piece of code where i found a "FragColor"

Thank you in advance, in the last problem on my script ...

03-15-2011, 06:22 AM
So this is your Fragment Shader:

varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

The line that begins "gl_FragColor" writes the final pixel color to the screen. The texture2D function looks up the texture and returns the RGBA color. You need to check the Alpha value before writing it to the screen...so:

varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void)
vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)) ;
if ( color.a < 0.1 ) discard ;
gl_FragColor = color ;

The first line of 'main' looks up the texture color.
The second line tests the alpha part of the color and discard's the pixel if it's sufficiently transparent. The "discard" command in GLSL is like calling "exit(0)" in a C++ program - it aborts the shader without writing any pixel data.
The third line writes the pixel to the screen.

Incidentally, your texture lookup code could be simpler. vTextureCoord is already a 'vec2' so you don't need a cast:

vec4 color = texture2D(uSampler, vTextureCoord);

03-15-2011, 02:56 PM
Thank you, your help is amazing :D

Now it's pretty good, i still have some problem but it's almost not important :)

Thank again