4
\$\begingroup\$

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);
}
\$\endgroup\$

3 Answers 3

3
\$\begingroup\$

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.

\$\endgroup\$
22
  • \$\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\$ Commented Feb 25, 2011 at 20:04
  • \$\begingroup\$ Transparent objects must be rendered after opaque objects... It is not sure that this rule has been followed. \$\endgroup\$
    – Ellis
    Commented Feb 25, 2011 at 20:04
  • \$\begingroup\$ if alpha is null, you see the glClearColor. Full transparent is invisible... \$\endgroup\$
    – Ellis
    Commented Feb 25, 2011 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\$ Commented Feb 25, 2011 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
    Commented Feb 25, 2011 at 20:11
4
\$\begingroup\$

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)
\$\endgroup\$
2
  • \$\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\$ Commented Feb 25, 2011 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\$ Commented Feb 25, 2011 at 19:46
0
\$\begingroup\$

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

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .