Releases · thorvg/thorvg

After three months of steadfast commitment, we are pleased to present ThorVG v0.15! This new version features a series of significant advancements that we are eager to showcase. Please check the release notes to see the latest updates in ThorVG!

Full Changelog: v0.14.0...v0.15.0

WebGPU Engine

In this release, we have made significant improvements in the performance, functionality, and stability of the WebGPU engine. Despite our steadyfast efforts, the WebGPU engine is being provided as a experimental version in this release. This decision led us to further validate its stability and improve the quality of anti-aliasing. We plan to achieve these goals in the right next version. Nevertheless, the WebGPU engine's rendering performance and functionality are working well overall and are ready for trial use at this stage. We have also successfully integrated WebGPU with web browsers using WebAssembly, and performance tests show it can deliver 120fps in 4K resolution.

To further boost ThorVG's performance, we revisited the WebGPU engines from a performance standpoint and applied a series of targeted optimizations.

[Enhanced Rendering Capabilities with ThorVG WebGPU]

Stroke Generation

We introduced several optimizations to improve stroke generation efficiency. We minimized memory allocations, range checks, and other conditions for large-scale vertex and index creation, while reducing the number of segment length and bounding box calculations. Distance and bounding box updates are now applied only when necessary, and for shapes without strokes, distance calculations were entirely removed. We also switched to stack memory for better cache efficiency and reduced fragmentation, improving memory allocation speed. Caching was implemented for point distances and path lengths, with updates triggered only as needed. Geometry consistency validation is deferred to the final stage of the path life-cycle to streamline data streaming. Additionally, stroke trimming now uses binary search, circle geometry for caps and joints is pre-cached. After this optimization, we achieved a performance enhancement in stroke rendering of approximately 3x.

[Stroke Generation Performance Comparison. Before: 200fps -> After: 676fps]

Blending and Compositions

We have reduced the number of context switches during masking operations, leading to improved performance. Additionally, new decomposed Shaders were introduced to optimize the execution of various blending methods. Support for new masking methods, including Lighten and Darken, has also been added, offering greater flexibility in visual effects. The ThorVG WebGPU engine currently supports the following blending modes: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Add.

[Support for Various WebGPU Blending Types]

More Optimizations

We implemented memory optimizations by using a single stencil buffer for all operations, significantly reducing GPU memory pressure. Additionally, gradient values are now pre-cached into a texture, allowing GPU samplers to efficiently manage spread and interpolation computations. The pre-cached gradient values and reduced context switches further enhanced both the performance and visual quality of the rendering.

[Gradient Fill Transform]

More Feature Coverage

We added support for Path Clipping and Viewport management. Path clipping allows parts of a graphic that fall outside a defined clipping area to be hidden, enabling more efficient rendering and control over what is displayed within the scene. This feature is particularly useful when managing complex shapes or focusing on specific regions of a graphic, ensuring that only the visible portions are processed and rendered. Viewport defines the visible area in which the rendering occurs, allowing control over the portion of the canvas or scene that is rendered to the screen. By setting the viewport, developers can manage the scale and positioning of content within a specified region, offering greater flexibility in rendering larger scenes or zooming into specific areas without recalculating the entire graphic.

[Path Clipping (Left) and Viewport (Right)]

Lottie Animation

In this update, the ThorVG Lottie feature has been significantly enhanced in terms of specification support, functionality stability, and performance. Lottie rendering performance has improved by approximately 10% compared to the last version v0.14, with new support for Layer Effects, Text Range Selector, User Interaction, Offset Path, and extended Masking capabilities.

Layer Effect Support

The biggest feature addition in ThorVG is Layer Effect support. Layer Effects in Lottie are related to post-processing effects and can create various visual transformations through post-processing image manipulation. While there are various types of effects within Layer Effects, ThorVG will start by supporting the widely-used Blur effect first and gradually expand to other types such as Drop Shadow. Please note that Layer Effects are advanced features that come with higher processing costs, making them ideal for creating impactful visuals while offering enhanced creative control and dynamic visual presentations.

[Lottie Layer Effect (Gaussian Blur) in ThorVG]

Interactive Lottie Support

ThorVG’s Interactive Lottie Feature introduces the ability to make Lottie animations responsive to user interactions, significantly enhancing the user experience. This feature allows developers to trigger, control, and manipulate animations in real-time based on user inputs such as clicks, touches, or hover actions, and then play the corresponding animation segment based on the application's context.

[Interactive Lottie Animation in ThorVG]

For this interaction, ThorVG introduced a mechanism for searching for specific objects within a Lottie scene and determining the response between those objects and user input. By default, the unit of search is a Lottie Layer, and users can determine the target they want to search for through its name. To facilitate this process, ThorVG allows users to easily determine whether a specific object within a Lottie scene has been selected by identifying the object and providing its touch area (bounding box). Please check the demo code for basic interaction.

[Interactive Lottie Workflow in ThorVG]

Text Range Selector Support

ThorVG’s text capabilities have been enhanced with new features and corrections, providing greater flexibility and precision for text animations in Lottie. We’ve introduced support for selecting and animating text based on defined ranges, improved control over line spacing for more sophisticated layouts, and added the ability to randomize text animations for dynamic visual effects.

[Dynamic Lottie Texts in ThorVG]

Offset Path Support

The offset curve is a curve parallel to the original one at a specified distance. For Bezier curves, generating an offset curve is non-trivial. Although it can be done analytically, the resulting curve is no longer a polynomial and cannot be represented as a Bezier curve:

To address this, different techniques can be employed to quickly and accurately estimate the offset curve as a Bezier curve. In general, this can be tricky, but a straightforward approach can be applied in most cases. For each point along the original Bezier curve, the tangent vector at that point is computed, which can be derived from the first derivative of the Bezier curve's parametric equation. From the tangent vector, the normal vector is calculated by rotating the tangent vector 90 degrees in either direction (left or right). Next, each control point of the original Bezier curve is moved by a specified offset distance along the corresponding normal vector. These resulting points are then connected, creating new segments that can be intersected with adjacent segments. This process yields...