Loonride

Duplicating HTML5 Canvas downscaling

Recommended Posts

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:

canvas-image-test.png.74f8ef5269fd0cce920a5f3b2c111f0d.png

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:

pixi-image-test.png.eacdeb98f511d4ecad6a349c94712be1.png

Edited by Loonride

Share this post


Link to post
Share on other sites

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 by Loonride

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.