Graph rendering method and system, electronic equipment and computer storage medium

Abstract

The invention relates to the technical field of graphic rendering, in particular to a graphic rendering method and system, electronic equipment and a computer storage medium. The method comprises the following steps: acquiring vertex data of a to-be-drawn graph and fillet radius data of a vertex; obtaining the shortest distance from a sampling point of a pixel in the drawing space to all edges of the graph to be drawn according to the vertex data, and taking the shortest distance as a first shortest distance; according to the vertex data and the fillet radius data of the vertex, obtaining the shortest distance from the sampling point to all fillets of the to-be-drawn graph as a second shortest distance; acquiring a signed distance field value from the sampling point to the graph to be drawn according to the first shortest distance and the second shortest distance; and rendering pixels in the drawing space according to the signed distance field value to obtain a rendered graph. According to the method, high-quality rendering of the complex graph can be efficiently completed in one rendering channel, and the flexibility and efficiency of rendering are remarkably improved while the rendering effect is ensured.

Description

Technical Field

[0001] This invention relates to the field of graphics rendering technology, and more specifically, to a graphics rendering method, system, electronic device, and computer storage medium. Background Technology

[0002] Graphics rendering is the process of converting three-dimensional or two-dimensional graphic data into images that can be displayed on display devices such as computer screens, mobile phone screens, or VR headsets. In modern user interface (UI) systems, especially in extended reality (XR) applications such as virtual reality (VR) and augmented reality (AR), rounded corner graphics are a fundamental element of the user interface. To meet diverse visual design needs, these elements typically need to support variable corner radii and variable border styles.

[0003] The existing mainstream rendering solutions mainly include texture atlas-based rendering solutions, 9-slice stretching-based rendering solutions, mesh-based rendering solutions, and basic SDF (Signed Distance Field) rendering solutions. However, these rendering solutions either cannot dynamically and smoothly change the rounded corners or borders, or they have high rendering performance overhead, lacking a high-quality and high-efficiency rendering solution. Summary of the Invention

[0004] The present invention aims to overcome at least one of the defects (deficiencies) of the prior art and provide a graphics rendering method, system, electronic device and computer storage medium for achieving high-efficiency rendering of graphics with different corner radii.

[0005] According to a first aspect of this application, a graphics rendering method is provided, the method comprising: Obtain the vertex data and corner radius data of the shape to be drawn; Based on the vertex data, the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn is obtained as the first shortest distance; Based on the vertex data and the corner radius data of the vertex, the shortest distance from the sampling point to all the corners of the graphic to be drawn is obtained as the second shortest distance; The signed distance field value from the sampling point to the graphic to be drawn is obtained based on the first shortest distance and the second shortest distance; The pixels in the drawing space are rendered based on the signed distance field value to obtain the rendered graphic.

[0006] Understandably, this application calculates the shortest distance from the sampling point of the pixel to each side and rounded corner of the graphic to be drawn by combining the vertex data and rounded corner radius data, and integrates these distances into a signed distance field value, thereby achieving precise control and rendering of pixels in the drawing space. This application requires no additional drawing calls; it generates graphics in a single rendering process through simple acquisition steps. Furthermore, the border width and rounded corner radius of the graphics can be dynamically adjusted in real time, overcoming the shortcomings of existing technologies in graphics rendering, such as large memory consumption and performance overhead. It can efficiently complete high-quality rendering of complex graphics within a single rendering pass, ensuring rendering quality while significantly improving the flexibility and efficiency of graphics rendering, making it particularly suitable for scenarios requiring a large amount of dynamic, high-quality vector UI rendering.

[0007] Optionally, obtaining the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn based on the vertex data includes: Based on the vertex data, the edge vectors of the graphic to be drawn are obtained sequentially, with each vertex as the starting point. One of the aforementioned vertices will be selected as the vertex to be processed. Obtain the vector pointing from the vertex to be processed to the sampling point as the first vector; Obtain the edge vector originating from the vertex to be processed as the second vector; The shortest distance from the sampling point to the edge containing the second vector is obtained based on the first vector and the second vector. Based on the shortest distance from the sampling point to the edge containing each edge vector, the shortest distance from the sampling point to all edges of the graphic to be drawn is obtained.

[0008] Understandably, by calculating the shortest distance from the sampling point to all edges of the graphic to be drawn, precise determination and rendering of each pixel in the drawing space are achieved. This enables the dynamic and accurate acquisition of the shortest distance information of the edges of arbitrarily complex graphics, thereby supporting high-quality graphics rendering and the processing of different rounded corners. This process combines the principles of vector mathematics, and by performing vectorized analysis on each vertex and its adjacent edges, it not only improves computational efficiency but also enhances adaptability to graphics of different shapes and sizes.

