Graphics processing method, electronic device and computer-readable storage medium

Abstract

A graphics processing method, an electronic device and a computer-readable storage medium. The method comprises: displaying a first interface, wherein the first interface comprises a first basic primitive and a second basic primitive; performing spatial sampling on a first interface on the basis of first information and second information, so as to generate a sampling point set, wherein the first information comprises function information of a first target primitive, and the second information comprises function information of a second virtual primitive; on the basis of a target sampling point in the sampling point set, determining that the first target primitive intersects the second virtual primitive, wherein the target sampling point is located in both the first target primitive and the second virtual primitive; and displaying a second interface, wherein the second interface comprises a deformed first basic primitive and a deformed second basic primitive. The method can not only improve the accuracy of collision detection, but also optimize the efficiency of collision detection.

Description

Methods for graphics processing, electronic devices and computer-readable storage media

[0001] This application claims priority to Chinese Patent Application No. 202510311962.7, filed on March 14, 2025, entitled "Method for Graphic Processing, Electronic Device and Computer-Readable Storage Medium", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal technology, and in particular to methods for graphics processing, electronic devices, and computer-readable storage media. Background Technology

[0003] With the continuous development of animation technology, modern operating systems have an increasing demand for diverse motion effects (i.e., animation effects), among which blended motion effects are highly favored due to their unique advantages. Collision detection is an indispensable part of implementing blended motion effects. Traditional collision detection mainly relies on bounding box techniques, such as axis-aligned bounding boxes, directed bounding boxes, and spherical bounding boxes. These methods simplify complex objects (such as 2D or 3D graphics) into basic geometric shapes and detect the intersections between these shapes to determine collisions. Although bounding box methods are highly accurate when handling simple shapes, they are only a rough approximation of objects. Therefore, they may misjudge complex shapes, affecting the accuracy of collision detection. Summary of the Invention

[0004] Therefore, this application provides a graphics processing method, an electronic device, and a computer-readable storage medium that can not only improve the accuracy of collision detection but also optimize the efficiency of collision detection.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] Firstly, a method for graphics processing is provided, which can be executed by an electronic device, by a module applied in the electronic device (e.g., a processor, chip, or chip system), or by a logic module or software capable of implementing all or part of the functions of the electronic device; the method includes:

[0007] A first interface is displayed, comprising a first basic graphic element and a second basic graphic element. Spatial sampling is performed on the first interface based on first and second information to generate a set of sampling points. The first information includes function information of a first target graphic element, and the second information includes function information of a second virtual graphic element. The set of sampling points includes at least one sampling point. The first target graphic element is either a first basic graphic element or a first virtual graphic element. The first virtual graphic element is a graphic element formed by expanding the first basic graphic element, and the second virtual graphic element is a graphic element formed by expanding the second basic graphic element. Based on the target sampling point in the set of sampling points, the intersection of the first target graphic element and the second virtual graphic element is determined, and this target sampling point is simultaneously located within both the first target graphic element and the second virtual graphic element. A second interface is displayed, comprising a deformed first basic graphic element and a deformed second basic graphic element.

[0008] In the above method, the electronic device can determine whether the first target primitive (or the second virtual primitive) intersects (i.e., whether a collision occurs) within the first interface based on the function information of the first target primitive (or the second virtual primitive), such as the function expression of the shape of the first target primitive (or the second virtual primitive) and the range of function values. Since function information can accurately describe the shape and boundary of the target primitive, performing intersection detection based on function information can provide higher accuracy, especially when dealing with target primitives with complex shapes. Function information can capture more details, thus significantly reducing the possibility of false positives. Furthermore, function information can directly reflect the shape and boundary of the target primitive without requiring additional geometric calculations or approximations. Therefore, in some scenarios, using a function-based approach for intersection detection may be more efficient than the traditional bounding box method.

[0009] In one possible implementation, the method further includes: when it is determined that the first target primitive intersects with the second virtual primitive, determining third information based on the first information and the second information, wherein the third information is the function information of the target intersection region and the target sampling point is located within the target intersection region; and performing a fusion operation on the third information to generate fourth information, wherein the fourth information is the function information of the fusion region, and the fusion operation includes at least one of the following: union operation, intersection operation, smoothing operation, smooth intersection operation, smooth union operation, or transform domain operation, wherein the fusion region is the region obtained after the target intersection region has been fused.

[0010] In some scenarios, once it is determined that the first target primitive intersects with the second virtual primitive (i.e., a collision occurs), the electronic device can generate third information based on the functional information of the two (such as the first and second information). Then, by performing smoothing, intersection, and other fusion operations on the third information, the transition of the intersecting region can be made more natural and smooth. This function-based approach to handling intersecting regions has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the intersecting region can be made smoother, avoiding jagged edges or discontinuities that may occur in masking methods; 2) Functions can accurately describe the shape and boundary of the intersecting region, avoiding the accuracy loss caused by pixelation or approximation in masking methods; 3) Function-based fusion operations are usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, thus significantly reducing computational load and improving processing efficiency in some scenarios. In summary, the function-based processing method not only improves visual effects and computational accuracy but also reduces computational overhead and optimizes rendering performance.

[0011] In one possible implementation, the above method further includes: generating fifth information based on the first information, the second information, and the fourth information, wherein the fifth information is function information of the target drawing primitive, the target drawing primitive is a primitive obtained by intersecting and merging the first basic primitive and the second basic primitive, and the fifth information is used for drawing the target drawing primitive.

[0012] In some scenarios, when an electronic device determines that the first target primitive and the second virtual primitive have collided, it can generate fifth information based on the first, second, and fourth information. This allows the electronic device to quickly draw and render the target drawing primitive based on the fifth information represented by the function, thus avoiding the need for multiple processing stages when displaying the target drawing primitive using the traditional masking method. This improves the efficiency of graphics processing and optimizes the rendering performance of the device.

[0013] In one possible implementation, the first basic graphic element and the second basic graphic element are used to present the animation effect of the first control within a preset duration. The method further includes: displaying a target drawing graphic element on the second interface, wherein the target drawing graphic element is the graphic state of the animation effect at the first moment, and the target drawing graphic element includes a deformed first target graphic element and a deformed second virtual graphic element.

[0014] In one possible implementation, before spatially sampling the first interface based on the first information and the second information to generate a set of sampling points, the method further includes: determining the forces acting on the first basic graphic element and the second basic graphic element according to the first dynamic effect constraint, the first dynamic effect constraint including Hooke's law; determining the first position information according to the second dynamic effect constraint and the forces acting on the first basic graphic element, the second dynamic effect constraint including Newton's laws of motion, the first position information being the position information of the first basic graphic element, the first position information being used to determine the position of the first target graphic element on the first interface; and determining the second position information according to the second dynamic effect constraint and the forces acting on the second basic graphic element, the second position information being the position information of the second basic graphic element, the second position information being used to determine the position of the second virtual graphic element on the first interface.

[0015] In some scenarios, electronic devices use motion constraints (such as Newton's laws of motion and Hooke's law) to determine the current position of target primitives (such as the first target primitive and the second virtual primitive). This has the following advantages: First, determining the movement position of primitives based on motion constraints makes the movement path of the primitives more realistic. Second, motion constraints can accurately calculate the position and dynamic changes of primitives, effectively ensuring the continuity and consistency of the animation. This not only avoids screen jumps or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in adjusting frame by frame, improving the overall efficiency of animation production.

[0016] In one possible implementation, the first information includes a first signed distance function (SDF), and the second information includes a second SDF. The first SDF is used to describe the shape of the first target primitive, and the second SDF is used to describe the shape of the second virtual primitive.

[0017] In some scenarios (such as animation processing), using SDF to describe the shape of target primitives (such as the first target primitive) has several advantages. For example, it can efficiently handle changes in primitive shape and collision detection between primitives. Furthermore, since SDF provides a numerical representation of primitive shape, it can be combined with other graphics algorithms (such as fusion operations) to achieve more complex and realistic animation effects. For instance, electronic devices can quickly determine whether two target primitives (such as the first target primitive and the second virtual primitive) intersect by comparing their SDF values; for example, if the sum of the two SDF values ​​is less than zero, it means the two primitives intersect. This method is computationally simple and efficient. At the same time, the continuity characteristic of SDF ensures a smooth transition in the intersection region, facilitating subsequent processing of animation effects such as collision fusion.

[0018] In one possible implementation, the third information includes a third SDF and the fourth information includes a fourth SDF, wherein the third SDF is used to describe the shape of the intersecting region of the targets and the fourth SDF is used to describe the shape of the fused region.

[0019] In some scenarios, using SDF to represent the intersection region of targets can simplify the calculation process. For example, electronic devices can quickly determine whether two target primitives intersect and accurately calculate the shape of the intersection region simply by comparing their SDF values. This approach not only improves computational efficiency but also optimizes rendering performance. Furthermore, due to the continuity of SDF, electronic devices can use SDF to describe the shape of the blending region, resulting in a smooth transition and avoiding visual or physical discontinuities caused by abrupt shape changes.

[0020] Secondly, another graphics processing method is provided, which can be executed by an electronic device, by a module applied in the electronic device (such as a processor, chip, or chip system), or by a logic module or software that can implement all or part of the functions of the electronic device. The method includes: displaying a first interface, the first interface including a first SDF primitive and a second SDF primitive; spatially sampling the first interface based on the function information of the first virtual primitive and the second virtual primitive to generate a set of sampling points; wherein the first virtual primitive is an SDF primitive formed by expanding the first SDF primitive, and the second virtual primitive is an SDF primitive formed by expanding the second SDF primitive; determining the intersection of the first virtual primitive and the second virtual primitive based on a target sampling point in the set of sampling points, the target sampling point being simultaneously located within the first virtual primitive and the second virtual primitive; and displaying a second interface, the second interface including a deformed first SDF primitive and a deformed second SDF primitive.

[0021] In the above method, the electronic device can determine whether the first and second virtual primitives intersect (i.e., whether a collision occurs) within the first interface based on function information of the first (or second) virtual primitive, such as the function expression of the shape of the first (or second) virtual primitive and the range of function values. Since function information can accurately describe the shape and boundaries of virtual primitives, intersection detection based on function information can provide higher accuracy, especially when dealing with virtual primitives with complex shapes, where function information can capture more details, thus significantly reducing the possibility of false positives. Furthermore, function information can directly reflect the shape and boundaries of virtual primitives without requiring additional geometric calculations or approximations; therefore, in some scenarios, using function-based intersection detection may be more efficient than traditional bounding box methods.

[0022] In one possible implementation, the method further includes: when it is determined that the first virtual primitive intersects with the second virtual primitive, determining the function information of the target intersection region based on the function information of the first virtual primitive and the function information of the second virtual primitive, wherein the target sampling point is located within the target intersection region; performing a fusion operation on the function information of the target intersection region to generate the function information of the fused region, wherein the fusion operation includes at least one of the following: union operation, intersection operation, smoothing operation, smooth intersection operation, smooth union operation, or transform domain operation, and the fused region is the region obtained after the target intersection region has been fused.

[0023] In some scenarios, once it is determined that the first virtual primitive and the second virtual primitive intersect (i.e., a collision occurs), the electronic device can generate function information for the target intersection region based on the function information of the two. Then, by performing smoothing, intersection, and other fusion operations on the function information of the target intersection region, the transition of the target intersection region can be made more natural and smooth. This function-based approach to handling target intersection regions has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection region can be made smoother, avoiding jagged edges or discontinuities that may occur in masking methods; 2) Functions can accurately describe the shape and boundary of the target intersection region, avoiding the accuracy loss caused by pixelation or approximation in masking methods; 3) Function-based fusion operations are usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, thus significantly reducing computational load and improving processing efficiency in some scenarios. In summary, the function-based processing method not only improves visual effects and computational accuracy but also reduces computational overhead and optimizes rendering performance.

[0024] In one possible implementation, the method further includes: generating function information of a target drawing primitive based on the function information of the first virtual primitive, the function information of the second virtual primitive, and the function information of the fusion region. The target drawing primitive is an SDF primitive obtained by intersecting and merging the first SDF primitive and the second SDF primitive. The function information of the target drawing primitive is used for drawing the target drawing primitive.

[0025] In some scenarios, when an electronic device determines that the first virtual primitive and the second virtual primitive have collided, it can generate the function information of the target drawing primitive based on the function information of the first virtual primitive, the function information of the second virtual primitive, and the function information of the fusion region. This allows the electronic device to quickly draw and render the target drawing primitive based on its function information, thus avoiding the need for multiple processing stages when displaying the target drawing primitive using traditional masking methods. This improves the efficiency of graphics processing and optimizes the rendering performance of the device.

[0026] In one possible implementation, the first SDF primitive and the second SDF primitive are used to present the animation effect of the first control within a preset duration. The method further includes: displaying a target drawing primitive on a second interface, wherein the target drawing primitive is the graphic state of the animation effect at a first moment, the preset duration includes the first moment, and the target drawing primitive includes the deformed first SDF primitive and the deformed second SDF primitive.

[0027] In one possible implementation, before spatially sampling the first interface based on the function information of the first virtual primitive and the function information of the second virtual primitive to generate a set of sampling points, the method further includes: determining the forces on the first SDF primitive and the second SDF primitive according to the first dynamic effect constraints, the first dynamic effect constraints including Hooke's law; determining first position information according to the second dynamic effect constraints and the forces on the first SDF primitive, the second dynamic effect constraints including Newton's laws of motion, the first position information being the position information of the first SDF primitive, the first position information being used to determine the position of the first virtual primitive on the first interface; and determining second position information according to the second dynamic effect constraints and the forces on the second SDF primitive, the second position information being the position information of the second SDF primitive, the second position information being used to determine the position of the second virtual primitive on the first interface.

[0028] In some scenarios, electronic devices can determine the current position of virtual primitives (such as the first and second virtual primitives) through motion constraints (such as Newton's laws of motion and Hooke's law). This has the following advantages: First, determining the movement position of primitives based on motion constraints makes the movement path of the primitives more realistic. Second, motion constraints can accurately calculate the position and dynamic changes of primitives, effectively ensuring the continuity and consistency of the animation. This not only avoids the screen jumps or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in adjusting frame by frame, improving the overall efficiency of animation production.

[0029] Thirdly, embodiments of this application provide an electronic device including a processor and a memory. The memory is used to store a computer program, and the processor is used to call and run the computer program from the memory, causing the electronic device to perform the methods described in the first aspect and various possible implementations of the first aspect.

[0030] Fourthly, embodiments of this application provide an electronic device including a processor and a memory. The memory stores a computer program, and the processor retrieves and runs the computer program from the memory, causing the electronic device to perform the methods described in the second aspect and various possible implementations of the second aspect.

