Pixelart texture becomes "fatter"

Hey, first post. Been using three js on and off for a year or so now. Loving it!

Anyway, having some issues with my pixel art texture in a super early project. This texture:

Rightmost part of the texture has some skinny pixel sections that grow fatter in rendering. I wonder why and how to fix it.

Detailed explanation:
I found the tricks for making it sharp with the correct colors in rendering, no issues there (minfilter, magfilter, colorspace):

tx.minFilter = NearestFilter;
tx.magFilter = NearestFilter;
tx.colorSpace = SRGBColorSpace;

The problem comes from the rightmost part of the texture. Here is the source texture, zoomed in on the right side in photoshop:

his is what it looks like in the rendering. Most of it looks correct, except the rightmost pixels seem to have grown and spread out more than in the source texture. Almost like it got “fatter”:

This is how I add it to the scene, rendered with an orthographic camera:

const geometry = new PlaneGeometry(10.5, 3);
const material = new MeshStandardMaterial({map: theTextureWithoutFurtherModifications});
const planeMesh = new Mesh(geometry, material);

I double, triple checked that the source image is the one being loaded. I checked the network tab of the browser and this is now the only image being loaded (outside favicon.ico). CTRL+F5 after restarting the vite server, and it shows like this in the browser:

The browser image zoomed for your convenience:

This is my pnpm list output:
Using three.js v 0.164.1
commonjs 0.0.1
three 0.164.1

@types/node 20.12.12 @typescript-eslint/parser 5.62.0 prettier 2.8.8 typescript 4.9.5
@types/three 0.164.1 eslint 8.44.0 sass 1.71.1 vite 5.1.6
@typescript-eslint/eslint-plugin 5.62.0 eslint-config-prettier 8.8.0 ts-loader 9.4.4 vite-plugin-checker 0.6.1

Why do the skinny pixel parts of the texture appears so differently compared to the source image?

1 Like

I cannot reproduce this effect. This one looks normal on my system:



Thanks for confirming that the texture should not be problematic.

I tried recreating the mesh in a different way, using the same texture file, and then it shows normally for me as well. But then it’s not loaded through my texture loading system. I must have something wrong in my texture loading somewhere. If I ever figure it out, I will update this post.

However, right now, after recreating the texture with slightly different dimensions, it shows perfectly like I want, with no changes to the code.

Although unlikely since it shouldn’t matter nowadays, try making the texture having dimensions of power of 2. For example 32x128 or 64x256 etc.

What does your window resize handler look like?
Make sure you’re resizing the camera and setting its .aspect and stuff.

Also your geometry is 10.5 ? why not 10 ? the extra half pixel might throw your texture across a texel boundary.

No window resize handler (yet), project is super new right now. I made sure to not resize anything while testing it.

The 10.5 value was choosen arbitrarily because I knew the texture would require** slightly more than 10 blank. However, I did produce a fine looking texture at 10.5 width when loading the texture with example-based code instead of my slightly more systematic texture loader code.

** edit: It doesn’t “require” more than 10. I just knew it was slightly wider than 10, and wanted to get closer to a correct width.

If you have something scaled to a half pixel boundary its gonna throw an extra column of pixels in there depending on how its positioned. I’m guessing thats related to what you’re seeing.