Fixing Blurry Canvas Textures in Three.js

When using a canvas as a texture in Three.js, blurriness can occur due to several factors. Here are the main solutions to fix the blurriness of your CanvasTexture:

1. Disable Texture Filtering

The most common cause of blurriness is texture filtering. Three.js applies linear filtering by default, which can make pixel art or sharp text appear blurry. To fix this:

JAVASCRIPTCopied
const texture = new THREE.CanvasTexture(yourCanvas);
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

2. Disable Mipmapping

Mipmapping can also cause blurriness:

JAVASCRIPTCopied
texture.generateMipmaps = false;

3. Ensure Proper Canvas Resolution

Make sure your canvas has sufficient resolution for the size it's being displayed at:

JAVASCRIPTCopied
// Set canvas dimensions to be higher for sharper rendering
yourCanvas.width = 1024;  // Use power-of-two values for best compatibility
yourCanvas.height = 1024;

4. Update the Texture When Canvas Changes

If you're modifying the canvas content dynamically, make sure to update the texture:

JAVASCRIPTCopied
// After modifying canvas content
texture.needsUpdate = true;

5. Check Pixel Ratio

For high-DPI displays, consider the device pixel ratio:

JAVASCRIPTCopied
const pixelRatio = window.devicePixelRatio;
yourCanvas.width = desiredWidth * pixelRatio;
yourCanvas.height = desiredHeight * pixelRatio;

Complete Example

Here's how you might implement these fixes:

JAVASCRIPTCopied
// Create canvas
const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
const ctx = canvas.getContext('2d');

// Draw on canvas
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.font = '32px Arial';
ctx.fillText('Sharp Text', 50, 50);

// Create texture with proper settings
const texture = new THREE.CanvasTexture(canvas);
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
texture.generateMipmaps = false;

// Create material and plane
const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.PlaneGeometry(1, 1);
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

Try implementing these solutions to achieve a sharper rendering of your canvas texture.