Transparency Sorting

Jump to: navigation, search

Blending can be used to make objects appear transparent. However, blending alone is not enough. There are a number of steps that you must take to make transparency work.

When you draw things with blending turned on, the renderer reads back pixels from the frame buffer, mixes in the new color and puts the pixels back where they came from.

Alpha test

In many cases, transparency is a binary decision. The texels of a texture mapped to the polygon causes parts of it to be completely opaque, and other parts to be completely transparent. The texture's alpha values are used to make "cutout" objects. If you want to draw something complicated like a tree, you probably can't afford a polygon for every single leaf and branch; so you use an texture that has pictures of leaves.

In this case, the leaf texture has no translucent texels; either the texel is opaque or it is completely transparent. Texels that are opaque have an alpha of 1.0, and texels that are transparent have an alpha of 0.0.

If this is your case, good news: you can still use Depth Testing to do depth base sorting. This avoids many of the issues in the below sections, when you need real translucency. But there is one final issue to overcome.

If you were doing normal translucency, via an appropriate Blending mode, an alpha of 0 would cause the destination color to be written to the framebuffer. However, if the Depth Test and depth writes are still on, then the depth buffer will be updated, even for pixels where the alpha value from the texture was 0. That's because the fragment is still be written; it's just being written with the color of whatever was there before.

Thus, what you want to do is not Blending. What you want to do is test the alpha value and prevent the Fragment from being written entirely. This can be done with Fragment Shaders, using the discard command:

#version 330
in vec2 texCoord;
out vec4 outColor;
uniform sampler2D theTexture;
void main()
  vec4 texel = texture(theTexture, texCoord);
  if(texel.a < 0.5)
  outColor = texel;

With this shader, you don't need to change the depth buffer parameters or order you render anything. This will cause any fragment that got a texel alpha of 0.5 to be culled.

Note that texture filtering is still applied to this. So if there is any kind of GL_LINEAR filtering, the values you get will not always be 1.0 and 0.0, even if those are the alpha values in the texture. That's why the test is set to be less than 0.5. It would not be a good idea to do a floating-point equality test, like {{{1}}}​.

Fixed-function code can use alpha-testing to do the same thing.

glAlphaFunc(GL_GREATER, 0.5);

This will only allow pixels with alpha values greater than 0.5 to write to the color or depth buffers.

Translucency and the depth buffer

If alpha testing is insufficient for your needs, if you need real translucency via Blending, then a major problem arises.

Blending is done by combining the current fragment's color with the framebuffer color at that position. This only achieves translucency if the framebuffer color at that position represents all object that are behind the one currently being rendered.

When doing non-translucent rendering, without blending, this kind of ordering is handled via the Depth Test. That process entirely culls fragments that happen to be behind a previously rendered object, on the assumption that, if two fragments cover the same pixel, only one will contribute to the image.

Translucency, by its very nature, breaks that assumption.

Draw opaque objects first

In order to achieve translucency, all opaque objects must be drawn before drawing any translucent ones. This may be easier to do in some codebases than others.

Standard translucent

The standard method for dealing with translucent objects is as follows. If the above methods do not work or aren't good enough, then you will have to do this.

This process involves disabling writes to the depth buffer and sorting transparent objects and/or polygons based on distance to the camera.

Depth Sorting

Red overlaps green which overlaps blue which overlaps red.

The next thing that most people consider is to sort the translucent polygons as a function of Z depth.

To be perfect - even sorting them isn't enough. You may have to split polygons up on-the-fly to get *perfect* rendering. Consider the pathalogical case in the image to the right.

There is no way to sort this to make it work without splitting at least one of the polygons into two.

This looks like an unlikely situation - but it's really not.

How to Sort.

Worse still, if you decide to split and sort polygons (or just to sort and hope that the pathalogical overlap case doesn't show up), what key do you sort on? The center of the polygon? The nearest vertex? The furthest?

Look what can happen when a translucent green blob alien (C) stands in front of a window (B)...The observer is standing at (A). Here is a plan view of the two polygons and our eye:

Sort by what.png

In this example, the center of polygon 'B' is closer to the eye than the center of polygon C - but it is behind C! How about sorting by the nearest vertex? Nope - B is still in front. How about by the furthest? Nope - B still comes out "in front". You have to look at the 'span' of C against the 'span' of B...which does bad things to some sort algorithms when you give them the three mutually overlapping polygon example. Some sort algorithms never terminate when given that input because R>G, G>B but B>R !!!

BSP Tree Sorting

Depth peeling



The upshot of this is simply that you can't simply render translucent objects in any order without special consideration. If you have enough translucent surfaces moving around in a sufficiently complex manner, you will find it very hard to avoid errors with acceptable realtime algorithms.

It's largely a matter of what you are prepared to tolerate and what you know a priori about your scene content.