ThorVG’s Lottie Model in Action Jinny You (jinny@lottiefiles.com) 20 Feb, 2024

- Vector Graphics Engine - Light-weight (under 300kb) - Drawing APIs - Path, Rect, Circle - Native & Web(wasm) API - Supports Lottie - Platform independent capability

Vector Graphics - Mathematical formula - Scalable - Smaller file size *.svg, .ai, .lottie - A set of pixels - Realistic - Low quality when scaled *.jpg, .png, .gif

ThorVG

Native Lottie Support

- 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)

Lottie android Lottie ios Lottie web - All different language - Individual implementation - High-cost maintenance - Unoptimized performance & size

Lottie android Lottie ios Lottie web - Rendered by different libraries - Different rendering result - Can’t predict animation result - Highly depends on the platform

Lottie android Lottie ios Lottie web - Well-predictable animation - Same rendering result - Optimized performance & size - Low-cost maintenance ThorVG

- 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

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)

ThorVG Is Powered By Open Source https://github.com/thorvg

Advanced Part

- JSON file format - Vector Graphics Animation - Supports AE features: - Solids - Shape layers - Masks - Alpha mattes - Trim paths - Dash patterns Lottie File format

<> Load Module <> 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 <> 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

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 …

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 …

ThorVG Core Engine (tvg::Renderer) ThorVG Renderer

ThorVG Renderer https://www.thorvg.org/tutorial It’s SIMPLE!

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

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

Lottie Group Lottie Path Data Model: Lottie Object

Data Model: Lottie Property - Lottie literal value - Keyframe implementation - Generic type

“o” (opacity) “w” (width) Data Model: Lottie Property

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

Lottie Path Lottie Rect Lottie PolyStar Lottie Ellipse … ThorVG’s own lottie data model in C++ ThorVG Data Model

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

Lottie Composition : Connecting interface among the renderer, loader, builder and data model Lottie Object Lottie Image Lottie Font Lottie Composition Lottie Object

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 …

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

Lottie Loader Lottie Parser parsing(“lottie.json”) return lottie model Lottie Parser Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer … Rapid Json

Lottie Parser Lottie Parser : Iterate JSON and obtain lottie model Rapid Json

Lottie Parser Lottie Parser Rapid Json

Lottie Parser Lottie Parser Rapid Json ThorVG Lottie Model Compositor CompLayer ShapeLayer SolidLayer CompLayer ShapeLayer …

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 …

Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill +Path +Fill +Stroke +Transform +Path +Fill +Stroke +Transform +Path +Fill +Stroke +Transform TVG SceneTree +transform +composition +Transform +Bitmap +Scene +transform +composition Transform Lottie Builder

Lottie Builder Lottie Model Updating TVG scene data Root Scene Picture Shape Scene Rect …

Lottie Builder Compositor TVG Lottie Model RootLayer

Lottie Builder Compositor ShapeLayer TVG Lottie Model RootLayer Group Path Shape Stroke + Head

Lottie Builder Compositor ShapeLayer TVG Lottie Model RootLayer ShapeLayer Group Shape Stroke Fill + Body

Lottie Builder Compositor ShapeLayer ShapeLayer TVG Lottie Model RootLayer ShapeLayer Group Path Shape Stroke Fill + Leg

Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill +Path +Fill +Stroke +Transform +Path +Fill +Stroke +Transform +Path +Fill +Stroke +Transform TVG SceneTree +transform +composition +Transform +Bitmap +Scene +transform +composition Transform Lottie Builder

Compositor ShapeLayer SolidLayer CompLayer ShapeLayer … TVG Lottie Model RootLayer NullLayer Group Transform Shape Stroke Fill Transform Lottie Builder

1. Lottie Data Model 2. Loader, Parser and Compositor 3. Builder : How ThorVG renders Wrap Up

<> Load Module <> 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 <> 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

Q&A