How To Implement Billboards in WebGL
Sparrow WebGL Devlog 14: Billboards — WebGL tutorial style
Imagine an NPC in a video game. You can see their name above their head. Now move a few steps and look at the NPC again. You can still see and read their name. Just like Mona Lisa’s eyes, the text always faces you no matter where you go. This technique is known as billboards in computer graphics.
Rendering text that always faces the camera is one of many situations where billboards are useful. Other common uses are health bars and 3D particle systems. Fire is typically just a bunch of animated particles that face the camera. Finally, there is another trick that graphics programmers use to save performance in large and open environments. Textured quads that are always rotated toward the player can replace 3D models in the distance. This would be obvious nearby, but it’s almost undetectable in the distance.
Billboards in WebGL
What does it mean when a quad always has to face the camera? It has to be rotated the same way as the camera and be parallel to the camera plane. We could do this with two rotation matrices to copy the yaw and pitch of the camera and combine them into the model matrix of the quad, but this isn’t the best approach.
There are many different ways you can implement billboards. With OpenGL, you can use geometry shaders to generate the vertices of the quad so that they face the camera. WebGL, however, doesn’t support geometry shaders, so let’s use a different solution instead.
First, a quick reminder about world space and camera space in WebGL. World space describes the default coordinate system of the scene. For example, a cube is at some coordinates like (2,3,-4) and the camera is somewhere looking in a random direction. The projection matrix, however, expects the camera to be at (0,0,0) facing the negative z-axis, which is also known as the camera space. The view matrix is used to convert from world space to camera space.
In camera space, the up vector is (0,1,0), and the right vector is (1,0,0). All we need to know is what these vectors are in world space and we can easily create a quad that’s parallel to the camera plane. Mathematically, this is done with the inverse view matrix…