I've been able to get my 2D renderer to display transparent cutout textures by testing the alpha of a fragment and discarding if it is less than 1 (or any fraction really). The problem is I want to support using translucent textures.

The current way I sort my sprites is by what texture they use, so that I can minimize texture changes. The only way I can think of getting this to work properly is by scrapping that and only sorting by z-order. But I don't want to throw away the optimization I already did. Is there any way to do both?

Does only rendering in 2D simplify the problem at all?

I was hoping to support translucent sprites, but my font renderer makes translucent font textures, so I can't just only use cutouts.

EDIT: After doing some research, it seems there really is no easy way to do this. (depth peeling for a 2D renderer seems a little overkill) I'm going to compromise by having my renderer hold 2 different sets of sprites, cutouts and translucent. I can draw the cutouts first in whatever order I want, making full use of texture atlases. The translucent textures, however, will need to be in z-order, ignoring atlases.

If anyone can tell me a better way, I'm all ears.

  • \$\begingroup\$ Why can't you just change it so that you throw away fragments that are equal to zero? \$\endgroup\$
    – Mokosha
    Commented Mar 17, 2013 at 8:21
  • \$\begingroup\$ That is what a cut-out is. I'm trying to support translucent sprites. \$\endgroup\$
    – kfan
    Commented Mar 17, 2013 at 8:29
  • \$\begingroup\$ That would work assuming I am drawing back to front. But with my sprites sorted by what texture they use, I can't assume that. \$\endgroup\$
    – kfan
    Commented Mar 17, 2013 at 8:40

1 Answer 1


A solution to this problem is presented in 3D Graphics with XNA Game Studio 4.0 (The XNA and directX-ness of the book is not relevant to the solution.) Although the method is technically imperfect and presented as a solution for billboarding, it works when disabling the depth buffer and z-sorting is a not viable method.

The problem is described as requiring the depth buffer in order to avoid textures overlapping wrongly, but not wanting obscured polygons to be covered up by transparency:

the problem with transparent billboards

The solution is to draw all these sprites twice, using distinct shaders settings for each pass.

  1. With depth buffer, draw only the opaque portions of the texture. Opaque can be defined by some arbitrary cutoff alpha, such as 0.5; Other pixels are not drawn.
  2. Disable the depth buffer, and draw only the pixels below the cutoff.

In the first pass, the "solid" pixels will be drawn only when they are not obscured by another texture of higher depth. In the second, the translucent pixels will be drawn everywhere and blend together.

enter image description here

The imperfect part of this solution is that it is possible for mid-high alpha pixels to incorrectly obscure mid-low alpha pixels. This effect only happens when the sprites are drawn out of z-order, and only for pixels that are already alpha-blending. So the effect is minimal, and it should be possible to mitigate it by tweaking the alpha cutoff value.


You must log in to answer this question.

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