[0031] Fifthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, causes the processor to perform the methods described in the first aspect and various possible implementations of the first aspect.

[0032] In a sixth aspect, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, causes the processor to perform the methods described in the second aspect and various possible implementations of the second aspect.

[0033] In a seventh aspect, embodiments of this application provide a computer program product comprising: computer program code, which, when executed by an electronic device, causes the electronic device to perform the methods described in the first aspect and various possible implementations of the first aspect.

[0034] Eighthly, embodiments of this application provide a computer program product comprising: computer program code, which, when executed by an electronic device, causes the electronic device to perform the methods described in the second aspect and various possible implementations of the second aspect.

[0035] Ninthly, embodiments of this application provide a chip system including a processing circuit and a storage medium storing computer program instructions; when the computer program instructions are executed by the processing circuit, they implement the methods described in the first aspect and various possible implementations of the first aspect.

[0036] Optionally, the processing circuitry in the above-mentioned chip system can be replaced by a processor, and the storage medium can be replaced by a memory. Optionally, the chip system may also include a communication interface for enabling communication between the chip system and a receiving device.

[0037] In a tenth aspect, embodiments of this application provide a chip system including a processing circuit and a storage medium storing computer program instructions; when the computer program instructions are executed by the processing circuit, they implement the methods described in the second aspect and various possible implementations of the second aspect.

[0038] Optionally, the processing circuitry in the above-mentioned chip system can be replaced by a processor, and the storage medium can be replaced by a memory. Optionally, the chip system may also include a communication interface for enabling communication between the chip system and a receiving device.

[0039] The beneficial effects of the technical solutions in the third to tenth aspects of this application can be the same as the beneficial effects of the technical solutions in the first or second aspects, and will not be repeated here. Attached Figure Description

[0040] Figures 1A and 1B are schematic diagrams of a collision detection scenario provided by an embodiment of this application;

[0041] Figure 2A is a schematic diagram of the hardware structure of an electronic device 100 provided in an embodiment of this application;

[0042] Figure 2B is a schematic diagram of the software architecture of an electronic device 100 provided in an embodiment of this application;

[0043] Figure 3A is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0044] Figures 3B to 3C are schematic flowcharts of a method for performing graphics processing according to an embodiment of this application;

[0045] Figures 4A to 4J are schematic diagrams of an application scenario provided by an embodiment of this application;

[0046] Figure 5A is a flowchart illustrating a graphics processing method 500A provided in an embodiment of this application;

[0047] Figure 5B is a flowchart illustrating a graphics processing method 500B provided in an embodiment of this application;

[0048] Figures 6A and 6B are schematic diagrams of a basic graphic element provided in an embodiment of this application;

[0049] Figures 7A to 7C are schematic diagrams of an application scenario provided by an embodiment of this application;

[0050] Figures 8A to 8C are schematic diagrams of another application scenario provided by the embodiments of this application;

[0051] Figures 9A to 9C are schematic diagrams of another application scenario provided by the embodiments of this application;

[0052] Figure 10 is a schematic diagram of the software architecture of a terminal device provided in an embodiment of this application;

[0053] Figure 11 is a schematic diagram of the software architecture of another terminal device provided in an embodiment of this application;

[0054] Figure 12 is a schematic diagram of another application scenario provided by an embodiment of this application;

[0055] Figure 13 is a schematic diagram of the structure of an electronic device 1300 provided in an embodiment of this application. Detailed Implementation

[0056] To clearly describe the technical solutions of the embodiments of this application, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be noted that the embodiments described in this application are only some embodiments of this application, and not all embodiments.

[0057] In the description of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B. In the description of this application, "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone. "At least one" means one or more, and "more" means two or more. The terms "first" and "second," etc., in the specification and claims of this application are used to distinguish different objects or to distinguish different treatments of the same object, not to describe a specific order of objects. For example, "first terminal" and "second terminal," etc., are used to distinguish different terminal devices, not to describe a specific order of terminal devices. Furthermore, the descriptions of "within," "inside," "within the interior," and "inner region" in the embodiments of this application can all be understood as the inner region of the element. Those skilled in the art will understand that the terms "first," "second," etc., do not limit the quantity or execution order, and that "first," "second," etc., do not necessarily imply difference.

[0058] It should be noted that, in this application, the terms "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner. The terms "comprising," "including," "having," and variations thereof all mean "including but not limited to," unless otherwise specifically emphasized.

[0059] To facilitate understanding of this application, some of the technical terms involved in this application are explained below.

[0060] 1. Motion Constraints

[0061] Motion constraints can generally be understood as constraints imposed on the motion, deformation, or forces acting on basic graphical elements based on certain physical laws. For example, in addition to obeying Newton's laws of motion, the motion of a graphical element (which can be considered an object with mass) can also be subject to other constraints; these constraints can restrict the element's motion within a specific range or in a specific manner. These constraints can be mechanical principles (such as gravity, friction, etc.) or physical equations (such as limitations on physical quantities like velocity and acceleration).

[0062] 2. Flexible interactive interface

[0063] In user interfaces (UIs), the animation effects of controls (such as buttons, icons, sliders, etc.) are usually based on linear changes in displacement (such as moving position), rotation (such as rotating around a point), scaling (such as changing size), etc. However, when the animation of controls in the UI includes non-linear changes, such as complex effects like merging or separating controls, the UI interface can be called a flexible interactive interface.

[0064] 3. Vertex data

[0065] In the field of computer graphics, discrete point lattices on the surface of an object are typically used to represent the object model; and the three-dimensional coordinate data of these discrete points representing the object model can be called vertex data.

[0066] 4. Signed distance fields (SDF)

[0067] SDF, also known as Signed Distance Function, Oriented Distance Function, or Two-Dimensional (2D) Distance Field Function, is an implicit graphical representation method. Curves or surfaces can be implicitly represented as a level set of distance field functions. SDF defines the shape of a graph by calculating the nearest distance from each point on the graph boundary to the interior of the graph (and marking the sign of the distance). In some scenarios, SDF can process the received 2D coordinate positions and return a distance value d, which represents the distance from the current point to the nearest geometric edge.

[0068] Applications of SDF include, but are not limited to: generating smooth contour edges (such as calculating the distance between each point and the shape surface to achieve anti-aliasing), collision detection (such as determining whether a point is inside or outside a primitive to determine if a collision has occurred), creating and editing complex geometries (such as changing the surface of a shape by changing the definition of SDF), control animation, and physical effects.

[0069] 5. Mesh data

[0070] Mesh data is a data representation method that describes the envelope information of a graphic through combinations of triangular facets. It constructs triangular facets based on discrete vertex data, and then uses all the triangular facets to form a complete mesh. This data representation method has broad application prospects in fields such as 3D modeling and computer graphics.

[0071] 6. Basic Primitives

[0072] In the field of animation design, basic primitives are the fundamental elements that constitute various animations. They can include various basic shapes, such as circles, rectangles, and polygons. These basic primitives can be understood as the basic building blocks of UI control animation effects; typically, a UI control can include one or more basic primitives.

[0073] 7. Mask

[0074] In image processing and computer graphics, a mask can be defined as a binary image of the same size as the original image. Each pixel in the mask determines the visibility or transparency of the corresponding pixel in the original image. It is typically composed of a black and white image, where white represents fully visible (unaffected), black represents fully invisible (completely occluded), and gray represents some degree of transparency.

[0075] The above has introduced the technical terms that may be involved in this application. The following section, in conjunction with a practical application scenario, introduces the technical problems that this application needs to solve.

[0076] Collision detection is a key technique for determining whether two or more objects intersect or contact each other; one common approach is to use algorithms such as bounding boxes to achieve collision detection between multiple objects. For simple geometric primitives (such as circles and rectangles), due to their relatively regular shapes, using bounding boxes for collision detection can meet the accuracy requirements. However, when collision detection involves complex primitives, the limitations of the bounding box method become apparent, and the false detection rate increases significantly.

[0077] For example, as shown in Figure 1A, when the circular bounding box 101 of basic primitive 1 and the circular bounding box 102 of basic primitive 2 are identified as intersecting (i.e., colliding) during detection, a false positive occurs even though these two basic primitives do not actually intersect. Conversely, in Figure 1B, when the rectangular bounding box 103 of basic primitive 3 and the rectangular bounding box 104 of basic primitive 4 are identified as not intersecting (i.e., not colliding) during detection, a false negative occurs even though these two basic primitives do actually intersect (i.e., collide). These examples demonstrate that bounding box-based collision detection methods have a high error rate when processing complex primitives, potentially leading to false positives or false negatives. Therefore, in practical applications, especially in complex scenarios, more precise detection methods are needed to improve the accuracy of collision detection.

[0078] To this end, this application proposes a method for image processing; this method can not only improve the accuracy of collision detection, but also optimize the efficiency of collision detection.

[0079] In this graphics processing method, the electronic device acquires the function information of the target primitive (such as the first target primitive and the second virtual primitive) (that is, the function information is used to represent the shape and boundary of the target primitive), and performs intersection detection (i.e. collision detection) between primitives in a functional manner. This not only improves the accuracy of collision detection, but also optimizes the efficiency of collision detection.

[0080] It should be noted that the above-described graphics processing method can be executed by an electronic device, or by a module within the electronic device (such as a processor, chip, or chip system), or by a logic module or software capable of implementing all or part of the functions of the electronic device. In some scenarios, the electronic device can refer to a server, such as a computing server or graphics processing server, or it can refer to a terminal device (or user equipment (UE)). The terminal device can be a mobile phone, watch, smart screen, smart TV, tablet, wearable device, virtual reality (VR) device, augmented reality (AR) device, projector, in-vehicle playback system, etc. This application does not impose any restrictions on the specific type of electronic device.

[0081] To better understand the embodiments of this application, a hardware structure of an electronic device 100 applicable to this application is described below with reference to FIG2A.

[0082] Electronic device 100 may include processor 110, external memory interface 120, internal memory 121, universal serial bus (USB) connector 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, and display screen 170, etc.

[0083] The processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a GPU, a controller, a digital signal processor (DSP), a baseband processor, etc. These different processing units may be independent devices or integrated into one or more processors.

[0084] The processor 110 can generate operation control signals based on the instruction opcode and timing signals to control the instruction fetching and execution.

[0085] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 may be a cache memory. This memory can store instructions or data that the processor 110 has used or that are used frequently. If the processor 110 needs to use the instruction or data, it can directly retrieve it from this memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0086] In some embodiments, the processor 110 may include one or more interfaces. These interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal serial bus (USB) interface, etc. The processor 110 can connect to modules such as wireless communication modules and displays through at least one of these interfaces.

[0087] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0088] USB connector 130 is a USB standard-compliant interface used to connect electronic device 100 and peripheral devices. Charging management module 140 receives charging input from a charger, which can be either a wireless or wired charger. Power management module 141 connects to battery 142, and charging management module 140 connects to processor 110. Power management module 141 receives input from battery 142 and / or charging management module 140 to power processor 110, internal memory 121, display screen 170, and wireless communication module 160, etc. In some embodiments, power management module 141 and charging management module 140 may also be housed in the same device.

[0089] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0090] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the same device as at least some modules of the processor 110.

[0091] The wireless communication module 160 can provide wireless communication solutions for use on electronic devices 100, including wireless local area networks (WLAN) (such as Wi-Fi networks), Bluetooth (BT), and near field communication (NFC) technologies.

[0092] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other electronic devices via wireless communication technology. This wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), etc.

[0093] Electronic device 100 can implement display functions through GPU, display screen 170, and application processor. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0094] The external storage interface 120 can be used to connect an external storage card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external storage card communicates with the processor 110 through the external storage interface 120 to perform data storage. For example, it can store information such as the source code of a UI page file in the external storage card, or transfer information such as the source code of a UI page file from the electronic device 100 to the external storage card.

[0095] Internal memory 121 can be used to store computer executable program code, including instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (e.g., games or animations), etc. The data storage area may store data created during the use of electronic device 100 (e.g., parsed data of UI page files, etc.). In addition, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional methods or data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory disposed in the processor.

[0096] Electronic device 100 can display UI control animations, etc., through display screen 170.

[0097] The display screen 170 is used to display interface elements such as application markets, UI control animations, and various system controls. The display screen 170 may include a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like. In some embodiments, the electronic device 100 may include one or more display screens 170. In some embodiments, the display screen may be a foldable or rollable display screen.

[0098] It should be noted that in some scenarios, such as when most applications running on electronic device 100 require screen display, electronic device 100 can be equipped with display screen 170. The display screen 170 can display various dynamic icons, UI control animations, etc., in conjunction with the image rendering process of various applications.

[0099] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also include more or fewer components than those in FIG. 2A, or combine some components, or split some components, or have different component arrangements. The components in FIG. 2A may be implemented in hardware, software, or a combination of software and hardware.

[0100] Furthermore, it should be noted that the software system of the aforementioned electronic device 100 can adopt a layered architecture or a service architecture, etc. This embodiment of the invention uses the Harmony OS with a layered architecture as an example to exemplify the software architecture of the electronic device 100. It should be understood that the solution provided in this application can also be applied to other types of operating systems such as Android, Apple, and Windows.

[0101] Figure 2B illustrates a schematic diagram of the software architecture of the electronic device 100 provided in an embodiment of this application. As shown in Figure 2B, the layered architecture of the electronic device 100 divides the software into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some implementations, the Harmony system includes four layers, from bottom to top: the kernel layer, the system basic service layer, the framework layer, and the application layer.

[0102] The Harmony system employs a multi-kernel design, optionally including the Linux kernel, the Harmony microkernel, and a lightweight IoT operating system kernel (LiteOS). This design allows devices with varying capabilities to choose the appropriate system kernel. The kernel layer also includes a kernel abstraction layer, providing foundational kernel capabilities to other Harmony layers, such as process management, thread management, memory management, file system management, network management, and peripheral device management.

[0103] The system's basic service layer is the core capability set of the Harmony system, enabling it to provide application services through a framework layer in multi-device deployment scenarios. This layer may optionally include the following components:

[0104] The system's basic capability subsystems provide fundamental capabilities for the operation, scheduling, and migration of distributed applications across multiple devices within the Harmony system. These subsystems comprise a distributed soft bus, distributed data management and file management, distributed task scheduling, the Ark runtime, and distributed security and privacy protection. The Ark runtime provides runtime environments for multiple languages ​​(C / C++ / JavaScript) and basic system libraries. It also provides a runtime environment for Java programs statically generated using the Ark compiler (i.e., the parts of the application or framework layer developed using the Java language).