[0009] Optionally, obtaining the shortest distance from the sampling point to the edge containing the second vector based on the first vector and the second vector includes: The position of the projection point of the sampling point on the second vector is obtained based on the first vector and the second vector; The shortest distance from the sampling point to the edge containing the second vector is obtained based on the location of the projection point.

[0010] Understandably, by projecting the sampling point relative to the edge vector, the precise position of the projection point on the edge is obtained, and the shortest distance to that edge is determined accordingly, thus achieving high-precision modeling of the signed distance field of the graphic. This method, while ensuring geometric accuracy, possesses good computational efficiency and numerical stability, and is particularly suitable for rendering systems based on signed distance fields (SDF). It eliminates the need for high-density meshes or preset textures in rendering complex graphics, especially UI elements with dynamic dimensions and rounded corners, significantly improving rendering quality and runtime performance, and enhancing the flexibility and scalability of graphic representation.

[0011] Optionally, obtaining the projection point position of the sampling point on the second vector based on the first vector and the second vector includes: The initial projection parameters of the sampling point on the second vector are obtained based on the first vector and the second vector. The projection parameters represent the relative proportion of the distance from the vertex to be processed to the position of the projection point along the direction of the second vector. The projection point refers to the projection point of the sampling point on the straight line of the second vector. Based on the initial projection parameters, determine whether the projection point is on the edge of the second vector. If so, use the initial projection parameters as the final projection parameters of the sampling point on the second vector. Otherwise, obtain the two vertices corresponding to the second vector, take the vertex closest to the sampling point among the two vertices as the projection point, and obtain the final projection parameters of the sampling point on the second vector. The projection point position of the sampling point is obtained based on the final projection parameters, the first vector, and the second vector.

[0012] Understandably, by introducing a segmented determination and correction mechanism for projection parameters, the shortest distance from the sampling point to the edge of the graphic to be drawn is accurately calculated. Under the premise of ensuring geometric accuracy, the difference between the infinite extension of the vector and the actual edge of the graphic is effectively handled, avoiding the projection point from being mistakenly placed on the extension of the edge. This method ensures that the distance calculation conforms to the topological structure of the actual graphic and improves the accuracy of the signed distance field (SDF) generation, especially in the vicinity of vertices and corner regions where it is stable.

[0013] Optionally, obtaining the shortest distance from the sampling point to all rounded corners of the graphic to be drawn, based on the vertex data and the corner radius data of the vertices, as the second shortest distance, includes: One of the aforementioned vertices will be selected as the vertex to be processed. The distance from the sampling point to the vertex to be processed is obtained as the second distance; The distance from the sampling point to the rounded corner boundary of the vertex to be processed is obtained based on the second distance and the rounded corner radius data of the vertex to be processed, and is used as the third distance; The shortest distance from the sampling point to all rounded corners of the graphic to be drawn is obtained based on the third distance from the sampling point to each vertex, and is taken as the second shortest distance.

[0014] Understandably, by calculating the distance from the sampling point to each vertex and combining it with the preset rounded corner radius of the vertex, the distance from the sampling point to the rounded corner boundary of each vertex is derived, thus determining the shortest distance to all rounded corners. This method achieves precise distance field modeling of the rounded corner region at each vertex of the graphic to be drawn, supports setting different rounded corner radii independently for each vertex, and significantly improves the flexibility and freedom of UI graphics in visual expression. Compared with the traditional uniform rounded corner scheme, this method not only achieves truly asymmetric and variable rounded corner rendering, but also seamlessly integrates with the SDF rendering framework, ensuring high-quality smooth edges and efficient real-time rendering performance, making it particularly suitable for complex user interface scenarios that require dynamic adjustment of rounded corner styles.

[0015] Optionally, obtaining the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance includes: The minimum value between the first and second shortest distances of the sampling point is taken as the signed distance field value from the sampling point to the graphic to be drawn.

[0016] Understandably, by taking the minimum of the shortest distance from the sampling point to each edge of the graphic to be drawn and the shortest distance to each vertex's rounded corner, as the signed distance field value of that point, seamless integration of the edge and rounded corner regions is achieved. This method accurately simulates the signed distance field structure of a graphic with independently adjustable rounded corners in geometric logic, enabling high-quality generation of graphics with dynamic rounded corners and anti-aliasing effects in a single rendering pass, and completing the rendering of graphics with independently adjustable rounded corners with less resource consumption and fewer rendering passes.

[0017] Optionally, the step of rendering pixels in the drawing space based on the signed distance field value to obtain the rendered graphic includes: Convert the signed distance field value into a transparency value; The pixels in the drawing space are colored and rendered based on the transparency value to obtain the rendered graphic.

[0018] Understandably, by converting the signed distance field values ​​of the sampled points into transparency values, and utilizing the mapping relationship between the signed distance field and transparency, a smooth edge anti-aliasing effect is achieved, giving the graphic boundaries a natural gradient transition during rendering and significantly improving the visual quality of the graphics. This method uses signed distance fields to complete the graphics rendering, avoiding the memory and performance overhead of traditional texture mapping or high-density meshes. It is particularly suitable for modern UI systems that require dynamic adjustment of shape, size, and rounded corners, achieving high-performance and highly scalable real-time graphics rendering while ensuring rendering accuracy and aesthetics.

