Three.js Texture Magnification Filters Guide

This article explains how to alter texture magnification filters in Three.js to control how low-resolution textures are rendered. You will learn how to modify the magFilter property of a texture to switch between smooth bilinear interpolation and crisp nearest-neighbor rendering, allowing you to either eliminate blocky pixelation or preserve sharp pixel-art details.

In Three.js, when a texture is applied to a 3D object that is closer to the camera than the texture’s native resolution, the WebGL renderer must upscale (magnify) the image. By default, Three.js uses bilinear filtering, which can make low-resolution textures look blurry. To change this behavior, you must adjust the texture’s magFilter property.

Step-by-Step Implementation

To alter the magnification filter, you need to target the magFilter property of your loaded texture and assign one of the two primary Three.js filter constants.

1. Preventing Blur (Achieving Crisp Pixel Art)

If you are working with retro-style pixel art and want to prevent the renderer from blurring your pixels, you should use THREE.NearestFilter. This uses nearest-neighbor interpolation, keeping the edges of your pixels perfectly sharp.

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/low-res-texture.png', (texture) => {
    // Prevent blurring by using NearestFilter
    texture.magFilter = THREE.NearestFilter;
    
    // Optional: Align the minification filter for consistent scaling when far away
    texture.minFilter = THREE.NearestFilter;

    // Apply the texture to a material
    const material = new THREE.MeshBasicMaterial({ map: texture });
});

2. Preventing Blocky Pixelation (Achieving Smooth Scaling)

If you have a low-resolution texture that you want to appear as smooth as possible rather than blocky and pixelated, you should use THREE.LinearFilter. This is the default setting in Three.js, which performs bilinear interpolation to blend the pixels together.

// Smooth out pixelated edges using LinearFilter
texture.magFilter = THREE.LinearFilter;

Updating Textures Dynamically

If you alter the magFilter after the texture has already been rendered in the scene, you must instruct the GPU to update the texture by setting needsUpdate to true:

// Change filter on an existing texture
myTexture.magFilter = THREE.NearestFilter;
myTexture.needsUpdate = true;