[0105] The basic software service subsystem suite provides common and general software services for the Harmony system. It comprises subsystems such as graphics and image processing, distributed media, distributed artificial intelligence (AI), multimodal input, mobile sensing development platform (MSDP) & device virtualization (DV), event notification, telephony services, and design for X (DFX) for non-functional product attributes. Each subsystem can be tailored to the functional granularity required for deployment in different device configurations.

[0106] The enhanced software service subsystem suite (see the enhanced software section outlined in the dashed box in Figure 2B) provides differentiated capability enhancement software services for the Harmony system across various devices. It comprises subsystems such as tablet business software, smart screen business software, in-vehicle business software, and Internet of Things (IoT) business software. The enhanced software service subsystem suite can be tailored to the deployment environment of different device types, with each subsystem further tailored to its functional granularity.

[0107] Harmony Driver Foundation (HDF) and Hardware Abstraction Layer (HAL) form the foundation for the open hardware ecosystem of the Harmony system. They provide hardware capability abstraction at the top and development framework and runtime environment for various peripheral drivers at the bottom.

[0108] Hardware Service Subsystem Set: Provides common and adaptable hardware services for the Harmony system, consisting of hardware service subsystems such as general sensor, location, power, USB, and biometrics. The Hardware Service Subsystem Set can be tailored to the deployment environment of different device types, with each subsystem allowing for functional customization.

[0109] The proprietary hardware service subsystem (see the proprietary hardware section outlined in the dashed box in Figure 2B) provides differentiated hardware services for different devices within the Harmony system. Optional subsystems include proprietary hardware services for tablets, in-vehicle systems, wearables, and IoT devices. The proprietary hardware service subsystem can be tailored at the subsystem level, and each subsystem can be tailored at the functional level.

[0110] The framework layer provides Harmony system applications with multi-language user program frameworks and meta-capability frameworks in languages ​​such as Java, C, C++, and JavaScript, as well as multi-language framework application programming interfaces (APIs) for various software and hardware services.

[0111] The application layer includes system applications and third-party applications (or extended applications), which can include applications such as camera, gallery, graphic design, animation design, music, video, and SMS. Applications in the Harmony system are built upon atomic ability (AA) and feature ability (FA).

[0112] The following section uses an electronic device 100 with the structure shown in Figures 2A and 2B as an example, and in conjunction with the graphics processing method provided in this application, to exemplarily describe the flow of the graphics processing method executed by the software system and hardware system of the electronic device 100.

[0113] As shown in Figure 3A, taking the animation of UI controls as an example, application X runs on the operating system of an electronic device; the process of the electronic device displaying the animation of UI controls of a UI page in application X is as follows:

[0114] Step A1): When application X detects a user operation event or system event, it will generate an animation calculation request and send this request to the graphics software service; the user operation event (or system event) is used to trigger the animation effect of the UI control.

[0115] Step A2): The graphics software service responds to the animation calculation request by sending a parsing instruction to the parsing module.

[0116] Step A3): After receiving the parsing instruction, the parsing module will execute the processing flow shown in Figure 3B: The parsing module obtains and parses the UI page file, and constructs a tree-structured UI nesting information (also known as constructing a UI control tree); each node in the tree structure records the attribute information of the corresponding UI control (such as the size, style, and position information relative to other interface elements of the control); the UI page file can use a tag-based language, such as Hypertext Markup Language (HTML), or a declarative language, such as Dart, to describe the information on the UI page (such as control information, status bar, text view, etc.); in other words, the UI page file declares the style of the UI page.

[0117] After parsing is complete, the parsing module sends the UI nesting information to the layout calculation module.

[0118] Step A4): The layout calculation module can calculate the size and position information of UI controls on the drawing area (such as the first or second interface below) based on the UI nesting information, such as shape size, relative position and other information.

[0119] The layout calculation module sends UI nesting information and size and position information to the animation module.

[0120] Step A5): The animation module can determine whether the UI page file includes flexible motion effect controls (which can also be understood as controls that support flexible constraints) based on the UI nesting information and size and position information. When the UI page file includes flexible motion effect controls, the animation module can construct the motion effect constraints of each basic graphic element corresponding to the flexible motion effect, and calculate the position information of each basic graphic element using the laws of physics based on the motion effect constraints, and send the processing results to the drawing module; the drawing module executes step A6).

[0121] When the UI page file does not include flexible animation controls, the animation module can directly instruct the layout calculation module to convert the nested UI information of the tree structure into the processing result to generate the required drawing attribute information, such as the shape of the UI control (e.g., circle, rectangle, etc.), color (background color, text color, etc.), shadow, filter attributes (e.g., blur, brightness adjustment, etc.), etc., and store these drawing attribute information on the corresponding nodes in the tree structure, and finally construct the rendering node tree.

[0122] It should be noted that, in some embodiments, the construction of physical scene information and primitive collision detection (or primitive intersection detection) can be performed in the animation module, or in the drawing module (as shown in the execution flow corresponding to Figure 10 below), or in other modules (as shown in the deformation component drawing module of the drawing module in Figure 11 below). This application embodiment does not limit the execution module for the construction of physical scene information and primitive collision detection.

[0123] For example, as shown in Figure 3C, in some embodiments, before constructing physical scene information, the aforementioned basic primitives can be expressed using functions (such as SDF). After the primitives are expressed as functions, the animation module can construct physical scene information and calculate the position information of each basic primitive. After the position information of each basic primitive is determined, the animation module can also perform primitive collision detection (as described in method 600 below) on each basic primitive to determine the primitives that have collided. If the animation module determines that a collision has occurred between primitives, it performs primitive fusion calculation on the new primitives formed after the collision to obtain the fused primitives, which are then used for subsequent primitive drawing. If the animation module determines that no collision has occurred between primitives, it directly draws the graphic formed by the combination of multiple primitives (which can also be understood as the graphic formed by the fusion of primitives).

[0124] Step A6): After receiving the processing result, the drawing module can generate the required drawing attribute information based on the processing result, and store this drawing attribute information in the corresponding nodes in the tree structure, and finally construct the rendering node tree.

[0125] After generating the rendering node tree, the drawing module can send the drawing attribute information to the GPU driver module.

[0126] Step A7): The GPU driver module can generate GPU drawing instructions based on the drawing attribute information; these drawing instructions can be understood as a set of drawing commands from some graphics APIs (such as Vulkan or Open Graphics Library (OpenGL)).

[0127] The GPU driver module can send drawing commands to the GPU.

[0128] Step A8): The GPU receives the drawing instruction and fills the graphics display buffer (which is used to temporarily store the image data to be displayed) according to the content indicated by the drawing instruction; after the GPU finishes executing the drawing instruction, the buffer can include the complete page image data; then, the GPU sends an instruction message to the display driver to instruct the display driver to perform a frame push operation.

[0129] Step A9): After receiving the instruction information, the display driver can perform a frame push operation, that is, read image data from the graphics display buffer and display the animation of the UI control on the display screen.

[0130] It should be noted that the architecture of the electronic device 100 is not limited to the hardware and software system structures shown in Figures 2A, 2B and 3A. In practical applications, the hardware and software system structures shown in Figures 2A, 2B and 3A can be modified according to specific application scenarios, and this application does not limit them.

[0131] The above describes in detail the hardware and software system structure of the electronic device 100 to which this application applies. Before describing the graphics processing method (as described in Method 500A and Method 500B below), we will take a mobile phone as an example of the electronic device 100 and introduce the practical application of this method in UI control animation scenarios in conjunction with the interface implementation.

[0132] As shown in Figure 4A, the mobile phone displays interface 400 (an example of the first interface below) in its top area; this interface 400 can float in the top area of ​​the mobile phone, or it can be fixed in the top area of ​​the mobile phone; this interface 400 can be used to display UI control 1 that supports flexible deformation (an example of the first control); this UI control 1 can be used to display the connection status information between the mobile phone and the headphones, such as whether the headphones are currently connected or the headphone battery status information; when the mobile phone and the headphones establish a connection, the mobile phone will present the UI control 1 in the form of flexible animation 1 (an example of flexible animation).

[0133] For example, as shown in Figure 4A, interface 400 may include element 1 (an example of the first basic element), element 2 (an example of the second basic element), and element 3; the mobile phone can use these three circular elements to present the flexible motion effect 1; at the beginning time T0, elements 1 to 3 are presented as the initial shape 401, that is, the shape of each basic element does not change at all; as the flexible motion effect 1 is played, elements 1 and 3 move towards element 2 respectively, while the shape of element 3 increases; at time T1, elements 1 to 3 form shape 402 (an intermediate form during the playback of the flexible motion effect 1) and are displayed on interface 403 (an example of the second interface), as shown in Figure 4B; from this shape 402, it can be seen that element 1 and element 2 collide (i.e., intersect), and element 2 and element 3 collide; among them, the intersection area 404 formed by element 1 and element 2 (an example of the target intersection area) and the intersection area formed by element 2 and element 3 are shown in Figure 4B. The intersecting areas 405 are not smooth; when the mobile phone determines that some graphic elements from graphic element 1 to graphic element 3 intersect through the following method 600, it will smooth and blend the intersecting areas 404 and 405 to make the transition smooth; after the smoothing and blending, at time T2 (which is after time T1 and before the end time), the user can see that graphic 402 has been updated to graphic 406 (i.e., an example of the target drawing graphic element) and displayed on interface 407 (i.e., another example of the second interface), as shown in Figure 4C; the intersecting areas 404 and 405 in graphic 406 have been smoothed; as the flexible animation 1 continues to play, graphic elements 1 to 3 will continue to blend and deform, finally forming graphic 408 at the end time; the user can see the connection status of the headphones and the mobile phone (e.g., "connected") and the remaining battery percentage of the headphones (e.g., 75%) on UI control 1, as shown in Figure 4D.

[0134] For example, as shown in Figure 4E, the phone displays interface 409 (an example of the first interface below) in its top area; this interface 409 can float in the top area of ​​the phone, or it can be fixed in the top area of ​​the phone; this interface 409 can be used to present a flexible UI control 2 (an example of the first control); this UI control 2 can be used to display the status information of the audio (such as music) being played on the phone, such as the currently playing audio icon, playback progress, and other status information; when the phone starts playing audio, the phone will present the UI control 2 in the form of a flexible animation effect 2 (another example of a flexible animation effect).

[0135] For example, as shown in Figure 4E, interface 409 may include primitive 1 (i.e., an example of the first basic primitive), primitive 2 (i.e., an example of the second basic primitive), primitive 3, and primitive 4; the mobile phone can use these four circular primitives to present the flexible motion effect 2; at the start time T 00 Initially, primitives 1 to 4 are presented as the initial graphic 410, meaning the shapes of each basic primitive do not undergo any deformation. As the flexible animation 2 plays, primitives 1 and 3 move towards primitive 2, and primitive 4 moves towards primitive 3, while the shape of primitive 3 becomes larger. 11 At a certain moment, primitives 1 to 4 form graphic 411 (i.e., an intermediate form during the playback of flexible animation 2) and are displayed on interface 412 (i.e., an example of the second interface), as shown in Figure 4F. From graphic 411, it can be seen that primitive 1 and primitive 2 intersect (i.e., collide), primitive 2 intersects with primitive 3, and primitive 3 intersects with primitive 4. Among them, the intersection area 413 formed by primitive 1 and primitive 2, the intersection area 414 formed by primitive 2 and primitive 3, and the intersection area 415 formed by primitive 3 and primitive 4 are not smooth. When the mobile phone determines that some primitives from primitive 1 to primitive 4 intersect through the following method 600, it will smooth and blend the intersection area 413 to intersection area 415 to make the transition smooth. After smoothing and blending, at T 22 Time (the T) 22 Time is located at T 11After the moment (and before the end moment), the user can see that graphic 411 has been updated to graphic 416 (another example of the target drawing primitive) and displayed on interface 417 (another example of the second interface), as shown in Figure 4G; the intersecting areas 413 to 415 in graphic 416 have been smoothed; as the flexible animation 2 continues to play, primitive 1 to primitive 3 will continue to merge and deform to generate the first part 418 of UI control 2, while primitive 4 merges with primitive 3 and is popped apart to form the second part 419 of UI control 2; the first part 418 and the second part 419 together form graphic 420 at the end moment; the user can see the audio information being played (such as "image thumbnail") and audio playback progress (such as a circular progress bar) on UI control 2, as shown in Figure 4H.

[0136] It should be noted that during the playback of animation effects (such as the aforementioned flexible animation effect 1), users may notice that even if the basic graphic elements (such as graphic element 1, graphic element 2, etc. in Figure 4A) have not yet collided, the interface will initiate the blending effect prematurely. This phenomenon is due to the phone's collision detection mechanism. The specific principle is as follows: When performing collision detection between basic graphic elements, the phone performs collision detection based on virtual graphic elements generated from an external source (usually not displayed on the interface). When an intersecting area is formed between virtual graphic elements, the phone triggers blending processing and other operations, rather than waiting for the actually visible basic graphic elements to collide. Furthermore, since the detection range of virtual graphic elements is larger than that of visible basic graphic elements, when the phone detects a collision between virtual graphic elements, the basic graphic elements that the user sees may still maintain a certain distance.

[0137] For example, as shown in Figure 4I, during the playback of a certain animation effect, T 01At any given moment, the phone displays the graphic 421 formed by the deformed primitives 1 to 3 on the interface 422 (another example of the second interface). Visually, these three deformed primitives do not appear to collide. However, the phone detects through a collision detection method (method 600 below) that virtual primitive 1 collides with virtual primitive 2, generating an intersecting region 423, and virtual primitive 2 collides with virtual primitive 3, generating an intersecting region 424, as shown in Figure 4I. It should be noted that virtual primitive 1, virtual primitive 2, virtual primitive 3, intersecting region 423, and intersecting region 424 are usually invisible during the actual animation execution (of course, they can be set to be visible when needed, but this application embodiment does not limit this). They are shown here only to illustrate the relationship between the collision between virtual primitives and the actual collision state of the basic primitives. As shown in Figure 4J, after the mobile phone determines the collision between the virtual primitives using the collision detection method, the mobile phone can process the intersecting region 423 through operations such as smoothing and blending, so that the deformed primitive 1 and the deformed primitive 2 are blended to generate the intersecting region 427; similarly, the mobile phone performs the same processing on the intersecting region 424, so that the deformed primitive 2 and the deformed primitive 3 are blended to generate the intersecting region 428; in T 02 Time (the T) 02 Time is located at T 01 After the time point and before the end time point, the user can see that graphic 421 has been updated to graphic 425 (another example of the target drawn primitive) and displayed on interface 426 (another example of the second interface), as shown in 4J. This demonstrates that the mobile phone can detect collisions between invisible virtual primitives and perform pre-processing of visible basic primitives, ensuring that the visible basic primitives are within the same time frame. 02 It can naturally transition to the final form 425 at any moment, thus achieving visual continuity.

[0138] Furthermore, it should be noted that the graphic processing method proposed in this application is not only applicable to fields such as animation production, but also to fields such as web design, UI / UX design, advertising design, and game development. This application does not limit these fields. For example, in web design, designers can create fusion and separation animation effects based on collision detection to respond to user interactions and provide a richer and more dynamic user experience.

[0139] The above text details the application of graphics processing methods in UI control animation scenarios. The following text will provide a detailed description of the graphics processing methods 500A and 500B provided in the embodiments of this application.

[0140] Figure 5A shows a flowchart of a graphics processing method 500A provided in an embodiment of this application. Before introducing the method 500A provided in this application, the execution subject involved in the method 500A will be briefly described. The method 500A can be executed by an electronic device, or by a module applied in an electronic device (such as a processor, chip, or chip system), or by a logic module or software that can implement all or part of the functions of the electronic device.

[0141] It should be noted that the electronic device can be a server (such as a computing server, graphics processing server, etc.) with the hardware and software architecture shown in Figures 2A and 2B, or it can be a terminal device with the hardware and software architecture shown in Figures 2A and 2B.

[0142] The method 500A may include steps 501 to 504, which are described in detail below.

[0143] Step 501: The electronic device displays the first interface.

[0144] The first interface may include a first basic graphic element and a second basic graphic element. For example, the interface 400 in Figure 4A may include graphic element 1, graphic element 2, and graphic element 3. The first basic graphic element (or the second basic graphic element) can serve as a basic graphic element to present various animation effects, such as the fusion animation effect and separation animation effect of UI controls. The type of the first basic graphic element (or the second basic graphic element) may include, but is not limited to, curved graphics and polyline graphics. For example, as shown in Figure 6A, the curved graphics may include, but are not limited to, circles, ellipses, and hearts; while the polyline graphics may include, but are not limited to, squares, rectangles, parallelograms, triangles, and pentagons.

[0145] After an electronic device performs an expansion operation on a first basic graphic element, it can obtain a first virtual graphic element; similarly, after performing an expansion operation on a second basic graphic element, it can obtain a second virtual graphic element; in other words, the first virtual graphic element can be understood as the graphic element formed by expanding the first basic graphic element, and the second virtual graphic element can be understood as the graphic element formed by expanding the second basic graphic element.

[0146] It should be noted that virtual primitives (such as the first virtual primitive and the second virtual primitive) can be understood as auxiliary primitives used to determine collision detection between basic primitives. These virtual primitives may not be displayed on the first interface (or the second interface); of course, they may also be displayed on the first interface (or the second interface). This application embodiment does not limit whether virtual primitives are displayed on the first interface (or the second interface), and can be set according to actual needs.

[0147] In some embodiments, the first virtual primitive (or the second virtual primitive) can be understood as a primitive formed by scaling up the initial first basic primitive (or the initial second basic primitive) proportionally or by scaling up a portion of it. Scaling up proportionally can be understood as scaling up the entire primitive at the same ratio, maintaining its original shape and proportion. Scaling up a portion of it can be understood as scaling up certain parts of the primitive while keeping other parts unchanged or scaling up at different ratios, which may cause the shape of the primitive to change.

[0148] It should be noted that the expansion method of the first basic graphic element (or the second basic graphic element) may not be limited to the above-mentioned proportional enlargement or partial enlargement. In fact, there may be other expansion methods, such as non-uniform enlargement (i.e., different parts of the graphic are enlarged according to their own different proportions, rather than being limited to the enlargement of a specific area) or enlargement based on some complex rules. The embodiments of this application do not limit the expansion method of the basic graphic element.

[0149] Different types of basic primitives (such as the first basic primitive or the second basic primitive) can be expanded to form different types of virtual primitives (such as the first virtual primitive or the second virtual primitive); for example, as shown in Figure 6B, the circular basic primitive 601 (i.e., an example of the first basic primitive or the second basic primitive) is enlarged proportionally to obtain the circular virtual primitive 602 (i.e., an example of the first virtual primitive or the second virtual primitive); the rectangular basic primitive 603 is enlarged in part to obtain the rectangular virtual primitive 604; the rhombus basic primitive 605 is divided into an upper region 607 and a lower region 607 by the dashed line 606. In a portion of region 608, the rhombus-shaped virtual primitive 609 is divided into an upper region 610 and a lower region 611 by a dashed line 606. The upper region 607 of the rhombus-shaped basic primitive 605 is enlarged by a ratio K1 to obtain the upper region 610 of the rhombus-shaped virtual primitive 609, while the lower region 608 is enlarged by a ratio K2 to obtain the lower region 611 of the rhombus-shaped virtual primitive 609. K1 and K2 may be equal or unequal, and this embodiment does not limit this. Similarly, other basic primitives such as parallelograms can also be expanded to form new primitives, which will not be described in detail here.

[0150] In some examples, the rhombus virtual primitive 609 may not include the dashed line 606. The example of the dashed line 606 is only to help the reader understand the relationship between the rhombus basic primitive 605 and the rhombus virtual primitive 609.

[0151] The aforementioned first interface can be an application interface (such as a game application), a launch screen interface, a lock screen interface, a guide interface, a full-screen animation / effects interface, or a web page interface. It can also be understood as a local area of ​​the former two interfaces, which can be understood as the target drawing area. This application embodiment does not limit this.

[0152] Among them, the launch screen can be understood as a static / dynamic interface (such as a brand logo animation) that is briefly displayed when an application starts, used to transition the loading process; the lock screen can be understood as the interface displayed when the device is in standby mode, which may include the time, notifications, live wallpapers, or quick action controls; the onboarding screen can be understood as a dynamic tutorial page that introduces the functions when the user uses it for the first time, often combined with interactive animations such as swiping and clicking; and the full-screen animation / effects screen can be understood as some of the animations when games or other applications load, or brand effects when the device boots up.

[0153] It should be noted that when the first interface is the target drawing area mentioned above, the target drawing area can be used to draw the basic graphic elements that constitute various animation effects (such as the first basic graphic element, etc.); on the other hand, it can also be used to display the animation effects presented by these graphic elements (such as the animation effects of various UI controls and icons on the UI page, etc.).

[0154] It's also important to note that the target drawing area is not fixed; it typically changes position as dynamic components such as controls or icons move on the screen. This means that if UI controls or icons move on the UI page, the target drawing area will move accordingly.

[0155] When an application launches or a webpage opens, the electronic device will display a first interface. This first interface displays the current graphical state of the first and second basic primitives. The graphical state of the first and second basic primitives in the next moment can be displayed through a second interface. Before displaying the graphical state in the next moment, the electronic device needs to perform collision detection on the graphical state. The understanding of the second interface is similar to that of the first interface, and will not be repeated here.

[0156] Step 502: The electronic device performs spatial sampling on the first interface based on the first information and the second information to generate a set of sampling points; the first information may include function information of the first target graphic element, the second information may include function information of the second virtual graphic element, and the set of sampling points may include at least one sampling point; wherein, the first target graphic element may be a first basic graphic element or a first virtual graphic element.

[0157] The aforementioned function information may include, but is not limited to, function expressions and function value ranges; wherein, the function expression may be an SDF function or an implicit surface function, etc. The first target primitive (or the second virtual primitive) can be represented by a function expression (such as an SDF function) within the first interface, whereby the first interface can be understood as the scope of the function used to represent the first target primitive (or the second virtual primitive), that is, within this scope, the function can accurately describe the shape and position of the first target primitive (or the second virtual primitive).

[0158] In some embodiments, the first information may include a first SDF and the second information may include a second SDF, wherein the first SDF is used to describe the shape of the first target primitive and the second SDF is used to describe the shape of the second virtual primitive.

[0159] The first SDF can implicitly represent the shape features such as the boundary and outline of the first target primitive; similarly, the second SDF can implicitly represent the shape features such as the boundary and outline of the second virtual primitive.

[0160] For example, in some examples, electronic devices can represent the shape of basic primitives (such as a first basic primitive or a second basic primitive) using SDF (such as a first SDF or a second SDF); the basic primitives represented by SDF can be understood as basic primitives represented by a distance function d = f(x, y); where d can represent the distance from a point on a plane (such as a first interface) to the outline of the basic primitive; d > 0 indicates that the point is outside the primitive, d < 0 indicates that the point is inside the primitive, and d = 0 indicates that the point is on the outline of the primitive.

[0161] As shown in Figure 7A, taking basic primitive 701 as an example, P 10 Outside primitive 701, d > 0; P 20 Inside primitive 701, d < 0; P 30 On the outline of primitive 701, d = 0.

[0162] In some scenarios (such as animation processing), using SDF (Simplified Graphical Datasheet) to describe the shape of target primitives (such as the first target primitive) has several advantages for electronic devices. For example, it can efficiently handle changes in primitive shape and collision detection between primitives. Furthermore, since SDF provides a numerical representation of primitive shape, it can be combined with other graphics algorithms (such as fusion operations) to achieve more complex and realistic animation effects. For instance, electronic devices can quickly determine whether two primitives (such as the first target primitive and the second virtual primitive) intersect by comparing their SDF values; for example, if the sum of the two SDF values ​​is less than zero, it means the two primitives intersect. This method is computationally simple and efficient. At the same time, the continuity characteristic of SDF ensures a smooth transition in the intersection region, facilitating subsequent processing of animation effects such as collision fusion.

[0163] Before performing spatial sampling within the first interface, the electronic device can first acquire function information of the first target primitive and the second virtual primitive within the first interface to determine their shapes and positions. After determining the shape and position of the first target primitive (or the second virtual primitive), the electronic device can perform spatial sampling within the first interface to generate a set of sampling points. This set of sampling points may include points within the internal region and boundaries of the first target primitive, points within the internal region and boundaries of the second virtual primitive, and all other points within the first interface except for the aforementioned regions and boundaries.

[0164] It should be noted that the area corresponding to the first target graphic element can be understood as the area occupied by the first basic graphic element within the first interface, or the area occupied by the first virtual graphic element within the first interface.

[0165] The aforementioned spatial sampling methods may include, but are not limited to, uniform sampling and non-uniform sampling. Uniform sampling can be understood as sampling at equal intervals within the first interface; non-uniform sampling can be understood as sampling at unequal intervals within the first interface. This non-uniform sampling method can adapt to the characteristics or needs of different primitives. In particular, the specific rules for non-uniform sampling can be customized based on the shape of the basic primitives. For example, taking a specific basic primitive A as an example, a smaller sampling interval can be used in the critical or detailed areas of basic primitive A to ensure complete information capture; while in the relatively flat or non-critical areas of basic primitive A, the sampling interval can be appropriately increased, thereby effectively reducing the amount of data while ensuring primitive quality.

[0166] For example, an electronic device can use a smaller sampling interval in the middle region between two basic primitives, and a larger sampling interval in other regions (also known as the peripheral region). For instance, in a scene where two basic primitives are close to each other, a smaller sampling interval can be used on the right side of the first basic primitive (i.e., the left primitive) and the left side of the second basic primitive (i.e., the right primitive); while a larger sampling interval can be used on the left side of the first basic primitive and the right side of the second basic primitive; or, no sampling can be performed on the left side of the first basic primitive and the right side of the second basic primitive.

[0167] In some examples, the above set of sampling points may include points within the first basic primitive region and its boundary, points within the second basic primitive region and its boundary, and all other points within the first interface except for the first two regions.

[0168] For example, as shown in Figure 7B, interface 702 (an example of the first interface) is used to draw the first basic primitive, the second basic primitive, and to display the animation effects presented by the two primitives; at time T1, the first basic primitive is at position 1 in interface 702, and the second basic primitive is at position 2 in interface 702; before determining whether the first basic primitive and the second basic primitive intersect (or collide), the electronic device can first perform spatial sampling (such as uniform sampling) within interface 702 to generate a set of sampling points 1 (an example of the above-mentioned set of sampling points); the set of sampling points 1 may include sampling point A1, sampling point A2, ..., and sampling point A n , where n takes a positive integer; in the sampling point set 1, some sampling points are located outside two basic primitives (such as the first basic primitive and the second basic primitive) (such as sampling point A1 or sampling point A9), some sampling points are located inside two basic primitives (such as sampling point A4 or sampling point A8), and some sampling points are located in the intersection region of two basic primitives (such as sampling point A6).

[0169] In some other examples, the above set of sampling points may include points within the first virtual primitive's internal region and its boundary, points within the second virtual primitive's internal region and its boundary, and all other points within the first interface other than the first two regions.

[0170] For example, as shown in Figure 7C, interface 703 (another example of the first interface) is used to draw the first basic primitive, the second basic primitive, and to display the animation effects presented by the two primitives; at time T2, the first basic primitive is at position 3 in interface 703, and the second basic primitive is at position 4 in interface 703; before determining whether the first virtual primitive 704 and the second virtual primitive 705 intersect (or collide), the electronic device can first perform spatial sampling (such as uniform sampling) within interface 703 to generate a set of sampling points 2 (another example of the above-mentioned set of sampling points); the set of sampling points 2 may include sampling point B1, sampling point B2, ..., and sampling point B m Where m is a positive integer; in the sampling point set 2, some sampling points are located outside two virtual primitives (such as primitive 704 and primitive 705) (such as sampling point B1 or sampling point B). 10 Some sampling points are located inside two virtual primitives (such as sampling point B3 or sampling point B9), while some sampling points are located in the intersection area of ​​two virtual primitives (such as sampling point B6).

[0171] Step 503: The electronic device determines the intersection of the first target primitive and the second virtual primitive based on the target sampling point in the sampling point set; wherein, the target sampling point is located within both the first target primitive and the second virtual primitive; the target sampling point can be at least one sampling point in the sampling point set.

[0172] After generating a set of sampling points, the electronic device can determine the target sampling point that exists simultaneously in the first target primitive and the second virtual primitive based on the first information and the second information. After determining the target sampling point from the set of sampling points, the electronic device can determine the intersection (or collision) of the first target primitive and the second virtual primitive based on the target sampling point.

[0173] Before introducing collision detection between two primitives, it should be noted that the embodiments of this application only use collision detection between two primitives as an example. For collision detection involving more than two primitives, it can be implemented by decomposing it into multiple pairwise collision detections. For example, collision detection between primitive A, primitive B, and primitive C can be performed separately for collision detection between primitive A and primitive B, primitive A and primitive C, and primitive B and primitive C.

[0174] The process by which the electronic device determines the target sampling point from the sampling set points is the process by which the electronic device determines the collision detection between the first target primitive and the second virtual primitive. During the intersection detection (or collision detection) process between primitives, the electronic device can determine whether two primitives intersect (or collide) using method 600. Method 600 may include the following steps:

[0175] Step 01): Sampling point filtering. The electronic device can simultaneously perform SDF detection on each sampling point in the sampling point set; specifically, the electronic device substitutes the coordinates of sampling point M (i.e., a sampling point in the sampling point set) into the first SDF (i.e., an example of the first information) of the first target primitive and records the first SDF value; similarly, the coordinates of the same sampling point M are substituted into the second SDF (i.e., an example of the second information) of the second virtual primitive and the second SDF value is recorded.

[0176] It should be noted that a first SDF value less than 0 indicates that the sampling point M is located within the first target primitive; a first SDF value greater than 0 indicates that the sampling point M is located outside the first target primitive; and a first SDF value (or second SDF value) equal to 0 indicates that the sampling point M is located on the boundary (or contour) of the first target primitive. Similarly, a second SDF value less than 0 indicates that the sampling point M is located within the second virtual primitive; a second SDF value greater than 0 indicates that the sampling point M is located outside the second virtual primitive; and a second SDF value (or second SDF value) equal to 0 indicates that the sampling point M is located on the boundary (or contour) of the second virtual primitive.

[0177] Step 02): Collision Determination. When the first SDF value is less than 0 and the second SDF value is less than 0, it is determined that the sampling point M (i.e., an example of at least one of the above samples) is simultaneously located within the first target primitive and the second virtual primitive, meaning that the first target primitive and the second virtual primitive collide (or intersect). When the first SDF value is not less than 0 and / or the second SDF value is not less than 0, it is determined that the sampling point M is not simultaneously located within the first target primitive and the second virtual primitive, meaning that the first target primitive and the second virtual primitive do not intersect (or collide).

[0178] For example, at time T1, the positions of the first basic graphic element and the second basic graphic element within interface 800 (i.e., an example of the first interface) are shown in Figure 8A; the electronic device samples point P1 in region 801 of the first basic graphic element, sample point P2 in region 802 of the second basic graphic element, and sample point P3 in interface 800 excluding regions 801 and 802; the electronic device substitutes P1, P2, and P3 into the first SDF and the second SDF respectively for calculation according to the above method 600; the calculation results show that P1 is located within the first basic graphic element, P2 is located within the second basic graphic element, and P3 is neither located within the first basic graphic element nor within the second basic graphic element; based on this calculation result, the electronic device determines that there is no target sampling point of the first basic graphic element and the second basic graphic element simultaneously located in regions 801 and 802 within interface 800; in other words, the electronic device determines that the first basic graphic element and the second basic graphic element did not collide at time T1.

[0179] For example, at time T2, the positions of the first and second basic primitives within interface 800 are shown in Figure 8B. The electronic device samples point P11 in region 803 of the first basic primitive, P22 in region 804 of the second basic primitive, and P33 in the interface 800 excluding regions 803 and 804. The electronic device substitutes P11, P22, and P33 into the first and second SDFs respectively for calculation according to the above method 600. The calculation results show that P11 is located within the first basic primitive, P22 is located within the second basic primitive, and P33 is located within both the first and second basic primitives. Based on this calculation result, the electronic device determines that the first and second basic primitives have a sampling point P33 within interface 800 that is simultaneously located in regions 803 and 804. In other words, the electronic device determines that the first and second basic primitives collide at time T2.

[0180] Step 504: The electronic device displays a second interface; the second interface may include a first basic graphic element of deformation and a second basic graphic element of deformation.

[0181] In some examples, the first basic primitive that is deformed (i.e., its shape changes) can be understood as the primitive obtained after the first basic primitive undergoes collision detection and primitive fusion processing; similarly, the second basic primitive that is deformed can be understood as the primitive obtained after the second basic primitive undergoes collision detection and primitive fusion processing.

[0182] After performing collision detection and element fusion operations on the first and second basic primitives within the first interface, the electronic device can display the fused primitives (as described below as target drawing primitives) on the second interface. These fused primitives can include deformed first and second basic primitives. For example, the electronic device can present the initial first and second basic primitives on the first interface at time T1; subsequently, it can display the deformed first and second basic primitives on the second interface at time T2. Time T1 and T2 can be points in time corresponding to consecutive frames in an animation sequence, or points in time corresponding to non-consecutive frames. The first and second interfaces can be two temporally adjacent (or temporally non-adjacent) display interfaces that display these consecutive (or non-consecutive) frames.

[0183] In other words, the first screen and the second screen can be understood as different frames displayed sequentially by the electronic device; the first screen can be displayed before the second screen. The first screen and the second screen can be two adjacent frames; or, there can be several, a dozen, or even dozens of frames between the first screen and the second screen.

[0184] For example, the first interface can be the interface corresponding to the graphic state displayed by the electronic device at the previous moment (or the current moment), while the second interface can be the interface corresponding to the graphic state displayed by the electronic device at the current moment (or the next moment). For example, the electronic device can display the graphic state of the first basic graphic element and the second basic graphic element at the current moment on the first interface, and display the graphic state of the first basic graphic element and the second basic graphic element at the next moment on the second interface.

[0185] For example, as shown in Figure 4C, at time T0, the mobile phone (i.e., an example of an electronic device) can display the initial graphic 401 on interface 400 (i.e., an example of the first interface); at time T2, the mobile phone can display the graphic 406 after fusion processing and other operations on interface 407 (i.e., an example of the second interface); this graphic 406 can be understood as an example of a target drawing primitive, which can include deformed primitive 1, deformed primitive 2, and deformed primitive 3; wherein, interface 406 and interface 400 are not adjacent time frames, but interface 403 which is separated by time T1; it should be noted that when interface 400 is the first interface, interface 403 can be understood as the second interface; when interface 403 is the first interface, interface 406 can be understood as the second interface.

[0186] In summary, in the aforementioned method 500A, the electronic device can determine whether the first target primitive (or the second virtual primitive) intersects (i.e., whether a collision occurs) within the first interface based on the function information of the first target primitive (or the second virtual primitive), such as the function expression of the shape of the first target primitive (or the second virtual primitive) and the range of function values. Since function information can accurately describe the shape and boundary of the target primitive, performing intersection detection based on function information can provide higher accuracy, especially when dealing with target primitives with complex shapes. Function information can capture more details, thus significantly reducing the possibility of false positives. Furthermore, function information can directly reflect the shape and boundary of the target primitive without requiring additional geometric calculations or approximations. Therefore, in some scenarios, using a function-based approach for intersection detection may be more efficient than the traditional bounding box method.

[0187] Method 500A has been described above. Below, we introduce another method 700 provided in this application. In addition to steps 501 to 504 as described above, method 700 may also include the following steps:

[0188] Step 505: When the electronic device determines that the first target graphic element intersects with the second virtual graphic element, it can determine the third information based on the first information and the second information.

[0189] The third piece of information is the function information of the target intersection region within the first interface, and the aforementioned target sampling point is located in the target intersection region; the function information can be referred to the relevant description of function information in step 501 above, and will not be repeated here.

[0190] The target intersection region, also known as the target overlap region, can be understood as the overlapping region (or common region) formed after the first target primitive and the second virtual primitive intersect. That is, the target intersection region can be the region formed by the first basic primitive and the second virtual primitive; or it can be the region formed by the first virtual primitive and the second virtual primitive (or called the virtual region). For example, the target intersection region can be the intersection region of the two virtual primitives where sampling point B6 is located in Figure 7C; or the target intersection region can also be the intersection region 423 and intersection region 424 in Figure 4I.

[0191] It should be noted that the area formed between virtual elements may or may not be displayed on the interface, and this application embodiment does not limit this. In practical applications, the visibility of this area can be set according to the animation design requirements.

[0192] For example, as shown in Figure 8C, at time T0, the first basic graphic element (i.e., an example of the first target graphic element) and the second virtual graphic element collide to form a target intersection region 806; the target intersection region 806 may include a sampling point P0 (i.e., an example of a target sampling point).

[0193] In some examples, after the electronic device determines the target intersection region, it can use a function to represent the target intersection region; for example, the first information is the first SDF and the second information is the second SDF. The electronic device can obtain the function expression F of the target intersection region (i.e., an example of the third information) by calculating and processing the first SDF and the second SDF.

[0194] When the electronic device determines that the first target primitive intersects with the second virtual primitive through method 600, it can generate third information (such as SDF_AB) representing the intersection region of the two primitives based on their geometric attribute functions (e.g., the first SDF_A and the second SDF_B). This third information can be used to describe the functional representation of the target intersection region within the first interface. For example, the electronic device can first determine the target intersection region generated after the two target primitives intersect according to method 600, and then perform logical operations (such as taking the union, intersection, or difference) on SDF_A and SDF_B to generate SDF_AB.

[0195] Step 506: The electronic device can perform fusion processing on the third information to generate the fourth information.

[0196] The fourth information is the function information of the fusion region within the first interface; the fusion region is the region obtained after the target intersecting regions are fused; the fourth information may include, but is not limited to, the function expression of the fusion region and the corresponding function value range; the fusion operation may include, but is not limited to, at least one of the following: union operation, intersection operation, smoothing operation, smooth intersection operation, smooth union operation or transform domain operation.

[0197] After the electronic device determines the target intersection region, it can use the above-mentioned fusion operation to perform fusion processing on the target intersection region (such as smoothing, intersection processing, etc.) to generate a fused region. Since users have different needs for animation effects, the electronic device can not only perform fusion processing on the target intersection region, but also perform separation processing or fusion-separation processing, etc. This application embodiment does not limit this.

[0198] Since the third information is a type of functional information, such as a function expression, electronic devices can perform mathematical processing on the third information through a fusion operation to generate the fourth information; this fourth information is also a type of functional information, such as a function expression of some form.

[0199] To meet users' graphics processing needs in different scenarios, electronic devices can quickly construct fused regions with precise boundaries and shapes by performing fusion operations such as intersection, union, difference, and smooth intersection on intersecting target regions, without the need for manual drawing or editing, which greatly improves the efficiency and accuracy of fused region operations. For example, operators such as smooth intersection can improve the visual effect of fused regions, making the generated fused regions more natural and smooth.

[0200] In some embodiments, the third information may include, but is not limited to, a third SDF, and the fourth information may include, but is not limited to, a fourth SDF. The third SDF may be used to describe the shape of the intersecting regions of the targets, and the fourth SDF may be used to describe the shape of the primitives after the intersecting regions of the targets have been fused.

[0201] The third SDF can implicitly represent the shape features such as the boundary and contour of the intersecting region of the targets; similarly, the fourth SDF can implicitly represent the shape features such as the boundary and contour of the fused region.

[0202] Using SDF to represent the intersection region of targets in electronic devices can simplify the calculation process. For example, electronic devices can quickly determine whether two target primitives intersect and accurately calculate the shape of the intersection region simply by comparing their SDF values. This method can not only improve calculation efficiency but also optimize rendering performance. In addition, due to the continuity of SDF, electronic devices can use SDF to describe the shape of the fusion region, which can make the shape of the fusion region present a smooth transition effect and avoid visual or physical discontinuities caused by abrupt shape changes.

[0203] In this embodiment, after determining that the first target primitive intersects with the second virtual primitive (i.e., a collision occurs), the electronic device can generate third information based on the function information of the two (such as the first and second information). Then, by performing smoothing, intersection, and other fusion operations on the third information, the transition of the intersecting target region can be made more natural and smooth. This function-based approach to processing the intersecting target region has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the intersecting target region can be made smoother, avoiding jagged edges or discontinuities that may occur in masking methods; 2) Functions can accurately describe the shape and boundary of the intersecting target region, avoiding the accuracy loss caused by pixelation or approximation in masking methods; 3) Function-based fusion operations are usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, thus significantly reducing computational load and improving processing efficiency in certain scenarios. In summary, the function-based processing method not only improves visual effects and computational accuracy but also reduces computational overhead and optimizes rendering performance.

[0204] The above describes method 700. Below, we introduce another method 800 provided in this application. In addition to including steps 501 to 504, and steps 505 and 506 as described above, method 800 may also include the following steps:

[0205] Step 507: The electronic device can generate fifth information based on the first information, the second information and the fourth information. The fifth information is the function information of the target drawing primitive. The target drawing primitive is the primitive after the first basic primitive and the second basic primitive have been fused. The fifth information is used to draw the target drawing primitive.

[0206] The target drawing primitive can be understood as the graphic state corresponding to a certain moment in the middle after the animation starts playing; since the animation changes over time, the animation will present different graphic states at different moments during the playback period (such as 2 seconds or 5 seconds).

[0207] For example, as shown in Figure 9A, the graphic state of UI control animation A changes over time during playback. For instance, at the start of playback, the electronic device can display graphic 901 at the start time on the first interface. Graphic 901 can include primitive 1 (an example of the first basic primitive), primitive 2 (an example of the second basic primitive), and primitive 3. As playback progresses, the electronic device can display an intermediate graphic 902 (an example of the target drawing primitive) at a certain intermediate moment on the second interface. This intermediate graphic 902 can include deformed primitive 1 (an example of the deformed first basic primitive), deformed primitive 2 (an example of the deformed second basic primitive), and deformed primitive 3. At the end of playback, the electronic device displays graphic 903 at the end time on the Nth interface, where N is an integer greater than 2. It should be noted that intermediate graphic 902 and graphic 903 can be graphics after fusion processing; or, they can be graphics 904 after fusion processing and then separation processing as shown in Figure 9B.

[0208] Since the first, second, and fourth pieces of information are all functional information, such as function expressions, electronic devices can generate fifth information by performing mathematical processing (union, intersection, etc.) on these three pieces of information. This fifth piece of information is also a functional information, such as a function expression of some form. Using function representations (such as SDF) for the target drawing primitives in electronic devices facilitates the rapid drawing and rendering of the target drawing primitives based on the fifth piece of information. This avoids the need for multiple processing stages required when displaying target drawing primitives using traditional masking methods, thus improving the efficiency of graphics processing and optimizing the device's rendering performance.

[0209] Method 800 has been described above. Below, we introduce another method 900 provided in this application. In addition to including steps 501 to 504, and steps 505, 506, and 507 as described above, method 900 may also include the following steps:

