Pixi.JS - Downsize assets without affecting GPU

[PixiJsForum1]

Hello!

I'm trying to down-size multiple images (like THIS ONE) in PIXI.js without losing quality, same as browsers do when resizing images.

I found that setting the resolution of the renderer to the device pixel ratio, increases the quality a lot, since my window.devicePixelRatio = 2 I'm doing 

const renderer2 = new PIXI.Renderer({
  width: WIDTH,
  height: HEIGHT,
  resolution: 2,
  autoDensity: true,
  antialias: true,
});

And the image looks really better, but I found out that GPU memory increases a lot (using chrome task manager to review that), because now my canvas have WIDTH * 2 and HEIGHT * 2 dimensions.

In order to solve that, I was trying to render my images into a RendererTexture, using a x2 resolution renderer, and then render those same pixels in a x1 resolution renderer (kinda like, resizing, taking a screenshot, and rendering that new image in another renderer). The problem is that the generated image, is 2 times bigger ( I guess because of the resolution) and I ended up with a low quality image :c

 

Here's a screenshot of my 3 canvas, from left to right

1: resolution: 1

2: resolution: 2

3: trying to render the "screenshot" of resolution 2, in a resolution 1

 

I set up a Pixi Playground with my code here, https://www.pixiplayground.com/#/edit/8BOfkrEbeFS8OHZ63KAl7

 

Is it possible to do this? If not, there's any way of implementing this? I like the resolution: 2 result quality wise, but the GPU memory gets really affected, so trying to find a more "performant" implementation.

Edited July 13, 2021 by PixiJsForum1

[ivan.popelyshev]

I think, at this moment, you have to learn how texture filtering works. without mipmaps, with mipmaps, e.t.c. Otherwise, you'll keep guessing.

[ivan.popelyshev]

See this? you can make your own texture resource with special "style" function that actually assigns different parameter. Just copy contents and use it in "resource.style = () => ..." , you can even do it on existing resource before its uploaded , "baseTexture.resource.style = ..." 

https://github.com/pixijs/pixijs/blob/4c1e85fa56330d73454202c7a76aeef82f9dff66/packages/core/src/textures/TextureSystem.ts#L508

Now, which params to take? https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texParameter

gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR Npixi does not use those, but maybe it'll be better for you!

 

[PixiJsForum1]

@ivan.popelyshev I was able to set the TEXTURE_MIN_FILTER, and tried all of the different algorithms, but none of them give me the same quality as the resolution: 2 renderer, (I know the parameter was working, since I was seeing my image change with each algorithm). When you advice me to change that setting, was in the baseTexture of the image right? Or were you talking about the RenderTexture I'm creating? I get what the setting is changing from the Mozilla Docs, but I don't really understand how that it's going to make the RendererTexture less blurry (it keeps being generated with double size)

 

Thanks in advance for your time

[ivan.popelyshev]

Honestly, this thread is interesting. I know that my knowledge in how to set up and make better filtering is lacking. That's what i want to implement later: https://forum.defold.com/t/sharp-sprite-rgss-for-defold/66840

However, right now , all my research time is taken by https://github.com/pixijs/graphics-smooth , so I cannot help you.