Graph processing method, electronic equipment and computer readable storage medium

Abstract

A graphic processing method, an electronic device and a computer readable storage medium, the method comprising: displaying a first interface, the first interface comprising a first basic primitive and a second basic primitive; spatial sampling is conducted on the first interface based on the first information and the second information, a sampling point set is generated, the first information comprises function information of the first target primitive, and the second information comprises function information of the second virtual primitive; determining that the first target primitive intersects with the second virtual primitive based on a target sampling point in the sampling point set, wherein the target sampling point is located in the first target primitive and the second virtual primitive at the same time; and displaying a second interface, wherein the second interface comprises the deformed first basic primitive and the deformed second basic primitive. The method not only can improve the accuracy of collision detection, but also can optimize the efficiency of collision detection.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a graphics processing method, an electronic device, and a computer-readable storage medium. Background Art

[0002] With the continuous development of animation technology, modern operating systems are increasingly demanding diverse motion effects (i.e., animation effects). Among them, fused motion effects are highly favored due to their unique advantages. Collision detection is an indispensable step in implementing fused motion effects. Traditional collision detection relies primarily on bounding box techniques, such as axis-aligned bounding boxes, directed bounding boxes, and spherical bounding boxes. These methods simplify complex objects (such as two-dimensional or three-dimensional graphics) into basic geometric shapes and detect the intersections between these shapes to determine collisions. Although the bounding box method is highly accurate when processing simple shapes, it is only a rough approximation of the object and may misjudge complex shapes, affecting the accuracy of collision detection. Summary of the Invention

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

[0004] To achieve the above objectives, this application adopts the following technical solutions:

[0005] In a first aspect, a method for graphics processing is provided. The method may be performed by an electronic device, or by a module (e.g., a processor, a chip, or a chip system) within the electronic device, or by a logic module or software capable of implementing all or part of the functions of the electronic device. The method includes:

[0006] A first interface is displayed, the first interface including a first basic primitive and a second basic primitive; spatial sampling is performed on the first interface based on first information and second information to generate a sampling point set, the first information including function information of a first target primitive, the second information including function information of a second virtual primitive, and the sampling point set including at least one sampling point; wherein the first target primitive is the first basic primitive or the first virtual primitive, the first virtual primitive is the primitive formed by expanding the first basic primitive, and the second virtual primitive is the primitive formed by expanding the second basic primitive; an intersection between the first target primitive and the second virtual primitive is determined based on a target sampling point in the sampling point set, the target sampling point being located within both the first target primitive and the second virtual primitive; and a second interface is displayed, the second interface including a deformed first basic primitive and a deformed second basic primitive.

[0007] In the above method, the electronic device can determine whether the first target primitive and the second virtual primitive intersect (i.e., whether a collision occurs) within the first interface based on the function information of the first target primitive (or second virtual primitive), such as the function expression of the shape of the first target primitive (or second virtual primitive) and the function value range. Since the function information can accurately describe the shape and boundary of the target primitive, performing intersection detection based on the function information can provide higher accuracy, especially when dealing with target primitives with complex shapes, the function information can capture more details, thereby significantly reducing the possibility of misjudgment. In addition, the function information can directly reflect the shape and boundary of the target primitive without the need for additional geometric calculations or approximate processing. Therefore, in some scenarios, using a function method for intersection detection may be more efficient than the traditional bounding box method.

[0008] In a possible implementation, the method further includes: when it is determined that the first target primitive intersects the second virtual primitive, determining third information based on the first information and the second information, the third information being function information of the target intersection area, and the target sampling point being located within the target intersection area; fusing the third information through a fusion operation to generate fourth information, the fourth information being function information of the fusion area, the fusion operation including at least one of the following: a union operation, an intersection operation, a smoothing operation, a smoothed intersection operation, a smoothed union operation, or a transform domain operation, and the fusion area being the area obtained after the target intersection area is fused.

[0009] In some scenarios, after determining that the first target primitive intersects with the second virtual primitive (i.e., collides), the electronic device can generate third information based on the function information of the two (such as the first information and the second information); thereafter, by performing fusion operations such as smoothing and intersection on the third information, the transition of the target intersection area can be made more natural and smooth; this function-based method of processing the target intersection area has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection area can be made smoother, avoiding the jagged or discontinuous phenomena that may occur in the masking method; 2) The function can accurately describe the shape and boundary of the target intersection area, avoiding the loss of accuracy caused by pixelation or approximation in the masking method; 3) Function-based fusion operations are usually completed at the mathematical level and do not rely on pixel-level point-by-point calculations. Therefore, in some scenarios, it can significantly reduce the amount of calculation and improve processing efficiency; in short, the function-based processing method can not only improve visual effects and calculation accuracy, but also reduce calculation overhead and optimize rendering performance.

[0010] In a possible implementation, the above method also includes: generating fifth information based on the first information, the second information and the fourth information, the fifth information being function information of the target drawing primitive, the target drawing primitive being the primitive obtained by intersection and fusion processing of the first basic primitive and the second basic primitive, and the fifth information being used for drawing the target drawing primitive.

[0011] In some scenarios, when an electronic device determines that a first target primitive collides with a second virtual primitive, it can generate fifth information based on the first information, the second information, and the fourth information, so that the subsequent electronic device can quickly draw and render the target drawing primitive according to the fifth information represented by the function, thereby avoiding the situation where traditional masking methods require multiple processing stages to display the target drawing primitive, improving the efficiency of graphics processing and optimizing the rendering performance of the device.

[0012] 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 time length. The above method also includes: displaying a target drawing graphic element on the second interface, 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.

[0013] 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 primitive and the forces acting on the second basic primitive respectively according to the first motion constraint, the first motion constraint including Hooke's law; determining the first position information according to the second motion constraint and the forces acting on the first basic primitive, the second motion constraint including Newton's laws of motion, the first position information being the position information of the first basic primitive, and the first position information being used to determine the position of the first target primitive on the first interface; determining the second position information according to the second motion constraint and the forces acting on the second basic primitive, the second position information being the position information of the second basic primitive, and the second position information being used to determine the position of the second virtual primitive on the first interface.

[0014] In some scenarios, electronic devices use motion constraints (such as Newton's laws of motion, Hooke's law, etc.) to determine the current position of the target graphics element (such as the first target graphics element and the second virtual graphics element), which has the following benefits: on the one hand, determining the graphics element's moving position based on motion constraints can make the graphics element's motion trajectory closer to the real situation; on the other hand, based on motion constraints, the graphics element's position and dynamic changes can be accurately calculated, effectively ensuring the continuity and consistency of the animation; this not only avoids the picture jumping or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in frame-by-frame adjustment, thereby improving the overall efficiency of animation production.

[0015] In a 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.

[0016] In some scenarios (such as animation processing scenarios), using SDF to describe the shape of a target primitive (such as the first target primitive, etc.) has many advantages, such as the ability to efficiently handle changes in primitive shapes and collision detection between primitives. In addition, because SDF provides a numerical representation of primitive shapes, it can also be combined with other graphics algorithms (such as fusion operations) to achieve more complex and realistic animation effects. For example, an electronic device 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 that the two primitives intersect. This method is simple to calculate and highly efficient. At the same time, the continuity feature of SDF ensures a smooth transition in the intersection area of ​​the primitives, which facilitates the subsequent processing of animation effects such as collision fusion.

[0017] In a possible implementation, the third information includes a third SDF, and the fourth information includes a fourth SDF. The third SDF is used to describe the shape of the target intersection area, and the fourth SDF is used to describe the shape of the fusion area.

[0018] In some scenarios, using SDF to represent the target intersection area can simplify the calculation process; for example, electronic devices can quickly determine whether two target primitives intersect and accurately calculate the shape of the target intersection area simply by comparing their SDF values; this method can not only improve computing efficiency, but also optimize rendering performance; in addition, due to the continuity of SDF, electronic devices use SDF to describe the shape of the fusion area, which can make the shape of the fusion area present a smooth transition effect, avoiding visual or physical discontinuities caused by shape mutations.

[0019] In a second aspect, another method for graphics processing is provided, which can be executed by an electronic device, or by a module (such as a processor, a chip, or a chip system, etc.) applied in the electronic device, or by a logic module or software that can realize 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; based on the function information of the first virtual primitive and the function information of the second virtual primitive, spatially sampling the first interface to generate a sampling point set; 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; based on the target sampling point in the sampling point set, determining the intersection of the first virtual primitive and the second virtual primitive, and the target sampling point is simultaneously located in the first virtual primitive and the second virtual primitive; displaying a second interface, the second interface including the deformed first SDF primitive and the deformed second SDF primitive.

[0020] In the above method, the electronic device can determine whether the first virtual primitive and the second virtual primitive intersect (i.e., whether a collision occurs) within the first interface based on the 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 function value range. Since the function information can accurately describe the shape and boundary of the virtual primitive, performing intersection detection based on the function information can provide higher accuracy, especially when dealing with virtual primitives with complex shapes, the function information can capture more details, thereby significantly reducing the possibility of misjudgment. In addition, the function information can directly reflect the shape and boundary of the virtual primitive without the need for additional geometric calculations or approximate processing. Therefore, in some scenarios, using a function method for intersection detection may be more efficient than the traditional bounding box method.

[0021] In a possible implementation, the above method also includes: when it is determined that the first virtual primitive intersects with the second virtual primitive, determining the function information of the target intersection area based on the function information of the first virtual primitive and the function information of the second virtual primitive, and the target sampling point is located in the target intersection area; fusing the function information of the target intersection area through a fusion operation to generate function information of the fusion area, 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, and the fusion area is the area obtained after the target intersection area is fused.

[0022] In some scenarios, after determining that the first virtual primitive intersects with the second virtual primitive (i.e., a collision occurs), the electronic device can generate function information of the target intersection area based on the function information of the two; thereafter, by performing smoothing, intersection and other fusion operations on the function information of the target intersection area, the transition of the target intersection area can be made more natural and smooth; this function-based method of processing the target intersection area has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection area can be made smoother, avoiding the jagged or discontinuous phenomena that may occur in the masking method; 2) The function can accurately describe the shape and boundary of the target intersection area, avoiding the loss of accuracy caused by pixelation or approximation in the masking method; 3) Function-based fusion operations are usually completed at the mathematical level and do not rely on pixel-level point-by-point calculations. Therefore, in some scenarios, it can significantly reduce the amount of calculation and improve processing efficiency; in short, the function-based processing method can not only improve visual effects and calculation accuracy, but also reduce calculation overhead and optimize rendering performance.

[0023] In a possible implementation, the above method also includes: generating 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 area, the target drawing primitive being an SDF primitive obtained after intersection and fusion processing of the first SDF primitive and the second SDF primitive, and the function information of the target drawing primitive being used for drawing the target drawing primitive.

[0024] In some scenarios, when an electronic device determines that a first virtual primitive collides with a second virtual primitive, it can generate 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 area, so that subsequent electronic devices can quickly draw and render the target drawing primitive according to the function information of the target drawing primitive, thereby avoiding the situation where traditional masking methods require multiple processing stages to display the target drawing primitive, improving the efficiency of graphics processing and optimizing the rendering performance of the device.

[0025] 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 above method also includes: displaying a target drawing primitive on the second interface, the target drawing primitive being the graphic state of the animation effect at the first moment, the preset duration including the first moment, and the target drawing primitive including the deformed first SDF primitive and the deformed second SDF primitive.

[0026] 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 also includes: determining the force of the first SDF primitive and the force of the second SDF primitive respectively according to the first motion constraint, the first motion constraint including Hooke's law; determining first position information according to the second motion constraint and the force of the first SDF primitive, the second motion constraint including Newton's law of motion, the first position information is the position information of the first SDF primitive, and the first position information is used to determine the position of the first virtual primitive on the first interface; determining second position information according to the second motion constraint and the force of the second SDF primitive, the second position information is the position information of the second SDF primitive, and the second position information is used to determine the position of the second virtual primitive on the first interface.