[0210] Step 508: The electronic device displays the target drawing primitives on the second interface.

[0211] In some examples, the electronic device can present the animation of the first control within a preset duration using a first basic graphic element and a second basic graphic element. That is, when the electronic device plays the animation of the first control within the preset duration, the user can see the initial first basic graphic element (or second basic graphic element) at the start time and the deformed first basic graphic element (or second basic graphic element) during playback (or at the end of playback) on the first and second interfaces mentioned above. For example, at the start time of the animation playback, the electronic device can display the initial first basic graphic element and second basic graphic element on the first interface (as shown in Figure 4A), while during playback (or at the end of playback), the electronic device can display the deformed first basic graphic element and the deformed second basic graphic element on the second interface (as shown in Figure 4B or Figure 4C). Since the target drawing graphic element is one of the graphic states composed of the deformed first basic graphic element and the deformed second basic graphic element, the electronic device can display the target drawing graphic element on the second interface (as shown in Figure 4B or Figure 4C). This target drawing graphic element can be understood as the graphic state of the animation of the first control at the first moment.

[0212] The preset duration can include the first moment, which can be 0.5s, 1s, 1.5s, 2s, 2.5s, or 3s, etc.

[0213] The first control can be understood as a dynamic control or a deformable control. Its types can include, but are not limited to, loading animation types (such as rotating icons, progress bars, etc.), interactive animation button types (such as buttons with press animation, hover color change, deformable buttons, etc.), and gesture feedback animation types (such as the elastic effect of sliding to delete, the snapping animation of dragging elements, the micro-interaction of long press and hover, etc.).

[0214] The first moment can be a specific point in time after the animation of the first control begins playing, such as the end of the animation or a point in the middle of the animation. The first moment can be the 300ms (milliseconds) or the 2nd second, etc.

[0215] After generating the target drawing primitive, the electronic device can draw it on the second interface. For example, when a user opens the main interface of an application, if the main interface includes dynamic UI controls, the software system inside the electronic device can automatically trigger a system event, so that the electronic device displays the graphic X (i.e., an example of the target drawing primitive) of the UI control (i.e., an example of the first control) on the second interface at the current moment.

[0216] It's important to note that in some examples, when an electronic device needs to display an animation effect for a primary control (such as a button, UI control, icon, or other interactive element on an interface), it may not initiate the animation effect automatically; instead, the user must actively trigger it. In other words, the electronic device needs to receive some kind of action from the user (such as a click, touch, or swipe) before it can start playing or displaying the animation effect of the primary control.

[0217] In other examples, electronic devices can display animations of the primary control based on system events, such as displaying the animation of a UI control based on a specific system event.

[0218] For example, when an electronic device receives a certain operation from the user (or receives a system event), it can respond to that operation event (or system event) by displaying or playing the animation effect (such as deformation animation effect, blending animation effect, etc.) of the first control on a preset / designated area of ​​the first interface and the second interface. In other words, when the animation effect of the first control is triggered, the electronic device can display or activate the first control in a preset / designated area in the form of animation.

[0219] In some embodiments, before determining whether the first target graphic element and the second virtual graphic element collide, the electronic device needs to know the specific positions of the first basic graphic element and the second basic graphic element within the first interface; once the specific positions of the graphic elements are determined, the electronic device can sample within the first interface, generate a set of sampling points, and determine whether the two graphic elements collide based on the set of sampling points.

[0220] It should be noted that since the first virtual graphic element (or the second virtual graphic element) is a graphic element formed by expanding the first basic graphic element (or the second basic graphic element), once the electronic device determines the position of the first basic graphic element (or the second basic graphic element), it is equivalent to determining the position of the first virtual graphic element (or the second virtual graphic element).

[0221] Before step 502, to determine the specific locations of the first basic graphic element and the second basic graphic element for the electronic device, this application provides another method 1000. In addition to including steps 501 to 504, 505, 506, 507, and 508 as described above, this method 1000 may also include the following steps:

[0222] Step 509: The electronic device can determine the forces on the first basic element and the second basic element respectively based on the first dynamic effect constraint.

[0223] It should be noted that dynamic constraints can generally be understood as constraints imposed on the movement, deformation, or force of basic primitives based on certain physical laws. For example, in a physical simulation scenario, electronic devices need to calculate the force on each basic primitive (such as the first basic primitive) based on the first dynamic constraint. The first dynamic constraint can be understood as a mechanical law in physics. Electronic devices can analyze and determine the force on each basic primitive based on this mechanical law.

[0224] The aforementioned first dynamic constraint may include, but is not limited to, Hooke's Law; the mathematical expression of Hooke's Law is usually F = -kx, where F is the force acting on the primitive, k is the elastic coefficient of the primitive, x is the deformation of the spring, that is, the distance from the original length to the new length; in the case of compression, x is usually negative; x is the total elongation (or reduction); the presence of the negative sign indicates that the direction of the elastic force is opposite to the direction of the spring's elongation or compression.

[0225] For example, as shown in Figure 9C, the animation effect of the first control can be presented through the first basic graphic element and the second basic graphic element; at time T, the positions of the first basic graphic element and the second basic graphic element in the interface 905 (i.e., an example of the first interface) are represented by P1 and P2 respectively; after the electronic device determines the basic graphic element corresponding to the animation effect of the first control, it can construct animation constraints for the first basic graphic element and the second basic graphic element; for example, the two basic graphic elements can be connected by spring 906; the electronic device can calculate the forces (such as elastic force or friction force) on the two basic graphic elements respectively through Hooke's law; for example, the elastic force on the first basic graphic element is F1, and the elastic force on the second basic graphic element is F2.

[0226] It should be noted that in the physical simulation scenario, the aforementioned first basic primitive (or second basic primitive) can be regarded as an object in the physical simulation; the electronic device needs to identify the basic primitive and obtain its attributes, such as mass, shape, position and other parameters; after the electronic device calculates the force on each basic primitive, it can update the position and velocity parameters of each basic primitive based on the force results.

[0227] Step 510: The electronic device can determine the first position information based on the second motion effect constraint and the force on the first basic graphic element.

[0228] After determining the force on the first basic graphic element, the electronic device can calculate the first position information based on the second dynamic effect constraint. The first position information can be understood as the position information of the first basic graphic element (i.e., an example of the first target graphic element) within the first interface. This position information may include, but is not limited to, the coordinates of the geometric center of the first basic graphic element (P1 in Figure 9C) within the first interface. In addition, the first position information can determine not only the position of the first basic graphic element on the first interface, but also the position of the first virtual graphic element on the first interface. Since the first virtual graphic element is a graphic element formed by expanding the first basic graphic element, the first position information can also be understood as the position information of the first virtual graphic element on the first interface.

[0229] The aforementioned second dynamic constraint can be understood as a law of motion in physics; the electronic device can analyze and determine the position information of each basic graphic element within the first interface based on this law of motion.

[0230] The second dynamic constraint may include, but is not limited to, Newton's second law, which describes the relationship between the acceleration a of a basic primitive (such as the first or second basic primitive) and the force F acting on it.

[0231] Step 511: The electronic device can determine the second position information based on the second motion constraint and the force on the second basic graphic element.

[0232] After the electronic device determines the force on the second basic graphic element, it can calculate the second position information based on the second dynamic constraint. The second position information can be understood as the position information of the second basic graphic element within the first interface. This position information may include, but is not limited to, the coordinates of the geometric center of the second basic graphic element (P1 in Figure 9C) within the first interface. In addition, the second position information can determine not only the position of the second basic graphic element on the first interface, but also the position of the second virtual graphic element on the first interface. Since the second virtual graphic element is a graphic element formed by expanding the second basic graphic element, the second position information can also be understood as the position information of the second virtual graphic element on the first interface.

[0233] The aforementioned second dynamic constraint can be understood as a law of motion in physics; the electronic device can analyze and determine the position information of each basic graphic element within the first interface based on this law of motion.

[0234] It should be noted that the execution order of steps 510 and 511 is not important; they can be executed simultaneously or separately.

[0235] For example, an electronic device can determine the accelerations of the first and second basic primitives according to Newton's second law. For the first basic primitive, F1 = m1 * a1; for the second basic primitive, F2 = m2 * a2, where "*" represents a product. F1 is the spring force on the first basic primitive, m1 is the mass of the first basic primitive, and a1 is the acceleration of the first basic primitive. Similarly, F2 is the spring force on the second basic primitive, m2 is the mass of the second basic primitive, and a2 is the acceleration of the second basic primitive. Based on F1 = m1 * a1 and F2 = m2 * a2, the electronic device can obtain a1 = F1 / m1 and a2 = F2 / m2. Here, " / " represents a division operation. Then, the electronic device can calculate the acceleration of the first basic primitive based on the velocity formula v = v0 + a * t. The electronic device calculates the velocity of the first basic graphic element and the second basic graphic element at time t, i.e., v1 = v0 + a1*t and v2 = v0 + a2*t; where v1 is the velocity of the first basic graphic element at time t, v2 is the velocity of the second basic graphic element at time t, and v0 is the initial velocity of the first and second basic graphic elements; the electronic device calculates the moving distance of the first basic graphic element within the first interface according to the displacement formula S1 = v1*t, and calculates the moving distance of the second basic graphic element within the first interface according to the displacement formula S2 = v2*t; the electronic device determines the moving position of the first basic graphic element (or the second basic graphic element) within the first interface at time t based on S1 (or S2), for example, moving to position P1 (or position P2) as shown in Figure 9C, where the coordinates of position P1 (or position P2) are an example of the first position information (or the second position information).

[0236] In this embodiment, the electronic device determines the current position of the target primitive (such as the first target primitive and the second virtual primitive) through physical laws (such as Newton's laws of motion, Hooke's law, etc.), which has the following advantages: On the one hand, determining the movement position of the primitive based on motion constraints makes the movement path of the primitive closer to the real situation; on the other hand, the position and dynamic changes of the primitive can be accurately calculated based on motion constraints, effectively ensuring the continuity and consistency of the animation. This not only avoids the screen jumps or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in adjusting frame by frame, improving the overall efficiency of animation production.

[0237] Method 500A has been described in detail above. Another graphics processing method, 500B, is introduced below, as shown in Figure 5B. It should be noted that the execution subject involved in method 500B is similar to that of method 500A above, and will not be repeated here.

[0238] The method 500B may include steps 5001 to 5004, which are described in detail below.

[0239] Step 5001: The electronic device displays a first interface, which includes a first SDF element and a second SDF element;

[0240] It should be noted that the understanding of the electronic device displaying the first interface can refer to the relevant description in step 501 above, and will not be repeated here; in addition, the first SDF primitive can be understood as an example of the electronic device using SDF to represent the above-mentioned first basic primitive, and the second SDF primitive can be understood as an example of the electronic device using SDF to represent the above-mentioned second basic primitive. Therefore, the understanding of step 5001 can refer to the relevant description in steps 501 and 502 above, and will not be repeated here.

[0241] Step 5002: The electronic device performs spatial sampling on the first interface based on the function information of the first virtual primitive and the function information of the second virtual primitive, and generates a set of sampling points; wherein, the first virtual primitive is an SDF primitive formed by expanding the first SDF primitive, and the second virtual primitive is an SDF primitive formed by expanding the second SDF primitive;

[0242] For an understanding of the function information, please refer to the relevant description in step 502 above, which will not be repeated here.

[0243] Since both the first virtual primitive and the second virtual primitive are SDF primitives, the function information of the first virtual primitive (or the second virtual primitive) includes at least the SDF function expression and the corresponding function scope. Specifically, this function information enables the electronic device to accurately describe the shape and position of the first basic primitive and the second basic primitive within the first interface through SDF functions.

[0244] Before performing spatial sampling within the first interface, the electronic device can first acquire function information of the first and second virtual primitives within the first interface to determine their shapes and positions. After determining the shape and position of the first (or second) virtual primitive, the electronic device can perform spatial sampling within the first interface to generate a set of sampling points. This set of sampling points may include points within the internal region and boundaries of the first virtual primitive, points within the internal region and boundaries of the second virtual primitive, and all other points within the first interface except for the aforementioned regions and boundaries.

[0245] For information on spatial sampling methods, please refer to the relevant description in step 502 above; it will not be repeated here.

[0246] Step 5003: The electronic device determines the intersection of the first virtual primitive and the second virtual primitive based on the target sampling point in the sampling point set, and the target sampling point is located within both the first virtual primitive and the second virtual primitive.

[0247] It should be noted that since the first virtual primitive is an example of the first target primitive in step 503 above, the understanding of step 5003 can refer to the understanding of step 503 above, and will not be repeated here.

[0248] Step 5004: The electronic device displays a second interface, which includes a first SDF element of deformation and a second SDF element of deformation.

[0249] It should be noted that since the first SDF primitive can be understood as an example of the electronic device using SDF to represent the first basic primitive, and the second SDF primitive can be understood as an example of the electronic device using SDF to represent the second basic primitive, the understanding of step 5004 can be referred to the understanding of step 504 above, and will not be repeated here.

[0250] In method 500B, the electronic device can determine whether the first and second virtual primitives intersect (i.e., whether a collision occurs) within the first interface based on function information of the first virtual primitive (or the second virtual primitive), such as the function expression of the shape of the first virtual primitive (or the second virtual primitive) and the range of function values. Since function information can accurately describe the shape and boundaries of virtual primitives, intersection detection based on function information can provide higher accuracy, especially when dealing with virtual primitives with complex shapes, where function information can capture more details, thus significantly reducing the possibility of false positives. Furthermore, function information can directly reflect the shape and boundaries of virtual primitives without requiring additional geometric calculations or approximations; therefore, in some scenarios, using function-based intersection detection may be more efficient than traditional bounding box methods.

[0251] Method 500B has been described above. Below, another method 1100 provided by this application will be described. In addition to steps 5001 to 5004 as described above, method 1100 may also include the following steps:

[0252] Step 5005: When the electronic device determines that the first virtual primitive intersects with the second virtual primitive, it can determine the function information of the target intersection region based on the function information of the first virtual primitive and the function information of the second virtual primitive; wherein, the target sampling point is located within the target intersection region.

[0253] The target intersection region can be understood as the overlapping region formed after the first virtual primitive and the second virtual primitive intersect.

[0254] It should be noted that since the first virtual primitive is an example of the first target primitive mentioned above, the understanding of step 5005 can be referred to the understanding of step 505 above, and will not be repeated here.

[0255] Step 5006: The electronic device can perform fusion processing on the function information of the target intersection region through fusion operation to generate the function information of the fused region. The fusion operation includes at least one of the following: union operation, intersection operation, smoothing operation, smooth intersection operation, smooth union operation or transform domain operation. The fused region is the region obtained after the target intersection region has been fused.

