WebGLRenderer Pipeline

WebGLRenderer is the orchestrator of the entire pipeline — it owns the WebGL context, manages all GPU state, coordinates shader compilation, and drives the render loop.

At construction it initializes ~20 sub-systems:

const renderer = new THREE.WebGLRenderer({ antialias: true });

// Internally creates:
// WebGLBufferRenderer   — calls gl.drawArrays / gl.drawElements
// WebGLIndexedBufferRenderer
// WebGLAttributes       — uploads BufferAttributes to GPU
// WebGLBindingStates    — manages VAOs (vertex array objects)
// WebGLTextures         — uploads textures, manages texture units
// WebGLPrograms         — compiles and caches GLSL shader programs
// WebGLRenderLists      — opaque/transparent object sorting
// WebGLRenderStates     — per-render light & shadow state
// WebGLShadowMap        — renders shadow depth maps
// WebGLState            — thin wrapper around gl.enable/disable/blend/depth
// WebGLUniforms         — uploads uniform values to shader programs
// ...and more

renderer.setAnimationLoop(callback) wraps requestAnimationFrame. The callback receives the current timestamp in milliseconds.

// Internal WebGLAnimation.js
let animationLoop = null;
let requestId = null;

function onAnimationFrame( time, frame ) {
  animationLoop( time, frame );
  requestId = xr.isPresenting
    ? xr.getSession().requestAnimationFrame( onAnimationFrame )
    : requestAnimationFrame( onAnimationFrame );
}

// Public API:
renderer.setAnimationLoop( callback ) {
  animationLoop = callback;
  if ( callback === null ) {
    cancelAnimationFrame( requestId );
  } else {
    requestId = requestAnimationFrame( onAnimationFrame );
  }
}

In XR (VR/AR) mode, xr.getSession().requestAnimationFrame is used instead — it syncs with the headset's display refresh rate and provides an XRFrame with pose data.

The pool reuse (renderItems[]) avoids creating new objects each frame, which would stress the garbage collector and cause frame time spikes.

WebGL has expensive state-change calls. WebGLState shadows all GL state in JavaScript and only calls the WebGL API when the value actually changes:

// WebGLState.js — example: setBlending
function setBlending( blending, blendEquation, blendSrc, blendDst, ... ) {
  if ( blending === NoBlending ) {
    if ( currentBlendingEnabled ) {
      gl.disable( gl.BLEND );      // only calls GL if state changed
      currentBlendingEnabled = false;
    }
    return;
  }

  if ( ! currentBlendingEnabled ) {
    gl.enable( gl.BLEND );
    currentBlendingEnabled = true;
  }

  if ( blending !== currentBlending || ... ) {
    // Only update if different from last draw
    gl.blendEquationSeparate( ... );
    gl.blendFuncSeparate( ... );
    currentBlending = blending;
  }
}

This pattern is applied to: blend mode, depth test/write, stencil, face culling, line width, scissor, viewport, and more. It's a critical optimization — redundant GL state changes are one of the top causes of WebGL performance issues.

A WebGLRenderTarget redirects rendering into a texture instead of the canvas. This is the foundation for post-processing, shadow maps, reflections, and SSAO.

// Create a render target (texture)
const target = new THREE.WebGLRenderTarget( 512, 512, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.NearestFilter,
  format: THREE.RGBAFormat,
});

// Render scene into the texture
renderer.setRenderTarget( target );
renderer.render( scene, camera );

// Back to canvas
renderer.setRenderTarget( null );
renderer.render( scene, camera );

// Use the texture
const material = new THREE.MeshBasicMaterial({ map: target.texture });

Internally, three.js binds the render target's framebuffer object (FBO) before rendering. The FBO directs draw output to the attached texture instead of the default framebuffer (canvas).

• WebGL Fundamentals — How It Works
• Khronos — OpenGL Rendering Pipeline Overview
• MDN — WebGL Best Practices — state changes, draw calls, buffer updates
• LearnOpenGL — Framebuffers — render-to-texture foundation
• LearnOpenGL — Shadow Mapping
• Three.js Docs — WebGLRenderer
• src/renderers/webgl/WebGLState.js — GL state shadow
• src/renderers/webgl/WebGLPrograms.js — shader cache & compilation