[0027] In some scenarios, electronic devices can determine the current position of virtual graphics elements (such as the first virtual graphics element and the second virtual graphics element) through motion constraints (such as Newton's laws of motion, Hooke's law, etc.), which has the following benefits: on the one hand, determining the movement position of the graphics element based on motion constraints can make the motion trajectory of the graphics element closer to the real situation; on the other hand, based on the motion constraints, the position and dynamic changes of the graphics element can be accurately calculated, effectively ensuring the continuity and consistency of the animation; this not only avoids the picture jumping or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of animators in frame-by-frame adjustment, thereby improving the overall efficiency of animation production.

[0028] In a third aspect, an embodiment of the present application provides an electronic device, which includes a processor and a memory, the memory being used to store computer programs, and the processor being used to call and run the computer programs from the memory, so that the electronic device executes the method described in the first aspect and various possible implementations of the first aspect.

[0029] In a fourth aspect, an embodiment of the present application provides an electronic device, which includes a processor and a memory, the memory being used to store computer programs, and the processor being used to call and run the computer programs from the memory, so that the electronic device executes the method described in the second aspect and various possible implementations of the second aspect.

[0030] In a fifth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the processor executes the method described in the first aspect and various possible implementations of the first aspect.

[0031] In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the processor executes the method described in the second aspect and various possible implementations of the second aspect.

[0032] In a seventh aspect, an embodiment of the present application provides a computer program product, which includes: a computer program code, which, when executed by an electronic device, enables the electronic device to execute the method described in the first aspect and various possible implementations of the first aspect.

[0033] In an eighth aspect, an embodiment of the present application provides a computer program product, which includes: a computer program code, which, when executed by an electronic device, enables the electronic device to execute the method described in the second aspect and various possible implementations of the second aspect.

[0034] In the ninth aspect, an embodiment of the present application provides a chip system, which includes a processing circuit and a storage medium, in which computer program instructions are stored; when the computer program instructions are executed by the processing circuit, the method described in the first aspect and various possible implementations of the first aspect is implemented.

[0035] Optionally, the processing circuit in the above chip system can be replaced by a processor, and the storage medium can be replaced by a memory. Optionally, the chip system can also include a communication interface, which is used to realize communication between the chip system and the receiving device.

[0036] In the tenth aspect, an embodiment of the present application provides a chip system, which includes a processing circuit and a storage medium, in which computer program instructions are stored; when the computer program instructions are executed by the processing circuit, the method described in the second aspect and various possible implementations of the second aspect is implemented.

[0037] Optionally, the processing circuit in the above chip system can be replaced by a processor, and the storage medium can be replaced by a memory. Optionally, the chip system can also include a communication interface, which is used to realize communication between the chip system and the receiving device.

[0038] The beneficial effects of the technical solutions in the third to tenth aspects of the present application may be the same as the beneficial effects of the technical solutions in the first or second aspects, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1A to Figure 1B A schematic diagram of a collision detection scenario provided in an embodiment of the present application;

[0040] Figure 2AA schematic diagram of the hardware structure of an electronic device 100 provided in an embodiment of the present application;

[0041] Figure 2B A schematic diagram of the software architecture of an electronic device 100 provided in an embodiment of the present application;

[0042] Figure 3A A schematic diagram of the software architecture of an electronic device provided in an embodiment of the present application;

[0043] Figures 3B to 3C A flowchart of a method for performing graphics processing provided in an embodiment of the present application;

[0044] Figures 4A to 4J A schematic diagram of an application scenario provided in an embodiment of the present application;

[0045] Figure 5A A flowchart of a method 500A for image processing provided in an embodiment of the present application;

[0046] Figure 5B A flowchart of a method 500B for image processing provided in an embodiment of the present application;

[0047] Figures 6A to 6B A schematic diagram of a basic graphic element provided in an embodiment of the present application;

[0048] 7A to 7C A schematic diagram of an application scenario provided in an embodiment of the present application;

[0049] Figures 8A to 8C A schematic diagram of another application scenario provided in an embodiment of the present application;

[0050] Figures 9A to 9C A schematic diagram of another application scenario provided in an embodiment of the present application;

[0051] Figure 10 A schematic diagram of the software architecture of a terminal device provided in an embodiment of the present application;

[0052] Figure 11 A schematic diagram of the software architecture of another terminal device provided in an embodiment of the present application;

[0053] Figure 12 A schematic diagram of another application scenario provided in an embodiment of the present application;

[0054] Figure 13 This is a schematic structural diagram of an electronic device 1300 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0055] In order to clearly describe the technical solutions of the embodiments of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in combination with the drawings in the embodiments of the present application; it should be noted that the embodiments described in the present application are only part of the embodiments of the present application, not all of the embodiments.

[0056] In the description of this application, unless otherwise specified, " / " represents "or." For example, A / B can represent either A or B. In the description of this application, "and / or" is simply a term used to describe an association between related objects, indicating that three possible relationships exist. For example, "A and / or B" can represent: A exists alone, A and B exists simultaneously, or B exists alone. "At least one" refers to one or more, and "more" refers to two or more. In the specification and claims of this application, the terms "first" and "second" are used to distinguish different objects or to distinguish different processing of the same object, rather than to describe a specific order of objects. For example, "first terminal" and "second terminal" are used to distinguish different terminal devices, rather than to describe a specific order of terminal devices. Furthermore, in the embodiments of this application, descriptions of "within" a primitive, "inside" a primitive, "inside" a primitive, and "inside area" of a primitive can all be understood to refer to the internal area of ​​the primitive. Those skilled in the art will understand that the terms "first" and "second" do not limit the quantity or execution order, and the terms "first" and "second" do not necessarily define differences.

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

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

[0059] 1. Motion Constraints

[0060] Motion constraints can generally be understood as restrictions imposed on the movement, deformation, or forces of primitives based on certain physical laws. For example, in addition to obeying Newton's laws of motion, the movement of primitives (which can be considered objects with mass) can also be subject to other constraints. These constraints can restrict the movement of primitives to a specific range or in a specific manner. These constraints can be based on mechanical principles (such as gravity and friction) or physical equations (such as limits on physical quantities such as velocity and acceleration).

[0061] 2. Flexible interactive interface

[0062] In user interfaces (UIs), animation effects for controls (such as buttons, icons, and sliders) are typically based on linear changes in displacement (e.g., moving position), rotation (e.g., rotating around a point), and scaling (e.g., changing size). However, when control animations in a UI include nonlinear changes, such as complex effects like merging or separating controls, the UI is considered a flexible interactive interface.

[0063] 3. Vertex data

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

[0065] 4. Signed distance fields (SDF)

[0066] SDF, also known as signed distance function, oriented distance function, or two-dimensional (2D) distance field function, is an implicit graph 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 closest distance from each point on the graph boundary to the interior of the graph (and marking the positive and negative distances). In some scenarios, SDF can process the received 2D coordinate position and return a distance value d; this distance value d represents the distance from the current point to the nearest geometric edge.

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

[0068] 5. Mesh data

[0069] Meshed data is a data representation method that describes the envelope of a graphic using a combination of triangular facets. Triangular facets are constructed from discrete vertex data, and a complete mesh is formed from all these triangular facets. This data representation method has broad application prospects in fields such as 3D modeling and computer graphics.

[0070] 6. Basic primitives

[0071] In the field of animation design, primitives are the basic elements that make up various animations. They can include various basic shapes, such as circles, rectangles, polygons, etc. These primitives can be understood as the basic components of UI control animation effects; usually, a UI control can include one or more primitives.

[0072] 7. Mask

[0073] 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 usually composed of a black and white image, where white represents complete visibility (unaffected), black represents complete invisibility (completely blocked), and gray represents some degree of transparency.

[0074] The above introduces the technical terms that may be involved in this application. The following introduces the technical problems that need to be solved by this application in combination with actual application scenarios.

[0075] Collision detection is a key technology used to determine whether two or more objects intersect or touch. A common approach is to use bounding box algorithms, such as those for multi-object collision detection. For simple geometric primitives (such as circles and rectangles), the regular shapes of these primitives often provide sufficient accuracy. However, when it comes to collision detection involving complex primitives, the limitations of the bounding box method become apparent, significantly increasing the false detection rate.

[0076] For example, Figure 1A As shown in FIG, when the circular bounding box 101 of the basic primitive 1 and the circular bounding box 102 of the basic primitive 2 are determined to intersect (i.e., collide) during detection, but in fact, the two basic primitives do not actually intersect, a misjudgment phenomenon will occur. Figure 1B In the example, when the square bounding box 103 of primitive 3 and the square bounding box 104 of primitive 4 are determined to be non-intersecting (i.e., no collision occurs) during detection, but the two primitives actually intersect (i.e., collide), a false negative phenomenon will occur. These examples show that the bounding box-based collision detection method has a high error rate when processing complex primitives, which may lead to misjudgment or missed detection. Therefore, in practical applications, especially in complex scenes, more precise detection methods are needed to improve the accuracy of collision detection.

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

[0078] In this graphics processing method, the electronic device obtains function information of a target primitive (such as a first target primitive and a second virtual primitive) (i.e., 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 through a function method. This not only improves the accuracy of collision detection, but also optimizes the efficiency of collision detection.

[0079] It should be noted that the above-mentioned graphics processing method can be executed by an electronic device, or by a module in the electronic device (such as a processor, chip, or chip system, etc.), or by a logic module or software that can realize 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, a graphics processing server, etc., or a terminal device (or user equipment (UE)); wherein the terminal device can be a mobile phone, a watch, a smart screen, a smart TV (television, TV), a tablet computer (Tablet), a wearable device, a virtual reality (VR) device, an augmented reality (AR) device, a projector, a car playback system, and other devices. The embodiments of the present application do not impose any restrictions on the specific type of electronic device.

[0080] In order to better understand the embodiments of the present application, Figure 2A A hardware structure of an electronic device 100 suitable for this application is introduced.

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

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

[0083] The processor 110 can generate an operation control signal according to the instruction operation code and the timing signal to complete the control of instruction fetching and execution.

[0084] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 may be a cache memory. This memory can store instructions or data that have been used or are frequently used by processor 110. When processor 110 needs to use the instruction or data, it can directly access it from this memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0085] In some embodiments, the processor 110 may include one or more interfaces. The 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 may be connected to a wireless communication module, a display, or other modules through at least one of the above interfaces.

[0086] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0087] The USB connector 130 is an interface that complies with USB standard specifications and can be used to connect the electronic device 100 and peripheral devices. The charging management module 140 is used to receive charging input from a charger. The charger can be a wireless charger or a wired charger. The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, the internal memory 121, the display screen 170 and the wireless communication module 160. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

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

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

[0090] The wireless communication module 160 can provide wireless communication solutions applied to the electronic device 100, including wireless local area networks (WLAN) (such as Wi-Fi networks), Bluetooth (BT), near field communication (NFC), etc.

[0091] 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, so that electronic device 100 can communicate with a network and other electronic devices via wireless communication technologies. The wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), etc.

[0092] The electronic device 100 can implement display functions through a GPU, a display screen 170 , and an application processor, etc. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0093] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to implement data storage. For example, information such as the source code of a UI page file can be stored on the external memory card. Alternatively, information such as the source code of a UI page file can be transferred from the electronic device 100 to the external memory card.

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

[0095] The electronic device 100 can display the motion effects of UI controls, etc. through the display screen 170.

[0096] Display screen 170 is used to display interface elements such as the application market, UI control animations, and various system controls. 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, electronic device 100 may include one or more display screens 170. In some embodiments, the display screen may be foldable or scrollable.

[0097] It should be noted that in some scenarios, for example, most applications running on the electronic device 100 have screen display requirements, so the electronic device 100 can be equipped with a display screen 170; the display screen 170 can cooperate with the image rendering process of each application to display various dynamic icons, UI control animations, etc.

[0098] It is understood that the structure shown in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also include Figure 2A More or fewer components, or combining some components, or splitting some components, or a different arrangement of components. Figure 2A The components in the present invention may be implemented in hardware, software, or a combination of software and hardware.

[0099] In addition, it should be noted that the software system of the electronic device 100 can adopt a layered architecture or a service architecture. In the embodiment of the present invention, the Harmony system with a layered architecture is used as an example to illustrate 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 the Android operating system, the Apple operating system, and the Windows operating system.

[0100] Figure 2B FIG. 1 shows a schematic diagram of the software architecture of the electronic device 100 provided in an embodiment of the present application. Figure 2B As shown, the layered architecture of electronic device 100 divides the software into several layers, each with a clear role and division of labor. Layers communicate with each other via software interfaces. In some embodiments, the Harmony system includes four layers: from bottom to top, the kernel layer, the system basic services layer, the framework layer, and the application layer.

[0101] The Harmony system uses a multi-kernel design, optionally including the Linux kernel, the Hongmeng microkernel, and the lightweight IoT operating system kernel (Lite OS). This design allows devices with different device capabilities to select the appropriate system kernel. The kernel layer also includes a kernel abstraction layer, which provides basic kernel capabilities to other Harmony layers, such as process management, thread management, memory management, file system management, network management, and peripheral management.

[0102] The system basic service layer is the core capability set of the Harmony system, which supports the Harmony system to provide services to application services through the framework layer in the scenario of multi-device deployment. This layer optionally includes the following parts:

[0103] The system's basic capability subsystems provide fundamental capabilities for running, scheduling, and migrating distributed applications across multiple devices in the Harmony system. These subsystems comprise a distributed soft bus, distributed data and file management, distributed task scheduling, the Ark runtime, and distributed security and privacy protection. The Ark runtime provides a C / C++ / JavaScript multi-language runtime and basic system class libraries. It also provides a runtime for Java programs statically compiled using the Ark compiler (i.e., applications or frameworks developed in Java).

[0104] Basic software service subsystems: These provide common, general-purpose software services for the Harmony system. These subsystems include graphics and imaging, distributed media, distributed artificial intelligence (AI), multimodal input, mobile sensing development platform (MSDP) and device virtualization (DV), event notification, phone services, and design for X (DFX). These subsystems can be tailored to the specific functionalities of each device, tailored to the deployment environment.

[0105] Enhanced software service subsystem set (see Figure 2B Enhanced software (enhanced software outlined in the dashed box): Provides differentiated, device-specific, capability-enhancing software services for the Harmony system. This software comprises subsystems for tablets, smart screens, in-car systems, and the Internet of Things (IoT). These enhanced software service subsystems can be tailored to the deployment environment of different device form factors at the subsystem level, and each subsystem can be tailored to the functional level within it.

[0106] Harmony driver framework (HDF) and hardware abstraction layer (HAL): They are the foundation of the open hardware ecosystem of the Harmony system, providing hardware capability abstraction to the hardware upward and providing a development framework and operating environment for various peripheral drivers downward.

[0107] Hardware Service Subsystem Set: This provides common, adaptive hardware services for the Harmony system and consists of hardware service subsystems such as general sensors, location, power, USB, and biometrics. The hardware service subsystem set can be tailored to the deployment environment of different device form factors, and each subsystem can be tailored to the functional granularity.

[0108] Proprietary hardware service subsystem (see Figure 2B Proprietary hardware (enclosed by the dashed line): Provides differentiated hardware services for different devices within the Harmony system. These services may include tablet, car, wearable, and IoT subsystems. The proprietary hardware service subsystem can be tailored to the subsystem granularity, and each subsystem can be tailored to the functional granularity.

[0109] The framework layer provides Harmony system applications with a user program framework and meta-capability framework in multiple languages, such as Java / C / C++ / JavaScript, as well as a multi-language framework application programming interface (API) that is open to various software and hardware services.

[0110] The application layer includes system applications and third-party applications (or extended applications), including camera, gallery, graphic design, animation design, music, video, short messaging, etc. Applications in the Harmony system are built based on atomic capabilities (AA) and feature capabilities (FA).

[0111] Next, we will have Figure 2A and Figure 2B Taking the electronic device 100 of the structure shown as an example, combined with the graphics processing method provided in this application, the flow of the method for executing graphics processing by the software system and hardware system of the electronic device 100 is exemplarily described.

[0112] like Figure 3A As shown, taking the dynamic effects 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 dynamic effects of UI controls on a UI page in application X is as follows:

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

[0114] Step A2): The graphics and image software service sends a parsing instruction to the parsing module in response to the animation calculation request.

[0115] Step A3): After receiving the parsing instruction, the parsing module will execute Figure 3B The processing flow shown is as follows: the parsing module obtains and parses the UI page file, and constructs the UI nested information in a tree structure (also known as constructing a UI control tree); wherein each node of the tree structure records the attribute information of the corresponding UI control (such as the size, style, and position information of the control relative to other interface elements, etc.); the UI page file can use a tagged 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.

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

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

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

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

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

[0121] 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 can also be performed in the rendering module (as described below). Figure 10 Corresponding execution process), or in other modules (as shown below Figure 11 The embodiment of the present application does not limit the execution module of the construction of physical scene information and the primitive collision detection.

[0122] For example, Figure 3CAs shown, in some embodiments, before constructing the physical scene information, the above-mentioned basic primitives can also be expressed in a functional form (such as SDF); after the primitives are expressed in a functional form, the animation module can construct the 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 (such as method 600 below) on each basic primitive to determine the primitive that has collided; if the animation module determines that a collision has occurred between primitives, the new primitives formed after the collision are subjected to a fusion calculation to obtain the fused primitives, so as to facilitate subsequent primitive drawing; if the animation module determines that no collision has occurred between primitives, the graphics formed by the plurality of primitives as a whole (which can also be understood as the graphics after the fusion of the primitives) are directly drawn.

[0123] Step A6): After receiving the processing result, the rendering module may generate required rendering attribute information according to the processing result, and store the rendering attribute information on corresponding nodes in the tree structure, and finally construct a rendering node tree.

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

[0125] Step A7): The GPU driver module may generate a drawing instruction of the GPU according to the drawing attribute information; the drawing instruction may be understood as a drawing command set of some graphics API (such as Vulkan or Open Graphics Library (OpenGL)).

[0126] The GPU driver module can send drawing instructions to the GPU.

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

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

[0129] It should be noted that the architecture of the electronic device 100 is not limited to Figure 2A 、 Figure 2B as well as Figure 3A The hardware and software system structure shown in the figure can be adjusted according to the specific application scenario in actual application. Figure 2A 、 Figure 2B as well as Figure 3AThe software and hardware system structures shown in the figure may be modified, and this application does not limit this.

[0130] The above details the software and hardware system structure of the electronic device 100 applicable to the present application. Before introducing the graphics processing method (such as method 500A and method 500B below) in detail, we will first take a mobile phone as an example of the electronic device 100 and combine it with the interface embodiment to introduce the practical application of this method in the UI control animation scenario.

[0131] like Figure 4A As shown, the mobile phone displays an interface 400 (i.e., an example of the first interface below) in its top area; the interface 400 can be suspended in the top area of ​​the mobile phone, or it can be fixed to the top area of ​​the mobile phone; the interface 400 can be used to display a UI control 1 that supports flexible deformation (i.e., an example of the first control); the UI control 1 can be used to display the connection status information between the mobile phone and the headset, such as whether the headset is currently connected or status information such as the battery level of the headset; when the mobile phone establishes a connection with the headset, the mobile phone will present the UI control 1 in the form of a flexible motion effect 1 (i.e., an example of a flexible motion effect).

[0132] For example, Figure 4A As shown, the interface 400 may include graphic element 1 (i.e., an example of the first basic graphic element), graphic element 2 (i.e., an example of the second basic graphic element), and graphic element 3; the mobile phone can present the flexible motion effect 1 through these three circular graphic elements; at the starting time T0, graphic elements 1 to 3 are presented as the initial graphic 401, i.e., the shapes of the basic graphic elements do not undergo any deformation; as the flexible motion effect 1 is played, graphic element 1 and graphic element 3 move toward graphic element 2 respectively, while the shape of graphic element 3 becomes larger; at time T1, graphic elements 1 to 3 form graphic 402 (i.e., an intermediate form during the playing of the flexible motion effect 1) and are displayed on the interface 403 (i.e., an example of the second interface), as shown in FIG. Figure 4B As shown; it can be seen from the graphic 402 that the graphic element 1 and the graphic element 2 collide (i.e., intersect), and the graphic element 2 collides with the graphic element 3; wherein, the intersection area 404 formed by the graphic element 1 and the graphic element 2 (i.e., an example of the target intersection area) and the intersection area 405 formed by the graphic element 2 and the graphic element 3 are not smooth; when the mobile phone determines that the graphic elements 1 to 3 are intersected by the following method 600, it will make the intersection area 404 and the intersection area 405 transition smooth through smoothing, fusion and other processing; after the mobile phone is smoothed, fused and other processing, at time T2 (the T2 time is after time T1 and before the end time), the user can see that the graphic 402 has been updated to the graphic 406 (i.e., an example of the target drawing graphic element) and displayed on the interface 407 (i.e., another example of the second interface), as shown Figure 4CAs shown; the intersection area 404 and the intersection area 405 in the graphic 406 have been smoothed; as the flexible animation 1 continues to play, the graphic elements 1 to 3 will continue to merge and deform, and finally form the graphic 408 at the end moment; the user can see the connection status of the headset and the mobile phone (such as "connected") and the remaining battery percentage of the headset (such as 75%) on the UI control 1, as shown Figure 4D shown.

[0133] For example, Figure 4E As shown, the mobile phone displays an interface 409 (i.e., an example of the first interface below) in its top area; the interface 409 can be suspended in the top area of ​​the mobile phone, or it can be fixed to the top area of ​​the mobile phone; the interface 409 can be used to present a flexible deformable UI control 2 (i.e., an example of the first control); the UI control 2 can be used to display status information of the audio (such as music, etc.) being played by the mobile phone, for example, status information such as the audio icon and playback progress of the audio currently being played by the mobile phone; when the mobile phone starts audio playback, the mobile phone will present the UI control 2 in the form of a flexible motion effect 2 (i.e., another example of a flexible motion effect).

