Motion & Media

3D & WebGL

Real-time 3D in the browser: rendering, materials, and what keeps it fast.

Busted

The territory

30 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

  • Mesh / geometryvertex and index data defining a renderable object's shape"the actual 3D model data" · "the wireframe shape itself"
  • Materialrules and inputs controlling how a surface is shaded"the surface settings" · "what the object is made of"
  • Textureimage data sampled for color, detail, or material properties"the picture wrapped on the model" · "the image skin"
  • Shadersmall GPU program deciding each pixel's or vertex's final position and color"the custom color code that runs on the graphics card" · "that gradient math thing"
  • Draw callone GPU instruction to render a mesh; too many kills framerate"why is it slow when there's lots of objects" · "the count thing that makes 3D lag"
  • Transforms / coordinate spacesposition and orientation across local, world, view, and clip spaces"why is my object in the wrong place" · "local versus world position"
  • Camera / projection matrixconverts scene coordinates into the camera's projected view"how the 3D turns into a flat image" · "the lens math"
  • PBR (physically based rendering)material model using roughness/metalness so surfaces react to light realistically"make it look like real material not plastic" · "the realistic shiny settings"
  • UV mapping; UV unwrappingflattening a 3D surface so a 2D texture wraps onto it"how the image wraps around the model" · "unfolding the model flat"
  • Normal maptexture faking surface bumps and detail without extra geometry"fake bumpiness" · "detail without more polygons"
  • Environment map (often HDR)360-degree image used to light and reflect on the whole scene"HDRI" · "the photo that lights the scene" · "the reflection sky image"
  • Depth buffer / Z-bufferstores depth so nearer surfaces correctly occlude farther ones"what hides behind what" · "the invisible depth image"
  • glTF / GLBstandard compact 3D file format for web delivery, textures included"the web 3D file type" · "the JPEG of 3D models"
  • Vertex vs fragment shaderone moves points, the other colors pixels"the two kinds of shader code" · "which shader does what"
  • Post-processing; render passscreen-space effects applied after the 3D render"filters on top of the 3D" · "the after-effects layer"
  • Tone mappingcompressing HDR light values into displayable color (ACES, Filmic)"why is everything blown out white" · "the ACES setting"
  • Shadow mapping; shadow acne; peter-panningdepth-based shadows and their classic artifacts"the shadows look stripey" · "the shadow is detached from the object"
  • Surface normals; backface cullingfacing direction; discarding polygons pointing away"the model looks inside out" · "why are some faces invisible"
  • Instancingdrawing thousands of copies of one mesh in a single draw call"a million of the same object cheaply" · "repeat the model without slowing down"
  • Frustum cullingskipping objects outside the camera's view volume"don't render what's off-screen" · "only draw what you can see"
  • LOD (level of detail)swapping to simpler meshes as objects get farther away"lower quality when far away" · "simplify distant stuff"
  • Overdrawsame pixel shaded repeatedly by stacked transparent layers"too many transparent layers stacked" · "why the see-through parts tank the framerate"
  • Bakingprecomputing lighting, shadows, or detail into textures for runtime speed"freeze the lighting into an image" · "pre-render the shadows"
  • Picking via ray castingshooting a ray from the cursor to detect which object was clicked"raycasting" · "how do I click on a 3D object" · "hit detection from the mouse"
  • Orbit controlscamera rig letting users drag to rotate, scroll to zoom around a target"drag to spin the model" · "the turntable camera"
  • Transparency sortingordering see-through objects correctly to avoid render glitches"alpha sorting" · "the glass looks broken through other glass" · "transparent things flickering"
  • Z-fightingflickering where two coplanar surfaces contend for the same depth"two surfaces flickering into each other" · "stripey glitch on the flat thing"
  • Texture compression (KTX2 / Basis)GPU-native texture formats that save VRAM and load time"make the textures load faster" · "the special GPU image format"
  • Geometry compression (Draco or meshoptimizer)shrinking mesh data so 3D models load fast over the web"make the 3D file smaller" · "compress the model for the web"
  • Rigging; skinning; skeletal animationbones and weights that let a mesh deform and animate"the bones inside the character" · "make the model bend and walk"

Deeper in the field