PIXI.js : Blur / pixelated sprite

[adil.invideo]

Hi, 

Having a very basic issue but can't seem to get the right solution. Currently, i have a canvas size of 16:9 854x480 (480p) and we place a single large sprite on it.  

We adjust the height and width of the sprite, post which it gets blurry or pixelated based on the SCALE_MODE being used. Making "PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;" made is crisp and pixelated.

How do we maintain the clarity of the same?

Have attached a demo of the same here and feel free to edit it.

Details:

PIXI VERSION : 6.0.2

Device Resolution : 2

Demo : https://jsfiddle.net/adil_invideo/qwk3jups/13/

 

[ivan.popelyshev]

mipmapping, probably.

texture has to be power-of-two size , or it has to be webgl2 and "baseTexture.mipmap = PIXI.MIPMAP_MODES.ON"

[adil.invideo]

Tried the following 

var baseTexture = new PIXI.BaseTexture(url, PIXI.SCALE_MODES.NEAREST, 2);  
baseTexture.mipmap = PIXI.MIPMAP_MODES.ON;

Both LINEAR AND NEAREST. No luck...

[ivan.popelyshev]

whats the size of texture? does mobile have webgl2?

[ivan.popelyshev]

oh wait, i see it. not pow2.. anyway, check if device has webgl2. 

if not, you can just host several versions of image -  downscaled 2 times, downscaled 4 times and so on, and download one that is a bit bigger than screen. Alternatively, you can do it with canvas2d manually, and give pixi corresponding texture.

The whole problem is that downscaling more than 2 times requires mipmapping or manual scaling 2/4/8 times whatever will be close to your resolution

Edited April 29, 2021 by ivan.popelyshev

[ivan.popelyshev]

alternatively: make image power-of-two size  btw ThreeJS does it automatically for all textures. pixi doesnt do this barbaric method.

[adil.invideo]

Size of the texture seems to be 2184x1456.

And running it on chrome desktop web browser with wegGl2 support

[ivan.popelyshev]

for me on PC mipmap=2 makes everything better , whether its linear or nearest

[adil.invideo]

Thats what i thought but for some reason doesn't seem to work here... In the demo i shared does it look clear for you ?? even with a slight zoom in

[adil.invideo]

So what would you suggest in such scenario where there is WebGL2 support but the texture is not a Power Of two?

[Exca]

If you can't edit the source material to be POT you could render the original texture into a rendertexture that is POT and then create a texture that uses that POT rendertexture as basetexture and you would have an image that is POT, even if the sprite isn't and mipmapping would be possible.

[ivan.popelyshev]

or make canvas2d of pow2, draw image there, make texture out of it in pixi, enable mipmapping. Yes, this behaviour is default for ThreeJS, but pixi does like to force users to learn stuff