Interactive visual
common
Billboarding
flat cards that always turn to face the camera
A billboard is a flat quad rotated every frame to face the camera, so a 2D image reads as 3D. Use full facing for sprites, Y-axis only for trees.
Three.js & Rendering
How a 3D scene becomes pixels: rays, normals, culling, shaders and the standard ways to draw less.
7 cheat sheets · 1 subcategories
Rendering
Core real-time rendering ideas every Three.js scene relies on.
Interactive visual
common
Fragment Shaders
a tiny program that runs once for every pixel
A fragment shader computes the colour of each pixel a triangle covers. Feed it UVs, normals and a time uniform and it paints anything.
Interactive visual
core
Frustum Culling
don't draw what the camera can't see
Frustum culling skips objects whose bounding volume lies fully outside the camera's six view planes, before any draw call is made.
Interactive visual
common
Level of Detail (LOD)
spend triangles only where the player can see them
LOD swaps a mesh for cheaper versions as it shrinks on screen, so far objects cost a fraction of near ones. Hysteresis stops the swaps flickering.
Interactive visual
core
Raycasting
shoot an invisible line and ask what it touches first
A ray is an origin plus a direction. Raycasting returns the nearest surface it crosses, with hit point, distance and surface normal.
Interactive visual
core
Surface Normals
the unit arrow that says which way a surface faces
A normal is a unit vector perpendicular to a surface. Lighting, slope checks, bounces and decals all start from it, so it must be right.
Interactive visual
core
Z-Fighting
two surfaces, one depth value, endless flicker
Z-fighting is the shimmering stripes you get when two surfaces are closer than the depth buffer can resolve. Fix the geometry, the near plane or the bias.