[0256] It should be noted that since the first virtual primitive is an example of the first target primitive mentioned above, the understanding of step 5006 can be referred to the understanding of step 506 above, and will not be repeated here.

[0257] In this embodiment, after the electronic device determines that the first virtual primitive and the second virtual primitive intersect (i.e., a collision occurs), it can generate function information of the target intersection region based on the function information of the two. Then, by performing smoothing, intersection, and other fusion operations on the function information of the target intersection region, the transition of the target intersection region can be made more natural and smooth. This function-based approach to processing the target intersection region has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection region can be made smoother, avoiding jaggedness or discontinuity that may occur in the masking method; 2) The function can accurately describe the shape and boundary of the target intersection region, avoiding the accuracy loss caused by pixelation or approximation in the masking method; 3) Function-based fusion operations are usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, thus significantly reducing the amount of computation and improving processing efficiency in some scenarios. In summary, the function-based processing method can not only improve visual effects and computational accuracy, but also reduce computational overhead and optimize rendering performance.

[0258] The above describes method 1100. Below, we introduce another method 1200 provided in this application. In addition to including steps 5001 to 5004, and steps 5005 and 5006 as described above, method 1200 may also include the following steps:

[0259] Step 5007: The electronic device can generate the function information of the target drawing primitive based on the function information of the first virtual primitive, the function information of the second virtual primitive, and the function information of the fusion region. The target drawing primitive is the SDF primitive obtained by the intersection and fusion processing of the first SDF primitive and the second SDF primitive. The function information of the target drawing primitive is used for the drawing of the target drawing primitive.

[0260] It should be noted that since the first virtual primitive is an example of the first target primitive mentioned above, the first SDF primitive is an example of the first basic primitive mentioned above, and the second SDF primitive is an example of the second basic primitive mentioned above, the understanding of step 5007 can refer to the understanding of step 507 above, and will not be repeated here.

[0261] In some scenarios, when an electronic device determines that the first virtual primitive and the second virtual primitive have collided, it can generate the function information of the target drawing primitive based on the function information of the first virtual primitive, the function information of the second virtual primitive, and the function information of the fusion region. This allows the electronic device to quickly draw and render the target drawing primitive based on its function information, thus avoiding the need for multiple processing stages when displaying the target drawing primitive using traditional masking methods. This improves the efficiency of graphics processing and optimizes the rendering performance of the device.

[0262] Method 1200 has been described above. Below, we introduce another method 1300 provided in this application. In addition to including steps 5001 to 5004, and steps 5005, 5006, and 5007 as described above, method 1300 may also include the following steps:

[0263] Step 5008: The electronic device displays the target drawing primitives on the second interface.

[0264] The first and second SDF primitives can be used to present the animation effect of the first control within a preset duration; the target drawing primitive is the graphic state of the animation effect at the first moment; the target drawing primitive may include the deformed first SDF primitive and the deformed second SDF primitive; the preset duration may include the first moment.

[0265] Since the first SDF primitive of deformation can be understood as the first basic primitive of deformation represented by the electronic device through SDF, the first SDF primitive of deformation can be understood as an example of the first basic primitive of deformation. Similarly, since the second SDF primitive of deformation can be understood as the second basic primitive of deformation represented by the electronic device through SDF, the second SDF primitive of deformation can be understood as an example of the second basic primitive of deformation.

[0266] Since the first SDF primitive of deformation (or the second SDF primitive of deformation) is an example of the first basic primitive of deformation (or the second basic primitive of deformation) mentioned above, the understanding of step 5008 can be referred to the understanding of step 508 above, and will not be repeated here.

[0267] Before step 5002, for determining the specific locations of the first SDF element and the second SDF element in the electronic device, this application provides another method 1400. In addition to including steps 5001 to 5004, 5005, 5006, 5007, and 5008 as described above, method 1400 may also include the following steps:

[0268] Step 5009: The electronic device can determine the forces on the first SDF element and the second SDF element respectively based on the first dynamic effect constraint.

[0269] Step 5010: The electronic device can determine the first position information based on the second motion effect constraint and the force on the first SDF primitive.

[0270] Step 5011: The electronic device can determine the second position information based on the second motion constraint and the force on the second SDF element. The second position information is the position information of the second SDF element and is used to determine the position of the second virtual element on the first interface.

[0271] It should be noted that since the first SDF primitive (or the second SDF primitive) is an example of the first basic primitive (or the second basic primitive) mentioned above, the understanding of step 5009 can refer to the understanding of step 509 above, the understanding of step 5010 can refer to the understanding of step 510 above, and the understanding of step 5011 can refer to the understanding of step 511 above. It will not be repeated here.

[0272] In this embodiment, the electronic device can determine the current position of virtual primitives (such as the first virtual primitive and the second virtual primitive) through motion constraints (such as Newton's laws of motion, Hooke's law, etc.), which has the following advantages: On the one hand, determining the movement position of primitives based on motion constraints can make the movement path of primitives closer to the real situation; on the other hand, motion constraints can accurately calculate the position and dynamic changes of primitives, effectively ensuring the continuity and consistency of the animation. This not only avoids the screen jumps or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in adjusting frame by frame, and improves the overall efficiency of animation production.

[0273] To facilitate understanding, the specific execution steps of the above-mentioned graphics processing method will be further explained below with reference to the software architecture of the electronic device shown in Figures 10 and 11.

[0274] As shown in Figure 10, in the graphics processing system of an electronic device, it may include, but is not limited to, the system application programming interface (API) layer, the UI framework layer, and the rendering engine layer.

[0275] At the system API layer, electronic devices have set up a control API that supports flexible deformation. It can be applied to various scenarios, such as game development, animation production, and interactive interface design. It allows controls (such as the first control) to undergo flexible deformation on the UI page. For example, flexible deformation can include changes in the shape, size, and position of the control. By introducing this control API, electronic devices can improve the interactive experience of controls on the UI page.

[0276] At the UI framework layer, electronic devices implement animation effects such as deformation, merging, and separation of controls (such as the first control) on the UI page through animation modules, measurement / layout calculation modules, and drawing modules.

[0277] At the rendering engine layer, the lightweight rendering pipeline is used to convert the target rendering primitives expressed by functions into some graphics rendering instructions and execute these instructions. This lightweight rendering pipeline optimizes the rendering process, reduces unnecessary computation and resource consumption, and thus improves rendering efficiency.

[0278] Based on the software architecture shown in Figure 10, the process of drawing flexible animation effects (i.e., animation effects generated by flexible deformation, or simply flexible animation effects) of UI controls on electronic devices is as follows:

[0279] Step B1): During the startup of application 1, the electronic device will load the UI page file of application 1; the UI page file may include various dynamic UI controls (such as the first control), static images and icons, video elements and dialog boxes, etc.; the basic primitives corresponding to the flexible animation effects of the UI controls (such as the first basic primitive and the second basic primitive) can be represented by mathematical functions, such as by SDF.

[0280] It should be noted that electronic devices can use the Flexible Interactive Control API to support flexible animation effects for various UI controls on UI page files.

[0281] Step B2): The electronic device parses the UI page file to obtain information about each UI control on the UI page, and sends the information of UI controls that support flexible animation effects to the measurement / layout calculation module.

[0282] Step B3): The measurement / layout calculation module can determine the size and position information (such as size and position) of the UI control on the first interface based on the information of the UI control, and send the UI control information and size and position information to the animation module.

[0283] Step B4): The animation module can construct the physical scene information of each basic graphic element corresponding to the flexible animation based on the information and size and position information of the UI control; the physical scene information can include the objects involved in the physical calculation (such as the first basic graphic element and the second basic graphic element) and constraint information (such as the elastic coefficient k of the spring, the deformation x of the spring, etc.); the physical simulation module can save the constructed physical scene information to the animation module for subsequent updates of graphic element positions.

[0284] Step B5): The animation module treats each of the above basic primitives as a target object and calculates the force on each target object based on the first motion effect constraint; for example, setting two target objects to be connected by a spring; the animation module can calculate the force on the two target objects according to Hooke's Law; and then calculate the position information of the two target objects at the current moment (such as the first position information and the second position information, etc.) by combining the animation step parameters (such as time interval t).

[0285] It should be noted that the forces acting on each target object can include gravity, external forces applied to the control by the user, etc. The animation module can calculate the forces acting on each target object according to Hooke's Law, and then calculate the acceleration, velocity, and displacement of each target object according to Newton's second law. Finally, the position information of the two target objects within the first interface is determined based on their displacements. For details on determining the position information of each basic graphic element corresponding to the UI control, please refer to the method for determining the position information of graphic elements in steps 1101) to 1103) above, which will not be repeated here.

[0286] After the animation module determines the position information of each basic graphic element, it sends the position information to the drawing module.

[0287] Step B6): After receiving the position information of each basic graphic element from the deformation component drawing module, the drawing module can obtain the function information (such as function expressions) of each basic graphic element and determine whether the graphic elements intersect (or collide) based on the position information of each basic graphic element. If the basic graphic elements intersect, it means that a collision has occurred between them; the deformation component drawing module can perform fusion calculations on the intersecting areas of the basic graphic elements to obtain the fused region (i.e., the fused graphic elements); this fused region can be represented by a function (such as SDF).

[0288] Step B7): The drawing module can process the function information of the fused region and generate drawing attribute information.

[0289] It should be noted that steps B3) to B5) above can be executed in the fragment shader of the GPU inside the electronic device, or in other rendering modules. This application embodiment does not limit the specific execution module in which steps B3) to B5) are executed.

[0290] The drawing module can send drawing attribute information to the rendering engine module.

[0291] Step B8): The rendering engine module can call the lightweight drawing pipeline to translate drawing attribute information into drawing instructions that the GPU can understand; these drawing instructions can be a set of drawing commands from some graphics APIs (such as Vulkan, OpenGL, etc.).

[0292] The rendering engine module can send these drawing instructions to the GPU.

[0293] Step B9): After receiving the drawing instruction, the GPU can draw the aforementioned flexible animation effect on the display screen of the electronic device according to the drawing instruction.

[0294] Figure 11 illustrates another software architecture for implementing UI control animations on electronic devices.

[0295] In the graphics processing system of an electronic device, it may include, but is not limited to, the application layer, system API layer, UI framework layer, primitive library, rendering engine layer, and graphics API layer.

[0296] At the system API layer, the electronic device sets up a flexible interactive control API that supports flexible deformation; this control API provides an abstraction of UI controls with flexible deformation capabilities; for details, please refer to the relevant description of the control API in the architecture shown in Figure 10 above, which will not be repeated here.

[0297] At the system API layer, the animation API can perform related operations based on event inputs.

[0298] At the UI framework layer, electronic devices can use animation modules, measurement / layout calculation modules, and drawing modules to achieve animation effects such as deformation, merging, and separation of controls (such as the first control) on the UI page. For example, the physics simulation module in the animation module can be used to calculate the motion constraints between multiple basic primitives corresponding to the flexible animation effects of UI controls, and update the positions of multiple basic primitives at different times.

[0299] The primitive library can be used to represent the basic primitives corresponding to UI controls using corresponding function information (such as functions).

[0300] At the rendering engine layer, the lightweight rendering pipeline is used to convert basic primitives expressed by functions into drawing instructions and execute those instructions. This lightweight rendering pipeline optimizes the rendering process, reduces unnecessary computation and resource consumption, and thus improves rendering efficiency.

[0301] Based on the software architecture shown in Figure 11, the process of drawing flexible animation effects for UI controls on electronic devices is as follows:

[0302] Step C1): When the animation API detects an event input that triggers the launch of an application (such as a user operation event or a system event), it will respond to the event input, obtain and parse the UI page file, and obtain the information of the UI controls (such as the attribute information of the UI controls mentioned above, the basic graphic elements of the flexible animation effects, etc.). The UI page file may include various dynamic UI controls (such as the first control), static images and icons, video elements and dialog boxes, etc. The basic graphic elements corresponding to the UI control (such as the first basic graphic element and the second basic graphic element) can be represented by mathematical functions, such as by SDF.

[0303] It should be noted that electronic devices can use the Flexible Interactive Control API to support flexible animation effects for various UI controls on UI page files.

[0304] Step C2) The animation API can determine whether there is a UI control that supports flexible animation based on the information of the UI control. If it exists, it sends an instruction message X to the animation module. If not, it does not send an instruction message X. The instruction message X can be used to instruct the animation module to construct the animation constraints of multiple basic graphic elements corresponding to the flexible animation. For example, the flexible animation of the UI control can be presented through graphic element 1 and graphic element 2. The animation module can construct the animation constraints of graphic element 1 and graphic element 2 according to the instruction message X. The animation constraints are used to constrain the changing shape of graphic element 1 and graphic element 2 at different times during the display of the flexible animation.

[0305] Step C3): After receiving the instruction information X, the animation module can construct the physical scene information of multiple basic primitives corresponding to the above flexible motion effect through the physical simulation module. The physical scene information can include objects participating in the physical calculation (such as the first basic primitive and the second basic primitive) and constraint information (such as the elastic coefficient k of the spring, the deformation x of the spring, etc.). The physical simulation module can save the constructed physical scene information to the animation module for subsequent primitive position updates.

[0306] For example, the aforementioned flexible motion effect can be presented using two basic circular primitives. The animation module treats the two basic circular primitives (i.e., an example of the first and second basic primitives) as two circular objects and calculates the forces acting on the two circular objects based on the first motion effect constraint. For example, the two circular objects can be connected by a spring. The animation module can calculate the forces acting on the two circular objects based on Hooke's Law. Then, it can combine the animation step parameters (such as time interval t) to calculate the position information of the two circular objects at the current moment (such as the first position information and the second position information).

[0307] It should be noted that the forces acting on the two circular objects can include gravity, external forces applied to the controls by user operation, etc. The animation module can calculate the forces acting on the two circular objects according to Hooke's Law, and then calculate the acceleration, velocity, and displacement of the two circular objects according to Newton's second law. Finally, it determines the position information of the two circular objects within the first interface based on their displacement. For details on determining the position information of the multiple basic graphic elements corresponding to this flexible animation effect, please refer to the method for determining the position information of graphic elements in steps 1101) to 1103) above, which will not be repeated here.

[0308] After the animation module determines the position information of each target primitive, it can send the position information to the drawing module.

