ThorVG's Lottie Model in Action

A presentation about How ThorVG manages the Lottie file format and renders into the canvas.

By the session, Engineers will understand about a few ThorVG's mechanisms.

1. Introduction to ThorVG
2. ThorVG Lottie Model Mechanism
3. Lottie Parser mechanism
4. ThorVG’s Cross-Platform Capabilities

Transcript

1. ThorVG’s Lottie Model in Action Jinny You (jinny@lottiefiles.com) 20 Feb, 2024
2. - Vector Graphics Engine - Light-weight (under 300kb) - Drawing APIs - Path, Rect, Circle - Native & Web(wasm) API - Supports Lottie - Platform independent capability
3. Vector Graphics - Mathematical formula - Scalable - Smaller file size *.svg, .ai, .lottie - A set of pixels - Realistic - Low quality when scaled *.jpg, .png, .gif
4. ThorVG
5. Native Lottie Support
6. - Written in C++ (C-friendly) - Portable - Efficient - Tiny size - Low-level language - High portability - Intrinsic threading / memory pools / Caching mechanism - Light-weight (Small binary size)
7. Lottie android Lottie ios Lottie web - All different language - Individual implementation - High-cost maintenance - Unoptimized performance & size
8. Lottie android Lottie ios Lottie web - Rendered by different libraries - Different rendering result - Can’t predict animation result - Highly depends on the platform
9. Lottie android Lottie ios Lottie web - Well-predictable animation - Same rendering result - Optimized performance & size - Low-cost maintenance ThorVG
10. - Developers do not need to rework for each platform and programming languages. - Designers will not struggle to accommodate different device outputs. - End-users will have consistent experiences provided by service. ThorVG
11. Feature coverage ✅ - Transform - Masks - Matte - Shape - Precomp - Image - Text (Glyph, Fonts) 🚧 - Expressions - Shape Modifier (MergePath, … ) - Layer Effect (Blending, Filter …) - Advanced Text (Font Origin, Path, Range Selector)
12. ThorVG Is Powered By Open Source https://github.com/thorvg
13. Advanced Part
14. - JSON file format - Vector Graphics Animation - Supports AE features: - Solids - Shape layers - Masks - Alpha mattes - Trim paths - Dash patterns Lottie File format
15. <<interface>> Load Module <<interface>> RenderMethod API C++ TVG PNG JPG SVG Lottie Native Apps API JS/WASM Web Apps (frontend) sample.lottie (json) JSON Parser Lottie Scene Composer Lottie Interpreter I/O Picture Shape Scene Canvas Call APIs to compose TVG Scene TVG SceneTree Request Frame SwCanvas GlCanvas Task Scheduler <<shareable>> Path / Stroke / Fill Scene Shape Scene Shape Shape Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer … Scene Shape Scene Shape Shape TVG SceneTree (Retainable) Call Call Text Lottie Loader ThorVG Single Binary [so/dll/wasm] Canvas Engine Extra Format Loaders Paint SW GL (beta) WG (beta) TTF Out WGCanvas
16. ThorVG Lottie Parser ThorVG Lottie Builder ThorVG Lottie Model ThorVG Lottie Property ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Loader Drawing Vector Graphics: - Rect, Circle, Path… Load lottie asset into memory Parse each attributes Build lottie animation Object, Group, Layer, Shape … Point, Color, Opacity, Fill, Path …
17. ThorVG Lottie Parser ThorVG Lottie Builder ThorVG Lottie Model ThorVG Lottie Property ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Loader Drawing Vector Graphics: - Rect, Circle, Path… Load lottie asset into memory Parse each attributes Build lottie animation Object, Group, Layer, Shape … Point, Color, Opacity, Fill, Path …
18. ThorVG Core Engine (tvg::Renderer) ThorVG Renderer
19. ThorVG Renderer https://www.thorvg.org/tutorial It’s SIMPLE!
20. ThorVG Lottie Parser ThorVG Lottie Builder ThorVG Lottie Model ThorVG Lottie Property ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Loader Drawing Vector Graphics: - Rect, Circle, Path… Load lottie asset into memory Parse each attributes Build lottie animation Object, Group, Layer, Shape … Point, Color, Opacity, Fill, Path … “ Data ” Model
21. Data Model: Lottie Object - Lottie element’s base structure. - Extends to specific layers and shapes - Has explicit type LottieObject + name + type LottieGroup LottieShape LottieLayer LottiePath LottieRect LottiePolyStar LottieEllipse LottieTransform LottieImage LottieStroke LottieRepeater LottieTrimPath LottieRoundedCorner // ShapeModifier
22. Lottie Group Lottie Path Data Model: Lottie Object
23. Data Model: Lottie Property - Lottie literal value - Keyframe implementation - Generic type
24. “o” (opacity) “w” (width) Data Model: Lottie Property
25. Lottie Object Lottie Group Lottie Shape Lottie Property Lottie Stroke Lottie Image Lottie Fill Lottie Layer ThorVG Data Model Lottie Point Lottie Float Lottie Opacity Lottie Color Lottie TextDoc Lottie Position Lottie ColorStop Lottie Font
26. Lottie Path Lottie Rect Lottie PolyStar Lottie Ellipse … ThorVG’s own lottie data model in C++ ThorVG Data Model
27. ThorVG Lottie Parser ThorVG Lottie Loader ThorVG Lottie Model ThorVG Lottie Property Lottie Render Process ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Builder tvg:: Software Raster Engine tvg:: WebGPU Raster Engine or
28. Lottie Composition : Connecting interface among the renderer, loader, builder and data model Lottie Object Lottie Image Lottie Font Lottie Composition Lottie Object
29. ThorVG Lottie Parser ThorVG Lottie Builder ThorVG Lottie Model ThorVG Lottie Property ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Loader Drawing Vector Graphics: - Rect, Circle, Path… Load lottie asset into memory Parse each attributes Build lottie animation Object, Group, Layer, Shape … Point, Color, Opacity, Fill, Path …
30. Lottie Loader Lottie Loader - The Lottie JSON loading interface - Load and manage file data in memory - Handle file size, frame info - Provide frame controls - Integrate lottie animation with the renderer
31. Lottie Loader Lottie Parser parsing(“lottie.json”) return lottie model Lottie Parser Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer … <JSON Parser> Rapid Json
32. Lottie Parser Lottie Parser : Iterate JSON and obtain lottie model <JSON Parser> Rapid Json
33. Lottie Parser Lottie Parser <JSON Parser> Rapid Json
34. Lottie Parser Lottie Parser <JSON Parser> Rapid Json ThorVG Lottie Model Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer …
35. ThorVG Lottie Parser ThorVG Lottie Builder ThorVG Lottie Model ThorVG Lottie Property ThorVG Core Engine (tvg::Renderer) ThorVG Lottie Loader Drawing Vector Graphics: - Rect, Circle, Path… Load lottie asset into memory Parse each attributes Build lottie animation Object, Group, Layer, Shape … Point, Color, Opacity, Fill, Path …
36. Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill <Shape> +Path +Fill +Stroke +Transform <Shape > +Path +Fill +Stroke +Transform <Shape > +Path +Fill +Stroke +Transform TVG SceneTree <Scene> +transform +composition <Picture> +Transform +Bitmap +Scene <Scene> +transform +composition Transform Lottie Builder
37. Lottie Builder Lottie Model Updating TVG scene data Root Scene Picture Shape Scene Rect …
38. Lottie Builder Compositor TVG Lottie Model RootLayer
39. Lottie Builder Compositor ShapeLayer TVG Lottie Model RootLayer Group Path Shape Stroke + Head
40. Lottie Builder Compositor ShapeLayer TVG Lottie Model RootLayer ShapeLayer Group Shape Stroke Fill + Body
41. Lottie Builder Compositor ShapeLayer ShapeLayer TVG Lottie Model RootLayer ShapeLayer Group Path Shape Stroke Fill + Leg
42. Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill <Shape> +Path +Fill +Stroke +Transform <Shape > +Path +Fill +Stroke +Transform <Shape > +Path +Fill +Stroke +Transform TVG SceneTree <Scene> +transform +composition <Picture> +Transform +Bitmap +Scene <Scene> +transform +composition Transform Lottie Builder
43. Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill Transform Lottie Builder
44. 1. Lottie Data Model 2. Loader, Parser and Compositor 3. Builder : How ThorVG renders Wrap Up
45. <<interface>> Load Module <<interface>> RenderMethod API C++ TVG PNG JPG SVG Lottie Native Apps API JS/WASM Web Apps (frontend) sample.lottie (json) JSON Parser Lottie Scene Composer Lottie Interpreter I/O Picture Shape Scene Canvas Call APIs to compose TVG Scene TVG SceneTree Request Frame SwCanvas GlCanvas Task Scheduler <<shareable>> Path / Stroke / Fill Scene Shape Scene Shape Shape Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer … Scene Shape Scene Shape Shape TVG SceneTree (Retainable) Call Call Text Lottie Loader ThorVG Single Binary [so/dll/wasm] Canvas Engine Extra Format Loaders Paint SW GL (beta) WG (beta) TTF Out WGCanvas
46. Q&A