Open GL Translucid Sprites - c++

Question

So, my goal is to draw sprites with translucid pixels.
First, I render the sprites with a shader that only renders the opaque pixels. Then, I disable depth buffer writing and render the same sprites with a shader that only renders the translucid (or transparent sprites), as explained here:
https://gamedev.stackexchange.com/questions/51202/how-do-you-display-non-cutout-transparent-2d-textures-with-a-depth-buffer-open
This is the animation sprite sheet I am using as test:
https://i.stack.imgur.com/MMs2W.png
This is my renderer update function:
updateRenderData();
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE);
glUseProgram(_programID);
render();
glDepthMask(GL_FALSE);
glUseProgram(_translucencyPogramID);
render();
_window->SwapBuffers();
And this is my render function (just in case you want to know how I render the sprites):
GLint baseInstance = 0;
GLsizei spriteCount;
for (int i = 0; i < _spriteManager->GetSpriteBatchVector()->size(); i++)
{
_SpriteBatch* spriteBatch = _spriteManager->GetSpriteBatchVector()->at(i);
setTexture(spriteBatch->GetTexture());
spriteCount = (GLsizei)spriteBatch->GetSpriteVector()->size();
glDrawElementsInstancedBaseInstance(_quad.renderMode, _quad.indexCount, _quad.indexDataType, 0, spriteCount, baseInstance);
baseInstance += spriteCount;
}
But when I execute this code, it only renders the translucid pixels:
https://i.stack.imgur.com/f4AY6.png
In fact, nothing renders (black screen) if I remove the second render() call (only the call, I still change the shader and set the depth mask to false), like this:
updateRenderData();
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE);
glUseProgram(_programID);
render();
glDepthMask(GL_FALSE);
glUseProgram(_translucencyPogramID);
_window->SwapBuffers();
But if I don't change the shader nor set glDepthMask to false after the first render, it renders the opaque pixels of my sprites correctly.
Edit:
This is the fragment shader I am using for the second pass:
out layout(location = 0) vec4 outColor;
in vec2 texCoord;
uniform sampler2D tex;
void main()
{
vec4 texel = texture(tex, texCoord);
if(texel.a == 1)
{
discard;
}
outColor = texel;
}
The first pass is just the same, but discarding if alpha < 1.
The vertex shader is standard.
So, my question here is: what is causing this?
Edit 2:
To clarify, this renders correctly (without translucent pixels):
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE);
glUseProgram(_programID);
render();
And this doesn't render at all:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE);
glUseProgram(_programID);
render();
glDepthMask(GL_FALSE);//Just added this line
And this also doesn't render at all:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE);
glUseProgram(_programID);
render();
glUseProgram(_translucencyPogramID);//Just added this line

Answer 1

Assuming _programID is for drawing the opaque part of the bird and _translucencyPogramID is for drawing the translucent part.
Nothing in the code you've supplied shows what the cause could be. However it could be the result of:
You aren't actually calling render() while using _programID.
After the _programID you glClear(GL_COLOR_BUFFER_BIT)
You're using GL_ONE_MINUS_SRC_ALPHA as glBlendFunc()'s sfactor
So given that your _programID's fragment shader consists of:
if (texel.a < 1.0)
discard;
and your _translucencyPogramID's fragment shader consists of:
if (texel.a == 1.0)
discard;
Then granted your draw loop is like this (pseudo-code):
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glDepthMask(GL_TRUE)
glUseProgram(_programID)
for each sprite
glDrawArrays(....)
glDepthMask(GL_FALSE)
glUseProgram(_translucencyPogramID)
for each sprite
glDrawArrays(....)
glDepthMask(GL_TRUE)
Then while using glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA), then that should give the desired result.
Edit
Then reason it breaks when you when you add glDepthMask(GL_FALSE), is because you don't enabled it again after. You can check this by doing:
GLboolean enabled;
glGetBooleanv(GL_DEPTH_WRITEMASK, &enabled);
assert(enabled == GL_TRUE);
Before you glClear(GL_DEPTH_BUFFER_BIT).
This reason it breaks is because if writing to the depth buffer is disabled, then glClear(GL_DEPTH_BUFFER_BIT) won't do anything, and thus leave the depth buffer as is.
As you can see below, on the second picture it sort of smears the silhouette of all the bird's frames. Which is because the depth buffer is never cleared, and this bird is the frontmost bird. If writing to the depth buffer is enabled upon calling glClear(GL_DEPTH_BUFFER_BIT) then it correctly yields the first picture.
Left: Depth writing is enabled on glClear. Right: Depth writing is disabled on glClear.
Note that this relation is true for glClear(...) and any gl*Mask(GL_FALSE).