Animation rendering method, device, medium and product

Abstract

The present application discloses an animation rendering method, device, medium and product, which relates to the field of animation rendering. The method includes obtaining data to be processed and preprocessing the data to be processed; the preprocessing includes data format conversion and data simplification; storing the preprocessed data to be processed in slices, and creating an index corresponding to each sliced ​​data; storing the index corresponding to each sliced ​​data; initializing the GPU rendering environment; obtaining the corresponding sliced ​​data according to the index, and scheduling the rendering task in the initialized GPU rendering environment; in the process of real-time user interaction, using the WebGL incremental rendering method and optimization strategy to perform GPU parallel processing. The present application can solve the performance bottleneck of traditional Canvas drawable rendering under large data volume and improve the fluency of data rendering and animation.

Description

Technical Field

[0001] The present application relates to the field of animation rendering, and in particular to an animation rendering method, device, medium and product. Background Art

[0002] Currently, data visualization tools such as ECharts and HighCharts often use Canvas to draw when processing large amounts of data in charts and map components. However, existing ECharts and HighCharts data visualization tools mainly rely on the central processing unit (CPU) to process large amounts of data, resulting in performance degradation when rendering complex animations and large amounts of data. Specifically, the performance is as follows: (1) When there are a large number of map nodes, the style will change when the mouse hovers over the point, and there will be freezes during the operation. (2) When a large amount of data is quickly moved in and out of the chart area, the rendering speed is slow and the animation is not smooth, affecting the user experience.

[0003] In the traditional CPU rendering architecture, the rendering process of the chart component usually includes the following steps: (1) Get the raw data from the data source, usually by loading a data file from the server through an HTTP request or reading data from the local file system. (2) Parse the raw data into a data structure suitable for rendering. Usually JSON or XML format is used; step (2) includes data format conversion and data preprocessing. (3) Perform calculations based on the input data to generate intermediate data required for drawing, such as coordinate position, size, color and other attributes. This step may involve a lot of mathematical operations and data processing. (4) Pass the generated intermediate data to the Canvas API and call the corresponding drawing function to draw the chart. This process relies entirely on CPU calculation and is subject to the computing power of the CPU. (5) If the chart contains animation effects, the animation processing process is started during or at the beginning of the chart drawing process. The generation and update of animation frames are usually controlled by specialized APIs such as requestAnimationFrame to ensure the smoothness and performance of the animation. (6) Handle user interactions, such as mouse movement, clicks and other events. Update the chart based on user actions and re-execute data calculations and chart drawing. If the user action involves data changes, repeat step (3); otherwise, if it is just a change in the chart design, repeat step (4).

[0004] From the above, it can be seen that the CPU of the prior art has limited efficiency when processing large amounts of graphic data, resulting in limited processing capacity; under large amounts of data, the animation is prone to freezes and frame skips, resulting in poor animation smoothness; the rendering time of complex charts is long, which is not suitable for application scenarios with high real-time requirements, resulting in slow rendering speed.

[0005] Therefore, based on the above problems, there is an urgent need to provide a new animation rendering method to solve the problems of limited processing power, rendering jams and unsmooth animation in the existing technology. Summary of the invention

[0006] The purpose of this application is to provide an animation rendering method, device, medium and product that can solve the performance bottleneck of traditional Canvas rendering under large amounts of data and improve the smoothness of data rendering and animation.

[0007] To achieve the above objectives, this application provides the following solutions:

[0008] In a first aspect, the present application provides an animation rendering method, the animation rendering method comprising:

[0009] Acquire the data to be processed and preprocess the data to be processed; the preprocessing includes data format conversion and data simplification;

[0010] The pre-processed data to be processed is stored in shards, and an index corresponding to each sharded data is created; and the index corresponding to each sharded data is stored;

[0011] Initialize the GPU rendering environment;

[0012] Obtain the corresponding fragmented data according to the index, and schedule the rendering task in the initialized GPU rendering environment;

[0013] During real-time user interaction, the WebGL incremental rendering method and optimization strategy are used for GPU parallel processing.

[0014] Optionally, the obtaining of the data to be processed and preprocessing the data to be processed specifically includes:

[0015] Use JavaScript's ArrayBuffer to convert the JSON format of the data to be processed into binary format;

[0016] The Douglas-Peucker algorithm is used to simplify the data to be processed.

