Billboarding

Compare this first-person terrain walker with a stroll you've taken through a park:

What's different about the two walks? Probably a few things, but the answer we're fishing for here is plants. This virtual world is barren. The physical world has plants. They feed and shelter living things. They block erosion. They regulate the environment. Human eyes are sensitive to more shades of green than any other color. We simply must put plants in our renderers.

Constructing plant meshes in a modeling tool is onerous. Plants are small, intricate, and relatively flat. Populating an entire field with 3D flora adds a lot of vertices to a scene. For these reasons, many game developers prefer to render plants as simple quadrilaterals textured with flat images like this one:

These images usually have an alpha channel, which means that we can use alpha mapping to discard the background fragments.

In the renderer below, 1000 quadrilaterals have been randomly positioned around the terrain. Walk around and look for some disappointing behavior:

The disappointment occurs when we look at a plant quadrilateral from its side. The plant effectively disappears. It is, after all, only a quadrilateral. But objects in a scene shouldn't disappear just because we're looking at the them from the wrong angle.

To cure the disappointment, we must orient the quadrilaterals so that they always face the viewer. Orienting 2D shapes in a 3D world so that they always face the viewer is called billboarding. The name is a nod to the billboards we see along a highway, which are turned to face traffic.

Orienting the quadrilaterals so they face the camera could be done by applying a rotation matrix. Since each plant is in a different position relative to the eye, we'd need a different matrix for each one. A cheaper solution is to model each plant with its four vertices compressed to a single point at the root and then expand them out by the camera's right and up vectors in the vertex shader. Step through this breakdown of the expansion to see how it's done:

We want to place a plant at position \(p\).

The plant image needs to be pasted on a square that is always facing the viewer. Suppose the square is 2×2.

We need to know the coordinates of the four neighbors. However, these locations are not fixed. They depend on the camera's current orientation.

Since positioning the vertices at the corners requires information that we don't have until a frame is being drawn, we initially place all four vertices at \(p\) in the vertex attributes. We also give the vertices the texture coordinates shown here. Unlike the position, the texture coordinates are unique.

These texture coordinates are used in the vertex shader to expand the vertices. Since the square has a width of 2, it spans the interval [-1, 1] around \(p\). We range-map the horizontal texture coordinate \(s\) from [0, 1] to [-1, 1] with multiplication and subtraction: $$ s' = 2s - 1 $$

The square has a height of 2. We therefore range-map the vertical texture coordinate \(t\) from [0, 1] to [0, 2] by doubling it: $$ t' = 2t $$

The vertices are expanded into the square by tacking onto \(p\) a linear combination of the camera's right vector and the camera's up vector. These vectors are scaled by \(s'\) and \(t'\). One vertex is strictly to the right.

Another is strictly to the left.

Another is to the right and up.

Another is to the left and up. Our billboard is now fully expanded so that it always faces the camera.

previous next

By using the camera's vectors, the quadrilateral will be visible.

In the following pseudocode, 1000 plants are randomly scattered around a terrain. Their x- and z- coordinates are chosen at random, and their y-coordinates are determined by blerping within the terrain.

n = 1000
positions = []
texPositions = []
indices = []

for i to n
  // Compute p.
  x = random in [0, terrain.width)
  z = random in [0, terrain.depth)
  y = blerp (x, z) in terrain

  // Make all four vertex positions be p.
  positions.push(x, y, z)
  positions.push(x, y, z)
  positions.push(x, y, z)
  positions.push(x, y, z)

  texPositions.push(0, 0)
  texPositions.push(1, 0)
  texPositions.push(0, 1)
  texPositions.push(1, 1)

  indices.push(i * 4, i * 4 + 1, i * 4 + 3)
  indices.push(i * 4, i * 4 + 3, i * 4 + 2)

n = 1000
positions = []
texPositions = []
indices = []

for i to n
  // Compute p.
  x = random in [0, terrain.width)
  z = random in [0, terrain.depth)
  y = blerp (x, z) in terrain

  // Make all four vertex positions be p.
  positions.push(x, y, z)
  positions.push(x, y, z)
  positions.push(x, y, z)
  positions.push(x, y, z)

  texPositions.push(0, 0)
  texPositions.push(1, 0)
  texPositions.push(0, 1)
  texPositions.push(1, 1)

  indices.push(i * 4, i * 4 + 1, i * 4 + 3)
  indices.push(i * 4, i * 4 + 3, i * 4 + 2)

In the vertex shader, the texture coordinates are range-mapped and used to expand the incoming position out to the desired corner.

This movement happens along the camera's right vector and up vector in world space, which must be sent in as uniforms. Where do we get these vectors from? We already have them in our camera abstraction.

This renderer uses billboarding to keep the plant quadrilaterals always visible:

If you look closely and turn the camera slowly, you can see the plant rotating. However, the rotation is less jarring than a disappearing plant.