[0019] According to a second aspect of this application, a graphics rendering system is provided, the system comprising: The data acquisition module is used to acquire the vertex data and corner radius data of the graphic to be drawn; The shortest distance acquisition module is used to obtain the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn based on the vertex data, as the first shortest distance; and to obtain the shortest distance from the sampling point to all rounded corners of the graphic to be drawn based on the vertex data and the rounded corner radius data of the vertex, as the second shortest distance; A signed distance field value acquisition module is used to acquire the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance; The rendering module is used to render the pixels in the drawing space according to the signed distance field value to obtain the rendered graphic.

[0020] According to a third aspect of this application, an electronic device is provided, comprising: Memory, used to store one or more computer programs; A processor, when the one or more computer programs are executed by the processor, implements the graphics rendering method described in the first aspect above.

[0021] According to a fourth aspect of this application, a computer-readable storage medium is provided, the computer-readable storage medium storing computer instructions for causing a processor to execute and implement the graphics rendering method described in the first aspect above.

[0022] Based on any of the above aspects, the graphics rendering method, system, electronic device, and computer storage medium provided in this application embodiment acquire vertex data and corner radius data of the graphics to be drawn; based on the vertex data, acquire the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphics to be drawn, as a first shortest distance; based on the vertex data and corner radius data of the vertex, acquire the shortest distance from the sampling point to all rounded corners of the graphics to be drawn, as a second shortest distance; acquire a signed distance field value from the sampling point to the graphics to be drawn based on the first shortest distance and the second shortest distance; and render the pixels in the drawing space based on the signed distance field value to obtain the rendered graphics. This application can achieve the following benefits: • Supports non-uniform rounded corner rendering of graphics: Under the signed distance field (SDF) rendering method, the rounded corner radius of each vertex of the graphics can be set independently, breaking through the limitation of traditional solutions that only support rounded corners of equal radius, realizing a truly "custom rounded corner" UI, and meeting the rendering needs of flexible and personalized user interface elements.

[0023] • Complex graphics rendering can be achieved based on a single rendering channel: This application can complete the composite rendering of graphic outlines, independently adjustable rounded corners and dynamic borders in a single rendering channel, avoiding the performance overhead caused by multi-channel overlay or multiple draw calls, and improving the efficiency and compatibility of the rendering pipeline.

[0024] • Achieve low resource consumption: Compared to rendering schemes based on texture atlases or grid stretching rendering schemes that rely on pre-baked images, this application generates signed distance fields entirely based on procedural calculations, eliminating the need to store a large number of texture resources of different sizes or rounded corner combinations, thus significantly saving GPU (Graphics Processing Unit) memory and texture bandwidth usage. Compared to rendering schemes based on geometric meshes, this application does not require the generation of a large number of vertices, reducing the mesh calculation burden on the CPU (Central Processing Unit) and the vertex processing pressure on the GPU. At the same time, the SDF calculation in the pixel shading stage is concise and efficient, supporting the concurrent rendering of a large number of UI elements while maintaining a high frame rate, making it suitable for complex interfaces or high-performance scenarios such as XR.

[0025] • Achieve high-quality vector-level graphics output: Based on the signed distance field characteristics of SDF, it can render smooth rounded edges and anti-aliased contours with pixel-level precision, supports arbitrary scaling without distortion, achieves visual quality similar to vector graphics, and meets the high-fidelity and high-definition visual requirements of modern UIs.

[0026] • Achieving a balance between high quality and high performance: This application achieves high-quality graphics rendering effects with extremely low resource consumption and a single rendering channel, and achieves a good balance between dynamism, flexibility and operating efficiency. Attached Figure Description

[0027] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0028] Figure 1 A flowchart of the graphics rendering method provided in this embodiment.

[0029] Figure 2 This embodiment provides a schematic diagram of the sub-steps of step S200.

[0030] Figure 3 This embodiment provides a schematic diagram of the sub-steps of step S300.

[0031] Figure 4 This embodiment provides a schematic diagram of the functional modules of the graphics rendering system.

[0032] Figure 5 This embodiment provides a schematic diagram of the electronic device. Detailed Implementation

[0033] The accompanying drawings are for illustrative purposes only and should not be construed as limiting the scope of this application. To better illustrate the following embodiments, some components in the drawings may be omitted, enlarged, or reduced, and do not represent the actual dimensions of the product; it is understandable to those skilled in the art that some well-known structures and their descriptions may be omitted in the drawings.

