Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Infinite SVG-Like Zoom Animation with PIXI

Recommended Posts



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)?

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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.



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.



And another...



...from this article.


  • Like 4

Share this post

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.