Jump to content

Pixi.JS - Downsize assets without affecting GPU


Recommended Posts

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

image.thumb.png.0cb78a6d7334b80089d0b6b1c07ecfaa.png

 

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 by PixiJsForum1
Link to post
Share on other sites

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!

 

Link to post
Share on other sites

@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

Link to post
Share on other sites

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.

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.

×
×
  • Create New...