[0134] For example, Figure 4E As shown, the interface 409 may include element 1 (i.e., an example of the first basic element), element 2 (i.e., an example of the second basic element), element 3, and element 4; the mobile phone may present the flexible motion effect 2 through these four circular elements; at the start time T 00 , primitives 1 to 4 appear as initial graphics 410, that is, the shapes of the basic primitives do not change at all; as the flexible animation 2 plays, primitives 1 and 3 move toward primitive 2, and primitive 4 moves toward primitive 3, while the shape of primitive 3 becomes larger; at T 11 At this moment, the graphic element 1 to the graphic element 4 form a graphic 411 (ie, an intermediate form during the playing of the flexible motion effect 2) and are displayed on the interface 412 (ie, an example of the second interface), as shown in FIG. Figure 4F As shown; From the figure 411, it can be seen that the primitive 1 and the primitive 2 intersect (i.e., collide), the primitive 2 intersects with the primitive 3, and the primitive 3 intersects with the primitive 4; among them, the intersection area 413 formed by the primitive 1 and the primitive 2, the intersection area 414 formed by the primitive 2 and the primitive 3, and the intersection area 415 formed by the primitive 3 and the primitive 4 are all not smooth; when the mobile phone determines that the primitives 1 to 4 intersect with each other through the following method 600, it will make the transition from the intersection area 413 to the intersection area 415 smooth through smoothing, fusion and other processing; after smoothing and fusion processing, at T 22 Time (the T 22 Time is at T 11After the start time and before the end time), the user can see that the graphic 411 has been updated to the graphic 416 (ie, another example of the target drawing primitive) and is displayed on the interface 417 (ie, another example of the second interface), as shown in FIG. Figure 4G As shown; the intersection area 413 to the intersection area 415 in the graphic 416 have been smoothed; as the flexible animation 2 continues to play, the graphic elements 1 to 3 will continue to merge and deform to form the first part 418 of the UI control 2, and after the graphic element 4 and the graphic element 3 are merged, they are bounced off to form the second part 419 of the UI control 2; the first part 418 and the second part 419 together form the graphic 420 at the end moment; the user can see the audio information being played (such as "picture thumbnail") and the audio playback progress (such as a circular progress bar) on the UI control 2, as shown Figure 4H shown.

[0135] It should be noted that during the playback of the animation (such as the above-mentioned soft animation 1), the user may notice that even the basic graphic elements (such as Figure 4A Even if the graphic elements 1, 2, etc. in the image have not collided yet, the interface will start the fusion effect in advance. The reason for this phenomenon is the collision detection mechanism of the mobile phone. The specific principle is as follows: When the mobile phone performs collision detection between basic graphic elements, it performs collision detection based on the virtual graphic elements generated by external expansion (usually not displayed on the interface). When an intersection area is formed between virtual graphic elements, the mobile phone will trigger operations such as fusion processing instead of waiting for the actual visible basic graphic elements to collide. Because the detection range of virtual graphic elements is larger than that of visible basic graphic elements, when the mobile phone detects a collision between virtual graphic elements, the basic graphic elements seen by the user may still maintain a certain distance.

[0136] For example, Figure 4I As shown, during the playback of a certain animation, T 01 At this moment, the mobile phone displays the graphics 421 presented by the deformed primitives 1 to 3 on the interface 422 (i.e., another example of the second interface); visually, the three deformed primitives do not collide; however, the mobile phone discovers through the collision detection method (such as method 600 below): virtual primitive 1 collides with virtual primitive 2, generating an intersection area 423, and virtual primitive 2 collides with virtual primitive 3, generating an intersection area 424, as shown in FIG. Figure 4I As shown; it should be noted that virtual primitive 1, virtual primitive 2, virtual primitive 3, intersection area 423 and intersection area 424 are usually not visible during the actual execution of the dynamic effect (of course, they can be set to be visible when they need to be visible, and this embodiment of the application is not limited to this). They are drawn here only to illustrate the relationship between the collision between virtual primitives and the actual collision state of basic primitives. Figure 4JAs shown, after the mobile phone determines the collision between the above virtual primitives through the collision detection method, the mobile phone can process the intersection area 423 through operations such as smoothing and fusion processing, so that the deformed primitive 1 and the deformed primitive 2 are fused to generate the intersection area 427; similarly, the mobile phone performs the same processing on the intersection area 424, so that the deformed primitive 2 and the deformed primitive 3 are fused to generate the intersection area 428; at T 02 Time (the T 02 Time is at T 01 After the time T and before the end time T, the user can see that the graphic 421 has been updated to the graphic 425 (i.e., another example of the target drawing primitive) and displayed on the interface 426 (i.e., another example of the second interface), as shown in 4J. This shows that the mobile phone can detect the collision between invisible virtual primitives and perform fusion processing on the visible basic primitives in advance, so that the visible basic primitives can be 02 The moment can naturally transition to the final form 425, thus achieving visual continuity.

[0137] In addition, it should be noted that the graphics 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, game development, etc., and this application does not limit this; 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.

[0138] The above describes in detail the application of the graphics processing method in the dynamic effect scenario of the UI control. The following describes in detail the graphics processing method 500A and method 500B provided in the embodiments of the present application.

[0139] like Figure 5A , which is a flow chart of a method 500A for graphics processing provided in an embodiment of the present application; before introducing the method 500A provided in the present application, a brief description of the execution subject involved in the method 500A is first given. The method 500A can be executed by an electronic device, or by a module (such as a processor, chip, or chip system) used in the electronic device, or by a logic module or software that can realize all or part of the functions of the electronic device.

[0140] It should be noted that the electronic device may be a Figure 2A and Figure 2B Servers with hardware and software architecture (such as computing servers, graphics processing servers, etc.), or servers with Figure 2A and Figure 2B Terminal equipment with hardware and software architecture.

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

[0142] Step 501: The electronic device displays a first interface.

[0143] The first interface may include a first basic graphic element and a second basic graphic element, for example Figure 4A The interface 400 in the figure may include element 1, element 2, and element 3; the first basic element (or the second basic element) may be used as a basic element to present various animation effects, such as fusion effects and separation effects of UI controls; the type of the first basic element (or the second basic element) may include but is not limited to curve graphics and broken line graphics; for example, Figure 6A As shown, the curved graphics may include but are not limited to a circle, an ellipse and a heart shape; and the broken line graphics may include but are not limited to a square, a rectangle, a parallelogram, a triangle and a pentagon.

[0144] After the electronic device performs an expansion operation on the first basic graphic element, a first virtual graphic element can be obtained; similarly, after performing an expansion operation on the second basic graphic element, a second virtual graphic element can be obtained; 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.

[0145] 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. The virtual primitives may not be displayed on the first interface (or the second interface); of course, they can also be displayed on the first interface (or the second interface). The embodiment of the present application does not limit whether the virtual primitives are displayed on the first interface (or the second interface), and can be set according to actual needs.

[0146] In some embodiments, the first virtual graphic element (or the second virtual graphic element) can be understood as a graphic element formed by enlarging the initial first basic graphic element (or the initial second basic graphic element) at the same proportion or by enlarging a partial area; wherein, enlarging the same proportion can be understood as the entire graphic element being enlarged at the same proportion, maintaining its original shape and proportional relationship; enlarging a partial area can be understood as certain partial areas of the graphic element being enlarged, while other partial areas remain unchanged or are enlarged at different proportions, which may cause the shape of the graphic element to change.

[0147] It should be noted that the expansion method of the first basic primitive (or the second basic primitive) may not be limited to the above-mentioned same-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 the present application do not limit the expansion method of the basic primitives.

[0148] Different types of basic primitives (such as the first basic primitive or the second basic primitive) can form different types of virtual primitives (such as the first virtual primitive or the second virtual primitive) after expansion; for example, Figure 6B As shown, a circular basic primitive 601 (i.e., an example of the first basic primitive or the second basic primitive) is magnified at the same ratio to obtain a circular virtual primitive 602 (i.e., an example of the first virtual primitive or the second virtual primitive); a rectangular basic primitive 603 is magnified by partially magnifying a region to obtain a rectangular virtual primitive 604; a diamond basic primitive 605 is divided by a dotted line 606 into an upper region 607 and a lower region 608; a diamond virtual primitive 609 is divided by a dotted line 606 into an upper region 610 and the lower area 611, wherein the upper area 607 of the diamond basic primitive 605 is enlarged according to the ratio K1 to obtain the upper area 610 of the diamond virtual primitive 609, and the lower area 608 is enlarged according to the ratio K2 to obtain the lower area 611 of the diamond virtual primitive 609, wherein K1 and K2 may be equal or unequal, and the embodiment of the present application does not limit this; similarly, other basic primitives such as parallelograms may also be expanded outward to form new primitives, which will not be described in detail here.

[0149] In some examples, the diamond-shaped virtual primitive 609 may not include the dashed line 606 . The dashed line 606 is provided only to facilitate the reader's understanding of the relationship between the diamond-shaped basic primitive 605 and the diamond-shaped virtual primitive 609 .

[0150] The above-mentioned first interface can be an application (such as a game application) interface, or it can be a startup screen interface, a lock screen interface, a boot interface, a full-screen animation / special effects interface, etc., or it can be a web page interface, and can also be understood as a local area in the first two interfaces. The local area can be understood as the target drawing area, and the embodiments of the present application do not limit this.

[0151] Among them, the startup screen can be understood as a static / dynamic interface (such as a brand logo animation) that is briefly displayed when the application is started, which is used for the transition loading process; the lock screen interface can be understood as the interface displayed when the device is in standby mode, which may include time, notifications, dynamic wallpapers or quick operation controls; the guide interface can be understood as a dynamic tutorial page that introduces functions when the user uses it for the first time, often combined with interactive animations such as sliding and clicking; the full-screen animation / special effects interface can be understood as part of the animation when games and other applications are loading, or brand special effects when the device is turned on.

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

[0153] It should also be noted that the location of the target drawing area is not fixed. It can usually change with the position of dynamic components such as controls or icons on the interface. This means that if dynamic components such as UI controls or icons move on the UI page, the target drawing area will also move accordingly.

[0154] When an application is started or a web page is opened, the electronic device will display a first interface; the first interface can display the graphic state of the first basic graphic element and the second basic graphic element at the current moment; and the graphic state of the first basic graphic element and the second basic graphic element at the next moment can be displayed through the second interface. Before displaying the graphic state at the next moment, the electronic device needs to perform a collision detection on the graphic state at the next moment. The understanding of the second interface is similar to that of the first interface and will not be repeated here.

[0155] In step 502, the electronic device spatially samples 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 primitive, the second information may include function information of the second virtual primitive, and the sampling point set may include at least one sampling point; wherein the first target primitive may be a first basic primitive or a first virtual primitive.

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

[0157] 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.

[0158] 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.

[0159] For example, in some examples, the electronic device may represent the shape of a basic graphic element (such as a first basic graphic element or a second basic graphic element) using an SDF (such as a first SDF or a second SDF); the basic graphic element represented based on the SDF may be understood as a basic graphic element represented based on a distance function d=f(x, y); wherein d may represent the distance from a point on a plane (such as a first interface) to the outline of the basic graphic element; d>0 indicates that the point is outside the graphic element, d<0 indicates that the point is inside the graphic element, and d=0 indicates that the point is on the outline of the graphic element.

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

[0161] In some scenarios (such as animation processing scenarios), electronic devices use SDF to describe the shape of target primitives (such as the first target primitive, etc.), which has many advantages. For example, it can efficiently handle changes in primitive shapes and collision detection between primitives. In addition, since SDF provides a numerical representation of primitive shapes, it can also be combined with other graphics algorithms (such as fusion operations) to achieve more complex and realistic animation effects. For example, an electronic device 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 that the two primitives intersect. This method is simple to calculate and efficient. At the same time, the continuity feature of SDF ensures a smooth transition in the intersection area of ​​the primitives, which facilitates the subsequent processing of animation effects such as collision fusion.

[0162] Before performing spatial sampling within the first interface, the electronic device may first obtain function information of the first target primitive and the second virtual primitive within the first interface to facilitate determining the shape and position of the first target primitive and the second virtual primitive within the first interface. After determining the shape and position of the first target primitive (or the second virtual primitive), the electronic device may perform spatial sampling within the first interface to generate a set of sampling points; the set of sampling points may include points within the interior area and its boundary of the first target primitive, points within the interior area and its boundary of the second virtual primitive, and all other points within the first interface except for the first two areas and their boundary.

[0163] It should be noted that the area corresponding to the first target primitive can be understood as the area occupied by the first basic primitive in the first interface, or the area occupied by the first virtual primitive in the first interface.

[0164] The above-mentioned spatial sampling methods may include but are not limited to uniform sampling and non-uniform sampling, among which 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 requirements of different graphics elements; in particular, the specific rules of non-uniform sampling can be customized according to the form of the basic graphics element; for example, taking a specific basic graphics element A as an example, a smaller sampling interval is used in the key or detail-rich areas of the basic graphics element A to ensure complete capture of the information; and in the relatively flat or non-critical areas of the basic graphics element A, the sampling interval can be appropriately increased, thereby effectively reducing the amount of data while ensuring the quality of the graphics element.

[0165] For another example, an electronic device may use a smaller sampling interval in the middle area between two basic image elements, and a larger sampling interval in areas other than the middle area between the two basic image elements (also referred to as peripheral areas). For example, in a scenario where two basic image elements are close to each other, a smaller sampling interval may be used on the right side of the first basic image element (i.e., the left image element) and on the left side of the second basic image element (i.e., the right image element); a larger sampling interval may be used on the left side of the first basic image element and on the right side of the second basic image element; or no sampling may be performed on the left side of the first basic image element and on the right side of the second basic image element.

[0166] In some examples, the sampling point set may include points in the interior area of ​​the first basic primitive and its boundary, points in the interior area of ​​the second basic primitive and its boundary, and all other points in the first interface except the first two areas.

[0167] For example, Figure 7BAs shown, the interface 702 (i.e., an example of the first interface) is used to draw the first basic primitive, the second basic primitive, and display the animation effect presented by the two primitives; at time T1, the first basic primitive is at position 1 in the interface 702, and the second basic primitive is at position 2 in the 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) in the interface 702 to generate a sampling point set 1 (i.e., an example of the above sampling point set); the sampling point set 1 can include sampling point A1, sampling point A2, ..., and sampling point A n , where n is 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 the two basic primitives (such as sampling point A4 or sampling point A8), and some sampling points are located in the intersection area of ​​the two basic primitives (such as sampling point A6).

[0168] In some other examples, the sampling point set may include points in the interior area of ​​the first virtual primitive and its boundary, points in the interior area of ​​the second virtual primitive and its boundary, and all other points in the first interface except the first two areas.

[0169] For example, Figure 7C As shown, interface 703 (i.e., another example of the first interface) is used to draw the first basic primitive, the second basic primitive, and display the animation effect 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) in interface 703 to generate sampling point set 2 (i.e., another example of the above sampling point set); the sampling point set 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 the two virtual primitives (such as sampling point B3 or sampling point B9), and some sampling points are located in the intersection area of ​​the two virtual primitives (such as sampling point B6).

