Duplicating HTML5 Canvas downscaling

[Loonride]

I've noticed that when images and text are scaled down a lot on normal canvas, they look a lot better and more sharp than with default Pixi settings. How can I get images to scale down in Pixi in exactly the same way that they are scaled down on HTML5 canvas? Here is the code and results of a downscaling experiment. Note that the png image being tested is 256x256, scaling down to 50x50. I am hoping that I can get both images to look identical by altering my Pixi settings:

 

Canvas code:

const canvas = document.getElementById('viewport');
const context = canvas.getContext('2d');

make_base();

function make_base() {
    base_image = new Image();
    base_image.src = 'asset/dude.png';
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0, 50, 50);
    }
}

 

Canvas result:

Pixi code:

const app = new PIXI.Application({
    width: 200,
    height: 200,
    backgroundColor: 0xffffff,
});
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('asset/dude.png');
sprite.width = 50;
sprite.height = 50;

app.stage.addChild(sprite);

 

Pixi result:

Edited December 29, 2020 by Loonride

[ivan.popelyshev]

No. Welcome to webgl.

[ivan.popelyshev]

Alternatively: make your own shader that takes more than 1 sample from texture for downscaling, and uses df/ddx stuff

[Loonride]

Could you give a few more details as to how you can make your own custom Pixi downscaling shader? Also, would you happen to know where to find the specs of how default Canvas downscaling is done?

 

Another option might be some sort of step-down downscaling, where I render a scaled down version to a canvas, then load that scaled down version in Pixi. Does that seem viable as well? https://ghinda.net/article/canvas-resize/

Edit: I have tried this method and it seems to fit my needs pretty well. But if you have any resources for what I was asking about above, I would still appreciate it.

Edited December 29, 2020 by Loonride

[ivan.popelyshev]

> Could you give a few more details as to how you can make your own custom Pixi downscaling shader

If demo https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js is enough for you to figure out how to make your own sprite - then you can adjust the shader that it takes two samples instead of one, but you have to know about df/ddx extension, differentials, i cant give you examples from my memory, its somewhere on forums or in pixijs issues, search OES_standard_derivatives

>Another option might be some sort of step-down downscaling, where I render a scaled down version to a canvas, then load that scaled down version in Pixi.

do what you want in canvas, then "PIXI.Texture.from(canvas);" will give you the result. In that case, if you change canvas, you can always call "texture.update()"

If you want image that was loaded by loader, its somewhere there "loader.resources['my.png'].data" , or in "loader.resources['my.png'].texture.baseTexture.resource.source"

also, in case you want to make this automatical, you can use texture-resource approach: https://pixijs.io/examples/#/textures/gradient-resource.js

[Exca]

Easy way on how to get better looking downscaling is to find out the points where your game starts looking bad and then instead of scaling down the game containers / elements, you keep that good looking resolution and scale down the canvas element. This way the downscaling algorithm is not impeded by webgl limitations but can use the one that browser uses natively. Little bit hacky way, but it's a pretty well working workaround that can be achieved with small effort.