[0017] Optionally, the initializing the GPU rendering environment specifically includes:

[0018] Create the current WebGL rendering context and determine basic rendering parameters;

[0019] The GPU is controlled by a WebGL shader program; the WebGL shader program includes: a vertex shader and a fragment shader; the vertex shader is used to process the attributes of each vertex; the fragment shader is used to process each pixel fragment after rasterization;

[0020] Determine a frame buffer object and a texture object, and determine a rendering target; the rendering target is used to perform multiple rendering target configuration to support complex scenes;

[0021] Create a vertex buffer object, send the pre-processed data to the GPU, and bind the vertex buffer object to the current context;

[0022] Use uniform variables to pass global parameters to WebGL shader programs.

[0023] Optionally, the obtaining of corresponding fragmented data according to the index and performing rendering task scheduling in the initialized GPU rendering environment specifically includes:

[0024] Obtain the corresponding fragmented data according to the index, and determine the rendering requirements and complexity of the current frame of the fragmented data;

[0025] According to the rendering requirements and complexity of the current frame of the fragmented data, the task segmentation strategy is adopted to divide it into multiple rendering subtask lists; and the multiple rendering subtask lists are assigned to different rendering queues;

[0026] Determine the task list based on the rendering subtask list and the tasks obtained by multi-threaded data loading using Web Workers;

[0027] Sort the task list according to priority to obtain rendering tasks;

[0028] According to the rendering task, the instantiation rendering function of WebGL is used to generate GPU instructions; the GPU instructions are used to perform batch rendering after merging multiple rendering objects.

[0029] Optionally, the WebGL incremental rendering method includes: difference detection, local redrawing, and data caching.

[0030] Optionally, the optimization strategy includes: event listening, dynamic LOD control, smooth transition algorithm and frame rate management.

[0031] Optionally, the animation rendering method further includes: resource management; the resource management includes: resource pool management, memory management strategy, texture management, resource refresh mechanism and performance monitoring and optimization.

[0032] In a second aspect, the present application provides a computer device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the animation rendering method.

[0033] In a third aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which implements the animation rendering method when executed by a processor.

[0034] In a fourth aspect, the present application provides a computer program product, including a computer program, which implements the animation rendering method when executed by a processor.

[0035] According to the specific embodiments provided in this application, this application discloses the following technical effects:

[0036] The present application provides an animation rendering method, device, medium and product, which schedules rendering tasks in an initialized graphics processing unit (GPU) rendering environment and utilizes GPU parallel computing: a large number of graphics and animation computing tasks are handed over to the GPU for processing, and its parallel computing capabilities are fully utilized to solve the performance bottleneck of traditional Canvas drawable rendering under large data volumes; by using the Web Graphics Library (Web Graphics Library, WebGL) incremental rendering method and optimization strategy during the real-time user interaction process, GPU parallel processing is performed to ensure the picture while reducing unnecessary calculations, improving overall rendering efficiency, and improving response speed and animation fluency; the present application can ensure that data processing and rendering processes are optimized to each other, and improve overall system resource utilization. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0038] Figure 1 This is a flowchart of an animation rendering method in an embodiment of the present application;

[0039] Figure 2 This is a schematic diagram of the principle of an animation rendering method in one embodiment of the present application. DETAILED DESCRIPTION

[0040] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0041] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, the present application is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0042] In an exemplary embodiment, Figure 1 As shown, an animation rendering method is provided, the method comprising the following S101 to S105. Wherein:

[0043] S101, obtaining data to be processed and preprocessing the data to be processed; the preprocessing includes data format conversion and data simplification;

[0044] S101 specifically includes:

[0045] S11, using JavaScript's ArrayBuffer to convert the JSON format of the data to be processed into a binary format; ArrayBuffer is an object in JavaScript used to represent a general, fixed-length raw binary data buffer;

[0046] S12 uses the Douglas-Peucker algorithm to simplify the data to be processed, thereby reducing the number of points required to describe graphics (such as polygons, curves, etc.). Each point in the graphics may have multiple attributes, such as x and y coordinates, and the different attributes are converted into binary format for fast processing and transmission.

[0047] Curves are usually described by multiple points. For a complex curve, there are hundreds or even thousands of points. The Douglas-Peucker algorithm is a classic line simplification algorithm used to reduce the number of points on a line while trying to maintain the shape of the line. The Douglas-Peucker algorithm selects the most important points on a curve and then recursively processes the subcurves on both sides. The specific steps are as follows:

[0048] 1. Select the two endpoints of the curve (start and end).

[0049] 2. Find the point on the curve that is farthest from the line segment (start-end).

[0050] 3. If the distance between the point and the line segment is greater than the preset threshold (epsilon), the point is retained; otherwise, the point is deleted.

[0051] 4. Recursively process the two sub-curves (start-point and point-end), repeating the above steps until there are no points to delete;

[0052] S102, storing the pre-processed data to be processed in shards, and creating an index corresponding to each sharded data; and storing the index corresponding to each sharded data;

[0053] Sharding includes spatial slicing and temporal slicing. For example, in spatial slicing, maps are divided into multiple grids or blocks. Only blocks related to the current view are loaded and rendered, thereby improving rendering efficiency. Generally, spatial data structures such as quadtrees or octrees are used to manage and query these slicing. Temporal slicing refers to the segmentation of data according to the time dimension, which is suitable for time series data. Through spatial slicing and temporal slicing, data can be efficiently managed and scheduled. When users access or operate, they only need to process the sliced ​​data related to the needs, reducing the overhead of data transmission and rendering and improving the response speed.

[0054] Create an index (such as R-tree, quadtree) corresponding to each sharded data to create a fast access path for each data shard, ensuring that the nodes that need to be rendered or updated can be quickly located and obtained during the interaction process. Through the index, the specific sharded data can be quickly located, speeding up the loading and rendering speed; after the data is quickly located through the index, the cache mechanism will further store frequently accessed data or index results, and in subsequent accesses, it can be directly read from the cache without recalculation or retrieval, thereby reducing the delay of data loading.

[0055] Data caching can implement local data caching mechanisms, such as local storage (LocalStorage, IndexDB) or browser memory cache, to reduce repeated data loading and improve the overall efficiency of the system.

[0056] S103, initializing the GPU rendering environment;

[0057] S103 specifically includes:

[0058] S31, creating a current WebGL rendering context and determining basic rendering parameters;

[0059] The basic rendering parameters include the following parameters:

[0060] alpha: Controls whether the frame buffer has an alpha channel. Set to true to achieve semi-transparent effects.

[0061] depth: Enable or disable the depth buffer. The depth buffer is used to handle object occlusion relationships.

[0062] stencil: Enable or disable the stencil buffer. Mainly used for complex per-fragment operations.

[0063] antialias: Turn antialiasing on or off. Antialiasing helps reduce jagged edges and make graphics smoother.

[0064] premultipliedAlpha: Controls whether to use a premultiplied alpha channel.

[0065] preserveDrawingBuffer: Defines whether the drawing buffer is saved after drawing is completed. Usually set to false to improve performance.

[0066] S32, using a WebGL shader program to control the GPU; the WebGL shader program includes: a vertex shader and a fragment shader; the vertex shader is used to process the attributes of each vertex, such as position, color, etc.; the fragment shader is used to process each pixel fragment after rasterization;

[0067] The process of compiling a WebGL shader program is as follows:

[0068] 1. Create a shader object using gl.createShader().

[0069] 2. Use gl.shaderSource() to specify the shader code.

[0070] 3. Compile the shader using gl.compileShader().

[0071] The steps for linking a WebGL shader program are:

[0072] 1. Create a program object using gl.createProgram().

[0073] 2. Attach the compiled shader using gl.attachShader().

[0074] 3. Link the shader program using gl.linkProgram().

[0075] 4. Enable the shader program using gl.useProgram().

[0076] S33, determining a frame buffer object (FBO) and a texture object, and determining a rendering target; the rendering target is used to perform a multiple rendering target (MRT) configuration to support complex scenes;

[0077] S34, creating a vertex buffer object (VBO), sending the pre-processed data to be processed to the GPU, and binding the vertex buffer object to the current context;

[0078] The specific binding method is to use the gl.bindBuffer(gl.ARRAY_BUFFER, buffer) method.

[0079] S35, use Uniform variables to pass global parameters to WebGL shader programs to achieve flexible rendering effects.

[0080] S104, obtaining corresponding fragmented data according to the index, and scheduling rendering tasks in the initialized GPU rendering environment;

[0081] S104 specifically includes:

