WebGLRenderer
Quick answer
WebGLRenderer draws a Scene through a Camera into a canvas and manages the GPU context, color output, shadows, and render statistics. Configure antialias, pixel ratio, outputColorSpace, and toneMapping, then call render() each frame or register a loop with setAnimationLoop(). Call setSize() and setPixelRatio() on resize, and dispose() when tearing down the canvas.
new THREE.WebGLRenderer ( parameters ) → WebGLRenderer
Key points
- setPixelRatio() above 2 rarely improves sharpness and costs significant fill rate.
- info.render.calls and info.render.triangles reveal per-frame draw and triangle counts.
- compile(scene, camera) precompiles shaders to avoid first-render hitches.
Example
const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
stage.appendChild(renderer.domElement);
function destroy() {
renderer.setAnimationLoop(null);
renderer.dispose();
renderer.domElement.remove();
}Notes
- Setting a high pixel ratio on 4K screens multiplies fill cost; cap it at 2.
- Skipping dispose() and forceContextLoss() leaks GPU memory when recreating viewers.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). WebGLRenderer. https://www.jingweizhi.com/en/three/api/webgl-renderer.html (accessed 2026-11-03).