Resolution when zooming with pixi-viewport

[Dougi]

pixi.js version v5.3.10

I'm new to PIXI so please excuse me if I'm missing something obvious. I've googled, but couldn't make sense of anything I found and some posts were from 2017 so wasn't sure whether to trust them as current.

I'm writing and Angular app which has a workspace a bit like miro.  The user can drag cards around and zoom in and out.  

Problem: When zooming in the images and text on the cards degrades in quality. 

I assume this is because it's zooming in on the existing resolution and not updating the resolution as it zooms in.  I'm using PIXI.Texture to fill PIXI.Graphics objects for the cards.  The same occurs for sprites with texture fills too.

I've read that you can use the 'zoomed-end' event handler and then update the resolution, but when I do that the whole viewport gets bigger.

let scale: number = viewport.lastViewport.scaleX;
this.app.renderer.resolution = scale;
this.app.renderer.resize(this.canvasWidth, this.canvasHeight);

What is the best way to zoom without resolution loss please?

Thanks so much!

[ivan.popelyshev]

do you mean browser zoom?

[ivan.popelyshev]

if its not browser zoom:

text is degrading, yes, you have to change its scale & fontsize accordingly because there's no public PIXI Text based on canvas2d that resizes automatically. I have one in private repo, but still cant public it, well, because of 10 other my pixi plugins

if you need big zoom in, its possible to add SDF/MSDF to BitmapText with custom shader, but, again, I dont have it in public.

The way you proposed is performance hell, resolution is not made for that.

As for images - what's your exact problem? There are several and they depend on image size , whether its downscale or upscale, and several other things. I need to see what result do you have and what result do you want

[ivan.popelyshev]

btw maybe "text.resolution = scale" might work, but you have to look in Text sources anyway, and check if it calls updateText() when you change resolution

[eXponeta]

Hi, @Dougi
If you want doing something like this ( playground ) (this is MY DEMO and i prevent use it without notify me about usage), you should not use Text as fact. Because this require rebuild text shapes every time, and reallocate memory - super expensive operations.
You must use a MSDF text or shape-bassed text renderer, but this can be more complicated that use simple Text.

Edited July 23, 2021 by eXponeta

[Dougi]

Hi Guys

Thanks so much for getting back to me on this.  Greatly appreciated.  My apologies, I hadn't realised that I didn't mention that I'm using the pixi-viewport plugin.  So zooming is with the mouse wheel.  I've done a screencast to show a bit more of what the issue is.

Hopefully this is a little clearer, but please just let me know if not.

Thanks again so much!

[Dougi]

Just to say that I worked it out.  In the end it was just the source images being used for the textures being a bit on the low side.  Upping those has solved the problem completely.