[0034] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0035] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0036] It's important to explain that the Signed Distance Field (SDF)-based rendering scheme performs graphics rendering in the fragment shader, a mathematically-based rendering method. The fragment shader is a programmable stage in the graphics rendering pipeline, running on the GPU, responsible for calculating the final color value of each pixel (more precisely, a "fragment") on the screen. During rasterization, geometric primitives (such as rectangles) are decomposed into multiple fragments, each corresponding to a potential pixel. The fragment shader receives data from the vertex shader through interpolation, such as position, color, and texture coordinates, and performs operations like lighting calculations, texture sampling, and color blending based on this data, ultimately outputting the color and depth values ​​of the fragment. SDF refers to returning the shortest distance from any point in space to the boundary of a geometric shape: negative if the point is inside the shape; zero on the boundary; and positive outside. Common SDF functions can describe complex shapes such as circles, rectangles, and text. The basic process of using SDF in a fragment shader is as follows: Map the screen coordinates to a two-dimensional spatial domain, call the corresponding SDF function for each fragment to calculate the distance from that point to the target shape. Then, color the fragment based on the distance value. For example, when the distance value is close to zero (i.e., near the boundary), it can be rendered as a shape outline to achieve a smooth edge anti-aliasing effect.

[0037] The inventors' research revealed that in the mainstream rendering schemes of existing technologies: Texture atlas-based rendering schemes require pre-creating various rounded corner and border styles as independent images and packaging them into an atlas to support different graphics rendering styles. However, this scheme has extremely low flexibility: each combination of size, rounded corner radius, and border width requires a separate texture, causing the atlas size to expand rapidly and consume a large amount of texture memory. Especially in scenarios that require dynamic adjustment or smooth transition of rounded corner and border parameters, this method is almost impossible to meet the requirements, severely limiting the flexibility and scalability of visual effects.

[0038] The nine-grid stretching rendering scheme divides a rounded graphic image into nine regions and stretches only the central region to adapt to different sizes, thus achieving graphic scaling. However, this scheme only supports all rounded corners having the same radius and cannot independently adjust the radius of each rounded corner; secondly, when the size changes drastically, the stretching process can easily cause deformation in the corner areas, affecting visual quality; in addition, the border effect must be pre-drawn in the original image, and the border width or color cannot be dynamically adjusted at runtime, limiting its flexibility and practicality in dynamic UI design.

[0039] Geometric mesh-based rendering schemes require the procedural generation of high-precision rounded corner graphic meshes to achieve visual effects. However, to ensure the smoothness of the rounded corner edges, this approach typically requires generating a large number of vertices. This not only increases the computational burden on the CPU during mesh generation but also significantly increases the overhead of the GPU in processing vertex data during rendering. In complex scenes containing numerous UI elements (such as XR applications), this resource consumption is unacceptable, limiting its widespread application in high-performance or high-density interfaces.

[0040] Existing SDF (Symbol Distance Field) rendering schemes utilize simple SDF functions to draw graphics with uniform corner radii. However, their implementations typically only support cases where the corner radii are consistent, lacking flexible control over the independent radii of each corner.

[0041] In summary, the inventors discovered that achieving high-quality rendering of graphics with rounded corners presents a challenge: how to maintain extremely low GPU computational overhead while meeting the requirements of independently adjustable corner radius and borders, and thus achieve high-performance rendering in complex scenes.

[0042] This embodiment provides a technical solution that can solve the above problems. The specific implementation of this application will be described in detail below with reference to the accompanying drawings.

[0043] like Figure 1 As shown, this embodiment provides a graphics rendering method, which may include the following steps: S100: Obtain the vertex data and corner radius data of the graphic to be drawn; Specifically, this embodiment does not limit the shape of the graphic to be drawn; it can be a triangle, rectangle, pentagon, etc.

[0044] Understandably, this embodiment supports setting the corner radius of each vertex of the graphic to be drawn independently. When drawing a graphic, its vertex data and corner radius data are first set. The vertex data can be presented in coordinate form, and the corner radius data can be presented as a specific numerical value. For vertices that do not require corner rounding, their corner radius can be set to 0.

[0045] In one implementation, to facilitate subsequent data processing, the vertex data and the corner radius data can be represented by a fixed data structure, specifically: A vertex array is set to store the vertex coordinates of the graphic to be drawn, arranged in clockwise or counterclockwise order. The vertex array can be set based on the Vec3 data type, thus ensuring compatibility with 3D space or transformation systems. However, in actual use, the z-value of the Vec3 data type is set to 0, treating it as a point on a 2D plane.

[0046] Similarly, a fillet radius array can be set to store the fillet radius data, which includes the fillet radius value corresponding to each vertex. For vertices that do not require filleting, their fillet radius is set to 0. For example, a fillet radius value of 10.0 indicates that a circular arc with a radius of 10 should be applied at that vertex.

