Animation Rendering With Reusable Triangulation Data
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The Web end of Lottie animation rendering engines like ThreeJS and PixiJS rely on indirect rendering through off-screen Canvas, leading to poor performance due to repeated triangulation of graphic objects in each frame.
Innovation Solution
An animation rendering method that determines the triangulation state of a graphic object by comparing it with the previous frame, allowing reuse of triangulation data when no change is detected, thereby avoiding redundant triangulation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If repeated triangulation is performed for each frame, then rendering completeness is ensured, but rendering performance deteriorates
Solution Approach 1:
The patent performs triangulation in advance during the preparation phase and stores the results. During frame rendering, the pre-computed triangulation data is reused without performing triangulation again, thereby avoiding redundant computations and improving rendering performance while ensuring completeness through proper data management
Solution Approach 2:
The patent recovers and reuses triangulation data from previous frames when the graphic object's triangulation state remains unchanged. The system detects changes in triangulation state and only recomputes triangulation when necessary, discarding the need for repeated triangulation operations and reducing time consumption
2Productivity
If triangulation state comparison is performed, then redundant computations are avoided, but detection complexity increases
Solution Approach 1:
The patent focuses the comparison on specific local attributes of the triangulation state (such as vertex positions, triangle indices, or geometric properties) rather than performing a complete re-triangulation and comparison of the entire graphic object. This targeted local comparison reduces detection complexity while still accurately identifying when triangulation data can be reused
Solution Approach 2:
The patent creates a representation or copy of the triangulation state (such as storing triangulation data in a cache or using a simplified state descriptor) that can be efficiently compared between frames. This copying approach allows for fast detection of changes without requiring complex analysis of the entire graphic object
Data Source
AI summary
Provided in the present disclosure are an animation rendering method and apparatus, and a device and a storage medium. The method includes: firstly, determining a target graphic object on an image frame to be rendered in a target graphic animation and a graphic drawing mode of the target graphic object; if it is determined that the graphic drawing mode of the target graphic object is a filling drawing mode, for a triangulation state of the target graphic object, determining whether the image frame to be rendered changes compared with an adjacent previous image frame; and if the image frame to be rendered does not change, on the basis of triangulation data of a graphic object, corresponding to the target graphic object, on the adjacent previous image frame, rendering the target graphic object on the image frame to be rendered.