Three.js material disable interpolation

user_16379601 0
Viewed 169

I have a 64x64 pixel texture that consists of white and transparent pixels and should be used as an overlay. The problem is that the texture is stretched and the rendering has to be pixel-perfect. But when the texture is rendered the edges between white and transparent pixels are interpolated but they have to be sharp edges. How do I disable interpolation for this specific material?

Material definition:

this._groundOverlayMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true
});

The map is created separately using a canvas and then set using:

this._groundOverlayMaterial.map = new THREE.TextureLoader().load(overlayCtx.canvas.toDataURL('image/png'));
this._groundOverlayMaterial.needsUpdate = true;

Info: The mesh is a simple plane with no subdivisions

three.js
1 Answers

You probably want to set the texture's Magnification & Minification filters to "Nearest Neighbor", which removes interpolation between pixels, and instead "snaps" to the closest pixel, similar to Math.round() to the nearest full integer.

// Create texture from canvas
const texture = new THREE.CanvasTexture(overlayCtx.canvas);
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

// Use that texture in your material
this._groundOverlayMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true,
    map: texture,
});

You might only need it when magnifying the texture, not sure if you need it for minifying.

user_26085150
Related