[0082] S41, obtaining corresponding fragmented data according to the index, and determining the rendering requirements and complexity of the current frame of the fragmented data;

[0083] The rendering requirements are determined based on the number of rendering nodes and the level of detail in the current frame (for example, drawing a football requires a higher level of detail than drawing a square); the rendering load, i.e., the complexity, is determined by detecting performance indicators such as frame rate and rendering time;

[0084] S42, according to the rendering requirements and complexity of the current frame of the fragmented data, divide it into multiple rendering subtask lists using a task segmentation strategy; and assign the multiple rendering subtask lists to different rendering queues;

[0085] Among them, the specific technical implementation of the task segmentation strategy is:

[0086] 1. Space-based: Divide the scene into different areas (such as quadtree, octree), and each area is a rendering task.

[0087] 2. Based on object type: Divide tasks according to different types of objects (such as static scenes, dynamic graphics).

[0088] 3. Complexity-based: Assign different computing priorities and resources to objects of different complexity.

[0089] S43, determining a task list according to the rendering subtask list and the tasks obtained by performing multi-threaded data loading using Web Workers; performing multi-threaded data loading using Web Workers can ensure that the main thread maintains smooth user interaction and rendering operations;

[0090] S44, sorting the task list according to the priority to obtain the rendering task;

[0091] S45, generating GPU instructions according to the rendering task using the instantiation rendering function of WebGL; the GPU instructions are used to perform batch rendering after merging multiple rendering objects; the current step renders multiple identical or similar objects through a single drawing call, greatly improving efficiency.

[0092] S105, during the real-time user interaction process, a WebGL incremental rendering method and an optimization strategy are used to perform GPU parallel processing.

[0093] WebGL incremental rendering methods include: difference detection, partial redrawing, and data caching.

[0094] Among them, difference detection is to remember or calculate the state of the last rendering, compare it with the current state, and find out the changes.

[0095] Partial redrawing is to redraw only those objects or areas that have actually changed. For example, in a map browser, when the user hovers over a node, only the style of that node is updated.

[0096] Data caching is to avoid unnecessary repeated requests or calculations by using cache, ensuring that data or status is not pushed or recalculated repeatedly.

[0097] Optimization strategies include: event listening, dynamic LOD control, smooth transition algorithm and frame rate management.

[0098] Among them, event listening is to embed event listeners to monitor user interaction events, such as mouse hover, click, drag, etc. Separate the event processing logic from the rendering logic to ensure that the main thread can focus on the rendering task.

[0099] The interactive response mechanism is to calculate new visual effect changes based on user operations, update the corresponding rendering data, and trigger incremental rendering. For example, when the user hovers over a map node, only the style and status of the corresponding node are updated.

[0100] Dynamic LOD control uses Level of Detail (LOD) technology to dynamically adjust rendering precision according to the view distance. For example, low-precision models are used at long distances, and high-precision models are used at close distances, which not only ensures rendering quality but also improves performance.

[0101] Smooth transition algorithm To implement smooth transition algorithms, such as linear interpolation (LERP) and acceleration / deceleration interpolation (Ease In / Ease Out) are used to process animation and state changes to enhance animation smoothness.

[0102] Frame rate management monitors the system frame rate in real time, and maintains the optimal frame rate of the system under different load conditions by adjusting rendering details and task scheduling, thereby ensuring system response speed and rendering quality.

[0103] In order to efficiently manage resources and ensure the efficiency and sustainability of the rendering process, the animation rendering method provided in the present application also includes: resource management; the resource management includes: resource pool management, memory management strategy, texture management, resource refresh mechanism and performance monitoring and optimization.

[0104] Among them, resource pool management is to establish resource pools (such as texture pools, buffer pools) to pre-allocate and reuse commonly used resources, reducing the overhead of repeated creation and destruction.

[0105] The memory management strategy is to monitor GPU memory utilization, dynamically adjust memory allocation and recycling strategies, prevent memory leaks and excessive occupancy, and ensure that the system runs efficiently in different scenarios.

[0106] Texture management adopts multiple texture compression and dynamic texture loading strategies to improve texture rendering efficiency and support real-time update and switching. For example, use WebGL texture compression formats such as S3TC and ETC.

[0107] The resource refresh mechanism implements asynchronous refresh and update of resources in the background to ensure that resources are kept up to date while being used efficiently.

