The 3D graphics pipeline is the sequence of processing stages that transforms mathematical 3D model data into 2D images displayed on screen, and understanding this pipeline reveals how 3D model viewers create realistic real-time renderings in a web browser.

A 3D mesh is represented as a collection of vertices (points in 3D space defined by x, y, z coordinates), edges (connections between vertices), and faces (typically triangles formed by three connected vertices). Each vertex can also carry additional data: normal vectors for lighting calculations, UV texture coordinates for mapping 2D images onto the 3D surface, vertex colors, and bone weights for skeletal animation. The most common mesh formats store this data differently: OBJ is a simple text-based format listing vertices and face indices; STL stores individual triangles for 3D printing; GLTF/GLB is a modern format designed for efficient web delivery supporting meshes, materials, textures, animations, and scene hierarchy in a single file.

The rendering pipeline begins with vertex processing, where each vertex position is transformed through a series of matrix multiplications. The model matrix positions the object in the 3D world, the view matrix positions the camera, and the projection matrix creates the perspective effect where distant objects appear smaller. Modern GPUs execute this vertex processing in programmable vertex shaders that run in parallel on thousands of GPU cores simultaneously. After vertex processing, rasterization converts the projected triangles into fragments (potential pixels), determining which screen pixels each triangle covers. The fragment shading stage then calculates the final color of each pixel based on lighting, material properties, and textures.

WebGL (Web Graphics Library) is the browser API that enables 3D rendering by providing JavaScript access to the GPU's OpenGL ES capabilities. Three.js, the most popular WebGL framework and the one commonly used in browser-based 3D viewers, provides a high-level abstraction over raw WebGL, handling the complex details of shader compilation, geometry management, texture loading, and render loop management. Three.js implements physically-based rendering (PBR) materials that simulate how light interacts with surfaces using real-world properties like metalness, roughness, and albedo, producing realistic results. The lighting presets in a 3D viewer configure different arrangements of light sources: studio lighting typically uses a three-point setup (key light, fill light, and back light) adapted from photography and film, outdoor lighting simulates sun and sky ambient light, and flat lighting uses uniform ambient illumination to reveal geometry without shadows.