[0170] In step 503, the electronic device determines that the first target primitive and the second virtual primitive intersect based on a target sampling point in the sampling point set. The target sampling point is located within both the first target primitive and the second virtual primitive. The target sampling point may be at least one sampling point in the sampling point set.

[0171] After the electronic device generates the sampling point set, it can determine, from the sampling point set, a 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 the electronic device determines the target sampling point from the sampling point set, it can determine, based on the target sampling point, that the first target primitive and the second virtual primitive intersect (or collide).

[0172] 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 collision detections between two primitives. For example, collision detection between primitives A, B, and C can be performed separately by performing collision detection between primitives A and B, primitives A and C, and primitives B and C.

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

[0174] Step 01): Sampling point screening. 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 instance of the first information) of the first target primitive and records the first SDF value. Similarly, the electronic device substitutes the coordinates of the same sampling point M into the second SDF (i.e., an instance of the second information) of the second virtual primitive and records the second SDF value.

[0175] 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 outline) 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 outline) of the second virtual primitive.

[0176] 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 the at least one sampling) is simultaneously located within the first target primitive and the second virtual primitive, i.e., 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, i.e., the first target primitive and the second virtual primitive do not intersect (or collide).

[0177] For example, at time T1, the positions of the first basic graphic element and the second basic graphic element in the interface 800 (ie, an example of the first interface) are as follows: Figure 8A As shown; the electronic device takes sampling point P1 in area 801 of the first basic primitive, sampling point P2 in area 802 of the second basic primitive, and sampling point P3 in the interface 800 excluding area 801 and area 802; the electronic device substitutes P1, P2 and P3 into the first SDF and the second SDF for calculation according to the above method 600; the calculation result shows that P1 is located in the first basic primitive, P2 is located in the second basic primitive, and P3 is located neither in the first basic primitive nor in the second basic primitive; the electronic device determines based on the calculation result that there is no target sampling point of the first basic primitive and the second basic primitive in both area 801 and area 802 in the interface 800; in other words, the electronic device determines that the first basic primitive and the second basic primitive do not collide at time T1.

[0178] For another example, at time T2, the positions of the first basic graphic element and the second basic graphic element in the interface 800 are as follows: Figure 8B As shown; the electronic device samples point P11 in area 803 of the first basic primitive, samples point P22 in area 804 of the second basic primitive, and samples point P33 in the interface 800 excluding area 803 and area 804; the electronic device substitutes P11, P22 and P33 into the first SDF and the second SDF for calculation according to the above method 600; the calculation results show that P11 is located in the first basic primitive, P22 is located in the second basic primitive, and P33 is located in both the first basic primitive and the second basic primitive; based on the calculation results, the electronic device determines that the first basic primitive and the second basic primitive have a sampling point P33 in the interface 800 that is simultaneously in area 803 and area 804; in other words, the electronic device determines that the first basic primitive and the second basic primitive collide at time T2.

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

[0180] In some examples, the deformed (i.e., shape-changed) first basic primitive can be understood as the primitive obtained after the first basic primitive undergoes operations such as collision detection and primitive fusion processing; similarly, the deformed second basic primitive can be understood as the primitive obtained after the second basic primitive undergoes operations such as collision detection and primitive fusion processing.

[0181] After the electronic device performs collision detection and primitive fusion on the first basic primitive and the second basic primitive in the first interface, it can display the fused primitive (such as the target drawing primitive described below) on the second interface; the fused primitive may include the deformed first basic primitive and the deformed second basic primitive. For example, the electronic device may present the initial first basic primitive and the second basic primitive on the first interface at time T1; then, at time T2, it may display the deformed first basic primitive and the deformed second basic primitive on the second interface; wherein, time T1 and time T2 may be time points of continuous frames in the animation sequence, or time points of non-continuous frames, and the first interface and the second interface may be two temporally adjacent (or temporally non-adjacent) display interfaces displaying these continuous frames (or non-continuous frames).

[0182] In other words, the first and second interfaces can be understood as different frames displayed successively by the electronic device; the first interface can be displayed before the second interface. The first and second interfaces can be adjacent frames; or, the first and second interfaces can be separated by a few frames, a dozen frames, or even dozens of frames.

[0183] Exemplarily, the first interface may be an interface corresponding to the graphic state displayed by the electronic device at the previous moment (or the current moment), and the second interface may be an interface corresponding to the graphic state displayed by the electronic device at the current moment (or the next moment); for example, the electronic device may 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.

[0184] For example, Figure 4C As shown, at time T0, the mobile phone (i.e., an example of an electronic device) can display the initial graphic 401 on the interface 400 (i.e., an example of the first interface); at time T2, the mobile phone can display the graphic 406 after operations such as fusion processing on the interface 407 (i.e., an example of the second interface); the 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, the interface 406 and the interface 400 are not adjacent time frames, but are the interface 403 that differs by time T1; it should be noted that when the interface 400 is the first interface, the interface 403 can be understood as the second interface; when the interface 403 is the first interface, the interface 406 can be understood as the second interface.

[0185] In summary, in the above method 500A, the electronic device can determine whether the first target primitive and the second virtual primitive intersect (i.e., whether a collision occurs) within the first interface based on the function information of the first target primitive (or second virtual primitive), such as the function expression of the shape of the first target primitive (or second virtual primitive) and the function value range. Since the function information can accurately describe the shape and boundary of the target primitive, performing intersection detection based on the function information can provide higher accuracy, especially when processing target primitives with complex shapes, the function information can capture more details, thereby significantly reducing the possibility of misjudgment. In addition, the function information can directly reflect the shape and boundary of the target primitive without the need for additional geometric calculations or approximate processing. Therefore, in some scenarios, using a function method for intersection detection may be more efficient than the traditional bounding box method.

[0186] The method 500A is described above. Hereinafter, another method 700 provided by the present application will be described. In addition to the above steps 501 to 504, the method 700 may further include the following steps:

[0187] Step 505: When the electronic device determines that the first target primitive intersects the second virtual primitive, the electronic device may determine third information according to the first information and the second information.

[0188] The third information is function information of the target intersection area within the first interface, and the target sampling point is located in the target intersection area. For the function information, reference may be made to the relevant description of the function information in step 501 above, which will not be repeated here.

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

[0190] It should be noted that the area formed between the virtual primitives can be displayed on the interface or not, and this embodiment of the application does not limit this. In actual application, the visibility of the area can be set according to the requirements of the dynamic effect design.

[0191] For example, Figure 8CAs shown, at time T0, the first basic primitive (ie, an example of the first target primitive) collides with the second virtual primitive to form a target intersection area 806; the target intersection area 806 may include the sampling point P0 (ie, an example of the target sampling point).

[0192] In some examples, after the electronic device determines the target intersection area, it can use a function to represent the target intersection area; for example, the first information is the first SDF, and the second information is the second SDF. The electronic device can calculate and process the first SDF and the second SDF to obtain the function expression F of the target intersection area (that is, an example of the third information).

[0193] When the electronic device determines that the first target primitive and the second virtual primitive intersect through method 600, it can generate third information (such as SDF_AB) representing the intersection area between the two based on the geometric property functions of the two (for example, the first SDF_A and the second SDF_B); the third information can be used to describe the functional representation of the target intersection area within the first interface; for example, the electronic device can first determine the target intersection area generated after the two target primitives intersect according to method 600; then perform logical operations on SDF_A and SDF_B (such as taking the union, intersection or difference) to generate SDF_AB.

[0194] Step 506: The electronic device may perform a fusion process on the third information through a fusion operation to generate fourth information.

[0195] Among them, the fourth information is the function information of the fusion area within the first interface; the fusion area is the area obtained after the target intersection area is fused; the fourth information may include but is not limited to the function expression of the fusion area 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.

[0196] After the electronic device determines the target intersection area, it can use the above-mentioned fusion operation to fuse the target intersection area (for example, smoothing, intersection, etc.) to generate a fusion area; due to different user requirements for animation effects, the electronic device can not only fuse the target intersection area, but also perform separation processing or fusion separation processing, etc., and the embodiments of the present application are not limited to this.

[0197] Since the third information is a kind of function information, such as a function expression; therefore, the electronic device can perform mathematical processing on the third information through a fusion operation to generate fourth information; the fourth information is also a kind of function information, such as a certain form of function expression.

[0198] In order to meet the graphics processing needs of users in different scenarios, electronic devices can quickly construct a fusion area with precise boundaries and shapes by performing fusion operations such as intersection, union, difference and smooth intersection on the target intersecting areas without manual drawing or editing, which greatly improves the efficiency and accuracy of fusion area operations. For example, through operators such as smooth intersection, the visual effect of the fusion area can be improved, making the generated fusion area more natural and smooth.

[0199] 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 target intersection area, and the fourth SDF may be used to describe the shape of the primitives in the target intersection area after fusion processing.

[0200] The third SDF can implicitly represent the shape features such as the boundary and outline of the target intersection area; similarly, the fourth SDF can implicitly represent the shape features such as the boundary and outline of the fusion area.

