WebGL & Three.js Cheatsheet

🖥 Renderer Flags

Pass these options to the WebGLRenderer constructor. Most have performance implications.

Renderer properties to set after construction

🔗 Three.js → Raw WebGL Equivalents

Three.js wraps every WebGL concept. This table maps Three classes to their underlying GL calls — useful when writing custom shader passes or debugging.

📐 BufferGeometry Attributes

Built-in attribute names recognised by Three.js standard materials. Custom shaders can use any name — wire them with geometry.setAttribute('name', attr).

🖼 Texture Formats

Texture parameters

const tex = new THREE.TextureLoader().load('diffuse.webp');

tex.colorSpace  = THREE.SRGBColorSpace;       // only for colour maps
tex.wrapS       = THREE.RepeatWrapping;        // horizontal repeat
tex.wrapT       = THREE.RepeatWrapping;        // vertical repeat
tex.repeat.set(4, 4);                       // tile 4×4
tex.minFilter   = THREE.LinearMipmapLinearFilter;
tex.magFilter   = THREE.LinearFilter;
tex.anisotropy  = renderer.capabilities.maxAnisotropy; // sharpness at angles

⚙ Hardware Limits

Query these at runtime with renderer.capabilities or raw gl.getParameter():

🔌 Useful WebGL Extensions

Extensions are opt-in capabilities. In WebGL 2 many former extensions are now core, but some still require explicit enablement.

Check availability:

const ext = renderer.extensions.get('EXT_color_buffer_float');
if (!ext) console.warn('Float render targets not supported');

💡 Common Patterns

Render target (off-screen framebuffer)

const rt = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  depthBuffer: false,   // skip if no depth test needed
});

renderer.setRenderTarget(rt);
renderer.render(scene, camera);
renderer.setRenderTarget(null); // restore default framebuffer

GPGPU ping-pong (particle physics on GPU)

// Two render targets — swap each frame
let [rtA, rtB] = [makeRT(), makeRT()];

function compute() {
  // rtA = read (previous positions), rtB = write (new positions)
  computeMaterial.uniforms.tPrev.value = rtA.texture;
  renderer.setRenderTarget(rtB);
  renderer.render(quadScene, orthoCamera);
  renderer.setRenderTarget(null);
  [rtA, rtB] = [rtB, rtA]; // swap
}

InstancedMesh — 100k objects, one draw call

const mesh = new THREE.InstancedMesh(geometry, material, COUNT);
const matrix = new THREE.Matrix4();

for (let i = 0; i < COUNT; i++) {
  matrix.setPosition(positions[i]);
  mesh.setMatrixAt(i, matrix);
}
mesh.instanceMatrix.needsUpdate = true;
scene.add(mesh);

Dispose to free GPU memory

// Always dispose when removing objects from the scene
geometry.dispose();
material.dispose();
texture.dispose();
renderTarget.dispose();
renderer.dispose(); // when tearing down the whole renderer

Check WebGL version at runtime

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
  console.warn('WebGL 2 unavailable — falling back to WebGL 1');
}
// OR use Three's abstraction:
const renderer = new THREE.WebGLRenderer();
console.log(renderer.capabilities.isWebGL2); // true / false