[0047] S200. Based on the vertex data, obtain the shortest distance from the sampling point of the pixel in the drawing space to all edges of the graphic to be drawn, and use it as the first shortest distance; Specifically, the drawing space can refer to a two-dimensional or three-dimensional coordinate system for drawing graphics. For the user interface, it can refer to the coordinate system used for rendering in screen space. All subsequent distance calculations, pixel shading, etc., are performed in the drawing space.

[0048] Specifically, the sampling point of the pixel can be implemented using the center point of the pixel.

[0049] Specifically, the shortest distance from the sampling point to all edges of the graphic to be drawn can be used to represent the closest distance from the sampling point to the boundary of all edges of the graphic to be drawn, which is equivalent to the signed distance field value from the sampling point to the edge of the graphic to be drawn.

[0050] In one implementation, such as Figure 2 As shown, step S200 may specifically include: S210. Based on the vertex data, sequentially obtain the edge vectors of the graphic to be drawn, using each vertex as a starting point. For example, if the shape to be drawn is a rectangle, it has four vertices, A, B, C, and D in clockwise order. Then, starting from vertex A, the edge vector from vertex A to vertex B is obtained; starting from vertex B, the edge vector from vertex B to vertex C is obtained; starting from vertex C, the edge vector from vertex C to vertex D is obtained; and starting from vertex D, the edge vector from vertex D to vertex A is obtained, for a total of four edge vectors.

[0051] S220. Select one of the vertices as the vertex to be processed; Understandably, subsequent steps require the shortest distance from the sampling point to all edges of the graphic to be drawn. Therefore, each vertex needs to be treated as the vertex to be processed and the following steps S230-S250 need to be executed in sequence to obtain the shortest distance from the sampling point to the edge containing each edge vector.

[0052] S230. Obtain the vector pointing from the vertex to be processed to the sampling point as the first vector; For example, if the vertex to be processed is vertex A as described above, and the sampling point is defined as sampling point P, then the first vector refers to the vector from vertex A to sampling point P.

[0053] S240. Obtain the edge vector starting from the vertex to be processed as the second vector; For example, if the vertex to be processed is vertex A as described above, then the edge vector starting from the vertex to be processed refers to the edge vector from vertex A to vertex B.

[0054] S250. Obtain the shortest distance from the sampling point to the side containing the second vector based on the first vector and the second vector; For example, the first vector and the second vector both have a common vertex A. Based on this, the foot of the perpendicular of the sampling point on the line where the second vector is located can be found. This foot of the perpendicular determines the landing point of the shortest distance.

[0055] In one implementation, step S250 may include the following steps: S251. Obtain the projection point position of the sampling point on the second vector based on the first vector and the second vector; Specifically, step S251 can be further subdivided into the following steps: S2511. Obtain the initial projection parameters of the sampling point on the second vector according to the first vector and the second vector. The projection parameters represent the relative proportion of the distance from the vertex to be processed to the position of the projection point along the direction of the second vector. The projection point refers to the projection point of the sampling point on the straight line where the second vector is located. Specifically, the projection parameters can be calculated by calculating the projection position of the sampling point on the straight line containing the second vector based on the dot product.

[0056] For example, if the first vector refers to the vector pointing from vertex A to sampling point P, and the second vector refers to the edge vector from vertex A to vertex B, then first calculate the vector I = PA pointing from vertex A to sampling point P, calculate the vector J = B - A pointing from vertex A to vertex B, and calculate the projection parameter t = dot(I, J) / dot(J, J) of sampling point P on the line containing the second vector through the dot product, where dot refers to the dot product of the vectors.

[0057] S2512. Determine whether the projection point is on the side of the second vector according to the initial projection parameters. If so, use the initial projection parameters as the final projection parameters of the sampling point on the second vector. Otherwise, obtain the two vertices corresponding to the second vector, take the vertex closest to the sampling point among the two vertices as the projection point, and obtain the final projection parameters of the sampling point on the second vector. Specifically, the magnitude of the projection parameters can be used to determine whether the projection point is on the edge containing the second vector. For example, if 0 ≤ t ≤ 1, it means that the projection point is on the edge containing the second vector, but not on the extension of that edge. If t < 0 or t > 1, then the two vertices corresponding to the second vector are obtained, and the vertex closest to the sampling point among the two vertices is taken as the projection point. Then, based on this new projection point, the projection parameters of the sampling point on the second vector are obtained according to the first vector and the second vector, and used as the final projection parameters.

[0058] S2513. Obtain the projection point position of the sampling point based on the final projection parameters, the first vector, and the second vector.

[0059] Specifically, the projection point position can be calculated using the following formula: Position = I + T × J Where I represents the first vector, J represents the second vector, and T represents the final projection parameters.

[0060] S252. Obtain the shortest distance from the sampling point to the side containing the second vector based on the location of the projection point.

[0061] In one implementation, the shortest distance from the sampling point to the side containing the second vector can be calculated using Euclidean distance, i.e., the shortest distance from the sampling point to the side containing the second vector is D = distance(P, Position), where distance represents the Euclidean distance and P represents the sampling point.

