WebGL & Canvas2D about lottie-web HOT 14 CLOSED

I know I'm a bit late to the party, but last year I built an SVG renderer in WebGL to tackle the high CPU usage of rendering SVG animations.

@dionysiusmarquis is mostly right- rendering SVG exclusively in a GL context isn't trivial, and tesselating every vector shape would be computationally expensive.

Where we made a breakthrough was - you don't need to tesselate vector shapes. I wrote a quick document explaining how you can render SVG without tesselation

We stopped working on this last year because startup startup stuff, but occurred to me that the same idea could be useful to implement as a WebGL engine for Lottie animations, in cases where CPU usage needs to be reduced.

If there's interest in picking this up as a project, I'd be happy to open source what we have, though we didn't build a FULL svg renderer, so it may require a lot more work to actually be production ready.

Example

SVG Animation (~20% CPU Usage): https://files.vectorly.io/demo/sidebyside-v1/index.html
WebGL Animation (~1% CPU Usage): https://files.vectorly.io/demo/v0-2-simpsons-250kbps/index.html

You can profile the CPU Usage in Chrome

Why we built it:
Long story: https://www.youtube.com/watch?v=EvGA5qCfy9I

from lottie-web.

@mattdesl I will as soon as I add expressions.
They will change the json format and won't be compatible with the current one.
Regarding a canvas renderer, the plugin has one. But svg filters outperform canvas pixel manipulation.
I don't know if it's easy to implement similar svg filters in Webgl. I'll look into this. Any suggestions where to start?

from lottie-web.

What kind of filters do designers typically go for? I imagine a WebGL/Canvas2D renderer might be more limited, i.e. only implementing certain features, and maybe no support for filters at all, but providing greater performance for certain scenes.

from lottie-web.

@mattdesl I think AE alpha/luma track mattes are a must. I need to get a layer to work as a mask for another one.
next on the list would probably be blur effects, and some layer styles like strokes.

from lottie-web.

Is the canvas demo in the readme accurate? I've tried that code snippet, but it appears that the library is still generating a svg.

from lottie-web.

@Tolmark12 Have you changed the animType to 'canvas'?

from lottie-web.

@bodymovin No sir I did not 🤦 Working great now, sheesh!

from lottie-web.

Hi,

If you can export to svg, it can be self contained and added to more
content in a web page.
Any idea how to do the same in webgl?
Imagine I have a bigger scene, how to add the animation exported feom
bodymovin as an element in that scene?

Thanks
On Nov 17, 2015 04:54, "Mark" [email protected] wrote:

@bodymovin https://github.com/bodymovin No sir I did not 🤦
Working great now, sheesh!

—
Reply to this email directly or view it on GitHub
#18 (comment).

from lottie-web.

@boulabiar There's also the canvas renderer. I guess you could render on a canvas outside the dom and then draw the result on the webgl.
But ideally, a webgl renderer would be the best option, where you could add the animation as a geometry or texture.
Right now, a webgl renderer is not on my pipeline. I explored some time ago integrating with three.js and was promising.

from lottie-web.

Rendering svg exclusively in GL context isn't trivial. You need to tesselate every vector -shape, -line… etc. See nanovg, libtess2. Tesselating in js will be very slow. Complex 2d vector graphics isn't really what GL is meant for.

from lottie-web.

Good news! Skia has a canvaskit package which can be used to play Lottie JSON in WebGL canvas

https://github.com/google/skia/blob/312535b47d389e55a6666ea82638458245a421e0/modules/canvaskit/canvaskit/types/index.d.ts#L327-L336

from lottie-web.

https://github.com/LottieFiles/glottie

from lottie-web.

@shaafiee - Ah, okay, well I'm glad there's already an existing project!

from lottie-web.

If there's interest in picking this up as a project, I'd be happy to open source what we have, though we didn't build a FULL svg renderer, so it may require a lot more work to actually be production ready.

@sb2702
If there is still a possibility to open source a basic example it can be very nice for future references and comparisons.

from lottie-web.