Disable smooth scaling on CanvasTexture

Questions
1

I’m just trying something out, and I want to apply a small pixel image (10x10px) to a Plane which is 10units square.

The texture scales up correctly, but, it doesn’t retain the sharp pixel edges, which is not the look I’m going for. I tried changing the minFilter & magFilter properties, but that didn’t do it.

Is it possible?

2

Not even if you set both texture properties to THREE.NearestFilter?

1 Like
3

Thanks @Mugen87 I’d set the min & mag properties on the material, and not the canvas texture, once I’d done that it worked correctly.

Correct code for anyone else looking at this:

    let material3 = new THREE.MeshBasicMaterial();
    material3.map = new THREE.CanvasTexture(canvas);
    material3.map.magFilter = THREE.NearestFilter;
    material3.map.minFilter = THREE.NearestFilter;
4

…but you did apply it to the CanvasTexture in that snippet. :thinking:

5

it’s not working,
image

i’m using canvas texture and it still looks blurry on 2048 canvas. i came across this website

image
image613×631 26 KB

it’s using 2048 texture, but it looks really sharp. anyone knows why?

6

The example here is for upscaling a small (pixel art) image, where the intention is that it scales to the size of the plane AND retains the sharp edges between pixels, so no smoothing.

The textures I’m working with are 20x20 to 200x200 and scale up in the way I wanted.

I think you’re trying to do something else.