I'm using OpenGL ES 2 and I want to render a simple model with some level of transparency. I'm just starting out with shaders, and I wrote a simple diffuse shader for the model without any issues but I don't know how to add transparency to it. I tried to set my fragment shader's output (gl_FragColor) to a non opaque alpha value but the results weren't too great. It sort of works, but it looks like certain model triangles are only rendered based on the camera position... It's really hard to describe what's wrong so please watch this short video I recorded:


I thought this was a depth testing issue so I tried playing around with enabling/disabling depth testing and back face culling. Enabling back face culling changes the output slightly but the problem in the video is still there. Enabling/disabling depth testing doesn't seem to do anything.

Could anyone explain what I'm seeing and how I can add some simple transparency to my model with the shader? I'm not looking for advanced order independent transparency implementations.


Vertex Shader:
// color varying for fragment shader
varying mediump vec3 LightIntensity;
varying highp vec3 VertexInModelSpace;

void main()
    vec4 LightPosition = vec4(0.0, 0.0, 0.0, 1.0);
    vec3 LightColor = vec3(1.0, 1.0, 1.0);
    vec3 DiffuseColor = vec3(1.0, 0.25, 0.0);

    // find the vector from the given vertex to the light source
    vec4 vertexInWorldSpace = gl_ModelViewMatrix * vec4(gl_Vertex);
    vec3 normalInWorldSpace = normalize(gl_NormalMatrix * gl_Normal);
    vec3 lightDirn = normalize(vec3(LightPosition-vertexInWorldSpace));

    // save vertexInWorldSpace
    VertexInModelSpace = vec3(gl_Vertex);

    // calculate light intensity
    LightIntensity = LightColor * DiffuseColor * max(dot(lightDirn,normalInWorldSpace),0.0);

    // calculate projected vertex position
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;


Fragment Shader:
// varying to define color
varying vec3 LightIntensity;
varying vec3 VertexInModelSpace;

void main()
    gl_FragColor = vec4(LightIntensity,0.5);

3 Answers 3


The problem is exactly what you say you aren't looking for. Drawing entirely transparent models is a non-trivial task, since to achieve correct blending closer polygons must be drawn after the further ones.

If you don't want to use more advanced techniques like depth peeling, try breaking your model in small pieces and draw them sorted from back to front, with depth writing disabled.


You draw your opaque scene (typically front to back, so the depth test fails increasingly often for the far away fragments which speeds it up).

You then disable writes to the depth buffer (glDepthMask(GL_FALSE)). The depth test remains enabled. Now draw your transparent polygons.

This ensures that the semi-transparent polygons are rendered in the right way.

(Direct3D users SetRenderState(D3DRS_ZWRITEENABLE,FALSE))


Your problem may be backface culling. Google it.

EDIT: Now I see that you mentioned it, so nevermind.


You must log in to answer this question.

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