# OpenGL ES 2.0: Vertex and Fragment Shader for 2D with Transparency

Could I knindly ask for correct examples of OpenGL ES 2.0 Vertex and Fragment shader for displaying 2D textured sprites with transparency?

I have fairly simple shaders that display textured polygon pairs but transparency is not applied despite:

• texture map contains transparency information
• Blending is enabled: glEnable(GL_BLEND); glEnable(GL_DEPTH_TEST); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

uniform mat4 uOrthoProjection;
uniform vec3 Translation;

attribute vec4 Position;
attribute vec2 TextureCoord;

varying vec2 TextureCoordOut;

void main()
{
gl_Position = uOrthoProjection * (Position + vec4(Translation, 0));
TextureCoordOut = TextureCoord;
}


varying mediump vec2 TextureCoordOut;
uniform sampler2D Sampler;

void main()
{
gl_FragColor = texture2D(Sampler, TextureCoordOut);
}


Bunkai (I expect that Bunkai is your first name),

turn off the depthBufer. Do you use depth (different Z)? If not why depthBuffer? It is for 3D or layered 2D.

Transparent objects are rendered always after opaque objects. Do you use this order?

It must be one of this, i'm sure.

• @Notabene: +1 for trying to thelp. Hi, well, I have multiple layers, and further layers are supposed to move slower (paralax scrolling) so z-buffer is used to solve transparency issues. However, I have more information: It is the polygons, that are not transparent, not the textures. I set glClearColor() to red, to see what happens. Actually, the texture itself becomes transparent, as the transparent areas of the texture become red. However, for some reason, the polygon keeps displaying glClearColor, instead of becoming transparent. Any idea why? – Bunkai.Satori Feb 25 '11 at 20:04
• Transparent objects must be rendered after opaque objects... It is not sure that this rule has been followed. – Ellis Feb 25 '11 at 20:04
• if alpha is null, you see the glClearColor. Full transparent is invisible... – Ellis Feb 25 '11 at 20:06
• @Notabene: to be sure all your questions are answerred, in this phase, I use only one layer, but as the objects are set one next to the other, I noticed that the areas that are supposed to be transparent hide neighbour sprites and overdraw them with black (the color set in glClearColor()) – Bunkai.Satori Feb 25 '11 at 20:08
• You draw order is not corred. You draw the transparent surface and after the neighbour sprites. Do you have sorted your transparent surfaces ? – Ellis Feb 25 '11 at 20:11

gl_FragColor = vec4(texture2D(Sampler, TextureCoordOut).xyz, 0.5);


You should see some half transparency texture.

Ps: Your result color will be darker, because it is a mix with color in backbuffer*0.5 and the gl_FragColor*0.5. Blending is done after the fragment in the OGLES 2.0 pipeline.

ResultColor.r = glFragColor.r * glFragColor.a + ColorInBuffer.r * (1.-glFragColor.a)