๐Ÿชฉ 3D Essentials

Meshes

A mesh is the combination of a geometry (the shape โ€” a collection of vertices and faces) and a material (the appearance โ€” color, shininess, texture). Everything visible in a 3D scene is typically a mesh.

Geometries

Geometries define the shape of a mesh as a set of vertices, faces, and associated data (normals, UV coordinates). Most engines provide primitives (box, sphere, plane, cylinder) for quick prototyping. Custom geometries can be loaded from 3D model files or built programmatically via buffer geometry, where you define vertex data directly in typed arrays.

Materials

Materials control how a meshโ€™s surface reacts to light. PBR (Physically-Based Rendering) materials are the modern standard โ€” they use properties like roughness, metalness, and albedo to simulate real-world surfaces. Simpler unlit or basic materials are cheaper and useful when you donโ€™t need realistic lighting.

Textures

Textures are images mapped onto geometry surfaces using UV coordinates. Common types include albedo (color), normal maps (fake surface detail), roughness, metalness, and emissive maps. KTX2 is a GPU-compressed texture format that reduces VRAM usage and improves loading times compared to PNG/JPEG.

Lighting and Shadows

Common light types: ambient (uniform, everywhere), directional (sun-like, parallel rays), point (emits in all directions from a position), and spot (cone-shaped). Shadows are computed using shadow maps โ€” the scene is rendered from the lightโ€™s perspective to determine which surfaces are in shadow. Shadow mapping is expensive, so limit the number of shadow-casting lights and consider baking static shadows into lightmaps.

Cameras

A perspective camera mimics human vision โ€” objects get smaller with distance. An orthographic camera has no perspective distortion โ€” useful for 2D games, UI overlays, and some stylized 3D games. Camera work is critical to game feel โ€” side-scrollers, third-person, and first-person cameras each have specific challenges around following, framing, and smoothing.

Raycasting

Raycasting shoots an invisible ray from a point in a direction and reports what it hits. Itโ€™s used for mouse picking (clicking on 3D objects), line-of-sight checks, ground detection, and more. A BVH (Bounding Volume Hierarchy) accelerates raycasting by organizing geometry into a spatial tree, avoiding the need to test every triangle.

Text

Rendering text in 3D is non-trivial. Unlike HTML, 3D engines donโ€™t have built-in text layout. Common approaches include SDF (Signed Distance Field) fonts for sharp text at any scale, and MSDF for multi-channel precision. Bitmap fonts are simpler but donโ€™t scale well.

Other Concepts

  • Delta time โ€” the time elapsed since the last frame. Multiply movement and animations by delta time to make them frame-rate independent.
  • Screen space vs. world space โ€” screen space is 2D pixel coordinates; world space is the 3D coordinate system of your scene. Converting between them is needed for UI positioning, mouse picking, and HUD elements.
  • Color management โ€” ensuring colors look correct across the pipeline (sRGB for textures, linear for lighting calculations).
  • CSG (Constructive Solid Geometry) โ€” combining geometries with boolean operations (union, subtract, intersect) to create complex shapes from simple ones.

Resources

๐Ÿ“ Fundamental Mathโœจ VFX & Particles