Billboards are an important part of 3D graphics, especially for use as user interface elements. Unfortunately, detailed information on how to construct them is a little hard to find, so I have derived the billboard matrix from scratch. In case anyone else is looking for this information, the derivation is as follows:

Let us assume a standard, row-major 4×4 transformation matrix, with the fields named as followed:

`a b c d`

e f g h

i j k l

m n o p

Neglecting any scale, this matrix is equivalent to the addition of a translation component to a 3×3 rotation matrix:

`ra rb rc x`

rd re rf y

rg rh ri z

0 0 0 1

When we go to render a billboard, we have the position of the billboard, and the camera transformation matrix (a.k.a. the view matrix). We need to produce a transformation matrix which, when multiplied by the view matrix, will place the billboard at the correct location, and orient it to face the camera.

The translation part is trivial, requiring only the basic translation matrix:

`1 0 0 x`

0 1 0 y

0 0 1 z

0 0 0 1

For the rotation part, we know that we want the billboard to match the camera’s orientation, so we know that the result of multiplying the view matrix with our transform matrix must result in the 3×3 identity matrix:

`1 0 0`

0 1 0

0 0 1

Since we already know the view matrix, we know that:

`view * T = identity`

But know by definition that for any matrix M:

`M * inverse of M = identity`

So the rotation component of our matrix must be the inverse of the rotation component of the view matrix.

In general, finding the inverse of a matrix is a complicated and expensive operation, but we can take advantage of the fact that rotation matrices are a special case. In particular, a rotation matrix is a real special orthogonal matrix, which for our purposes means that its transpose is also its inverse.

This means that the rotation component of our matrix is the transpose of the rotation component of the view matrix, and the transpose is easily found by swapping the rows with columns (i.e. turning the matrix on its side):

`|a b c| -1 |a d g|`

|d e f| = |b e h|

|g h i| |c f i|

This means that our final matrix can be built very simply from the position (x, y and z) and the view matrix (V):

`V.a V.e V.i x`

V.b V.f V.j y

V.c V.g V.k z

0 0 0 1

Wow really cool, thanks for this!

I’ve been trying to find a good billboarding tutorial since it’s been a while since i last set it up and most of the ones i found are in C# and/or are way more complicated for no reason.

Thanks for this clear, concise explanation (:

I have a hard time following this tutorial, I think the terminology is really ambigious(exactly WHAT is a view matrix?).

In OpenGL terms, the view matrix is generally the inverse of the camera’s model matrix (i.e. the inverse camera transform).

There is however considerable latitude for interpretation, so I don’t think it wise to be overly pedantic. View matrix is the accepted term, and you will find it used in most textbooks and tutorials.

I just tested this; it works. A couple notes for other people implementing it:

-Make sure you’re using only your camera matrix for this, NOT a combined camera and projection matrix. (The projection matrix adds other stuff in the rotation section of the matrix, which will mess up this method).

-This method rotates models so their +z is normal to the camera plane, which is generally good for most purposes. For example, it will produce text labels that look like they’re printed on the screen perfectly squarely, with no distortion. There are also other varieties of billboards (such as rotating to face the exact center of the camera) which use different (slower) methods.