Jump to content
GreenSock

Klaus

Slow render - how to make it better

Recommended Posts

How should I morph many shapes/paths into a new one, I want to play with about 5 or 10 times more than in the example.

See the Pen xPRWJJ by sktklaus (@sktklaus) on CodePen

Link to comment
Share on other sites

Unfortunately, I think that's just too ambitious for the browser to handle. You've got 324 paths that you're morphing simultaneously, each with at least 4 points and you're stretching the SVG across the entire browser screen and you're using strokes which are notoriously CPU-intensive for the browser to render. And since it's SVG, it literally has to re-rasterize every path on every tick (it'll try 60 times per second). It must re-calculate and repaint every single pixel on the fly on each tick. This isn't really a GSAP issue - it's a graphics rendering thing with the browser. You can see what I mean by setting display:none on your SVG and see how much that improves the frame rate. 

 

There are ways you could optimize the initial calculation of the morphing (see https://greensock.com/morphsvg-update) but I really don't think that's the main problem here. That'll only help get that initial pre-animation calculation to be faster. 

 

I wish I had a magic bullet for ya. You could try moving to a <canvas> solution (@OSUblake has some cool demos that use MorphSVGPlugin canvas even though it was intended for SVG). I bet that'd be faster, but it still ain't gonna be easy for the browser to manage painting all that shifting vector data. Perhaps Blake has some other ideas. 

 

Actually, if your goal is to have a similar shape copied over and over morphing to the same shape, I bet you could just do it once in a <canvas> and then copy that on each tick to repaint it in new coordinates. That'd be relatively cheap. Again, @OSUblake is a master at this kind of thing, so perhaps he'll have time to chime in. 

 

 

  • Like 5
Link to comment
Share on other sites

8 minutes ago, GreenSock said:

I know I'm asking to much for the browser and know that is not a problem with the gsap plugin.
I got the idea from here http://www.ptvgroup.com/mobilitynext/  which uses canvas, I'll try it and see if is possible to use this amount of paths at once, but thank you very much for the great reply.

 

 

Link to comment
Share on other sites

4 hours ago, GreenSock said:

Actually, if your goal is to have a similar shape copied over and over morphing to the same shape, I bet you could just do it once in a <canvas> and then copy that on each tick to repaint it in new coordinates. That'd be relatively cheap. Again, @OSUblake is a master at this kind of thing, so perhaps he'll have time to chime in. 

 

 

Yep. You could definitely use canvas to do that. That's essentially all this demo is doing.

 

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

 

Once it gets going, there will be around 850 particles, so there are 850 animations. Actually, it's more like 850 + 1 animations. The position, scale, rotation, color, and alpha for each particle is being animated, and then there is 1 morphing path animation.

 

The path is being drawn to an offscreen canvas, which creates a raster/bitmap of it. The image source for each particle points to that bitmap, so what you're seeing is the same image copied 850 times. It's kind of like how in CSS you can use the same background-image for multiple elements. Same concept, but with canvas the image can be dynamic i.e. animated. 

 

As @GreenSock mentioned, there is no silver bullet. Canvas can be used to improve performance, but it still has to use some type of optimization strategy. If each particle in that demo were to have it's own morphing animation, the browser would choke trying to draw 850 unique paths 60 times per second, and would probably be only marginally faster than a pure SVG solution.

 

4 hours ago, Klaus said:

I got the idea from here http://www.ptvgroup.com/mobilitynext/  which uses canvas, I'll try it and see if is possible to use this amount of paths at once, but thank you very much for the great reply.

 

I looked at that site, but didn't see an animation that was like your demo. Which one are you referring to? 

 

  • Like 4
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.
×