[0201] Electronic devices can simplify the calculation process by using SDF to represent the target intersection area. For example, electronic devices can quickly determine whether two target primitives intersect and accurately calculate the shape of the target intersection area simply by comparing their SDF values. This method can not only improve computing 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 area, which can make the shape of the fusion area present a smooth transition effect, avoiding visual or physical discontinuities caused by shape mutations.

[0202] In this embodiment, after determining that the first target primitive intersects with the second virtual primitive (i.e., collides), the electronic device can generate third information based on the function information of the two (such as the first information and the second information); thereafter, by performing fusion operations such as smoothing and intersection on the third information, the transition of the target intersection area can be made more natural and smooth; this function-based method of processing the target intersection area has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection area can be made smoother, avoiding the jagged or discontinuous phenomena that may occur in the masking method; 2) The function can accurately describe the shape and boundary of the target intersection area, avoiding the loss of accuracy caused by pixelation or approximation in the masking method; 3) The function-based fusion operation is usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, so in some scenarios it can significantly reduce the amount of calculation and improve processing efficiency; in short, the function-based processing method can not only improve the visual effect and calculation accuracy, but also reduce the calculation overhead and optimize rendering performance.

[0203] The method 700 is described above. Hereinafter, another method 800 provided by the present application will be described. In addition to the above steps 501 to 504, and steps 505 and 506, the method 800 may further include the following steps:

[0204] Step 507: The electronic device may generate fifth information based on the first information, the second information, and the fourth information. The fifth information is function information of a target drawing primitive. The target drawing primitive is a primitive obtained by fusing the first basic primitive with the second basic primitive. The fifth information is used for drawing the target drawing primitive.

[0205] The target drawing element can be understood as the graphic state corresponding to a certain moment after the animation starts playing. Since the animation changes over time, the animation will present different graphic states at different times during the playback period (such as 2 seconds or 5 seconds).

[0206] For example, Figure 9A As shown, the graphic state of the UI control's dynamic effect A changes over time during playback; for example, at the start of playback, the electronic device can display a graphic 901 at the start time on the first interface; the graphic 901 can include graphic element 1 (i.e., an example of the first basic graphic element), graphic element 2 (i.e., an example of the second basic graphic element) and graphic element 3; as playback progresses, the electronic device can display an intermediate graphic 902 (i.e., an example of the target drawing graphic element) at a certain intermediate moment on the second interface; the intermediate graphic 902 can include deformed graphic element 1 (i.e., an example of the deformed first basic graphic element), deformed graphic element 2 (i.e., an example of the deformed second basic graphic element) and deformed graphic element 3; and at the end of playback, the electronic device displays a graphic 903 at the end time on the Nth interface, where N is an integer greater than 2; it should be noted that the intermediate graphic 902 and graphic 903 can be graphics after fusion processing; or, they can also be Figure 9B The graph 904 is shown after the fusion process and then the separation process.

[0207] Because the first information, the second information, and the fourth information are all functional information, such as a function expression, the electronic device can generate fifth information by performing mathematical processing (union, intersection, etc.) on the first information, the second information, and the fourth information; the fifth information is also functional information, such as a certain form of function expression. The electronic device uses a function representation (such as an SDF) for the target drawing primitive, which facilitates the subsequent rapid drawing and rendering of the target drawing primitive based on the fifth information, thereby avoiding the need for multiple processing stages when displaying the target drawing primitive using traditional masking methods, improving the efficiency of graphics processing, and optimizing the rendering performance of the device.

[0208] The method 800 is described above. Hereinafter, another method 900 provided by the present application will be described. In addition to the above steps 501 to 504, and steps 505, 506, and 507, the method 900 may further include the following steps:

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

[0210] In some examples, the electronic device can present the motion effect of the first control within a preset time period through the first basic graphic element and the second basic graphic element; that is, when the electronic device plays the motion effect of the first control within the preset time period, the user can see the initial first basic graphic element (or second basic graphic element) at the start moment and the first basic graphic element (or second basic graphic element) deformed during the playback process (or at the end of the playback) on the above-mentioned first interface and second interface; for example, at the start moment of the motion effect playback, the electronic device can display the initial first basic graphic element and the second basic graphic element (such as Figure 4A As shown), during the playback process (or at the end of the playback), the electronic device can display the deformed first basic graphic element and the deformed second basic graphic element (as shown in FIG. Figure 4B or Figure 4C As shown); Since the target drawing primitive is one of the graphic states composed of the deformed first basic primitive and the deformed second basic primitive, the electronic device can display the target drawing primitive on the second interface (as shown); Figure 4B or Figure 4C As shown); the target drawing primitive can be understood as the graphic state of the first control's dynamic effect at the first moment.

[0211] The above-mentioned preset duration may include a first moment, which may be 0.5s (seconds), 1s, 1.5s, 2s, 2.5s or 3s, etc.

[0212] The first control can be understood as a dynamic control or a deformable control. Its types may 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 animations, hover color changes, deformation, etc.) and gesture feedback animation types (such as the elastic effect of sliding to delete, the adsorption animation of dragging elements, long press and floating micro-interactions, etc.).

[0213] The first moment can be a moment after the animation effect of the first control starts playing, such as the end of the play, or a moment in the middle of the play. The first moment can be 300ms (milliseconds) or 2s, etc.

[0214] After the electronic device generates the target drawing primitive, it can draw it on the second interface. For example, when a user opens the main interface of an application, if the main interface includes a dynamic UI control, the software system within the electronic device can automatically trigger a system event, causing the electronic device to display the current graphic X (i.e., an example of the target drawing primitive) of the dynamic effect of the UI control (i.e., an example of the first control) on the second interface.

[0215] It should be noted that in some examples, when an electronic device needs to display an animation effect of a first control (such as a button, UI control, icon, or other interactive element on a certain interface), it may not automatically start the animation effect, but requires the user to actively trigger the animation effect. In other words, the electronic device needs to receive some kind of user action (such as a click, touch, slide, etc.) before it can start playing or displaying the animation effect of the first control.

[0216] In some other examples, the electronic device may display the animation of the first control based on a system event, such as displaying the animation of a UI control based on a certain system event.

[0217] For example, when the electronic device receives a certain operation from the user (or receives a system event), it can respond to the operation event (or system event) by displaying or playing the animation effect (such as deformation animation, fusion animation, etc.) of the first control in the 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 the preset / designated area in an animated form.

[0218] In some embodiments, before determining whether the first target primitive and the second virtual primitive collide, the electronic device needs to know the specific positions of the first basic primitive and the second basic primitive within the first interface; when the specific positions of the primitives are determined, the electronic device can perform sampling within the first interface, generate a set of sampling points, and determine whether the two primitives collide based on the set of sampling points.

[0219] It should be noted that since the first virtual graphic element (or the second virtual graphic element) is the graphic element formed by expanding the first basic graphic element (or the second basic graphic element), after 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).

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

[0221] Step 509: The electronic device may determine the force acting on the first basic graphic element and the force acting on the second basic graphic element respectively according to the first motion constraint.

[0222] It should be noted that motion constraints can generally be understood as constraints imposed on the movement, deformation or force of basic graphics elements based on some physical laws; for example, in a physical simulation scenario, electronic equipment needs to calculate the force of each basic graphics element (such as the first basic graphics element, etc.) based on the first motion constraint; and the first motion constraint can be understood as a law of mechanics in physics; electronic equipment can analyze and determine the force exerted on each basic graphics element based on the law of mechanics.

[0223] The above-mentioned 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 element, k is the elastic coefficient of the element; 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 a negative value; x is the total elongation (or contraction); the presence of a negative sign indicates that the direction of the elastic force is opposite to the elongation or compression direction of the spring.

[0224] For example, Figure 9C As shown, the motion effect of the first control can be presented by 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 motion effect of the first control, it can construct motion effect constraints for the first basic graphic element and the second basic graphic element; for example, the two basic graphic elements are connected by a spring 906; the electronic device can calculate the forces (such as elastic force or friction force, etc.) acting on the two basic graphic elements by Hooke's law; for example, the elastic force acting on the first basic graphic element is F1, and the elastic force acting on the second basic graphic element is F2.

[0225] It should be noted that in a physical simulation scenario, the above-mentioned first basic primitive (or second basic primitive) can be regarded as an object in a physical simulation, etc.; the electronic device needs to identify the basic primitive and obtain its properties, such as mass, shape, position and other parameters; after the electronic device calculates the force on each basic primitive, it can update the position, speed and other parameters of each basic primitive according to the force results.

[0226] Step 510: The electronic device may determine first position information according to the second motion constraint and the force applied to the first basic graphic element.

[0227] After the electronic device determines the force on the first basic primitive, it can calculate the first position information according to the second motion constraint; wherein the first position information can be understood as the position information of the first basic primitive (i.e., an example of the first target primitive) in the first interface; the position information may include but is not limited to the geometric center of the first basic primitive (e.g., Figure 9C P1 in the figure) is the coordinate of the first interface; in addition, in addition to determining the position of the first basic primitive on the first interface, the first position information can also determine the position of the first virtual primitive on the first interface; since the first virtual primitive is the primitive formed by expanding the first basic primitive, the first position information can also be understood as the position information of the first virtual primitive on the first interface.

[0228] The second motion 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 in the first interface based on the law of motion.

[0229] 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 basic primitive or the second basic primitive) and the force F it is subjected to.

[0230] Step 511: The electronic device may determine second position information according to the second motion constraint and the force applied to the second basic graphic element.

[0231] After the electronic device determines the force on the second basic primitive, it can calculate the second position information according to the second motion constraint; wherein the second position information can be understood as the position information of the second basic primitive in the first interface; the position information may include but is not limited to the geometric center of the second basic primitive (such as Figure 9C P1 in the figure) is the coordinate of the first interface; in addition, in addition to determining the position of the second basic primitive on the first interface, the second position information can also determine the position of the second virtual primitive on the first interface; since the second virtual primitive is the primitive formed by expanding the second basic primitive, the second position information can also be understood as the position information of the second virtual primitive on the first interface.

[0232] The second motion 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 in the first interface based on the law of motion.

[0233] It should be noted that the execution order of step 510 and step 511 is not particular, and they can be executed simultaneously or separately.

[0234] For example, the electronic device can determine the acceleration of the first basic graph element and the second basic graph element respectively according to Newton's second law; for the first basic graph element, F1=m1*a1, and for the second basic graph element, F2=m2*a2, where "*" represents the product, F1 is the spring force exerted on the first basic graph element, m1 is the mass of the first basic graph element, and a1 is the acceleration exerted on the first basic graph element; similarly, F2 is the spring force exerted on the second basic graph element, m2 is the mass of the second basic graph element, and a2 is the acceleration exerted on the second basic graph element; the electronic device can obtain a1=F1 / m1 and a2=F2 / m2 according to F1=m1*a1 and F2=m2*a2; here, " / " represents the division operation; after that, the electronic device The sub-device can calculate the respective speeds of the first basic primitive and the second basic primitive based on the speed formula v=v0+a*t, that is, v1=v0+a1*t and v2=v0+a2*t; wherein, v1 is the speed of the first basic primitive at time t, v2 is the speed of the second basic primitive at time t, and v0 is the initial speed of the first basic primitive and the second basic primitive; the electronic device calculates the moving distance of the first basic primitive in the first interface according to the displacement formula S1=v1*t, and calculates the moving distance of the second basic primitive in the first interface according to the displacement formula S2=v2*t; the electronic device determines the moving position of the first basic primitive (or the second basic primitive) in the first interface at time t based on S1 (or S2), for example, moving to Figure 9C The P1 position (or P2 position) shown, and the coordinates of the P1 position (or P2 position) are an example of the first position information (or the second position information).

