SVG-based texture scaling

[Dudeskin15]

I need to visualize extremely large svg (content is more than 300000 rows).

The only way to zoom and pan it rapidly and smoothly without overloading the DOM is using canvas with webgl context. I have tried 2d context, but interaction is still pretty slow.

I have loaded my svg to pixi texture and the only problem I am facing with is picture quality when I zoom in.

I understand, that canvas is based on pixels and it is not scalable graphics. Anyway, is there a way to make it crisp when I zoom in to any scale level?

I have heared about mipmaps, could they help me by any chance? Or maybe there are another methods how to solve this problem, maybe another libs...

I would really appreciate any help, as I've already spent a lot of time without any proper results.

[ivan.popelyshev]

Hello, and Welcome to the forums!

it’s not surprising that you spent considerable time and couldn’t do it - this is one of the most difficult WebGL tasks that still do not have a public solution. At least in pixi, but I monitor other libs and I didnt see anything like that.

If you find anything in other WebGL libs, please let me know too.

Easiest way is to make a resource that handles uploading for you: https://pixijs.io/examples/#/textures/gradient-resource.js  , make a huge texture, and upload mips from canvases of different sizes , manually (not through gl.generateMipmap). It requires knowledge and experience with pixi v5 TextureSystem. You have to make your own version of https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/SVGResource.ts .

I am not sure whether it works good because of people who I recommended it - no one reported back.

Why dont I make solution for that vector problem myself? Well, I already did, but I only published a partial solution, if you want a full one - please PM me and describe whole your project , why do you need it , and whether you are ready to show me your app.

Partial solution that works for many small vector images on screen (~1000) is here: https://github.com/gameofbombs/pixi-blit/ , it has only two small demos and lacks any integration with SVG. You probably will need https://github.com/exponenta/pixi5-svg or a basic drawImage(svg) inside a vector generator. The library doews not have docs, its only used by two projects in extreme conditions. That's a bleeding edge and it will cost you time and nerves to synchronize your work with mine if you go that way.

I hope that you understand that the topic is not a green lush, its a whole WebGL cemetery.