Chapter 803: Billboards (Manual)

Core Idea

Using Sprite/SpriteMaterial to make objects always face the camera, and using pre-rendered "facades" (2D textured planes) as a cheap stand-in for repeated complex 3D objects like trees.

Key Concepts

• Sprite / SpriteMaterial: a plane that always faces the camera, useful for labels, badges, or particle-like effects.
• Facade: a 2D plane textured with an image of a 3D object rendered from one angle, far cheaper to draw at scale than the real geometry.
• RenderTarget: used to pre-render an object (e.g. a tree) to an offscreen texture that becomes the facade's texture.
• frameArea: a helper that positions a camera so an object's bounding box exactly fills the frame, used when baking a facade texture.
• Angle limitation: a facade only looks correct from the angle it was rendered from; convincing multi-angle facades need multiple renders swapped by camera direction.

Code Examples

function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
  const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
  const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
  const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
  camera.position.copy(boxCenter);
  camera.position.z += distance;
  camera.near = boxSize / 100;
  camera.far = boxSize * 100;
  camera.updateProjectionMatrix();
}

• What it demonstrates: positioning a camera so an object's bounding box fits the frame, a prerequisite for baking a facade texture with a RenderTarget.

Key Takeaways

1. Sprite + SpriteMaterial billboard a plane so it always faces the camera.
2. Facades trade a full 3D mesh for a textured plane rendered once from a chosen angle, cutting polygon count drastically for repeated distant objects.
3. Rendering to a RenderTarget is how you bake an object's appearance into a facade texture ahead of time.
4. A single facade only reads correctly from its render angle; use several facades from different directions if the camera can view the object from many sides.

Connects To

• CanvasTexture: an earlier technique for badge-style labels that this chapter extends with true billboarding.
• WebGLRenderTarget: the offscreen render target used to bake facade textures.