iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Renderer

By · Reviewed & last updated · Part of Three.js Tutorial

The renderer turns the scene + camera into pixels. The default WebGLRenderer is the right pick for most apps; WebGPURenderer is the modern faster alternative on supported browsers.

Set up + resize handling

EXAMPLE
import * as THREE from 'three';

// Create with sensible defaults
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    powerPreference: 'high-performance',
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x0a0a0a);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

// Resize properly — viewport AND camera aspect
window.addEventListener('resize', () => {
    renderer.setSize(innerWidth, innerHeight);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
});

// Cap devicePixelRatio at 2 on retina phones — saves 4x the fragment work
// for almost no visible quality loss.

Why it matters

For perfect colour on imported PBR materials and HDRIs, set outputColorSpace = SRGBColorSpace and pick a tone mapping. Most “why does my glTF look washed out?” bugs come from missing that.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Try it Yourself »

Discussion

Loading…