[0062] In another implementation, the shortest distance from the sampling point to the edge containing the second vector can be obtained using squared distance optimization. Specifically, a vector P-Position is constructed from the sampling point to the projection point position, and the shortest distance from the sampling point to the edge containing the second vector is calculated by taking the dot product of this vector with itself. The specific calculation formula is as follows: D = dot(P-Position, P-Position).

[0063] S260. Based on the shortest distance from the sampling point to the edge containing each edge vector, obtain the shortest distance from the sampling point to all edges of the graphic to be drawn.

[0064] Specifically, for each sampling point, all edges of the shape to be drawn are traversed, and steps S220-S250 are repeated to calculate the shortest distance from each sampling point to each edge of the shape. The shortest distance for each sampling point to each edge is recorded, and the minimum value among these shortest distances is taken as the shortest distance from each sampling point to all edges of the shape to be drawn. For example, if the shape to be drawn is a rectangle, there are four shortest distances from each sampling point to each edge of the rectangle, and the minimum value among these four shortest distances is taken as the shortest distance from each sampling point to all edges of the rectangle.

[0065] S300. Based on the vertex data and the corner radius data of the vertex, obtain the shortest distance from the sampling point to all the corners of the graphic to be drawn, and use it as the second shortest distance; Specifically, the second shortest distance can be used to represent the nearest distance from the sampling point to the rounded corner boundary of the graphic to be drawn, which is equivalent to the signed distance field value from the sampling point to the rounded corner of the vertex of the graphic to be drawn.

[0066] Specifically, such as Figure 3 As shown, step S300 may include the following steps: S310. Select one of the vertices as the vertex to be processed; Understandably, if subsequent steps require the shortest distance from the sampling point to all rounded corners of the graphic to be drawn, then each vertex needs to be treated as the vertex to be processed and the following steps S320-S330 need to be executed in sequence to obtain the shortest distance from the sampling point to each rounded corner boundary.

[0067] S320. Obtain the distance from the sampling point to the vertex to be processed as the second distance; S330. Obtain the distance from the sampling point to the rounded corner boundary of the vertex to be processed based on the second distance and the rounded corner radius data of the vertex to be processed, and use it as the third distance; Specifically, the third distance can be obtained by subtracting the radius of the rounded corner corresponding to the vertex to be processed from the second distance.

[0068] Specifically, when executing steps S320 and S330, all vertices of the graphic to be drawn can be traversed as the vertices to be processed, and then the second distance of the sampling point corresponding to each vertex to be processed can be obtained in sequence. Then, the corresponding rounded corner radius is subtracted from each second distance to obtain the distance from the sampling point to the rounded corner boundary of each vertex.

[0069] S340. Based on the third distance from the sampling point to each vertex, obtain the shortest distance from the sampling point to all rounded corners of the graphic to be drawn, and use it as the second shortest distance.

[0070] Specifically, the minimum value among all third distances can be taken as the second shortest distance.

[0071] S400. Obtain the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance; Specifically, the minimum value between the first shortest distance and the second shortest distance of the sampling point is taken as the signed distance field value from the sampling point to the graphic to be drawn.

[0072] Understandably, for any sampling point in the drawing space, its SDF value is equal to the shortest signed distance from that sampling point to the boundary of the shape to be drawn. The boundary structure of the shape to be drawn is a rounded-corner shape, consisting of two parts: edges and rounded corners at the vertices. Therefore, by considering the first shortest distance from the sampling point to all edges of the shape to be drawn and the second shortest distance from the sampling point to all rounded corners of the shape to be drawn, and then taking the minimum of the two as the signed distance field value from the sampling point to the shape to be drawn, an accurate signed distance field value can be obtained. This method does not require complex Boolean operations or region division of the shape; it only requires taking the minimum value, making the calculation simple and convenient. It can use fewer resources to calculate the complete signed distance field value, thereby improving rendering efficiency.

[0073] S500: Render the pixels in the drawing space according to the signed distance field value to obtain the rendered graphic.

[0074] Specifically, the signed distance field value represents the signed shortest distance from the sampling point to the boundary of the graphic. When the signed distance field value is negative, it means that the sampling point is inside the graphic to be drawn. When the signed distance field value is 0, it means that the sampling point is on the boundary of the graphic to be drawn. When the signed distance field value is positive, it means that the sampling point is outside the graphic to be drawn.

[0075] To achieve smooth graphics, anti-aliasing is typically required. Specifically, the signed distance field value is converted into a transparency value, and the pixels in the drawing space are colored and rendered based on the transparency value to obtain the rendered graphics.

