Multiple textures from the same URL

[shlajin]

Hey guys!

I have a bunch of SVGs which I'm trying to render. I do basic

PIXI.Texture.fromImage(url, undefined, undefined, 1);

for that. It creates a texture from `url` without any scaling (100%). It looks great, but, unfortunately, when I try to scale the Sprite the texture starts to look very "edgy".
To deal with it, I tried not to scale the Sprite, but to render the texture with `sourceScale` instead and it works great.

Unfortunately, my problem is that I can't make different textures from the single URL: caching kicks in and when I try to get make another texture with another `sourceScale` I get the texture I created in the first place. By reading the source code of PIXI I can confirm that its intended.

As a workaround, I can clear cache, making browser to fire requests again, but I it's slow and I sense that is too... hackish.

What's the correct way of making a copy of a texture? Or, maybe, there's a way of scaling textures without them looking bad? I would highly appreciate any help! Thanks in advance.

[ivan.popelyshev]

Congratulations! You've reached the limits of pixi caching! You can write your own now!

However, I dont understand how sourceScale helps there. It shouldn't work like that. Perhaps there is another way to solve the problem? Please make a fiddle and i'll look

[shlajin]

Fiddle: https://jsfiddle.net/shlajin/vym4zpu3/

Explanation: I use 2 same textures with different URLs and try to have no texture scaling + scale the Sprite for the first sprite, and texture scaling + no Sprite scaling for the second Sprite. Second sprite looks way better than the first one!
If I try to re-use the URL, pixi cache kicks in which doesn't try to scale / recreate textures anymore and therefore, the final size of a Sprite is the original size of the texture.

I'm not sure if I'm going the right way here tbh, so... why / what I'm trying to do: it's an app where user can add characters to the scene and freely transform their size. Characters are ".svg" files, which PIXI rasterize upon loading (it makes sense). I'm trying to make them look better, so I decided to re-render textures every time user changes the character size. The second problem I can think of here is that user may add 2 same characters with different sizes, so I some sort of have to have the same texture rendered in multiple sizes?... I dunno. Maybe you can give me a piece of advice? Highly appreciate it!

[ivan.popelyshev]

Oh, its SVG

Now I understand! I'm solving that kind of problem differently: i take SVG or SWF images and generate different mip levels from them, however it requires either serious hacking on TextureManager, either pixi-v5.

I guess you have to look how caching works and make your own mechanism instead.

[shlajin]

Oh, I see.

Is pixi-v5 anywhere ready to somewhat usable in production? If so, where can I find an example how you do that? Thank you!

[shlajin]

BTW, what's your technique to parse SWFs? I have sequences of SVG animations, which take up to 30x more space than SWF animation (and that makes perfect sense) – is there a way to convert SWF file to PIXI.Texture[]?

(Sorry if this question is unrelated – I can move it to another thread)

[ivan.popelyshev]

Basically, v5 has resource mechanism: https://github.com/pixijs/pixi.js/tree/next/packages/core/src/textures/resources , it allows developer to specify the way texture gets uploaded. It can be resized, changed before it goes to videomemory. You can generate mips based on it. I cannot recommend to use v5 because it wlil take extra time to get familiar with other changes and new bugs.

I recommend to use v4-backport of this feature from pixi-heaven. I already have working code for custom-generated mip-levels, but for different cause:

 https://github.com/gameofbombs/pixi-heaven/tree/master/src/hacks 

This part generates mips for baseTexture: https://github.com/gameofbombs/pixi-heaven/blob/master/src/hacks/BaseTexture.ts 

This part uploads several baseTextures to the same glTexture: https://github.com/gameofbombs/pixi-heaven/blob/master/src/superAtlas/SuperAtlas.ts

You can create SVG resource instead of SuperAtlas that uploads all those small mips of BaseTexture to videomemory.

Whether you choose v5, heaven or just writing your caching system, it will require heavy debugging. Embrace the pain.

[ivan.popelyshev]

1 minute ago, shlajin said:

BTW, what's your technique to parse SWFs? I have sequences of SVG animations, which take up to 30x more space than SWF animation (and that makes perfect sense) – is there a way to convert SWF file to PIXI.Texture[]?

(Sorry if this question is unrelated – I can move it to another thread)

I'm working on pixi fork for vector graphics, its based on mozilla shumway. I'm still going through convertion of canvas2d to webgl. It works with SWF animations. I hope to release something before new year. http://pixijs.io/pixi-swf/demos/ninja-cat.html 

[shlajin]

Got it, thanks for help

Great work btw, keep it up!