Blurry objects on scaling

[Kirill.Afonin]

Hello, everyone.

 

I’m developing online spreadsheet editor (like Google Sheets) and I’m using PixiJS to draw the document (cells, texts and etc).

I face with a problem with blurry objects while page scaling. I read a lot of information about it and created my own scaling mechanism, which recalculates object size and updates it.

But user can change browser scale via settings or can change display scale in OS settings. I can do nothing with it and user gets blurry objects.

For example, https://prnt.sc/vekptq - 100%, https://prnt.sc/vekr09 - 125%.

I tried to change PIXI resolution on scaling or calculate ratio of renderer.view.width without scale and after scale and set it as CSS  zoom or transform: scale for Canvas. But it doesn’t help.

As I know PIXI handle scaling by applying the scale to the post-rendered object.

If I understand correctly then BitmapText or SDF is best way to fix this problem for text, but I need to allow users can change text style. In this case I need prepare and load a lot of fonts. And that doesn't solve the problem with other blurry objects.

 

 

Is there some way to generate BitmapText form Text with style?

Or maybe other way to fix blurry objects, such as disabling PIXI scaling, for example?

[ivan.popelyshev]

1. pass "wnidow.devicePixelRatio" as "resolution" to application/renderer constructor

2. add "autoResize:true" in those params so CSS props are set ther

3. PIXI.settings.RESOLUTION needs to be set if you want Filters to obey this setting to

also , there's "roundPixels" setting for texts

The issue about "resolution" is that no one actually does everything right on first try. If you dont get it, you have to actually look in source code and understand what pixi is doing with those things - that's the only guarantee. Its easy, you can find other explanations on this subforum or in pixijs github issues.

[Kirill.Afonin]

 

Thanks a lot, i realized my mistake. Now there is on blur while scaling.

One of the problems was that I am using GWT and working with PIXI through GWT-JSNI. For some reason, through JSNI, pixi application and renderer were created with wrong parameters.

[ivan.popelyshev]

1 hour ago, Kirill.Afonin said:

 

Thanks a lot, i realized my mistake. Now there is on blur while scaling.

One of the problems was that I am using GWT and working with PIXI through GWT-JSNI. For some reason, through JSNI, pixi application and renderer were created with wrong parameters.

Yes, object params for those functions are a problem when you try to port PixiJS or just use it through interface like JSNI. If only there was a Builder template in JS like it exists in Kotlin or Scala.

[ivan.popelyshev]

Btw , do you have a link to JSNI wrapping code that you use pixi with?

[Kirill.Afonin]

Firstly I used this wrapper.

But it was made for Pixi 3 and I'm using Pixi 5.

Now I'm making my own version of the wrapper. Now it contains only those PIXI mechanisms that I use in my project. It’s located at the private repository of the company I work for.

If necessary, I can transfer it to the public repository and provide a link to it.

[charlie_says]

What a timely thread, I've got a similar issue...

I'm making a simple test so a I have a 4x5 square made of single pixel sprites, all set at random alpha values.

These are in a container which I'm scaling up so I can view, but this seems to blur the 'pixels'

I've made what I thought were the appropriate settings

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
PIXI.settings.ROUND_PIXELS = false;
PIXI.settings.RESOLUTION = 1;
window.devicePixelRatio = 1;

But, the results aren't what I expected...

Is there a way to do this?

Edited November 13, 2020 by charlie_says

[ivan.popelyshev]

@charlie_says

Make a demo

[charlie_says]

Hi @ivan.popelyshev I made a quick pen for this and (probably no surprise to you) this worked exactly as expected...

I'll need to look at what's going on in my set up, although there's nothing very complicated just a few nested containers.

edit -----

I've now got this working correctly in my project - but some of my tests still display the blurry version, I need to investigate what the difference is.

Edited November 13, 2020 by charlie_says

[Kirill.Afonin]

Hi,

I faced with the task of debugging the display on Canvas. For me, this task is new, I don't quite understand what should I begin with.

Can anyone recommend approaches for this task and tools?

From what I found, this is a comparison of screenshots, maybe are there alternative ways?

[charlie_says]

I'm not really sure what you're asking... but with my own query above the way I tested it was with a tiny image (i.e. 5x5 pixels) so I could inspect the data and check it against what the expected values should have been.

[Kirill.Afonin]

Sorry,

I do not know why I wrote "debugging". I wanted to say testing.

I need to create some tests for my app which will automatically test the display on Canvas.