The 3D Web Glossary
Definitions for over 50 essential WebGL, Three.js, and R3F terms. Master the vocabulary of modern 3D web development.
A
Ambient Light
A light source in Three.js that globally illuminates all objects in the scene equally without a specific direction or shadows.
AnimationMixer
An object in Three.js used to manage and play animations on a specific 3D character or object.
Anti-aliasing
A graphics rendering technique used to smooth jagged edges on diagonal lines and curves to make the final image look crisp.
Attributes
Variables containing data per vertex, such as position, normal, and color, passed from CPU to vertex shaders in WebGL.
AxesHelper
A debugging tool in Three.js that renders 3 axes (X=red, Y=green, Z=blue) to help orient objects in 3D space.
B
Bounding Box
The smallest invisible rectangular box that completely encloses a 3D geometry. Frequently used for collision detection and frustum culling.
BufferGeometry
An efficient representation of mesh, line, or point geometry in Three.js that uses typed arrays to store vertices, faces, colors, and normals.
C
Camera
The abstract viewpoint from which the 3D scene is rendered. In Three.js, this is usually a PerspectiveCamera or OrthographicCamera.
Canvas
The HTML5 `<canvas>` element used as the surface where WebGL context draws the resulting 2D pixels of a rendered 3D scene.
CubeTexture
A texture made of six images corresponding to the sides of a cube. Frequently used for skyboxes and environment mapping.
D
Directional Light
A light source emitting parallel rays in a specific direction. Behaves like the sun, where all rays are parallel and can cast shadows.
Draw Call
A command sent from the CPU to the GPU telling it to draw a specific mesh. Minimizing draw calls is key to 3D web performance.
Drei
A popular utility library for React Three Fiber that provides pre-built, reusable components to streamline common 3D tasks.
E
Environment Map (EnvMap)
A panoramic texture mapped onto objects to simulate realistic reflections and lighting, widely used in PBR materials.
F
Fragment Shader
A GLSL program executed on the GPU responsible for determining the final color of every rendered pixel (or fragment) on the screen.
Frustum Culling
An optimization technique where the engine skips rendering objects that fall outside the camera's viewing area (frustum).
G
Geometry
The structured arrangement of vertices and faces defining the physical 3D shape of an object.
GLb / GLTF
GL Transmission Format. The 'JPEG of 3D', an highly efficient, optimized file format designed specifically for fast loading on the web.
GLSL
OpenGL Shading Language. A C-style language used to write custom shaders (vertex and fragment) executed directly on the GPU.
GPU (Graphics Processing Unit)
The specialized processor that accelerates the mathematical calculations needed to render complex 3D graphics in the browser.
H
HDRI
High Dynamic Range Image. A 360-degree panoramic image containing realistic lighting data, frequently used for environment maps.
I
InstancedMesh
A Three.js class that allows you to draw thousands of copies of the same geometry with a single draw call, drastically improving performance.
M
Material
The appearance configuration (color, metalness, roughness, transparency) applied to a geometry to define how it interacts with light.
Matrix
A mathematical grid of numbers used heavily in 3D graphics to represent transformations like translation, rotation, and scaling.
Mesh
A core 3D object constructed by combining a Geometry (shape) with a Material (appearance).
MeshPhysicalMaterial
The most advanced, photorealistic physically-based rendering (PBR) material available in Three.js, supporting clearcoat, transmission, and sheen.
MeshStandardMaterial
The standard PBR material in Three.js that provides realistic lighting interactions based on physical principles like roughness and metalness.
Mipmapping
A technique that pre-calculates downscaled versions of a texture to improve rendering performance and reduce aliasing artifacts when viewed at a distance.
N
Normal
A vector that is perpendicular to a surface or vertex. Normals are essential for calculating how a surface interacts with lighting.
Normal Map
An image texture (often bluish) used to fake high-resolution bumps, dents, and surface details without adding extra geometry.
O
Orthographic Camera
A camera projection mode where object size remains constant regardless of distance. Typically used for 2D, UI, or isometric designs.
P
Perspective Camera
The most common camera mode mimicking human vision, where objects appear smaller the further away they are from the viewpoint.
Point Light
A light emitting uniformly in all directions from a single point in space, similar to a bare lightbulb.
Post-Processing
Visual effects applied to the entire rendered image just before displaying it to the screen (e.g., Bloom, Depth of Field, Glitch).
Q
Quaternion
A complex mathematical construct used to safely process 3D rotations without suffering from 'Gimbal Lock'.
R
Raycaster
A Three.js utility that projects an invisible line from the camera (or mouse position) into the 3D scene to detect intersecting objects.
React Three Fiber (R3F)
A powerful React renderer for Three.js that allows you to build 3D scenes declaratively using JSX components and React hooks.
Renderer
The engine component (usually WebGLRenderer in Three.js) that processes the Camera and Scene to draw the final pixels onto the Canvas.
Roughness
A PBR material property defining how microscopic imperfections scatter light. High roughness looks matte; low roughness looks glossy and reflective.
S
Scene
The root container object in Three.js where you place all 3D objects, lights, and cameras that you want to be rendered.
Shader
A small program specifically written in GLSL that runs incredibly fast on the GPU to calculate vertex positions and pixel colors.
ShaderMaterial
A basic custom material in Three.js that allows you to inject your own custom vertex and fragment GLSL code.
Shadow Map
An invisible texture generated from a light's perspective used to determine which parts of the scene are blocked from the light.
SpotLight
A light source emitting a cone of light in a specific direction, functioning exactly like a real-world flashlight or stage spotlight.
T
Texture
A 2D image mapped over the surface of a 3D geometry to give it visual detail (e.g., wood grain, brick, human skin).
TSL
Three.js Shading Language. A modern, node-based system in Three.js for creating shaders using JavaScript/TypeScript instead of raw GLSL string manipulation.
Transmission
A physical material property enabling the simulation of transparent, refractive surfaces like clear glass or distinct liquids.
U
Uniforms
Global variables passed directly from your JavaScript codebase into your GLSL shaders that remain constant across all vertices and pixels during a specific frame.
UV Mapping
The 2D coordinate system (U and V) that maps flat image textures to the surface of a 3D geometry.
V
Vertex Shader
A GLSL program running on the GPU that calculates the final 3D position of every single mathematical point (vertex) comprising a shape.
W
WebGL
Web Graphics Library. The low-level JavaScript API allowing web browsers to render interactive 2D and 3D graphics directly using the GPU.
WebGPU
The modern, high-performance successor to WebGL, providing lower-level GPU control and compute shader capabilities directly in the web browser.
WebXR
The modern web API enabling the creation of immersive virtual reality (VR) and augmented reality (AR) experiences directly in the browser.