Enable MSAA on WebGLRenderTarget in Three.js

This article explains how to configure the samples property on a WebGLRenderTarget to enable Multi-Sample Anti-Aliasing (MSAA) in Three.js. You will learn the correct property settings, see a practical code implementation, and understand the requirements needed to get high-quality, anti-aliased offscreen renders in WebGL2.

Configuring MSAA on WebGLRenderTarget

To enable MSAA on a render target in Three.js, you must set its samples property to a value greater than 0. By default, the samples property is set to 0, which disables multisampling.

Setting this property triggers WebGL2’s multisampled renderbuffer behavior. The standard value for good quality is 4, while 8 offers higher quality at a higher performance cost.

Code Example

Here is how to instantiate a WebGLRenderTarget with MSAA enabled:

import * as THREE from 'three';

// 1. Create the render target with options
const width = window.innerWidth;
const height = window.innerHeight;

const renderTarget = new THREE.WebGLRenderTarget(width, height, {
    samples: 4 // Enables 4x MSAA
});

// 2. Use the render target in your render loop
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

function animate() {
    requestAnimationFrame(animate);

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

    // Reset the render target to the screen
    renderer.setRenderTarget(null);
    
    // (Optional) Render the target's texture to the screen, e.g., for post-processing
}

Key Considerations