Jump to content
Search Community

Graphing with GSAP

jlav test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have been using d3.js pretty religiously on a client side browser application that provides a user the ability to interact with a node edge graph (drag/drop nodes, click on nodes & edges for details, highlight nodes & edges, etc). All of the objects on the graph as svg elements and I've notices a significant drop in performance when there are 400+ nodes on displayed. The graph has the ability to zoom, pan, and update data through async calls. I'm going to try out GSAP to see if we gain any performance and can increase the number of elements on the page. I figured I'd ask if anyone else has tried something similar just to get an idea as I head down that path.

 

I've read several posts on the performance hit of rendering svg's and not sure if there is a way around that but I'd love to know if anyone has tried using GSAP for an interactive node/edge graph and if so what kinds of performance gains did you see.

Link to comment
Share on other sites

I have zero experience with D3, but I'm interested to hear your results when you try GSAP with it. I'm confident it'll be as good or better than whatever D3 has built-in for animation, but I will warn you that the vast majority of the processing required when animating SVG has absolutely nothing to do with the animation engine (which just sets properties to new values 60 times per second) - the bottleneck is almost always the browser's rendering engine. 

 

In other words, it may take 2ms for GSAP to calculate and set the new values on 100 nodes, but the browser may then take 100x that to calculate all the vectors/fills/strokes, rasterize them, and paint them to the screen. So my guess is that you'll only see a slight improvement when using GSAP if you're trying to animate a ton of SVG elements. But definitely let us know how it goes. 

  • Like 1
Link to comment
Share on other sites

Improving SVG animations with that many nodes might be pretty hard, especially on graph where there is probably a lot of overlap between the elements. But this got me thinking about how you can improve the performance of the canvas by using bitmap caching. I don't think I've ever come across an example of bitmap caching being used to improve SVG performance, so I took a little stab at it. It's based on this Fabric demo, which uses some pretty complicated shapes.

 

The initial tiger heads that are spinning are SVGs, and as you can see, performance is terrible. When you press the Use Cache button, it switches out the SVG data with a png, and then BAM! There is now like a 100x boost in performance.

 

The caching uses the canvas to create the image, so there will be a problem in IE. But you could just keep the image data on the canvas, and just use the canvas instead. There are other ways to convert SVGs to bitmaps, but using the canvas is definitely the easiest. And I'm still wondering if this is redundant. Why go through all this when you could just us the canvas instead? 

 

Check it out in Chrome.

 

See the Pen MwVymw?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Excellent demo, Blake.

Very clearly demonstrates the horrible rendering performance of complex SVGs.

 

Why go through all this when you could just us the canvas instead? 

 

I would love to someday see a native solution that would allow you to toggle a "cacheAsBitmap" attribute on any SVG child element (rect, polyline, line etc).

So this way you could load a very small (in filesize) piece of complex art, scale it up super huge, and then only convert to bitmap the elements that you need to animate. Best of both worlds... just like Flash is doing, however, cacheAsBitmap in the Flash world did not help with rotation.

 

Out of curiosity I forked your demo to use just an x translation and FWIW SVG performance was still horrible in Chrome. I would assume that a browser could somewhat easily reference a bitmap version of the svg instead of recalculating the vectors on each update. 

 

http://codepen.io/GreenSock/pen/aOYpwj

  • Like 2
Link to comment
Share on other sites

Blake that is a great suggestion, in the example you sent the FPS was about 10 and after caching it jumped immediately to 60... very nice. If I get some time tonight I am definitely going to try it out. I'll have to get creative since the map I'm using allows for zooming in and out. Maybe I'll do something similar to what google used to do with maps. Cache an image and then after zooming in or out re-cache.

 

I'm excited to test this, thanks for the suggestion!

  • Like 1
Link to comment
Share on other sites

I fixed my demo to work with Firefox, and it doesn't seem that bad. I wonder if that is because I'm using the image tag, and maybe Firefox is caching it?  :unsure:

 

With IE, you can't convert an SVG to an image using the canvas. However, the SVG will still show up on the canvas, so you could just use the canvas element instead. The only problem with that is the canvas won't be part of the SVG document, so it might not scale the same as your SVG. If that might be a problem, you could use something like Fabric or canvg to convert it.

 

For the zooming it sounds like you got that figured out. That's exactly what I would have done. If the zooming is done at set intervals, then you might want to try and cache the ending zoom level right before it starts. That way you wont see any pixelation when you are zooming in.

 

See the Pen MwVymw?editors=001 by osublake (@osublake) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...