Cg Programming/Unity/Billboards

This tutorial introduces billboards.

It is based on and the discussion in.

Billboards
In computer graphics, billboards are textured rectangles that are transformed such that they always appear parallel to the view plane. Thus, they are similar to billboards along highways in that they are rotated for best visibility. However, they are different from highway billboards since they are dynamically rotated to always offer best visibility.

The main use of billboards is to replace complex three-dimensional models (e.g. grass, bushes, or even trees) by two-dimensional images. In fact, Unity also uses billboards to render grass. Moreover, billboards are often used to render two-dimensional sprites. In both applications, it is crucial that the billboard is always aligned parallel to the view plane in order to keep up the illusion of a three-dimensional shape although only a two-dimensional image is rendered.

Vertex Transformation for Billboards
Similarly to, we can use the default cube object to render a billboard. (For it to work with the default quad, you should change the minus sign to a plus sign in the code. For the default plane, you have to use the  coordinate instead of the   coordinate.) The basic idea is to transform only the origin $$(0,0,0,1)$$ of the object space to view space with the standard model-view transformation. (In homogeneous coordinates all points have a 1 as fourth coordinate; see the discussion in .) View space is just a rotated version of world space with the $$x y$$ plane parallel to the view plane as discussed in. Thus, this is the correct space to construct an appropriately rotated billboard. We subtract the $$x$$ and $$y$$ object coordinates ( and  ) from the transformed origin in view coordinates and then transform the result with the projection matrix  :

In order to have billboards of different sizes, we add shader properties  and   to scale the object coordinates; thus, the code becomes:

Apart from this, we only have to set texture coordinates:

Then the fragment shader just looks up the color at the interpolated texture coordinates.

Complete Shader Code
The complete shader code for the standard cube object is now:

Summary
Congratulations, you made it to the end of this tutorial. We have seen:
 * How to transform and texture a cube in order to render a view-aligned billboard.

Reader comments
In order to avoid "flickering" when rendering several billboards I had to add the following tag in the Subshader