[0076] When converting the signed distance field value to an alpha value, a smooth transition function can be used to map the signed distance field value to an alpha value in the range of [0, 1]. Then, during shading and rendering based on this alpha value, pixels inside the graphic can be fully filled with color, while pixels outside the graphic can be made completely transparent or have their background color retained. Pixels at the edge of the graphic can be partially transparent according to the coverage ratio, creating a smooth boundary transition. This method can achieve high-quality, anti-aliasing graphics rendering and supports advanced visual effects such as transparency blending, overlay, and shadows.

[0077] like Figure 4 As shown in the embodiments of this application, a graphics rendering system is also provided. Optionally, the graphics rendering system may include: The data acquisition module 611 is used to acquire the vertex data and the corner radius data of the graphics to be drawn; In this embodiment, the data acquisition module 611 can be used to perform... Figure 1 For a detailed description of the data acquisition module 611, please refer to the description of step S100 shown.

[0078] The shortest distance acquisition module 612 is used to acquire the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn based on the vertex data, as the first shortest distance; and to acquire the shortest distance from the sampling point to all rounded corners of the graphic to be drawn based on the vertex data and the rounded corner radius data of the vertex, as the second shortest distance; In this embodiment, the shortest distance acquisition module 612 can be used to perform... Figure 1 For a detailed description of steps S200 and S300 shown, and the shortest distance acquisition module 612, please refer to the description of steps S200 and S300.

[0079] The signed distance field value acquisition module 613 is used to acquire the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance; In this embodiment, the signed distance field value acquisition module 613 can be used to perform... Figure 1 For a detailed description of the signed distance field value acquisition module 613, see step S400 shown below. For a detailed description of step S400, please refer to the description of step S400.

[0080] The rendering module 614 is used to render the pixels in the drawing space according to the signed distance field value to obtain the rendered graphic.

[0081] In this embodiment, the rendering module 614 can be used to perform... Figure 1 For a detailed description of the rendering module 614, please refer to the description of step S500 shown.

[0082] This application also provides an electronic device, the structure of which is as follows: Figure 5 As shown, the electronic device includes a memory 711, a processor 712, a communication module 713, and an input / output interface 714, etc. Optionally, the memory 711, the processor 712, the communication module 713, and the input / output interface 714 can be connected and communicate with each other through a bus 715.

[0083] The memory 711 is used to store one or more computer programs and to transfer the code of the computer programs to the processor 712; when the one or more computer programs are executed by the processor 712, a channel installation package update method according to an embodiment of this application is implemented.

[0084] Optionally, the electronic device can be connected to a network via the communication module 713 to communicate with other devices, such as terminals or servers, and to interact with data. The electronic device can be various forms of digital computers, exemplarily such as desktop computers, servers, workbenches, mainframes, or other types of computers. The electronic device can also be various forms of mobile terminals, exemplarily such as smartphones, tablets, wearable devices (such as helmets, glasses, watches, etc.), and other similar mobile terminals.

[0085] Optionally, the electronic device can connect to desired input / output devices, such as a keyboard or display device, via the input / output interface 714. The electronic device itself may have a display device, and other display devices can also be connected externally via the input / output interface 714. Optionally, a storage device, such as a hard disk, can also be connected via the input / output interface 714 to store data from the electronic device, read data from the storage device, or store data from the storage device in the memory 711. It is understood that the input / output interface 714 can be a wired interface or a wireless interface. Depending on the actual application scenario, the device connected to the input / output interface 714 can be a component of the electronic device or an external device connected to the electronic device when needed.

[0086] Optionally, the memory 711 may be a volatile memory and / or a non-volatile memory. The volatile memory may be a random access memory, etc., and the non-volatile memory may be a read-only memory, a programmable read-only memory, an erasable programmable read-only memory, an electrically erasable programmable read-only memory, or a flash memory, etc.

[0087] Optionally, the computer program stored in the memory 711 can be divided into one or more modules, which are stored in the memory 711 and executed by the processor 712 to perform the method provided in this embodiment. The one or more modules can be a series of computer program instruction segments capable of performing specific functions, which describe the execution process of the computer program in the electronic device.

[0088] Optionally, the processor 712 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the processor 712 include, but are not limited to, a central processing unit, a graphics processing unit, a digital signal processor, various special-purpose artificial intelligence computing chips, various processors running machine learning model algorithms, and can also be any suitable controller, microcontroller, processor, etc. The processor 712 executes the various methods and processes of this embodiment, exemplarily, such as a channel installation package update method according to an embodiment of this application.

[0089] Optionally, the bus 715 may include a path for transmitting information. Depending on its function, the bus 715 may be classified as an address bus, a data bus, a control bus, etc.

[0090] In an optional implementation, this application embodiment also provides a computer storage medium storing a computer program thereon, which, when executed by a computer, enables the computer to perform the methods described in the above method embodiments. Part or all of the computer program can be loaded and / or installed on the memory 711 of an electronic device. When the computer program is executed by the processor 712, one or more steps of a channel installation package update method according to an embodiment of this application can be performed.

