Difference Between magFilter and minFilter in Three.js

When rendering 3D graphics in Three.js, texture filtering determines how pixels are mapped to your 3D models when the texture resolution does not perfectly match the screen space it occupies. This article explains the fundamental differences between magFilter (magnification) and minFilter (minification), how they behave under different rendering scenarios, and how to configure them to optimize both visual quality and performance in your WebGL applications.

Magnification Filter (magFilter)

The magFilter property defines how Three.js behaves when a texture is stretched over an area larger than its native resolution. This happens when the camera gets very close to a textured object, forcing a small texture to cover a large number of screen pixels.

Because there are fewer texture pixels (texels) than screen pixels, the engine must interpolate the missing data. The two primary options for magFilter are:

• THREE.NearestFilter: Grabs the value of the nearest texel. This results in a sharp, pixelated, or blocky appearance, which is ideal for retro pixel-art styles or Minecraft-like aesthetics.
• THREE.LinearFilter: Computes a weighted average of the four texels closest to the pixel center. This creates a smooth, blurred look, which is generally preferred for realistic surfaces.

Minification Filter (minFilter)

The minFilter property defines how Three.js behaves when a texture is shrunk to fit an area smaller than its native resolution. This occurs when an object is far away from the camera, meaning a high-resolution texture must be squeezed into a very small cluster of screen pixels.

Unlike magnification, minification can cause severe visual artifacts like shimmering and aliasing (moiré patterns) if not handled correctly. To solve this, Three.js uses mipmaps—pre-calculated, downscaled versions of the original texture. Because of this, minFilter has more configuration options than magFilter:

• THREE.NearestFilter: Samples only the single nearest pixel from the original texture, disregarding mipmaps. It is highly performant but causes heavy aliasing.
• THREE.LinearFilter: Samples and averages the four nearest pixels from the original texture, ignoring mipmaps. It is slightly smoother than nearest filtering but still prone to shimmering at a distance.
• THREE.NearestMipmapNearestFilter: Chooses the mipmap level that best matches the screen size, then samples the nearest single pixel from that mipmap.
• THREE.NearestMipmapLinearFilter: Chooses the two closest mipmap levels, samples the nearest pixel from both, and linearly interpolates between them.
• THREE.LinearMipmapNearestFilter: Chooses the mipmap that best matches the screen size, and performs a bilinear (smooth) sample of that mipmap.
• THREE.LinearMipmapLinearFilter: Performs trilinear filtering. It smooths the pixels within the two closest mipmaps and smooths the transition between those two mipmaps. This offers the highest visual quality but requires the most GPU processing.

Key Differences Summary

Implementation in Three.js

To configure these properties, you adjust the magFilter and minFilter properties directly on a loaded texture object:

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

// Configure for sharp pixel-art style
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;

// Configure for maximum smoothness (standard default)
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipmapLinearFilter;

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

When choosing your filters, keep in mind that using mipmap filters with minFilter requires the texture width and height to ideally be powers of two (e.g., 512x512, 1024x1024) for optimal compatibility and performance across WebGL devices.