[0235] In this embodiment, the electronic device determines the current position of the target graphic element (such as the first target graphic element and the second virtual graphic element) through physical laws (such as Newton's laws of motion, Hooke's law, etc.), which has the following advantages: on the one hand, the graphic element movement position can be determined based on the motion constraint, so that the motion trajectory of the graphic element is closer to the real situation; on the other hand, the position and dynamic changes of the graphic element can be accurately calculated based on the motion constraint, effectively ensuring the continuity and consistency of the animation; this not only avoids the picture jumping or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of the animator to adjust frame by frame, thereby improving the overall efficiency of animation production.

[0236] The above method 500A is described in detail. Hereinafter, another method 500B for image processing will be described. Figure 5B As shown; it should be noted that the execution subject involved in method 500B is similar to the execution subject of method 500A above, and will not be repeated here.

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

[0238] Step 5001: The electronic device displays a first interface, where the first interface includes a first SDF primitive and a second SDF primitive;

[0239] It should be noted that for understanding how the electronic device displays the first interface, reference can be made to the relevant description in step 501 above, which will not be repeated here. In addition, the first SDF graphic element can be understood as an example of an electronic device using SDF to represent the above-mentioned first basic graphic element, and the second SDF graphic element can be understood as an example of an electronic device using SDF to represent the above-mentioned second basic graphic element. Therefore, for understanding step 5001, reference can be made to the relevant description in steps 501 and 502 above, which will not be repeated here.

[0240] 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 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;

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

[0242] Since the first virtual primitive and the second virtual primitive are both SDF primitives, the function information of the first virtual primitive (or the second virtual primitive) at least includes the SDF function expression and the corresponding function scope; specifically, these function information enables the electronic device to accurately describe the shape and position of the first basic primitive and the second basic primitive in the first interface through the SDF function.

[0243] Before performing spatial sampling within the first interface, the electronic device may first obtain function information of the first virtual primitive and the second virtual primitive within the first interface to facilitate determining the shape and position of the first virtual primitive and the second virtual primitive within the first interface. After determining the shape and position of the first virtual primitive (or the second virtual primitive), the electronic device may perform spatial sampling within the first interface to generate a set of sampling points; the set of sampling points may include points within the interior area and its boundary of the first virtual primitive, points within the interior area and its boundary of the second virtual primitive, and all other points within the first interface except for the first two areas and their boundary.

[0244] For the spatial sampling method, please refer to the relevant description in step 502 above, which will not be repeated here.

[0245] Step 5003: The electronic device determines that the first virtual primitive intersects the second virtual primitive based on a 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.

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

[0247] Step 5004: The electronic device displays a second interface, where the second interface includes the deformed first SDF primitive and the deformed second SDF primitive.

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

[0249] In the above-mentioned method 500B, the electronic device can determine whether the first virtual primitive and the second virtual primitive intersect (i.e., whether a collision occurs) within the first interface based on the 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 function value range. Since the function information can accurately describe the shape and boundary of the virtual primitive, performing intersection detection based on the function information can provide higher accuracy, especially when processing virtual primitives with complex shapes, the function information can capture more details, thereby significantly reducing the possibility of misjudgment. In addition, the function information can directly reflect the shape and boundary of the virtual primitive without the need for additional geometric calculations or approximate processing. Therefore, in some scenarios, using a function method for intersection detection may be more efficient than the traditional bounding box method.

[0250] The method 500B is described above. Hereinafter, another method 1100 provided by the present application will be described. In addition to the above steps 5001 to 5004, the method 1100 may further include the following steps:

[0251] Step 5005: When the electronic device determines that the first virtual primitive intersects the second virtual primitive, function information of the target intersection area can be determined 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 in the target intersection area.

[0252] The target intersection area can be understood as an overlapping area formed by the intersection of the first virtual primitive and the second virtual primitive.

[0253] It should be noted that, since the first virtual primitive is an example of the first target primitive described above, the understanding of step 5005 may refer to the understanding of step 505 described above, and will not be repeated here.

[0254] Step 5006: The electronic device can fuse the function information of the target intersection area through a fusion operation to generate function information of the fusion area. The fusion operation includes at least one of the following: a union operation, an intersection operation, a smoothing operation, a smooth intersection operation, a smooth union operation or a transform domain operation. The fusion area is the area obtained after the target intersection area is fused.

[0255] It should be noted that, since the first virtual primitive is an example of the first target primitive described above, the understanding of step 5006 may refer to the understanding of step 506 described above, and will not be repeated here.

[0256] In this embodiment, when the electronic device determines that the first virtual primitive intersects with the second virtual primitive (i.e., a collision occurs), it can generate function information of the target intersection area based on the function information of the two; thereafter, by performing smoothing, intersection and other fusion operations on the function information of the target intersection area, the transition of the target intersection area can be made more natural and smooth; this function-based method of processing the target intersection area has the following advantages: 1) Through mathematical fusion or smoothing, the transition of the target intersection area can be made smoother, avoiding the jagged or discontinuous phenomena that may occur in the masking method; 2) The function can accurately describe the shape and boundary of the target intersection area, avoiding the loss of precision caused by pixelation or approximation in the masking method; 3) The function-based fusion operation is usually completed at the mathematical level, without relying on pixel-level point-by-point calculations, so in some scenarios it can significantly reduce the amount of calculation and improve processing efficiency; in short, the function-based processing method can not only improve visual effects and calculation accuracy, but also reduce calculation overhead and optimize rendering performance.

[0257] The method 1100 is described above. Hereinafter, another method 1200 provided by the present application will be described. In addition to the above steps 5001 to 5004, and steps 5005 and 5006, the method 1200 may further include the following steps:

[0258] Step 5007: The electronic device can generate 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 area. The target drawing primitive is an SDF primitive obtained by 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 drawing the target drawing primitive.

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

[0260] In some scenarios, when an electronic device determines that a first virtual primitive collides with a second virtual primitive, it can generate 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 area, so that subsequent electronic devices can quickly draw and render the target drawing primitive according to the function information of the target drawing primitive, thereby avoiding the situation where traditional masking methods require multiple processing stages to display the target drawing primitive, improving the efficiency of graphics processing and optimizing the rendering performance of the device.

[0261] The method 1200 is described above. Hereinafter, another method 1300 provided by the present application will be described. In addition to the above steps 5001 to 5004, and steps 5005, 5006, and 5007, the method 1300 may further include the following steps:

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

[0263] Among them, the above-mentioned first SDF primitive and second SDF primitive can be used to present the animation effect of the first control within a preset duration; and 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 above-mentioned preset duration may include the first moment.

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

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

[0266] Before step 5002, the present application provides another method 1400 for the electronic device to determine the specific positions of the first SDF primitive and the second SDF primitive. In addition to steps 5001 to 5004, 5005, 5006, 5007, and 5008 described above, this method 1400 may further include the following steps:

[0267] Step 5009: The electronic device may determine the force on the first SDF primitive and the force on the second SDF primitive respectively according to the first motion constraint.

[0268] Step 5010: The electronic device may determine first position information according to the second motion constraint and the force applied to the first SDF primitive.

[0269] Step 5011: The electronic device may determine second position information based on the second motion constraint and the force applied to the second SDF primitive. The second position information is position information of the second SDF primitive, and the second position information is used to determine the position of the second virtual primitive on the first interface.

[0270] It should be noted that since the first SDF primitive (or the second SDF primitive) is an example of the above-mentioned first basic primitive (or the second basic primitive), 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, and will not be repeated here.

[0271] In this embodiment, the electronic device can determine the current position of a virtual graphic element (such as a first virtual graphic element and a second virtual graphic element) 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 moving position of the graphic element based on motion constraints can make the motion trajectory of the graphic element closer to the real situation; on the other hand, based on the motion constraints, the position and dynamic changes of the graphic element can be accurately calculated, effectively ensuring the continuity and consistency of the animation; this not only avoids the picture jumping or abruptness caused by manual adjustment errors, making the overall animation performance smoother and more natural, but also reduces the workload of the animator to adjust frame by frame, thereby improving the overall efficiency of animation production.

[0272] For ease of understanding, the following Figure 10 and Figure 11 The software architecture of the electronic device shown further illustrates the specific execution steps of the above-mentioned graphics processing method.

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

[0274] At the system API layer, the electronic device sets 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 be flexibly deformed on the UI page, for example, the flexible deformation may include changes in the shape, size, position, etc. of the control; by introducing this control API, the electronic device makes the control interaction experience on the UI page better.

[0275] At the UI framework layer, the electronic device implements dynamic effects such as deformation, fusion, and separation of controls (such as the first control) on the UI page through an animation module, a measurement / layout calculation module, and a drawing module.

[0276] At the rendering engine level, the lightweight drawing pipeline is used to convert the target drawing primitives expressed in functions into graphics drawing instructions and execute these instructions. This lightweight drawing pipeline optimizes the rendering process, reduces unnecessary calculations and resource consumption, and thus improves rendering efficiency.

[0277] based on Figure 10 The software architecture shown in the figure shows the process of drawing flexible dynamic effects (i.e., animation effects generated by flexible deformation, referred to as flexible dynamic effects) of UI controls by electronic devices as follows:

[0278] Step B1): When the electronic device starts application 1, it loads 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, dialog boxes and other components; the basic graphic elements (such as the first basic graphic element and the second basic graphic element) corresponding to the flexible motion effect of the UI control can be represented by mathematical functions, such as SDF.

[0279] It should be noted that the electronic device can support flexible motion effects of various UI controls on the UI page file through the flexible interactive control API.

[0280] Step B2): The electronic device parses the UI page file, obtains information of each UI control on the UI page, and sends information of UI controls supporting flexible motion effects to the measurement / layout calculation module.

[0281] Step B3): The measurement / layout calculation module can determine the size and position information (such as size, position, etc.) 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.

[0282] Step B4): The animation module can construct the physical scene information of each basic graphic element corresponding to the flexible motion effect based on the information and size and position information of the UI control; the physical scene information can include 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 into the animation module for subsequent updating of the graphic element position.

[0283] Step B5): The animation module regards the above-mentioned basic graphics elements as target objects and calculates the forces acting on the target objects based on the first motion constraint; for example, two target objects are connected by a spring; the animation module can calculate the forces acting 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.) in combination with the animation step parameters (such as the time interval t).

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

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

[0286] Step B6): After receiving the position information of each basic primitive from the deformation component drawing module, the drawing module can obtain function information (such as a function expression) of each basic primitive and determine whether the primitives intersect (or collide) based on the position information of each basic primitive. If the basic primitives intersect, it indicates that a collision has occurred between the basic primitives. The deformation component drawing module can then perform a fusion calculation on the area where the basic primitives intersect to obtain a fused area (i.e., the fused primitive). This fused area can be represented by a function (such as an SDF).

[0287] Step B7): The drawing module may perform drawing processing on the function information of the fusion area to generate drawing attribute information.

[0288] It should be noted that the above steps B3) to B5) can be executed in the fragment shader of the GPU inside the electronic device, and of course can also be performed in other rendering modules. The embodiment of the present application does not limit the specific execution module where steps B3) to B5) are located.

[0289] The drawing module may send drawing attribute information to the rendering engine module.

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

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

[0292] Step B9): After receiving the drawing instruction, the GPU may draw the flexible motion effect on the display screen of the electronic device according to the drawing instruction.

[0293] Figure 11 A software architecture for implementing motion effects of UI controls in another electronic device is shown.

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

[0295] At the system API layer, electronic devices set 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 above Figure 10 The description of the control API in the shown architecture is not repeated here.

[0296] At the system API level, the animation API can perform related operations based on event input.

[0297] At the UI framework layer, electronic devices can implement dynamic effects such as deformation, fusion, and separation of controls (such as the first control) on the UI page through the animation module, measurement / layout calculation module, and drawing module. For example, the physics simulation module in the animation module can be used to calculate the dynamic effect constraints between multiple basic graphics elements corresponding to the flexible dynamic effects of the UI control and update the positions of multiple basic graphics elements at different times.

