When we are rendering many objects on screen at the same time, we only have a few hundred polygons to allocate to each individual plant. We use intersecting alpha-mapped planes to give the impression of much greater detail. Here is a picture of what our desert tree looks like with the alpha channel used for color instead of transparency:
If we just turn on blending, it starts to look like a tree, but there are serious artifacts around the leaves. The transparent pixels in the nearest leaves are occluding the background leaves. The following pictures are zoomed in ~200% for clarity; click to see the full image.
We can fix that problem by turning off depth-writing. But now you can see the background leaves in front of the foreground ones!
We could draw everything in the correct order by sorting each quad from back to front, but this is slow, and intersecting quads would have to be split. In practice, the most common solution is to turn off blending, and turn on alpha-testing. That is, for each pixel it checks if the alpha value is above some threshold, and if so, draws it at 100% opacity.
Now we have everything drawn in the correct order, and it looks like a very detailed tree, but we have lost the smooth, blended edges. This is especially problematic when viewed from far away. Here is an enlarged distant view with alpha-testing used on the left, and blending on the right.
One way to get smooth edges using alpha testing is to use the multisample buffers. By using a different stippling pattern in each alpha buffer, you can combine them to get fairly smooth gradients.
However, this option is not supported well on many 3D cards, and only works well with 4x or more samples per pixel. What we are doing right now in Overgrowth is drawing the plant using alpha testing, and then drawing it again using blending with depth-writing disabled. This is not perfectly accurate, but it is compatible, easy, and fast.
P.S. If you want to talk to us, we can be reached by AIM, MSN, etc.! Just click here and let us know what you think. We love hearing from you guys.
Track us on ModDB (see our cool page)
and also join:
- Facebook
- Steam
- Twitter
- YouTube
Looks very good and a very interesting read. I always wondered what methods were used for smoothing out edges on things like foliage and hair/fur :)
Looks great. The end result is a vast improvement to others I have seen working... nice work...
Looks great you guys are doing a awesome job. Cant wait to see it finalized.
wow, I've had that extra pixel issue on so many engines and programs I've worked on in the past. This may not solve it but I'm very glad I at least understand the origin of the problem now.
Thanks very much for taking the time to explain this issue.
Who knew trees would actually be this interesting.
He he, nice read there! I am curious to see if I can apply something like this for other (closed source) engines by appropriate manipulation of some settings etc.
Cool article!
interesting stuff, thanks :D
nice article :)
Fun read. Thanks!
Fascinating. Great article! The game is really looking nice!