Composite a texture with alpha blended components

Todo :

Render a model on our HUD,
but instead of rendering all these tiny polygons,
we want to optimize and render these polygons to a texture and then use this texture as a single polygon overlay.

This works fine if the entire rendered texture has either blank pixels or opaque pixels,
but when we have pixels with alpha values between 0 and 1, we get a problem.

E.g. say we just have a a red (1,0,0) polygon in our model with alpha at 0.5.
If we render this to a texture using normal blending (SRC_ALPHA, 1-SRC_ALPHA) we end up with a dark red colour ( 0.5,0,0 ) and alpha at 0.5.
When this is then used as a texture, it's much darker than is should be, basically because the red polygon has blended with the base "black" of the texture.
No matter what background this is then displayed over, it's wrong.

What we need is for the texture to have full red (1,0,0) colour and alpha of 0.5, but this then gets much more complicated when we render multiple alpha blended polygons over each other.

Is there a way to achieve this ?
Maybe with a different screen blend mode ?
This needs to be done with the GPU whilst rendering to a texture.

Using OpenGLES 2.0.

Please suggest.
Thanks

Shaun

1 Answer
1

Our artist found this answer. While it may not be identical, it's very good.

Opengl Render To Texture With Partial Transparancy (Translucency) And Then Rendering That To The Screen

WE basically used option 2, render everything to the texture as normal, starting with a black clear texture, but when rendering this texture to the hud, modify the pixel shader to simply divide the colour by the alpha.

This works because say a colour (1, 0.5, 0.2) had been added to the texture at 25% alpha, then the texture colour would be (0.25, 0.125, 0.05) and 0.25 alpha. Dividing back by the 0.25 alpha gives the colour back (1, 0.5, 0.2) which is what we need.

So, only when using the created texture, add this line onto the end of your pixel shader

outcol.rgb /= outcol.a

We tested with multiple transparencies overlaid and could not tell the difference. The more opaque the colour is, the less of the original "black with zero alpha" is in it. It requires no changes to your rendering pipeline, except for when you actually use the created texture.

Shaun

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.