Understanding the WebGLRenderer
The renderer is what actually draws your 3D scene onto a 2D canvas. It takes your scene and camera, does all the complex math, and outputs pixels. Honestly, it's like frickin' magic. Three.js provides several renderers, but WebGLRenderer is by far the most common - it uses your GPU for hardware-accelerated graphics.
Basic Setup
At minimum, you need to create a renderer, set its size, and call render() in a loop:
// Create the renderer
const canvas = document.querySelector('#webgl');
const renderer = new THREE.WebGLRenderer({ canvas });
// Set the size to match the container
renderer.setSize(width, height);
// Match device pixel density (for sharp rendering on retina displays)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Render loop
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
tick();Antialiasing
Antialiasing smooths out jagged edges on your geometry. Compare these two cubes - the left has no antialiasing, the right has it enabled:
// Enable antialiasing (slight performance cost)
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
});Transparent Background
By default, the renderer fills the canvas with a color. Setting alpha: true allows the canvas background to show through, which is useful for overlaying 3D on top of HTML content.
// Enable transparent background
const renderer = new THREE.WebGLRenderer({
canvas,
alpha: true
});
// Optional: set clear color with alpha
renderer.setClearColor(0x000000, 0); // fully transparentPixel Ratio
Modern devices have high pixel density displays (retina). Without setting the pixel ratio, your scene will look blurry:
// Set pixel ratio for sharp rendering
// Cap at 2 to avoid performance issues on very high DPI screens
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));Tone Mapping
Tone mapping controls how HDR (high dynamic range) colors are converted to what your screen can display. This is especially important when working with realistic lighting.
// Different tone mapping options
renderer.toneMapping = THREE.NoToneMapping; // Default, no conversion
renderer.toneMapping = THREE.LinearToneMapping; // Simple linear
renderer.toneMapping = THREE.ReinhardToneMapping; // Film-like
renderer.toneMapping = THREE.CineonToneMapping; // Cinematic
renderer.toneMapping = THREE.ACESFilmicToneMapping; // Industry standard
// Exposure control (works with tone mapping)
renderer.toneMappingExposure = 1.0;Enabling Shadows
Shadow rendering is disabled by default for performance. You need to explicitly enable it:
// Enable shadow maps
renderer.shadowMap.enabled = true;
// Shadow quality options
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows (default: PCFShadowMap)
// Then configure your lights and objects
directionalLight.castShadow = true;
mesh.castShadow = true;
floor.receiveShadow = true;Output Color Space
For accurate color reproduction, especially with textures, set the output color space:
// Use sRGB for correct color display
renderer.outputColorSpace = THREE.SRGBColorSpace;This ensures colors match what you see in image editors and the web.