How to implement better antialising for sprites?

[JErvin]

In my game there are lots of zooming, zooming out in the gameplay, and I just wonder what would be the best solution to increase antialising quality? My sprites are based on vector graphics, so if I am zooming out too much the quality suffer a little (and the sprite texture is big, because it need to be sharp if the user zoomed in).

I think I did every basic thing:

        settings.ANISOTROPIC_LEVEL = 16;
        settings.FILTER_MULTISAMPLE = MSAA_QUALITY.HIGH

      const app = new Application({
            view: this.canvas,
            width: window.innerWidth, 
            height: window.innerHeight,
            antialias: true,
            autoDensity: true,
            backgroundColor: 0xaaaaff
        });	

 

I searched about supersampling in pixijs but I could not find anything. The only valid solution I can see is render the scene to a 2X or 4X bigger texture than the screen resolution, and downsample that texture to the screen (so supersampling basically). Is there any other way, or my idea about implenting super sampling is even viable, what would you suggest?

If everything fails, I think I can use smaller sprite resolutions to the heavily zoomed out view, maybe this also can be a solution.

Thank you!

[ivan.popelyshev]

My sprites are based on vector graphics, so if I am zooming out too much the quality suffer a little

You have to use mipmaps. baseTexture.mipmapMode = something-something-something , look in the docs.

if its still bad use different rendered mips at different zoom, its possible if you are proficient with pixi texture resources, but i dont have an example at hand.

filter_multisample wont help you, texture sampling tied to mips , not to framebuffer MSAA

[JErvin]

Thank you! Mipmap helped a lot.