Motion & Media
3D & WebGL
Real-time 3D in the browser: rendering, materials, and what keeps it fast.
Busted
- Ambient occlusionSoft darkening in corners, creases, and contact points that makes separate 3D surfaces feel grounded together.
- Anisotropic reflectionA reflection stretched along the grain of a surface, like the long highlights on brushed metal, satin, and hair.
- Anti-aliasing / MSAASmoothing the staircase edges of polygons by measuring more than one coverage point inside each screen pixel.
- BakingPrecomputing slow things (lighting, shadows, occlusion, surface detail) into textures once, so runtime just reads an image.
- Billboard / spriteA flat picture placed in 3D that keeps turning to face the camera, used to fake trees, smoke, labels, and other cheap scene detail.
- BloomA soft glow that spills out of the brightest parts of a 3D render, making neon, fire, and hot highlights feel brighter than the screen can show.
- Bounding box / bounding sphereAn invisible box or sphere wrapped around a detailed object so visibility, picking, and possible collisions can be checked cheaply.
- Camera / projection matrixThe math that flattens a 3D scene into a 2D picture: it sets framing, perspective, and how much of the world fits in frame.
- Chromatic aberrationRed and cyan fringes that grow near the frame edges, faking the imperfect color alignment of a real camera lens.
- Cubemap reflection probeA six-sided snapshot of the nearby scene that gives shiny objects reflections matching the room they occupy.
- Deferred vs forward renderingForward lights objects as they are drawn; deferred records the surfaces first, then lights the finished image. Fewer lights favor forward.
- Depth buffer / Z-bufferA hidden grayscale image storing how far away every pixel is, so the GPU knows what is in front and what gets covered up.
- Depth of field / bokehCamera-like focus blur rendered from scene depth, including the soft discs or aperture shapes made by out-of-focus lights.
- Device pixel ratioThe multiplier between CSS size and actual canvas pixels. Doubling it looks sharper but makes the GPU shade four times as many pixels.
- Displacement mapA texture that pushes a mesh's points in and out, creating real relief and a changed silhouette instead of merely faking bumps with light.
- Draw callOne 'GPU, draw this' command. Each costs CPU time, so 3000 separate objects stutter even when the scene looks simple.
- Environment map (often HDR)A 360 photo wrapped around the scene that both lights everything and shows up in the reflections. One image, instant believable lighting.
- Fresnel / rim lightSurfaces reflect more at glancing angles, creating the bright edge or rim you notice around glass, water, and polished objects.
- Frustum cullingSkipping any object that falls outside the camera's viewing pyramid, so the GPU never spends time on things nobody can see.
- Gaussian splattingA photoreal 3D capture made from millions of soft colored blobs instead of a polygon mesh. It looks solid from the camera, but has no surfaces.
- Geometry compression (Draco or meshoptimizer)Shrinking a mesh's vertex data so a fat GLB downloads fast: quantize the numbers, reorder them, compress. Draco and meshopt do this.
- glTF / GLBThe standard 3D file for the web: mesh, materials, textures, and animation in one bundle. GLB is the single-file version.
- GPU memory / VRAMThe GPU's limited workspace for textures, geometry, shadows, and render targets. Large images and high resolution fill it fast.
- InstancingDrawing thousands of copies of one mesh in a single draw call, each copy with its own position, rotation, scale, and color.
- LOD (level of detail)Swapping a model for cheaper, lower-poly versions as it gets farther from the camera, since nobody can see the detail anyway.
- MatcapA shaded sphere image wrapped onto any 3D model for an instant material and lighting look, with no scene lights required.
- MaterialThe surface recipe for an object: color, roughness, metalness, transparency. What the thing is made of.
- Mesh / geometryThe raw shape of a 3D object: points joined into triangles. No color, no lighting, just form.
- MipmapsSmaller prefiltered copies of a texture that the GPU uses at a distance to stop detail from flickering and crawling.
- Morph targets / blend shapesPreset versions of the same mesh blended with sliders, so a face can smile, blink, and form speech shapes without changing topology.
- Normal mapA purple-blue texture that fakes bumps and dents by lying about which way the surface faces, so light reacts as if detail were there.
- Occlusion cullingSkipping objects that are inside the camera view but fully hidden behind walls, terrain, or other geometry.
- Offscreen canvas / worker renderingHanding canvas rendering to a Web Worker so heavy 3D scene updates do not block typing, scrolling, or the rest of the page interface.
- Orbit controlsThe camera rig where dragging spins the view around a fixed target, scrolling zooms, and right-drag pans. The 3D-model-viewer feel.
- OverdrawThe same screen pixel getting shaded over and over by stacked layers. Transparency's hidden tax on framerate.
- Particle system; GPU particle simulationA crowd of tiny sprites for sparks, smoke, rain, or swarms, with their positions and lifetimes updated together on the GPU.
- PBR (physically based rendering)Materials described the way physics does (roughness plus metalness) so surfaces react to light like the real thing, not like plastic.
- Picking via ray castingShooting an invisible ray from the cursor into the scene to find out which 3D object was clicked or hovered.
- Post-processing; render passEffects applied to the finished 3D image like filters on a photo: bloom, grain, color grading, blur, added pass by pass.
- RasterizationThe step that works out which screen pixels each triangle covers, so the GPU knows exactly what it has to color in.
- Ray marching; signed distance fieldDrawing 3D forms by stepping through a math function instead of rasterizing triangles. It is the source of many blobby Shadertoy scenes.
- Render target; framebuffer objectA private canvas for the GPU: draw a scene into a texture now, then use that texture for shadows, effects, mirrors, picking, or another pass.
- RetopologyRebuilding a dense scan or sculpt as a cleaner, lighter mesh with edge loops placed where the model needs to bend and hold its silhouette.
- Rigging; skinning; skeletal animationBones inside a model, with every vertex weighted to them, so animating the skeleton bends the skin. How a character walks instead of sliding.
- Scene graphThe family tree of a 3D scene: move a parent object and all of its child parts follow.
- Screen-space reflections (SSR)A cheap reflection made from pixels already on screen, great for wet floors but prone to gaps and disappearing edges.
- ShaderA tiny program that runs on the GPU for one pipeline stage: per vertex to place points, per fragment to pick a color.
- Shadow mapping; shadow acne; peter-panningDepth-map shadows and their two classic bugs: stripey self-shadowing (acne) and shadows that float away from the object (peter-panning).
- SkyboxA cube or sphere of distant scenery around the camera, creating a whole world background without modeling the horizon.
- Subsurface scatteringLight entering a surface, spreading underneath it, then coming back out. It is the soft glow in skin, wax, marble, and leaves.
- Surface normals; backface cullingEvery face has a front and a back. Lighting reads the normal, the GPU culls back-facing triangles. Reverse it and the model looks inside out.
- TextureAn image wrapped onto a 3D surface. Sometimes it is the color, sometimes it is data telling the shader how rough or bumpy to be.
- Texture atlasOne large image holding many small textures, letting compatible objects share a material and cut texture switches and draw calls.
- Texture compression (KTX2 / Basis)Storing textures in a format the GPU reads while still compressed, so a 4K image eats a fraction of the VRAM instead of unpacking.
- Tone mappingThe curve that squeezes unlimited lighting values into screen colors, so bright areas roll off like film instead of clipping to white.
- Toon shading / cel shadingLighting snapped into a few hard-edged tones instead of a smooth gradient, giving 3D objects the graphic look of animation cels.
- Transforms / coordinate spacesPosition, rotation, and scale, plus the question of what they are relative to: the parent, the whole scene, or the camera.
- Transparency sortingSee-through objects must be drawn back to front. When they aren't, glass hides glass and parts of the model just vanish.
- Triangle count / polygon budgetThe limit on how much triangle detail a 3D asset or frame can afford before loading and rendering costs get too high.
- UV mapping; UV unwrappingThe map that decides which part of a flat image lands where on a 3D surface. Unwrapping is peeling the model flat to make that map.
- Vertex displacement; procedural noise deformationMoving a mesh's points in the vertex shader, often with animated noise, so a plain grid turns into waves, terrain, cloth, or a wobbling blob.
- Vertex vs fragment shaderThe two halves of a shader: the vertex shader moves points, the fragment shader colors the fragments filling the gaps.
- WebGPUThe modern browser API for graphics and GPU computation. It follows WebGL, adds compute shaders, and gives apps more direct control of the GPU.
- WebXRThe browser API that lets a web scene enter a VR headset or place AR objects through a camera, with head and controller tracking.
- Z-fightingThe flickering, stripey mess where two surfaces sit at the same depth and the GPU can't decide which one is in front.
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
- Rasterization converts projected triangles into fragments for pixel shading
- Scene graph hierarchy of objects and transforms composing a 3D scene
- Anti-aliasing / MSAA smooths jagged polygon edges during or after rendering
- Occlusion culling skips objects hidden behind other scene geometry
- Triangle count / polygon budget geometry complexity limit affecting rendering and transfer costs
- Device pixel ratio canvas resolution multiplier with major GPU performance consequences
- GPU memory / VRAM limited memory consumed by textures, geometry, and render targets
- Mipmaps prescaled texture versions to prevent shimmer at distance
- Texture atlas packing many textures into one image to cut draw calls
- Skybox background cube or sphere surrounding the scene
- Ambient occlusion soft contact shadows in creases and where surfaces meet
- Displacement map texture that actually moves geometry, unlike a normal map
- Subsurface scattering light diffusing inside skin, wax, marble, leaves
- Fresnel / rim light brightening at grazing angles; the edge glow on objects
- Anisotropic reflection stretched highlights on brushed metal and hair
- Cubemap reflection probe localized captured environment for accurate reflections
- Matcap a sphere image used as fake lighting; instant look, zero light setup
- Toon shading / cel shading quantizes lighting into graphic, hard-edged tonal bands
- Bloom glow bleeding out of bright areas as a post effect
- Screen-space reflections (SSR) cheap reflections computed from what's already on screen
- Depth of field / bokeh focal blur with rendered out-of-focus highlights
- Chromatic aberration color fringing at the frame edges, lens-imperfection look
- Deferred vs forward rendering two lighting pipelines trading light count against transparency and cost
- Ray marching; signed distance field rendering shapes from math instead of meshes; blobs, clouds, infinite scenes
- Vertex displacement; procedural noise deformation wobbling geometry with procedural noise in the shader
- Particle system; GPU particle simulation thousands of sprites simulated on the GPU
- Billboard / sprite flat quad always facing the camera
- Bounding box / bounding sphere cheap collision and culling proxy volumes
- Morph targets / blend shapes preset deformed mesh states blended for faces and shape animation
- Retopology rebuilding a dense scanned mesh into clean, animatable geometry
- Render target; framebuffer object drawing into a texture instead of the screen
- Offscreen canvas / worker rendering rendering off the main thread to keep the UI responsive
- Gaussian splatting photoreal scene capture rendered as millions of fuzzy blobs, not meshes
- WebGPU successor GPU API to WebGL with compute shaders and better performance
- WebXR browser API for immersive virtual and augmented reality sessions