[0091] Optionally, the computer-readable storage medium may be a random access memory, a read-only memory, a programmable read-only memory, an erasable programmable read-only memory, an electrically erasable programmable read-only memory, etc.

[0092] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the technical solution of the present invention, and are not intended to limit the specific implementation of the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the claims of the present invention should be included within the protection scope of the claims of the present invention.

Claims

1. A graphics rendering method, characterized in that, The method includes: Obtain the vertex data and corner radius data of the shape to be drawn; Based on the vertex data, the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn is obtained as the first shortest distance; Based on the vertex data and the corner radius data of the vertex, the shortest distance from the sampling point to all the corners of the graphic to be drawn is obtained as the second shortest distance; The signed distance field value from the sampling point to the graphic to be drawn is obtained based on the first shortest distance and the second shortest distance; The pixels in the drawing space are rendered based on the signed distance field value to obtain the rendered graphic.

2. The method according to claim 1, characterized in that, The step of obtaining the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn based on the vertex data includes: Based on the vertex data, the edge vectors of the graphic to be drawn are obtained sequentially, with each vertex as the starting point. One of the aforementioned vertices will be selected as the vertex to be processed. Obtain the vector pointing from the vertex to be processed to the sampling point as the first vector; Obtain the edge vector originating from the vertex to be processed as the second vector; The shortest distance from the sampling point to the edge containing the second vector is obtained based on the first vector and the second vector. Based on the shortest distance from the sampling point to the edge containing each edge vector, the shortest distance from the sampling point to all edges of the graphic to be drawn is obtained.

3. The method according to claim 2, characterized in that, The step of obtaining the shortest distance from the sampling point to the edge containing the second vector based on the first vector and the second vector includes: The position of the projection point of the sampling point on the second vector is obtained based on the first vector and the second vector; The shortest distance from the sampling point to the edge containing the second vector is obtained based on the location of the projection point.

4. The method according to claim 3, characterized in that, The step of obtaining the projection point position of the sampling point on the second vector based on the first vector and the second vector includes: The initial projection parameters of the sampling point on the second vector are obtained based on the first vector and the second vector. The projection parameters represent the relative proportion of the distance from the vertex to be processed to the position of the projection point along the direction of the second vector. The projection point refers to the projection point of the sampling point on the straight line of the second vector. Based on the initial projection parameters, determine whether the projection point is on the edge of the second vector. If so, use the initial projection parameters as the final projection parameters of the sampling point on the second vector. Otherwise, obtain the two vertices corresponding to the second vector, take the vertex closest to the sampling point among the two vertices as the projection point, and obtain the final projection parameters of the sampling point on the second vector. The projection point position of the sampling point is obtained based on the final projection parameters, the first vector, and the second vector.

5. The method according to claim 1, characterized in that, The step of obtaining the shortest distance from the sampling point to all rounded corners of the graphic to be drawn, based on the vertex data and the corner radius data of the vertices, includes: One of the aforementioned vertices will be selected as the vertex to be processed. The distance from the sampling point to the vertex to be processed is obtained as the second distance; The distance from the sampling point to the rounded corner boundary of the vertex to be processed is obtained based on the second distance and the rounded corner radius data of the vertex to be processed, and is used as the third distance; The shortest distance from the sampling point to all rounded corners of the graphic to be drawn is obtained based on the third distance from the sampling point to each vertex.

6. The method according to any one of claims 1 to 5, characterized in that, The step of obtaining the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance includes: The minimum value between the first and second shortest distances of the sampling point is taken as the signed distance field value from the sampling point to the graphic to be drawn.

7. The method according to any one of claims 1 to 5, characterized in that, The step of rendering pixels in the drawing space based on the signed distance field value to obtain the rendered graphic includes: Convert the signed distance field value into a transparency value; The pixels in the drawing space are colored and rendered based on the transparency value to obtain the rendered graphic.

8. A graphics rendering system, characterized in that, The system includes: The data acquisition module is used to acquire the vertex data and corner radius data of the graphic to be drawn; The shortest distance acquisition module is used to obtain the shortest distance from the sampling point of a pixel in the drawing space to all edges of the graphic to be drawn based on the vertex data, as the first shortest distance; and to obtain the shortest distance from the sampling point to all rounded corners of the graphic to be drawn based on the vertex data and the rounded corner radius data of the vertex, as the second shortest distance; A signed distance field value acquisition module is used to acquire the signed distance field value from the sampling point to the graphic to be drawn based on the first shortest distance and the second shortest distance; The rendering module is used to render the pixels in the drawing space according to the signed distance field value to obtain the rendered graphic.

9. An electronic device, characterized in that, include: Memory, used to store one or more computer programs; A processor, when the one or more computer programs are executed by the processor, implements the graphics rendering method as described in any one of claims 1-7.

10. A computer-readable storage medium storing computer instructions that cause a processor to execute and implement the graphics rendering method as described in any one of claims 1-7.

Images