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);

My Vertex Shader:

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;

My Fragment Shader:

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.

  • \$\begingroup\$ @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? \$\endgroup\$ – Bunkai.Satori Feb 25 '11 at 20:04
  • \$\begingroup\$ Transparent objects must be rendered after opaque objects... It is not sure that this rule has been followed. \$\endgroup\$ – Ellis Feb 25 '11 at 20:04
  • \$\begingroup\$ if alpha is null, you see the glClearColor. Full transparent is invisible... \$\endgroup\$ – Ellis Feb 25 '11 at 20:06
  • \$\begingroup\$ @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()) \$\endgroup\$ – Bunkai.Satori Feb 25 '11 at 20:08
  • \$\begingroup\$ You draw order is not corred. You draw the transparent surface and after the neighbour sprites. Do you have sorted your transparent surfaces ? \$\endgroup\$ – Ellis Feb 25 '11 at 20:11

Are you sure that your texture has an alpha channel. Add this line in your fragment shader:

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.

Your equation is:

ResultColor.r = glFragColor.r * glFragColor.a + ColorInBuffer.r * (1.-glFragColor.a)
ResultColor.g = glFragColor.g * glFragColor.a + ColorInBuffer.g * (1.-glFragColor.a)
ResultColor.b = glFragColor.b * glFragColor.a + ColorInBuffer.b * (1.-glFragColor.a)
  • \$\begingroup\$ +1 for relevant response. Hi, Ellis, thanks for responding. I load .png texture file into OpenGL. Before loading that file, I opened it in Photoshop, and yes, alpha layer was present. I tried to add your line into fragment shader. The result was that all the objects in the scene were 50% darker, but where they overlapped, they were not transparent at all. What conclusion comes from this experiment? \$\endgroup\$ – Bunkai.Satori Feb 25 '11 at 19:23
  • \$\begingroup\$ hmm, is it possible, that I have issues with blending seetings instead of presence of transparency information in the texture map? \$\endgroup\$ – Bunkai.Satori Feb 25 '11 at 19:46

enable blending glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA); also,check if texture has alpha channel opaque, rendered front to back transparent, back to front


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.