[0108] Performance monitoring and optimization: Use performance monitoring tools (such as WebGL debugger, GPU Profiler) to regularly evaluate rendering performance, identify bottlenecks and optimize them, and continuously improve system performance.

[0109] In an exemplary embodiment, Figure 2 As shown in the figure, in the chart drawing and animation processing process, the rendering task scheduling is added; in the user interaction process, the real-time interaction optimization is introduced; at the same time, a resource management mechanism is set up to run through the entire process, and the resources are monitored in real time to continuously improve the system performance;

[0110] In an exemplary embodiment, a computer device is provided, which may be a server or a terminal. The computer device includes a processor, a memory, an input / output interface (I / O for short) and a communication interface. The processor, the memory and the input / output interface are connected via a system bus, and the communication interface is connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal via a network connection. When the computer program is executed by the processor, an animation rendering method is implemented.

[0111] In an exemplary embodiment, a computer-readable storage medium is provided, storing a computer program, and when the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0112] In an exemplary embodiment, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0113] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0114] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM may be in various forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM).

[0115] The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. The non-relational database may include a distributed database based on blockchain, etc., but is not limited thereto. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but is not limited thereto.

[0116] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0117] This article uses specific examples to illustrate the principles and implementation methods of this application. The description of the above embodiments is only used to help understand the method and core ideas of this application. At the same time, for those skilled in the art, according to the ideas of this application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting this application.

Claims

1. An animation rendering method, characterized in that: The animation rendering method comprises: Acquire the data to be processed and preprocess the data to be processed; the preprocessing includes data format conversion and data simplification; The pre-processed data to be processed is stored in shards, and an index corresponding to each sharded data is created; and the index corresponding to each sharded data is stored; Initialize the GPU rendering environment; Obtain the corresponding fragmented data according to the index, and schedule the rendering task in the initialized GPU rendering environment; During real-time user interaction, WebGL incremental rendering method and optimization strategy are used for GPU parallel processing; The obtaining of the data to be processed and preprocessing the data to be processed specifically includes: Use JavaScript's ArrayBuffer to convert the JSON format of the data to be processed into binary format; The Douglas-Peucker algorithm is used to simplify the data to be processed; The step of obtaining the corresponding fragmented data according to the index and scheduling the rendering task in the initialized GPU rendering environment specifically includes: Obtain the corresponding fragmented data according to the index, and determine the rendering requirements and complexity of the current frame of the fragmented data; According to the rendering requirements and complexity of the current frame of the fragmented data, the task segmentation strategy is adopted to divide it into multiple rendering subtask lists; and the multiple rendering subtask lists are assigned to different rendering queues; Determine the task list based on the rendering subtask list and the tasks obtained by multi-threaded data loading using Web Workers; Sort the task list according to priority to obtain rendering tasks; According to the rendering task, the instantiation rendering function of WebGL is used to generate GPU instructions; the GPU instructions are used to perform batch rendering after merging multiple rendering objects.

2. The animation rendering method according to claim 1, characterized in that: The initialization of the GPU rendering environment specifically includes: Create the current WebGL rendering context and determine basic rendering parameters; The GPU is controlled by a WebGL shader program; the WebGL shader program includes: a vertex shader and a fragment shader; the vertex shader is used to process the attributes of each vertex; the fragment shader is used to process each pixel fragment after rasterization; Determine a frame buffer object and a texture object, and determine a rendering target; the rendering target is used to perform multiple rendering target configuration to support complex scenes; Create a vertex buffer object, send the pre-processed data to the GPU, and bind the vertex buffer object to the current context; Use uniform variables to pass global parameters to WebGL shader programs.

3. The animation rendering method according to claim 1, characterized in that: WebGL incremental rendering methods include: difference detection, partial redrawing, and data caching.

4. The animation rendering method according to claim 1, characterized in that: Optimization strategies include: event listening, dynamic LOD control, smooth transition algorithm and frame rate management.

5. The animation rendering method according to claim 1, characterized in that: The animation rendering method further includes: resource management; the resource management includes: resource pool management, memory management strategy, texture management, resource refresh mechanism and performance monitoring and optimization.

6. A computer device comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the animation rendering method according to any one of claims 1 to 5.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the animation rendering method according to any one of claims 1 to 5 is implemented.

8. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the animation rendering method according to any one of claims 1 to 5 is implemented.

Images