[0309] Step C4): After receiving the position information of each target primitive from the deformation component drawing module, the drawing module can call the function information (such as function expressions) of the above-mentioned basic primitives from the primitive library, and determine whether the primitives intersect (or collide) based on the position information of the basic primitives. If the basic primitives intersect, it means that a collision has occurred between the basic primitives, and the collision detection result is saved to the primitive library; then, the deformation component drawing module can perform separation calculations or fusion calculations on the regions after the basic primitives intersect, and save the separated / fused functions to the primitive library.

[0310] For example, the shapes of the above-mentioned basic primitives can be described by SDF functions. The deformation component drawing module can determine whether the basic primitives intersect (or collide) with each other by sampling on the first interface. For details, please refer to the primitive collision detection method above, which will not be repeated here.

[0311] When the deformation component drawing module determines that two basic primitives intersect, it can perform a fusion operation (such as smoothing, intersection, etc.) on the distance function SDF (such as the first SDF and the second SDF) between the two basic primitives to obtain the fused region (i.e. the fused primitives); the fused region can be represented by a function (such as SDF).

[0312] The deformation component drawing module can save the functions of the merged region to the primitive library.

[0313] Step C5): During the drawing process, the deformation component drawing module can obtain the fused function from the primitive library and perform drawing processing on the fused function to generate drawing attribute information; for example, for areas with an SDF value less than 0, it means that the pixels inside the smoothed primitive can be colored in subsequent drawing; while for areas with an SDF value greater than 0, it means that the pixels outside the smoothed primitive do not need to be colored in subsequent drawing.

[0314] It should be noted that the above steps C3) to C5) can be executed in the fragment shader of the GPU inside the electronic device, or in other rendering modules. This application embodiment does not limit the specific execution module in which steps C3) to C5) are executed.

[0315] The drawing module can send the drawing attribute information generated by the deformation component drawing module to the rendering engine module.

[0316] Step C6): The rendering engine module calls the lightweight drawing pipeline to translate the drawing attributes into drawing instructions that the GPU can understand; these drawing instructions can be a set of drawing commands from some graphics APIs (such as Vulkan, OpenGL, etc.).

[0317] The rendering engine module sends these drawing instructions to the GPU.

[0318] Step C7): After receiving the drawing instruction, the GPU draws the animation effects corresponding to the UI controls on the display screen of the electronic device according to the drawing instruction.

[0319] Figure 12 shows a schematic diagram of a scene where a GPU displays target drawing primitives.

[0320] It should be noted that before the GPU draws the target primitives, the GPU has already obtained the function information of the target primitives according to the processing flow shown in Figure 10 or Figure 11 (such as generating function information of the target primitives, constructing motion constraints, determining the position of the target primitives, primitive collision detection and fusion calculation, etc.).

[0321] Since the target rendering primitives (i.e., the blended primitives) are represented by functions, the GPU needs to convert these functions into data structures that the graphics rendering pipeline can process when rendering the target rendering primitives. The rendering is then completed through stages such as the vertex shader and fragment shader. The specific steps are as follows:

[0322] (1) Construct vertex data for the target rendering primitive. The GPU converts the target rendering primitive into vertex data (such as position, color, texture coordinates, etc.) based on the function information of the target rendering primitive.

[0323] (2) The vertex shader processes these vertex data and rasterizes them to generate fragments (i.e., pixels on the screen).

[0324] (3) The fragment shader determines whether each fragment belongs to the target drawing primitive based on the function information (such as SDF) mentioned above (such as calculating the distance from the pixel to the boundary of the target drawing primitive), and further processes the fragments that belong to the target drawing primitive, including fragment shading (such as calculating the final color of the pixel), color blending, etc., to obtain the final color and other attributes (such as transparency) of each fragment, and sends them to the subsequent rendering pipeline stages.

[0325] (4) The GPU performs depth testing and other processing on each fragment output by the fragment shader, and writes the image data such as the color value of the fragment to be drawn into the frame buffer.

[0326] (5) The GPU sends the image data from the buffer to the display device.

[0327] (6) The display device converts these image data into visual target drawing primitives and displays them on the screen.

[0328] The foregoing has detailed examples of the graphics processing methods provided in this application. It is understood that, in order to achieve the above functions, electronic devices include hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application. This application can divide the graphics processing methods into functional units based on the above method examples. For example, each function can be divided into separate functional units, or two or more functions can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. It should be noted that the unit division in this application is illustrative and only represents a logical functional division; other division methods may exist in actual implementation.

[0329] Figure 13 shows a schematic diagram of the structure of an electronic device provided in this application. The dashed lines in Figure 13 indicate that the unit or module is optional. The electronic device 1300 can be used to implement the methods described in the above method embodiments. The electronic device 1300 can be a server, a terminal device, or a chip (system).

[0330] The electronic device 1300 includes one or more processors 1301, which can support the electronic device 1300 in implementing the methods in the corresponding method embodiments of FIG5A and FIG5B. The processor 1301 can be a general-purpose processor or a special-purpose processor. For example, the processor 1301 can be a central processing unit (CPU). The CPU can be used to control the electronic device 1300, execute software programs, and process data from the software programs. The electronic device 1300 may also include a communication unit 1305 for implementing signal input (reception) and output (transmission).

[0331] The aforementioned electronic device 1300 may be a chip (system) including a memory and a processor, wherein the processor is configured to execute a computer program stored in the memory to implement the methods shown in the various embodiments above.

[0332] The communication unit 1305 may be an input and / or output circuit of the chip (system), or the communication unit 1305 may be a communication interface of the chip (system), and the chip (system) may be a component of the electronic device 1300.

[0333] For example, the communication unit 1305 may be a transceiver of the electronic device 1300, or the communication unit 1305 may be a transceiver circuit of the electronic device 1300.

[0334] The electronic device 1300 may include one or more memories 1302, on which a program 1304 is stored. The program 1304 can be executed by a processor 1301 to generate instructions 1303, causing the processor 1301 to execute the method described in the above method embodiments according to the instructions 1303. Optionally, the memory 1302 may also store data. Optionally, the processor 1301 may also read data stored in the memory 1302, which may be stored at the same memory address as the program 1304, or the data may be stored at a different memory address than the program 1304.

[0335] The processor 1301 and memory 1302 can be configured separately or integrated together, for example, integrated on a system-on-chip (SOC) of an electronic device. For details on how the processor 1301 performs graphics processing, please refer to the relevant description in the method embodiments.

[0336] It should be understood that the steps of the above method embodiments can be implemented by hardware logic circuits or software instructions in the processor 1301. The processor 1301 may be a CPU, a digital signal processor (DSP), a field programmable gate array (FPGA), or other programmable logic devices, such as discrete gate, transistor logic devices, or discrete hardware components.

[0337] This application also provides a computer program product that, when executed by processor 1301, implements the method of any of the method embodiments in this application. The computer program product can be stored in memory 1302, for example, as program 1304. Program 1304 undergoes preprocessing, compilation, assembly, and linking processes to ultimately be converted into an executable object file that can be executed by processor 1301.

[0338] This application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a computer, implements the method of any of the method embodiments of this application. The computer program may be a high-level language program or an executable object program.

[0339] The computer-readable storage medium is, for example, memory 1302. Memory 1302 can be volatile memory or non-volatile memory, or memory 1302 can include both volatile and non-volatile memory. The non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct rambus RAM (DRRAM).

[0340] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process and technical effects of the above-described apparatus and equipment can be referred to the corresponding processes and technical effects in the foregoing method embodiments, and will not be repeated here.

[0341] The systems, apparatuses, and methods disclosed in the several embodiments provided in this application can be implemented in other ways. For example, some features of the method embodiments described above may be omitted or not performed. The apparatus embodiments described above are merely illustrative; the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Multiple units or components may be combined or integrated into another system.

[0342] In addition, the coupling between units or between components can be direct or indirect, including electrical, mechanical or other forms of connection.

Claims

1. A method of graphics processing, the method comprising: The method comprises: displaying a first interface, the first interface comprising a first basic primitive and a second basic primitive; spatially sampling the first interface based on first information and second information to generate a set of sampling points, the first information comprising function information of a first target primitive, the second information comprising function information of a second virtual primitive, the set of sampling points comprising at least one sampling point; wherein the first target primitive is the first basic primitive or a first virtual primitive, the first virtual primitive being a primitive formed after the first basic primitive is expanded outward, and the second virtual primitive being a primitive formed after the second basic primitive is expanded outward; determining that the first target primitive intersects the second virtual primitive based on a target sampling point in the set of sampling points, the target sampling point being located in both the first target primitive and the second virtual primitive; displaying a second interface, the second interface comprising a deformed first basic primitive and a deformed second basic primitive.

2. The method of claim 1, wherein, The method further comprises: when it is determined that the first target primitive intersects the second virtual primitive, determining third information according to the first information and the second information, the third information being function information of a target intersection region, the target sampling point being located in the target intersection region; performing fusion processing on the third information through a fusion operation to generate fourth information, the fourth information being function information of a fusion region, the fusion operation comprising at least one of a union operation, an intersection operation, a smoothing operation, a smoothing intersection operation, a smoothing union operation, or a transform domain operation, the fusion region being a region obtained after the target intersection region is processed through the fusion operation.

3. The method of claim 2, wherein, The method further comprises: generating fifth information according to the first information, the second information, and the fourth information, the fifth information being function information of a target rendering primitive, the target rendering primitive being a primitive obtained after the first basic primitive and the second basic primitive are processed through intersection fusion, the fifth information being used for rendering of the target rendering primitive.

4. The method of claim 3, wherein, The first basic primitive and the second basic primitive are used to present an animation effect of a first control within a preset time length, and the method further comprises: displaying the target rendering primitive on the second interface, the target rendering primitive being a graphical state of the animation effect at a first time, the preset time length comprising the first time, the target rendering primitive comprising the deformed first basic primitive and the deformed second basic primitive.

5. The method according to any one of claims 1 to 4, characterized in that, Before the spatial sampling of the first interface based on the first information and the second information to generate the set of sampling points, the method further comprises: determining a force of the first basic primitive and a force of the second basic primitive respectively according to a first dynamic effect constraint, the first dynamic effect constraint comprising Hooke's law; determining first position information of the first basic primitive according to a second dynamic effect constraint and the force of the first basic primitive, the second dynamic effect constraint comprising Newton's law of motion, the first position information being used to determine a position of the first target primitive on the first interface. The second position information is determined according to the second dynamic effect constraint and force borne by the second basic graphic element, the second position information being position information of the second basic graphic element, and the second position information being used to determine a position of the second virtual graphic element on the first interface.

6. The method according to any one of claims 1 to 5, characterized in that, The first information comprises a first signed distance function (SDF), and the second information comprises a second signed distance function (SDF), the first signed distance function (SDF) being used to describe a shape of the first target graphic element, and the second signed distance function (SDF) being used to describe a shape of the second virtual graphic element.

7. The method according to any one of claims 2 to 4, characterized in that, The third information comprises a third signed distance function (SDF), and the fourth information comprises a fourth signed distance function (SDF), the third signed distance function (SDF) being used to describe a shape of the target intersection region, and the fourth signed distance function (SDF) being used to describe a shape of the fusion region.

8. A method of graphics processing, the method comprising: The method comprises: displaying a first interface, the first interface comprising a first SDF graphic element and a second SDF graphic element; spatially sampling the first interface based on function information of a first virtual graphic element and function information of a second virtual graphic element, to generate a set of sampling points, wherein the first virtual graphic element is an SDF graphic element formed after the first SDF graphic element is expanded outward, and the second virtual graphic element is an SDF graphic element formed after the second SDF graphic element is expanded outward; determining that the first virtual graphic element intersects the second virtual graphic element based on a target sampling point in the set of sampling points, the target sampling point being located in both the first virtual graphic element and the second virtual graphic element; displaying a second interface, the second interface comprising the first SDF graphic element and the second SDF graphic element after deformation.

9. The method of claim 8, wherein, The method further comprises: when it is determined that the first virtual graphic element intersects the second virtual graphic element, determining function information of a target intersection region based on the function information of the first virtual graphic element and the function information of the second virtual graphic element, the target sampling point being located in the target intersection region; performing fusion processing on the function information of the target intersection region by a fusion operation to generate function information of a fusion region, the fusion operation comprising at least one of a union operation, an intersection operation, a smoothing operation, a smoothing intersection operation, a smoothing union operation, or a transform domain operation, the fusion region being a region obtained after the target intersection region is subjected to the fusion processing.

10. The method of claim 9, wherein, The method further comprises: generating function information of a target drawing graphic element based on the function information of the first virtual graphic element, the function information of the second virtual graphic element, and the function information of the fusion region, the target drawing graphic element being an SDF graphic element obtained after the first SDF graphic element and the second SDF graphic element are subjected to intersection fusion processing, and the function information of the target drawing graphic element being used for drawing of the target drawing graphic element.

11. The method of claim 10, wherein, The first SDF graphic element and the second SDF graphic element are used to present an animation effect of a first control within a preset time length, and the method further comprises: Display the target rendering primitive on the second interface, the target rendering primitive being a graphical state of the animation effect at a first time, the preset time length including the first time, and the target rendering primitive including the deformed first SDF primitive and the deformed second SDF primitive.

12. The method according to any one of claims 8 to 11, characterized in that, Before the first interface is spatially sampled to generate a set of sampling points based on the function information of the first virtual primitive and the function information of the second virtual primitive, the method further includes: respectively determining a force of the first SDF primitive and a force of the second SDF primitive according to first dynamic effect constraints, the first dynamic effect constraints including Hooke's law; determining first position information according to the second dynamic effect constraints and the force of the first SDF primitive, the second dynamic effect constraints including Newton's law of motion, the first position information being position information of the first SDF primitive, and the first position information being used to determine a position of the first virtual primitive on the first interface; determining second position information according to the second dynamic effect constraints and the force of the second SDF primitive, the second position information being position information of the second SDF primitive, and the second position information being used to determine a position of the second virtual primitive on the first interface.

13. An electronic device, comprising: The electronic device includes a processor and a memory, the memory is used to store a computer program, and the processor is used to call and run the computer program from the memory, so that the electronic device executes the method in any one of claims 1 to 7, or so that the electronic device executes the method in any one of claims 8 to 12.

14. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor executes the method in any one of claims 1 to 7, or the processor executes the method in any one of claims 8 to 12.

15. A computer program product, characterised in that, The computer program product includes computer program code, and when the computer program code is executed by a processor, the processor executes the method in any one of claims 1 to 7, or the processor executes the method in any one of claims 8 to 12.

16. A chip system, characterized by The chip system includes a memory and a processor, and the processor is configured to execute a computer program stored in the memory to implement the method in any one of claims 1 to 7, or to implement the method in any one of claims 8 to 12.

Images