Updated: https://playground.babylonjs.com/#4G38H4#2027
Here is a comparison of the plane with texture, and a sprite that has pixelperfect enabled - the pixel ratios remain the same when zooming in and out, while the plane with texture warps.
The idea is to keep the ‘pixelated’ look of the image but without the artifacting when moving the camera. There’s a shader that does this for the pixelperfect mode for sprites, but I do not know if it’s usable in this case and how to do so.
For the ‘pixel look’ yes but the texture is already set to nearest sampling mode in the PG. There’s artifacts when I move the camera while using that mode.
What type of artifacts? When you zoom out so far that the shader is “struggling” to decide which pixel to draw so it skips a whole pixel row/column in the texture?
Why are you explicitly turning off mipmaps when loading the texture? Do you have a specific reason for it? That’s the first thing that could help you.
The third parameter has to be false to create mipmaps. let texture = new BABYLON.Texture("https://i.imgur.com/clj2AYB.png", scene, false, true, BABYLON.Constants.TEXTURE_NEAREST_SAMPLINGMODE);
A solution if you wan to have an overall pixelated look is to use a postprocess:
But the issue is indeed the ‘squashing’ or ‘stretching’ of a row or column of pixels of a pixelated texture when the plane is moved closer or further from the camera (so not really getting things more pixellated). In the PG the ears and torso for example seem to vary in width, which is what I’m trying to minimize.
I tried the changing the mipmap setting but it’s the same.
See new PG for comparison:
The lower (sprite) retains the correct pixel ratio while the upper (texture) does not when zooming in and out. I’m trying to get the plane with the texture to behave the same as the sprite (as I’m using such planes as planted sprites).
Looks better! But there’s still some pixel rows being added when moving the camera…
There’s also these black pixels at the top of the plane that appear/disappear which are caused by the same issue I believe.
I’m not as experienced as you when it comes to shaders (not really sure what you added code does ), but maybe you can see what the difference is with this PG’s shader code: https://playground.babylonjs.com/#5BQ0GN#8 ?
I’ve been trying a bit myself but no luck
Don’t know if this helps any, but there’s a ‘enablePixelPerfectMode’ on FxaaPostProcess - doesn’t do anything for me but I might be doing something wrong.
And also in this thread: Sprite pixel art artifact issue? it is said that the filtering needs to be set to bilineair for the effect to work.
That looks great and exactly like the sprite!
The only problem I have is that I animate the plane’s texture by setting the uScale and vScale and changing the uOffset and vOffset at set times (pretty much like using a sprite sheet). With the shadermaterial this is not possible - is there any way to get this working with your solution?
Cool!
That seems to work perfectly.
I only have an issue in my own project which somehow is replacing the assigned texture with another one but I can’t reproduce it in the playground. Is there a specific order in which the shader, scene etc. must be created for this to work properly?
Anyway, that’s a project issue - so marking as solved
but the texture is already set to nearest sampling mode in the PG. There’s artifacts when I move the camera while using that mode.
EDIT: still not there… I’ll back on Monday and I’ll crack this nut 