Sprite pixel art artifact issue?


Here is a simple pixel art dude sprite sheet. In the playground below I load it up and play a little animation. With the camera set -600 away from the sprite you can see the artifacts. Most notably the top of his head adds a line or two of pixels in the second frame.

If you then move the camera to -100 the artifacts are much less noticeable but there still seems to be some added pixels.

How can I fix this? Thanks!

Hello! One way could be changing the sampling mode: Sprite pixel art issue | Babylon.js Playground (babylonjs.com)

@Evgeni_Popov might have a better idea through?

Here’s a version which implements the function from inigo quilez:

It is updating the fragment shader used by the sprite rendering code, so it will work for all sprites. Note however that the filtering should be bilinear and not nearest for this to work.


I know it might be consider a breaking change but should it not be the default for sprites in Nearest mode ? this one or any of the other pixel perfect one :slight_smile:

Maybe we could add a parameter to the sprite manager like pixelPerfect to enable this mode? That way, it’s up to the user to choose it or not and that would avoid a breaking change.


Yes, please!

PR created:

It is adding a pixelPerfect property (false by default) to the sprite manager.


Any idea what version this will be in?

It’s in since 5.52.0!


I’m still seeing the issue here:

I don’t see any changes in my project as well.

You must use bilinear sampling when using pixel perfect mode:

1 Like

Duh! Working now!

Should we add a warning or set it automatically ?

1 Like

Good idea:


Wait is it trilinear or bilinear?

Actually it’s the same thing because there are no mipmaps.

1 Like