[0298] The graphic primitive library can be used to represent each basic graphic primitive corresponding to the UI control with corresponding function information (such as function expression, etc.).

[0299] At the rendering engine level, the lightweight drawing pipeline can be used to convert basic primitives expressed in functions into graphics drawing instructions and execute these instructions. This lightweight drawing pipeline optimizes the rendering process, reduces unnecessary calculations and resource consumption, and thus improves rendering efficiency.

[0300] based on Figure 11The software architecture shown in the figure shows the process of drawing flexible dynamic effects of UI controls in electronic devices as follows:

[0301] Step C1): When the animation API detects an event input that triggers the startup 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 control (such as the attribute information of the above-mentioned UI control, the basic graphic element composition of the flexible animation effect, 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 and other components; 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 SDF.

[0302] It should be noted that the electronic device can support flexible motion effects of various UI controls on the UI page file through the flexible interactive control API.

[0303] Step C2) The animation API can determine whether there is a UI control that supports flexible motion effects based on the information of the UI control; if so, an indication message X is sent to the animation module; if not, no indication message X is sent; the indication message X can be used to instruct the animation module to construct motion effect constraints for multiple basic graphic elements corresponding to the flexible motion effects; for example, the flexible motion effects of the UI control can be presented through graphic element 1 and graphic element 2, and the animation module can construct motion effect constraints for graphic element 1 and graphic element 2 based on the indication message X; the motion effect constraints are used to constrain the changing forms of graphic element 1 and graphic element 2 at different times during the flexible motion effect display process.

[0304] Step C3): After the animation module receives the indication information X, it can construct the physical scene information of multiple basic graphic elements corresponding to the above-mentioned flexible motion effect through the physical simulation module; the physical scene information may include objects participating 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 updating of the graphic element position.

[0305] For example, the formation of the above-mentioned flexible motion effect can be presented by two circular basic primitives; the animation module regards the two circular basic primitives (i.e., an example of the first basic primitive and the second basic primitive) as two circular objects, and calculates the forces acting on the two circular objects according to the first motion effect constraint; for example, the two circular objects are connected by a spring; the animation module can calculate the forces acting on the two circular objects according to Hooke's law; and then calculates the position information of the two circular objects at the current moment (such as the first position information and the second position information, etc.) in combination with the animation step parameters (such as the time interval t).

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

[0307] After the animation module determines the position information of each target graphic element, it can send the position information to the drawing module.

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

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

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

[0311] The deformation component drawing module can save the function of the fusion area to the primitive library.

[0312] Step C5): When performing drawing processing, 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 SDF values ​​less than 0, the pixels inside the smoothed primitive can be colored in subsequent drawing; and for areas with SDF values ​​greater than 0, the pixels outside the smoothed primitive do not need to be colored in subsequent drawing.

[0313] 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, and of course can also be performed in other rendering modules. The embodiment of the present application does not limit the specific execution module where steps C3) to C5) are located.

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

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

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

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

[0318] Figure 12 A schematic diagram of a scene in which a GPU displays a target drawing primitive is shown.

[0319] It should be noted that before the GPU draws the target drawing primitive, the GPU has already Figure 10 or Figure 11 The processing flow shown (such as generating function information of target primitives, building dynamic constraints, determining the position of target drawing primitives, primitive collision detection and fusion calculation, etc.) obtains the function information of the target drawing primitives.

[0320] Since the target drawing primitive (i.e. the primitive after fusion processing) is represented by a function, when the GPU draws the target drawing primitive, it needs to convert the function of the target drawing primitive into a data structure that can be processed by the graphics rendering pipeline, and complete the drawing through the vertex shader, fragment shader and other stages. The specific steps are as follows:

[0321] (1) Construct vertex data of the target drawing primitive. The GPU converts the target drawing primitive into vertex data (such as position, color, texture coordinates, etc.) according to the function information of the target drawing primitive.

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

[0323] (3) The fragment shader determines whether each fragment belongs to the target drawing primitive (such as calculating the distance from the pixel to the boundary of the target drawing primitive) based on the above function information (such as SDF), and further processes the fragments belonging 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 send it to the subsequent rendering pipeline stage.

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

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

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

[0327] The above details examples of the graphics processing methods provided by this application. It is understood that, in order to implement the aforementioned functions, the electronic device includes hardware structures and / or software modules corresponding to each function. Those skilled in the art will readily appreciate that, in conjunction with the units and algorithmic steps of the various examples described in the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is implemented in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this application. This application may divide the graphics processing method into functional units based on the aforementioned method examples. For example, each function may be divided into separate functional units, or two or more functions may be integrated into a single unit. Such integrated units may be implemented in either hardware or software functional units. It should be noted that the division of units in this application is illustrative and represents only one logical functional division; actual implementation may employ different division methods.

[0328] Figure 13 A schematic structural diagram of an electronic device provided by the present application is shown. Figure 13 The dashed line indicates that the unit or module is optional. The electronic device 1300 can be used to implement the method described in the above method embodiment. The electronic device 1300 can be a server, a terminal device, or a chip (system).

[0329] The electronic device 1300 includes one or more processors 1301, which can support the electronic device 1300 to implement Figure 5A as well as Figure 5BThe method in the corresponding method embodiment. 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 of the software programs. The electronic device 1300 can also include a communication unit 1305 to implement signal input (reception) and output (transmission).

[0330] The 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 above embodiments.

[0331] 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 .

[0332] For another 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 .

[0333] 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 the processor 1301 to generate instructions 1303, so that the processor 1301 performs the method described in the above method embodiment according to the instructions 1303. Optionally, data may also be stored in the memory 1302. Optionally, the processor 1301 may also read the data stored in the memory 1302. The data may be stored at the same storage address as the program 1304, or the data may be stored at a different storage address than the program 1304.

[0334] The processor 1301 and the memory 1302 may be provided separately or integrated together, for example, integrated on a system on chip (SOC) of an electronic device. Specific manners of the method for the processor 1301 to perform graphics processing may be referred to the relevant description in the method embodiment.

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

[0336] The present application also provides a computer program product that, when executed by a processor 1301, implements any method embodiment of the present application. The computer program product may be stored in a memory 1302, for example, a program 1304. The program 1304 undergoes preprocessing, compilation, assembly, and linking to be converted into an executable object file that can be executed by the processor 1301.

[0337] The present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a computer, implements any method embodiment of the present application. The computer program may be a high-level language program or an executable target program.

[0338] The computer-readable storage medium is, for example, memory 1302. Memory 1302 may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (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).

[0339] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and equipment and the technical effects produced can refer to the corresponding processes and technical effects in the aforementioned method embodiments, and will not be repeated here.

[0340] In the several embodiments provided in this application, the disclosed systems, devices, and methods can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not performed. The device embodiments described above are merely illustrative, and the unit splitting is only a logical function splitting. In actual implementation, there may be other splitting methods, and multiple units or components may be combined or integrated into another system.

[0341] In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the above coupling includes electrical, mechanical or other forms of connection.

Claims

1. A method for graphics processing, characterized in that: The method comprises: Displaying a first interface, wherein the first interface includes a first basic graphic element and a second basic graphic element; Performing spatial sampling on the first interface based on first information and second information to generate a sampling point set, wherein the first information includes function information of a first target primitive, the second information includes function information of a second virtual primitive, and the sampling point set includes at least one sampling point; wherein the first target primitive is the first basic primitive or the first virtual primitive, the first virtual primitive is a primitive formed by expanding the first basic primitive, and the second virtual primitive is a primitive formed by expanding the second basic primitive; Determining that the first target primitive intersects the second virtual primitive based on a 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; A second interface is displayed, where the second interface includes the deformed first basic graphic element and the deformed second basic graphic element.

2. The method according to claim 1, characterized in that 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 area, and the target sampling point being located within the target intersection area; The third information is fused through a fusion operation to generate fourth information, where the fourth information is function information of the fusion area. The fusion operation includes at least one of the following: a union operation, an intersection operation, a smoothing operation, a smooth intersection operation, a smooth union operation, or a transform domain operation. The fusion area is the area obtained after the target intersection area is fused.

3. The method according to claim 2, characterized in that The method further comprises: Fifth information is generated based on the first information, the second information, and the fourth information. The fifth information is function information of a target drawing primitive. The target drawing primitive is a primitive obtained by intersecting and fusing the first basic primitive and the second basic primitive. The fifth information is used for drawing the target drawing primitive.

4. The method according to claim 3, characterized in that The first basic graphic element and the second basic graphic element are used to present an animation effect of the first control within a preset duration, and the method further includes: The target drawing primitive is displayed on the second interface, where the target drawing primitive is a 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 basic primitive and the deformed second basic primitive.

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

6. The method according to any one of claims 1 to 5, characterized in that The first information includes a first signed distance function SDF, and the second information includes a second signed distance function SDF. The first signed distance function SDF is used to describe the shape of the first target primitive, and the second signed distance function SDF is used to describe the shape of the second virtual primitive.

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

8. A method for graphics processing, characterized in that: The method comprises: Displaying a first interface, wherein the first interface includes a first SDF primitive and a second SDF primitive; Based on the function information of the first virtual primitive and the function information of the second virtual primitive, spatial sampling is performed on the first interface 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 that the first virtual primitive intersects the second virtual primitive based on a target sampling point in the sampling point set, wherein the target sampling point is located within both the first virtual primitive and the second virtual primitive; A second interface is displayed, where the second interface includes the deformed first SDF primitive and the deformed second SDF primitive.

9. The method according to claim 8, wherein The method further comprises: When it is determined that the first virtual primitive intersects the second virtual primitive, determining function information of a target intersection area according to 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 area; The function information of the target intersection area is fused through a fusion operation to generate function information of the fusion area, the fusion operation includes at least one of the following: a union operation, an intersection operation, a smoothing operation, a smooth intersection operation, a smooth union operation or a transform domain operation, and the fusion area is the area obtained after the target intersection area is fused.

10. The method according to claim 9, characterized in that The method further comprises: 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 area, the function information of the target drawing primitive is generated. The target drawing primitive is an SDF primitive obtained by intersecting and fusion processing 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.

11. The method according to claim 10, characterized in that The first SDF primitive and the second SDF primitive are used to present an animation effect of the first control within a preset duration, and the method further includes: The target drawing primitive is displayed on the second interface, where the target drawing primitive is a 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.

12. The method according to any one of claims 8 to 11, characterized in that Before performing 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 to generate a set of sampling points, the method further includes: determining the force on the first SDF primitive and the force on the second SDF primitive respectively according to a first dynamic constraint, wherein the first dynamic constraint includes Hooke's law; determining first position information according to a second motion constraint and a force applied to the first SDF primitive, wherein the second motion constraint includes Newton's law of motion, and the first position information is position information of the first SDF primitive, and the first position information is used to determine a position of the first virtual primitive on the first interface; The second position information is determined according to the second motion constraint and the force applied to the second SDF primitive. The second position information is the position information of the second SDF primitive. The second position information is used to determine the position of the second virtual primitive on the first interface.

13. An electronic device, characterized in that: 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 described in any one of claims 1 to 7, or the electronic device executes the method described 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 according to any one of claims 1 to 7, or the processor executes the method according to any one of claims 8 to 12.

15. A computer program product, characterized in that The computer program product comprises: a computer program code, which, when executed by a processor, enables the processor to perform the method according to any one of claims 1 to 7, or enables the processor to perform the method according to any one of claims 8 to 12.

16. A chip system, characterized in that: 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 according to any one of claims 1 to 7, or to implement the method according to any one of claims 8 to 12.

Images