GSoC 2020 - Work Summary[Improvements in Lottie Exporter plugin]

As part of the GSoC work submission guidelines, I will be posting here about the work done by me on improving the features of Lottie Exporter plugin. I will be incrementally posting all the features that have been added or improvements that have been made till 31st August.

Watch this space :smiley:

2 Likes

Starting with the first contribution towards synfig, Linear Gradient layer and Radial Gradient support has been provided. Lottie does not provide support for gradient ramp, which leads to only Gradient fill as the only option.
I have attached two videos where I show export for the two layers.
Linear Gradient Layer : https://youtu.be/r368kJu3Czo
Radial Gradient Layer : https://youtu.be/Wqqtg22Dy-g

The code for the PR is available in https://github.com/synfig/synfig/pull/1446 .

Further improvements right now are not possible, due to the inavailability of support for gradient ramp in Lottie. Gradient ramp would make it easier to create shapes and fill them with gradient. It could also lead to the possibility of exporting curve,conical and spiral gradient layers.

Moving forward, there are a couple of convert methods that were exported from Synfig format to Lottie Format.
Starting with Vector Angle convert method, you can watch the video of an export here : https://youtu.be/JuOY3fLO-wA

The code for this PR is available at https://github.com/synfig/synfig/pull/1409/

aTan2 convert method
Video of an export from Synfig format to Lottie : https://youtu.be/_4eXgANPcp4
The code for this PR is available at : https://github.com/synfig/synfig/pull/1363

Power convert method
Video of an export from Synfig format to Lottie : https://youtu.be/YURkufXY_mA
The code for this PR is available at : https://github.com/synfig/synfig/pull/1515

Blur Layer
In Blur layer, Lottie only provides support for Gaussian blur, so that method was taken as default for all types of blur in the blur layer.
Video of an export from Synfig format to Lottie : https://youtu.be/IF2p9d2HXHQ
The code for this PR is available at : https://github.com/synfig/synfig/pull/1505

Scope for Improvement : If Lottie provides support for other types of blur such as Motion blur and Radial blur, then we can provide support for export of those layer as well. Right now Lottie does not have that.

Vector X and Vector Y Convert method
Video of an export from Synfig format to Lottie : https://youtu.be/GY6GLgK9xFg
The code for this PR is available at : https://github.com/synfig/synfig/pull/1516

Exporting Outlines without variable widths
Converting Synfig format outlines to Lottie format outlines led to the creation of big file sizes. This was because every vertex width was accounted for and this led to the algorithm having to process the animation frame by frame creating a huge json file. Lottie provides the option of exporting outlines without variable widths and therefore outline width was chosen as the width for all vertices. This lead to a huge reduction in file sizes.
An example for the .sif file : lottie-outlines.sif (26.7 KB)
Exporting this file frame by frame results in a json file of 504890 lines(13.4MB). The rendered json file is available here GDrive link.

Now, exporting the same file without variable widths results in a json file of 944 lines(23.6KB). The rendered json is available here : https://gist.github.com/saurabh-ramola/5deb8babb9854e25b35b2ea3821b3946

There is a 99.8% reduction in size of the files leading to faster rendering of the outlines.

Video of an export : https://youtu.be/spUsUL6ZUXI
Code for this PR is available at : https://github.com/synfig/synfig/pull/1647

The user now has the option to export outlines with and without variable widths.

1 Like

Logarithm Conver Methodt
Video of an export from Synfig format to Lottie : https://youtu.be/ig-WrW-iPrw
The code for this PR is available at : https://github.com/synfig/synfig/pull/1586

Dot Product convert method
Video of an export from Synfig format to Lottie : https://youtu.be/T6lCYlrAY7A
The code for this PR is availabel at : https://github.com/synfig/synfig/pull/1593

Reciprocal convert method
Video of an export from Synfig format to Lottie : https://youtu.be/crc-1MM0xs4
The code for this PR is available at : https://github.com/synfig/synfig/pull/1619

Range convert method
Video of an export from Synfig format to Lottie : https://youtu.be/RiBV9LUxC7M
The code for this PR is available at : https://github.com/synfig/synfig/pull/1606

Vector Length convert method
Video of an export from Synfig format to Lottie : https://youtu.be/pvBV0jTbzmY
The code for this PR is available at : https://github.com/synfig/synfig/pull/1650

Not Convert method
Video of an export from Synfig format to Lottie : https://youtu.be/EkA7anYxwLU
The code for this PR is available at : https://github.com/synfig/synfig/pull/1587

Shade Layer
Shade layer exporting was made possible with the use of drop shadow effect from Adobe After-effects. Caveat : Only Gaussian blurring is supported by Lottie for drop shadow.
Video of an export from Synfig format to Lottie : https://youtu.be/y7pG0HJVXGk
The code for this PR is available at : https://github.com/synfig/synfig/pull/1629

Scope for improvement : At the moment, there seems to be none.

Text Layer
Text layer exporting was done from Synfig format to Lottie format using the documentData option of Lottie.
Video of an export from Synfig format to Lottie : https://youtu.be/8A_s6HNpksQ
The code for this PR is available at : https://github.com/synfig/synfig/pull/1469

Scope for improvement : Group layer in the Exporter might have to be rewritten based on text layer in a group because text layer in a group does not require anchor offset while other layers do.

Bone Convert Method
Coming to the toughest part of the project personally for me, bone_convert method took the maximum time and effort from my side. The main problems associated with this were that Lottie does not support affine transformations, so the mapping of equations for each parameter had to be done manually by me.
Bone convert of a vertices is complete and ready for export as is evident through this video : https://youtu.be/jKPbjOGxX-o . The sif file for this is final.sif (18.8 KB) .

However, bone_convert method for the transformation parameter of a group layer is still not complete yet and I will have to colloborate with @AnishG on this as we have not been able to come up with a solution to the problem of incorrect anchoring. I have shown this in the video : https://youtu.be/zJiJG_GIQN4 . The sif file for this is lottie-bones-01.sif (194.8 KB) .

I will be working on fixing the bone_convert for transformation parameter of a group layer after my coding period ends and complete it alongwith other stretch goals if they arise.

Something I have noticed about Bone is that it is not documented very well, especially the underlying equations that are required to export it, that was a major problem for me.

2 Likes

In addition to the coding problems, I also added documentation alongside every PR.
The list of those PRs are available at : Documentation PRs

1 Like

Overall, I really enjoyed my experience of working on Synfig and Lottie Exporter plugin. There were times when I got stuck in problems but my mentor @AnishG was extremely helpful and prompt in helping me with my problems and Iโ€™d also like to point out @KonstantinDmitriev for regularly helping me with the testing of the PRs. Because of the regular testing by my mentors I was able to rectify the mistakes in the PRs in time.
Because I liked this project, I also plan to come back and work on resolving more problems once GSoC ends and colloborate with @AnishG on Lottie Exporter plugin.

Whatโ€™s left
Bone_convert of transformation parameter in a group(anchoring issues)

Logs
You can find the weekly progress of the project here : [GSoC 2020] Improvements for Lottie Exporter Plugin

Last but not the least Iโ€™d also like to thank @ice0 for providing regular help related to PRs and @rodolforg for helping out in figuring the correct bone equations.

5 Likes