Infinite SVG-Like Zoom Animation with PIXI

[dude]

Hi,

 

I'm curious about whether something I'm doing in svg will be possible in PIXI. I'm building complex svg diagrams that animate, but also with aspects of them that I want to be able to animate zoom on, (almost) infinitely (think Mandelbrot set like zoom but data-visualization related). Currently I'm using svg for that infinite scaling capability, but I know that for some of my data sets, svg isn't going to cut it eventually. It'll just become too much weight on the DOM / CPU at some point as there will simply be too many things on the screen to render, forget animate.

 

I could look into things like tiling, but that has a pretty huge performance / usability penalty for my use-case. Also, the complexity and detail of what I need to visualize isn't so great as that of a map either. Also, I'd still need to animate aspects of the visualization, which isn't usually necessary with tiled maps.

 

I'd like to switch to leverage a gpu based solution like PIXI down the line. The only problem is that PIXI doesn't really preserve the scalability aspect of svgs (not at all a PIXI expert, have only built some simple circle animations to test with). I'm pretty confident that minus the zoom functionality, PIXI+GSAP will be a good solution for every other aspect of the rendering / animation, but do you know if there is a way to leverage all the GPU powered goodness of PIXI but still preserve the sharpness of images and text as a user "infinitely" zooms in? (10x, 100x, 1000x scale of original)?

[ZachSaucier]

You should take a look at GSAP's ExpoScaleEase page that makes use of a technique that uses images to "zoom infinitely".

[dude]

Definitely nifty, but doesn't really address my fundamental question. Will keep be keeping in my back pocket though

[OSUblake]

Doing a mandlebrot is completely different than zooming in on some graphics. Mandlebrots are pretty easy to do with a shader. In PixiJS, SVGs are converted to images, so you really can't zoom in on them too much without pixelation. And PIXI.Graphics are converted into triangles, so if you zoom in really close to a circle, you'll start to see the edges of the triangles that make up the circle.

 

So the answer to your question, is that there is no good solution. You're going to have to make a tradeoff somewhere. SVG is slow, and Pixi can't do true vector graphics. One of the main devs of Pixi has been working on a vector solution for over 2 years. I think using a maps-like solution might be your best option.

https://medium.com/google-design/google-maps-cb0326d165f5

 

There is one exception to zooming with WebGL using signed distance fields, but those are usually used for text and stickers. Here's an example of signed distance field text.

http://wdobbie.com/pdf/

 

And another...

https://mattdesl.github.io/physical-text/index.html

 

...from this article.

https://mattdesl.svbtle.com/material-design-on-the-gpu