Graphical rendering method, apparatus and storage medium

Abstract

The application provides a graphics rendering method and device and a storage medium. The method determines a to-be-rendered graphics, and then determines an offset value and a vertex rounded corner size of a to-be-processed mask layer based on a progress value of the to-be-rendered graphics. The to-be-rendered graphics includes one or more vertex rounded corners. The graphics rendering is performed on a UI based on the offset value and the vertex rounded corner size of the to-be-processed mask layer, and the graphics rendering of the graphics including the vertex rounded corners is implemented. Moreover, when the graphics rendering is performed, the application considers the vertex rounded corner of the to-be-processed mask layer intersecting with the to-be-rendered graphics, so that the rendering of the edge effect of the to-be-rendered graphics, such as the rendering of the highlight effect of the to-be-rendered graphics border (or edge), is implemented, and the texture of the UI and the richness of the rendering effect are improved.

Description

Technical Field

[0001] This application relates to information display technology, and more particularly to a graphics rendering method, apparatus and storage medium. Background Technology

[0002] With the development of software technology, more and more personalized interfaces are being offered to users. Users often encounter graphical rendering scenarios when using electronic devices, such as progress bars, where users wait for programs to finish running, for pages to load successfully, or for lottery draws on live streaming platforms. For these scenarios, the user interface (UI) provides a progress bar to display the progress of these events.

[0003] In related technologies, graphics rendering is usually used to render graphics with specific shapes or regular patterns, such as the progress bar mentioned above. The rendering method is mainly for foreground bars with specific shapes or regular patterns.

[0004] However, the styles of graphics that need to be rendered are diverse, and existing graphics rendering methods cannot cover all situations. For example, graphics that need to be rendered contain rounded corners and have effects such as border (or edge) highlights, which cannot be solved by existing graphics rendering methods. Summary of the Invention

[0005] This application provides a graphics rendering method, apparatus, and storage medium to solve the problem of rendering graphics with rounded vertices, while also rendering the graphics edge effects.

[0006] In a first aspect, embodiments of this application provide a graphics rendering method, including:

[0007] The UI displays a graphic to be rendered, which includes one or more rounded vertices.

[0008] In response to the progress value of the graphic to be rendered, the offset value and vertex rounded corner size of the mask layer to be processed corresponding to the graphic to be rendered are determined, and the mask layer to be processed covers the border of the graphic to be rendered.

[0009] Based on the offset value and vertex rounded corner size of the mask to be processed, the graphic to be rendered is rendered in the UI.

[0010] In one possible implementation, rendering the graphic to be rendered in the UI based on the offset value and vertex rounded corner size of the mask to be processed includes:

[0011] Based on the offset value of the mask to be processed, the UI performs vertex shading on the graphic to be rendered, and based on the vertex shading of the graphic to be rendered and the vertex roundness of the mask to be processed, the UI performs fragment shading on the remaining pixels to be rendered.

[0012] In one possible implementation, the vertex shading of the graphics to be rendered in the UI based on the offset value of the mask to be processed includes:

[0013] Based on the three-dimensional (3D) pose of the 3D node to be processed in world space, the 3D position of the vertex to be rendered is transformed from local space to 3D space.

[0014] Based on the converted 3D position and the offset value of the mask to be processed, vertex shading is performed on the graphic to be rendered in the UI.

[0015] In one possible implementation, the vertex-shaded graphic to be rendered and the vertex corner radius of the mask to be processed are used by the UI to perform fragment shading on the remaining pixels to be rendered, including:

[0016] Based on the vertex-shaded graphic to be rendered, determine whether the remaining pixels to be rendered are outside the masking area to be processed.

[0017] If the pixel to be rendered i is not outside the area of ​​the mask layer to be processed, then it is determined whether the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed. The pixel to be rendered i is any one of the remaining pixels to be rendered, i = 1, ..., n, where n is an integer and is determined according to the number of the remaining pixels to be rendered.

[0018] If the pixel to be rendered i is not outside the vertex rounded corner area of ​​the mask to be processed, then the original color of the pixel to be rendered i is output in the UI.

[0019] In one possible implementation, after determining whether the remaining pixels to be rendered are outside the masking region to be processed, the method further includes:

[0020] If the pixel to be rendered i is outside the mask area to be processed, then the UI will not color the pixel to be rendered i or will output a completely transparent color.

[0021] In one possible implementation, determining whether the remaining pixels to be rendered are outside the masking region to be processed includes:

[0022] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0023] Based on the 2D coordinates of the pixel i to be rendered, determine whether the pixel i to be rendered is outside the masking area to be processed.

[0024] In one possible implementation, after determining whether the pixel to be rendered i is outside the vertex rounded corner region of the mask to be processed, the method further includes:

[0025] If the pixel to be rendered i is outside the rounded corner area of ​​the graphic to be rendered, then the UI will not color the pixel to be rendered i or will output a completely transparent color.

[0026] In one possible implementation, the graphic to be rendered includes four rounded corners, and the mask to be processed is a rectangular mask that covers the border of the graphic to be rendered.

[0027] The step of determining whether the pixel to be rendered i is outside the vertex rounded corner region of the mask layer to be processed includes:

[0028] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0029] Based on the 2D coordinates of the pixel i to be rendered, determine the vertex fillet of the mask layer that is closest to the pixel i to be rendered;

[0030] Calculate the center and bounding rectangle of the vertex fillet of the mask layer that is closest to the pixel i to be rendered;

[0031] Based on the center of the circle, the circumscribed rectangle, and the 2D coordinates of the pixel to be rendered i, determine whether the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed.

[0032] In one possible implementation, determining the offset value and vertex rounded corner size of the mask layer to be processed corresponding to the graphic to be rendered, in response to the progress value of the graphic to be rendered, includes:

[0033] Obtain the length of the graphic to be rendered;

[0034] Calculate the product of the length and the progress value, and use the calculated product as the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered;

[0035] Based on the progress value and the offset value, determine the corner radius of the vertex where the mask layer to be processed intersects with the graphic to be rendered.

[0036] In one possible implementation, determining the corner radius of the vertices where the mask to be processed intersects with the graphic to be rendered, based on the progress value and the offset value, includes:

[0037] The length of the progress line of the graphic to be rendered is determined based on the progress value and the size of the border of the graphic to be rendered.

[0038] Based on the length of the progress line and the offset value, the corner radius of the vertex where the mask to be processed intersects with the graphic to be rendered is determined.

[0039] Secondly, embodiments of this application provide a graphics rendering apparatus, comprising:

[0040] A graphics display module is used to display a graphic to be rendered in the UI, the graphic to be rendered including one or more rounded vertices;

[0041] A mask processing module is used to determine the offset value and vertex rounded corner size of the mask to be processed corresponding to the graphic to be rendered in response to the progress value of the graphic to be rendered, wherein the mask to be processed covers the border of the graphic to be rendered.

[0042] The graphics rendering module is used to render the graphics to be rendered in the UI based on the offset value and vertex rounded corner size of the mask to be processed.

[0043] In one possible implementation, the graphics rendering module is specifically used for:

[0044] Based on the offset value of the mask to be processed, the UI performs vertex shading on the graphic to be rendered, and based on the vertex shading of the graphic to be rendered and the vertex roundness of the mask to be processed, the UI performs fragment shading on the remaining pixels to be rendered.

[0045] In one possible implementation, the graphics rendering module is specifically used for:

[0046] Based on the 3D pose of the mask node to be processed in world space, the 3D position of the vertex to be rendered is transformed from local space to mask space.

[0047] Based on the converted 3D position and the offset value of the mask to be processed, vertex shading is performed on the graphic to be rendered in the UI.

[0048] In one possible implementation, the graphics rendering module is specifically used for:

[0049] Based on the vertex-shaded graphic to be rendered, determine whether the remaining pixels to be rendered are outside the masking area to be processed.

[0050] If the pixel to be rendered i is not outside the area of ​​the mask layer to be processed, then it is determined whether the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed. The pixel to be rendered i is any one of the remaining pixels to be rendered, i = 1, ..., n, where n is an integer and is determined according to the number of the remaining pixels to be rendered.

[0051] If the pixel to be rendered i is not outside the vertex rounded corner area of ​​the mask to be processed, then the original color of the pixel to be rendered i is output in the UI.

[0052] In one possible implementation, the graphics rendering module is further configured to:

[0053] If the pixel to be rendered i is outside the mask area to be processed, then the UI will not color the pixel to be rendered i or will output a completely transparent color.

[0054] In one possible implementation, the graphics rendering module is specifically used for:

[0055] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0056] Based on the 2D coordinates of the pixel i to be rendered, determine whether the pixel i to be rendered is outside the masking area to be processed.

[0057] In one possible implementation, the graphics rendering module is further configured to:

[0058] If the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed, then the UI will not color the pixel to be rendered i or will output a completely transparent color.

[0059] In one possible implementation, the graphic to be rendered includes four rounded corners, and the mask to be processed is a rectangular mask that covers the border of the graphic to be rendered.

[0060] The graphics rendering module is specifically used for:

[0061] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0062] Based on the 2D coordinates of the pixel i to be rendered, determine the vertex fillet of the mask layer that is closest to the pixel i to be rendered;

[0063] Calculate the center and bounding rectangle of the vertex fillet of the mask layer that is closest to the pixel i to be rendered;

[0064] Based on the center of the circle, the circumscribed rectangle, and the 2D coordinates of the pixel to be rendered i, determine whether the pixel to be rendered i is outside the rounded corner area of ​​the graphic to be rendered.

[0065] In one possible implementation, the masking module is specifically used for:

[0066] Obtain the length of the graphic to be rendered;

[0067] Calculate the product of the length and the progress value, and use the calculated product as the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered;

[0068] Based on the progress value and the offset value, determine the corner radius of the vertex where the mask layer to be processed intersects with the graphic to be rendered.

[0069] In one possible implementation, the masking module is specifically used for:

[0070] The length of the progress line of the graphic to be rendered is determined based on the progress value and the size of the border of the graphic to be rendered.

[0071] Based on the length of the progress line and the offset value, the corner radius of the vertex where the mask to be processed intersects with the graphic to be rendered is determined.

[0072] Thirdly, embodiments of this application provide a graphics rendering device, including:

[0073] processor;

[0074] Memory; and

[0075] Computer programs;

[0076] The computer program is stored in the memory and configured to be executed by the processor, the computer program including instructions for performing the method as described in the first aspect.

[0077] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that causes a server to perform the method described in the first aspect.

[0078] Fifthly, embodiments of this application provide a computer program product, including computer instructions, which are executed by a processor according to the method described in the first aspect.

[0079] This application provides a graphics rendering method, apparatus, and storage medium. The method determines a graphic to be rendered, and then, based on the progress value of the graphic, determines the offset value and vertex rounded corner size of the corresponding mask layer. The graphic to be rendered includes one or more vertex rounded corners, and the mask layer covers the border of the graphic. Based on the offset value and vertex rounded corner size of the mask layer, graphics rendering is performed on the UI, achieving the rendering of graphics containing vertex rounded corners. Furthermore, this application considers the vertex rounded corners where the mask layer intersects with the graphic during graphics rendering, thereby enabling the rendering of edge effects of the graphic, such as highlights on the border (or edge) of the graphic, improving the texture of the UI and the richness of the rendering effects. Attached Figure Description

[0080] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the 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.

[0081] Figure 1 A schematic diagram of a foreground bar provided for an embodiment of this application;

[0082] Figure 2 This is a schematic diagram of the graphics rendering system architecture provided in an embodiment of this application;

[0083] Figure 3 A flowchart illustrating a graphics rendering method provided in an embodiment of this application;

[0084] Figure 4 A schematic diagram of another foreground bar provided in an embodiment of this application;

[0085] Figure 5 A flowchart illustrating another graphics rendering method provided in an embodiment of this application;

[0086] Figure 6 A schematic diagram of a vertex shading process provided in an embodiment of this application;

[0087] Figure 7 A schematic diagram of a fragment coloring process provided in an embodiment of this application;

[0088] Figure 8 This is a schematic diagram of the structure of a graphics rendering device provided in an embodiment of this application;

[0089] Figure 9 This is a schematic diagram of the basic hardware architecture of a graphics rendering device provided in an embodiment of this application. Detailed Implementation

[0090] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0091] The terms “first,” “second,” “third,” and “fourth,” etc. (if present), in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular 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 a 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.

[0092] In related technologies, when computers, mobile phones and other devices are processing tasks, they often encounter situations involving graphics rendering. Taking progress bar rendering as an example, when transferring files or evaluating system performance, the UI usually uses a progress bar to display the progress of the task being processed.

[0093] Graphics rendering is typically used to render graphics of specific shapes or regular patterns. Taking the progress bar rendering example, a progress bar is a common UI element, generally consisting of a background bar and a foreground bar displaying the current progress. The rendering methods mainly differ on the foreground bar, with existing methods primarily targeting foreground bars with specific patterns or regular patterns. However, the styles of graphics that need to be rendered are diverse, such as the various styles of progress bar UIs, and existing rendering methods cannot cover all situations. For example... Figure 1 As shown: The foreground bar has four rounded corners. When the progress bar is at both ends, it is rounded, and when the progress bar is in the middle, it is right angle. It also has effects such as border (or edge) highlights, which cannot be solved by existing rendering methods.

[0094] Therefore, this application proposes a graphics rendering method that determines the offset value and vertex rounded corner size of the corresponding mask layer based on the progress value of the graphics. The graphics include one or more vertex rounded corners. Thus, based on the offset value and vertex rounded corner size of the mask layer, the graphics are rendered in the UI, achieving the rendering of graphics containing vertex rounded corners. Furthermore, this application considers the vertex rounded corners where the mask layer intersects with the graphics during graphics rendering, thereby enabling the rendering of graphics edge effects, such as graphics border (or edge) highlights.

[0095] Optionally, the graphics rendering method provided in this application embodiment can be applied to, for example, Figure 1 The graphics rendering system shown. In Figure 2 In this system, the graphics rendering architecture may include a receiving device 201 and a processing device 202.

[0096] In the specific implementation process, the receiving device 201 can be an input / output interface or a communication interface, and can be used to receive graphics to be rendered, etc.

[0097] The processing device 202 can acquire the graphic to be rendered through the receiving device 201. The graphic includes one or more rounded vertices. Then, based on the progress value of the graphic, it determines the offset value of the corresponding mask layer to be processed and the size of the rounded vertices. Finally, based on the offset value of the mask layer to be processed and the size of the rounded vertices, it performs graphic rendering on the UI, thus realizing the rendering of a graphic containing rounded vertices. Moreover, when rendering the graphic, the processing device 202 considers the rounded vertices of the intersection between the mask layer to be processed and the graphic, thereby enabling the rendering of graphic edge effects, such as the rendering of graphic border (or edge) highlights.

[0098] The UI displays the rendered graphics to be rendered, allowing users to keep track of the progress.

[0099] It should be understood that the above-mentioned processing device can be implemented by a processor reading instructions from memory and executing those instructions, or it can be implemented by a chip circuit.

[0100] The above system is only an example system. In specific implementation, it can be set up according to application requirements.

[0101] Furthermore, the system architecture described in the embodiments of this application is for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and does not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of system architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0102] The technical solutions of this application are described below using several embodiments as examples. The same or similar concepts or processes may not be repeated in some embodiments.

[0103] Figure 3 This is a flowchart illustrating a graphics rendering method provided in an embodiment of this application. The execution subject of this embodiment is... Figure 2 Taking the processing device in the example, the specific execution entity can be determined according to the actual application scenario, and this application embodiment does not impose any special restrictions on this. Figure 3 As shown, the graphics rendering method provided in this application embodiment may include the following steps:

[0104] S301: Display the graphic to be rendered in the UI, which includes one or more vertex rounded corners.

[0105] The graphic to be rendered includes one or more rounded vertices, and the graphic to be rendered can be a foreground bar.

[0106] In this embodiment of the application, the processing device can display the graphic to be rendered on the UI after acquiring it, and then obtain a mask layer corresponding to the graphic to be rendered. The shape of the mask layer can be determined according to the shape of the graphic to be rendered. For example, if the shape of the graphic to be rendered is a strip, then the mask layer can be a rectangular mask layer.

[0107] S302: In response to the progress value of the above-mentioned graphic to be rendered, determine the offset value and vertex rounded corner size of the mask layer to be processed corresponding to the above-mentioned graphic to be rendered.

[0108] Here, the aforementioned mask layer to be processed covers the border of the aforementioned graphic to be rendered. This coverage can be understood as the aforementioned mask layer being set on the aforementioned graphic to be rendered, and the size of the aforementioned mask layer being greater than or equal to the size of the border of the aforementioned graphic to be rendered.

[0109] The aforementioned offset value can be the offset of the mask layer to be processed relative to the center point of the graphic to be rendered, and the aforementioned vertex fillet can be the size of the fillet of the vertex where the mask layer to be processed intersects with the graphic to be rendered. The processing device can obtain the length of the graphic to be rendered, and then calculate the product of this length and the aforementioned progress value. The calculated product is then used as the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered, which is simple, convenient, and ensures normal subsequent processing. For example, if the processing device obtains that the length of the graphic to be rendered is 300 and the progress value is 60%, then it further calculates that the product of the length and the progress value is 180, thereby determining that the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered is 180.

[0110] Furthermore, after determining the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered, the processing device can also determine the size of the rounded corners of the vertices where the mask layer to be processed intersects with the graphic to be rendered based on the progress value and the offset value. For example, the length of the progress line of the graphic to be rendered can be determined based on the progress value and the size of the border of the graphic to be rendered. Then, based on the length of the progress line and the offset value, the size of the rounded corners of the vertices where the mask layer to be processed intersects with the graphic to be rendered can be determined. This allows the rendering of edge effects of the graphic to be rendered, such as the rendering of highlights on the border (or edge) of the graphic to be rendered, to be achieved by considering the rounded corners of the vertices where the mask layer to be processed intersects with the graphic to be rendered during subsequent graphic rendering.

[0111] For example, the processing device described above can pre-store the correspondence between the length and offset values ​​of the progress line of the graphic to be rendered and the size of the corner radius of the vertices where the mask layer to be processed intersects with the graphic to be rendered. Figure 4 As shown, taking the above-mentioned graphic to be rendered as an example, the foreground bar includes four rounded corners. The above-mentioned processing device can be based on, as follows: Figure 4 The progress value and border size of the foreground bar are used to determine the length of the foreground bar's progress line. Furthermore, based on the length of the progress line, the offset value of the foreground bar, and the aforementioned correspondence, the size of the corner radius at the intersection of the mask layer and the foreground bar can be determined, i.e., the size of the corner radius at the vertex where the mask layer to be processed intersects with the foreground bar can be determined. Figure 4 The size of the rounded corners at the top left, top right, bottom left, and bottom right vertices where the mask to be processed intersects with the foreground strip.

[0112] S303: Based on the offset value and vertex radius of the above-mentioned mask layer to be processed, render the above-mentioned graphic to be rendered in the UI.

[0113] For example, the processing device described above can perform graphics rendering based on the offset value, the size of the vertex rounded corners, the mask to be processed, and a preset Entity node tree.

[0114] Taking the aforementioned masking layer as a rectangular masking layer that covers the border of the graphic to be rendered as an example, the aforementioned Entity node tree may include:

[0115] ▽VolumeSlider

[0116] ▽ProgressMask

[0117] Border

[0118] ▽CornerMask

[0119] Line

[0120] The VolumeSlider responds to interactive events and sets a progress value. The script then sets the parameters of its child nodes (ProgressMask, CornerMask) based on this progress value to match the rendering effect of the progress bar. ProgressMask attaches a Mask component and sets parameters to render the mask over its child nodes (Border) in a specific way, such as using a fill mode. Here, the Mask component includes the parameter Offset, which represents the offset of the mask from the center point of the graphic to be rendered. CornerMask attaches a Mask component and sets parameters to render the mask over its child nodes (Line) in a specific way, such as using rounded corners. This Mask component includes the parameters TopLeft / TopRight / BottomLeft / BottomRight, which represent the size of the rounded corners at the top left, top right, bottom left, and bottom right vertices where the rectangular mask intersects with the graphic to be rendered.

[0121] Additionally, the Mask components mounted on ProgressMask and CornerMask can also include the parameter Inverted, indicating whether to invert the mask (by default, it is rendered within the mask). The size of the rectangular mask can be determined by setting the size of the Mask component's Transform2d component, thus meeting the application requirements of different application scenarios.

[0122] Here, when the aforementioned processing device performs graphics rendering based on the offset value, the size of the vertex rounded corners, the mask to be processed, and the preset Entity node tree, it can first update the Mask component in the Entity node tree based on the offset value, the size of the vertex rounded corners, and the mask to be processed. Then, it sets MaskDirty to true, and further updates the child nodes under the Mask component. When updating the child nodes under the Mask component, it determines whether MaskDirty is true. If MaskDirty is true, it means that the Mask component has been updated. The aforementioned processing device can then set the maskuniform value of the child node material and render the child node, that is, perform shading in the rendering shader to complete the mask logic and realize the rendering of the graphics to be rendered.

[0123] In this embodiment, by determining the graphic to be rendered, and then, based on the progress value of the graphic to be rendered, determining the offset value and vertex rounded corner size of the corresponding mask layer to be processed, wherein the graphic to be rendered includes one or more vertex rounded corners, the UI is rendered based on the offset value and vertex rounded corner size of the mask layer to be processed, thus realizing the rendering of graphics containing vertex rounded corners. Moreover, in the graphic rendering process, this embodiment considers the vertex rounded corners where the mask layer to be processed intersects with the graphic to be rendered, thereby enabling the rendering of edge effects of the graphic to be rendered, such as the rendering of highlights on the border (or edge) of the graphic to be rendered, improving the texture of the UI and the richness of the rendering effects.

[0124] In addition, when the above-mentioned processing device performs graphics rendering, such as the above-mentioned rendering child node, it performs coloring in the rendering shader. When completing the masking logic, it considers the above-mentioned offset value and the mask to be processed, and performs vertex coloring on the graphics in the UI. Based on the graphics with vertex coloring and the size of the vertex rounded corners, it performs fragment coloring on the remaining pixels to be rendered in the UI, so as to realize the rendering of graphics containing vertex rounded corners, and at the same time make the rendered graphics have effects such as border (or edge) highlights. Figure 5 This is a flowchart illustrating another graphics rendering method proposed in an embodiment of this application. Figure 5 As shown, the method includes:

[0125] S501: Display the graphic to be rendered in the UI, which includes one or more vertex rounded corners.

[0126] S502: In response to the progress value of the graphic to be rendered, determine the offset value and vertex rounded corner size of the mask layer to be processed corresponding to the graphic to be rendered, wherein the mask layer to be processed covers the border of the graphic to be rendered.

[0127] The implementation of steps S501-S502 is the same as that of steps S301-S302 above, and will not be repeated here.

[0128] S503: Based on the offset value of the above-mentioned mask layer to be processed, vertex shading is performed on the above-mentioned graphic to be rendered in the UI, and based on the vertex shading of the graphic to be rendered and the vertex roundness of the above-mentioned mask layer to be processed, fragment shading is performed on the remaining pixels to be rendered in the UI.

[0129] Here, the aforementioned processing device can, based on the 3D pose of the mask node to be processed in world space, convert the 3D position of the vertex to be rendered from local space to mask space. Then, according to the converted 3D position and the aforementioned offset value, vertex shading processing is performed to achieve the rendering of vertex rounded corners in the graphic. The aforementioned world space defines the origin of the virtual 3D space, such as point A. If a 3D cube is placed at position (2, 2, 2) in this world space with a side length of 1, then the positions of the cube's 8 points are (1, 1, 1), (1, 1, 3), (1, 3, 1), (1, 3, 3), (3, 1, 1)... Each world space corresponds to a local space. For example, the point (2, 2, 2) in world space is the point (0, 0, 0) in the cube's local space. Therefore, in the local space, the positions of the 8 points are (-1, -1, -1), (-1, -1, 1), (-1, 1, -1), (-1, 1, 1)... In addition, the aforementioned overlay space is the local space of the overlay node.

[0130] For example, such as Figure 6 As shown, the above processing device can use the above Entity node tree to convert the three-dimensional position of the vertex to be rendered from the local space to the 3D space pos3d where the Mask is located, and then set pos3d.xy = pos3d.xy – offset, that is, take the above offset value into account and perform vertex shading processing.

[0131] In this embodiment, when performing fragment shading, the processing device can determine whether the remaining pixels to be rendered are outside the area of ​​the masking layer based on the vertex-shaded graphic and the vertex radius of the masking layer. If pixel i is not outside the area of ​​the masking layer, the processing device can further determine whether pixel i is outside the vertex radius of the masking layer, where pixel i is any one of the remaining pixels to be rendered, i = 1, ..., n, and n is an integer determined by the number of remaining pixels to be rendered. If pixel i is not outside the vertex radius of the masking layer, the processing device can output the original color of pixel i to the UI.

[0132] If the pixel to be rendered, i, is outside the area of ​​the mask to be processed, the aforementioned processing device can either leave the pixel to be rendered, i, uncolored or output a completely transparent color in the UI. Similarly, if the pixel to be rendered, i, is outside the vertex rounded corner area of ​​the mask to be processed, the aforementioned processing device can also leave the pixel to be rendered, i, uncolored or output a completely transparent color in the UI.

[0133] In this way, the aforementioned processing device can not only render graphics with rounded corners of vertices through vertex shading and fragment shading, but also render the edge effects of the graphics to be rendered, thereby improving the texture of the UI and the richness of the rendering effects.

[0134] Here, when the aforementioned processing device determines whether the remaining pixels to be rendered are outside the processing mask area, it can obtain the 2D coordinates of the pixel to be rendered, i (as shown in pos3d.xy above), based on the 2D projection and rasterization of the vertex to be rendered. Then, based on the 2D coordinates of the pixel to be rendered, it determines whether the pixel to be rendered is outside the processing mask area, improving the accuracy of the determination result and further enhancing the subsequent graphics rendering effect. Rasterization is the process of transforming a primitive into a two-dimensional image.

[0135] For example, such as Figure 7 As shown, after obtaining the 2D coordinates of the pixel i to be rendered, the processing device can further normalize the 2D coordinates of the pixel i to facilitate subsequent processing. For example, based on the normalized data, it can determine whether the pixel i to be rendered is outside the mask area to be processed. The normalization process can be determined according to the actual situation. For example, the normalized data can be nPos = abs(pos3d.xy / (0.5*size)), where abs() represents taking the absolute value, size represents the length of the graphic to be rendered, and nPos takes a value between -1 and 1. Taking a rectangular mask as an example, after normalizing the 2D coordinates of the pixel i to be rendered, the processing device can determine whether the pixel i to be rendered exceeds the length of the mask and whether the pixel i to be rendered exceeds the width of the mask. The processing device calculates the preset parameter `factor`, where `factor = max(nPos.x, nPos.y)`, and `nPos.x` and `nPos.y` are determined based on `nPos`. Then, it checks if `factor` is greater than 1. If `factor` is greater than 1, it means that the pixel to be rendered, `i`, exceeds the length of the mask layer and / or exceeds the width of the mask layer, indicating that the pixel to be rendered, `i`, is outside the mask layer area. This judgment has high accuracy. Therefore, the processing device can either leave the pixel to be rendered, `i`, uncolored, or output a completely transparent color in the UI. Otherwise, it means that the pixel to be rendered, `i`, is not outside the mask layer area, and the UI outputs the original color of the pixel to be rendered, improving the graphics rendering effect.

[0136] Furthermore, when the graphic to be rendered includes four rounded corners and the mask to be processed is a rectangular mask, the aforementioned processing device, when determining whether the pixel i to be rendered is outside the vertex rounded corner area of ​​the mask to be processed, can first obtain the 2D coordinates of the pixel i to be rendered based on the 2D projection and rasterization of the vertex to be rendered. Then, based on the 2D coordinates of the pixel i to be rendered, the vertex rounded corner of the mask to be processed that is closest to the pixel i to be rendered can be determined. Then, the center and circumscribed rectangle of the rounded corner can be calculated. Thus, based on the center, circumscribed rectangle and the 2D coordinates of the pixel i to be rendered, it can be determined whether the pixel i to be rendered is outside the vertex rounded corner area of ​​the mask to be processed, making the determination result more accurate, so as to better realize the subsequent rendering of the graphic containing vertex rounded corners.

[0137] For example, such as Figure 7 As shown, the aforementioned processing device can determine the rounded corner of the vertex of the mask layer closest to the pixel i to be rendered using pos3d.xy. Then, it calculates the center and circumscribed rectangle of this rounded corner, and determines whether pos3d.xy is within the rectangle. If not, it sets the preset parameter flag = 0. If so, it further determines whether the distance from pos3d.xy to the center is greater than the radius. If it is, it sets flag = 1; otherwise, it sets flag = 0. Based on the value of flag, it determines whether the pixel i to be rendered is outside the rounded corner area of ​​the mask layer. If flag > 0, it determines that the pixel i to be rendered is outside the rounded corner area of ​​the mask layer, improving the accuracy of the determination. Therefore, the UI does not color the pixel i to be rendered or outputs a completely transparent color. Otherwise, it determines that the pixel i to be rendered is not outside the rounded corner area of ​​the mask layer, and the UI outputs the original color of the pixel i to be rendered, thus effectively rendering graphics containing rounded corners.

[0138] In the foreground rendering of this application embodiment, vertex shading processing is performed based on the above offset value, the size of the vertex rounded corners and the mask to be processed. Then, based on the mask to be processed after vertex shading processing, fragment shading processing is performed on the remaining pixels to be rendered, thereby realizing the rendering of graphics such as edge effects and rounded corners, which improves the texture of the UI and the richness of the rendering effect.

[0139] Furthermore, when the graphic to be rendered is a progress bar, the processing device can first determine the foreground and background bars of the graphic based on the graphic. Then, it renders the background bar using a preset rendering method and renders the foreground bar using the graphic rendering method.

[0140] The aforementioned preset rendering method can be either base map rendering or 9-grid stretching rendering. The graphics rendering method described above is provided in any of the foregoing embodiments; for details, please refer to the foregoing embodiments, which will not be repeated here.

[0141] Corresponding to the graphics rendering method in the above embodiments, Figure 8 This is a schematic diagram of the structure of a graphics rendering apparatus provided in an embodiment of this application. For ease of explanation, only the parts relevant to the embodiments of this application are shown. Figure 8 This is a schematic diagram of a graphics rendering device provided in an embodiment of this application. The graphics rendering device 80 includes: a graphics display module 801, a masking processing module 802, and a graphics rendering module 803. The graphics rendering device here can be the aforementioned processing device itself, or a chip or integrated circuit that implements the functions of the processing device. It should be noted that the division into the graphics display module, the masking processing module, and the graphics rendering module is only a logical functional division; physically, they can be integrated or independent.

[0142] The graphics display module 801 is used to display a graphic to be rendered on the UI, wherein the graphic to be rendered includes one or more rounded vertices.

[0143] The mask processing module 802 is used to determine the offset value and vertex rounded corner size of the mask corresponding to the graphic to be rendered in response to the progress value of the graphic to be rendered, wherein the mask covers the border of the graphic to be rendered.

[0144] The graphics rendering module 803 is used to render the graphics to be rendered in the UI based on the offset value and vertex rounded corner size of the mask to be processed.

[0145] In one possible implementation, the graphics rendering module 803 is specifically used for:

[0146] Based on the offset value of the mask to be processed, the UI performs vertex shading on the graphic to be rendered, and based on the vertex shading of the graphic to be rendered and the vertex roundness of the mask to be processed, the UI performs fragment shading on the remaining pixels to be rendered.

[0147] In one possible implementation, the graphics rendering module 803 is specifically used for:

[0148] Based on the 3D pose of the mask node to be processed in world space, the 3D position of the vertex to be rendered is transformed from local space to mask space;

[0149] Based on the converted 3D position and the offset value of the mask to be processed, vertex shading is performed on the graphic to be rendered in the UI.

[0150] In one possible implementation, the graphics rendering module 803 is specifically used for:

[0151] Based on the vertex-shaded graphic to be rendered, determine whether the remaining pixels to be rendered are outside the masking area to be processed.

[0152] If the pixel to be rendered i is not outside the area of ​​the mask layer to be processed, then it is determined whether the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed. The pixel to be rendered i is any one of the remaining pixels to be rendered, i = 1, ..., n, where n is an integer and is determined according to the number of the remaining pixels to be rendered.

[0153] If the pixel to be rendered i is not outside the vertex rounded corner area of ​​the mask to be processed, then the original color of the pixel to be rendered i is output in the UI.

[0154] In one possible implementation, the graphics rendering module 803 is further configured to:

[0155] If the pixel to be rendered i is outside the mask area to be processed, then the UI will not color the pixel to be rendered i or will output a completely transparent color.

[0156] In one possible implementation, the graphics rendering module 803 is specifically used for:

[0157] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0158] Based on the 2D coordinates of the pixel i to be rendered, determine whether the pixel i to be rendered is outside the masking area to be processed.

[0159] In one possible implementation, the graphics rendering module 803 is further configured to:

[0160] If the pixel to be rendered is outside the vertex rounded corner area of ​​the mask layer to be processed, then the UI will not color the pixel to be rendered or will output a completely transparent color.

[0161] In one possible implementation, the graphic to be rendered includes four rounded corners, and the mask to be processed is a rectangular mask that covers the border of the graphic to be rendered.

[0162] The graphics rendering module 803 is specifically used for:

[0163] The 2D coordinates of the pixel i to be rendered are obtained based on the 2D projection and rasterization of the vertex to be rendered.

[0164] Based on the 2D coordinates of the pixel i to be rendered, determine the rounded corner of the graphic to be rendered that is closest to the pixel i;

[0165] Calculate the center and bounding rectangle of the vertex fillet of the mask layer that is closest to the pixel i to be rendered;

[0166] Based on the center of the circle, the circumscribed rectangle, and the 2D coordinates of the pixel to be rendered i, determine whether the pixel to be rendered i is outside the vertex rounded corner area of ​​the mask layer to be processed.

[0167] In one possible implementation, the masking module 802 is specifically used for:

[0168] Obtain the length of the graphic to be rendered;

[0169] Calculate the product of the length and the progress value, and use the calculated product as the offset value of the mask layer to be processed relative to the center point of the graphic to be rendered;

[0170] Based on the progress value and the offset value, determine the corner radius of the vertex where the mask layer to be processed intersects with the graphic to be rendered.

[0171] In one possible implementation, the masking module 802 is specifically used for:

[0172] The length of the progress line of the graphic to be rendered is determined based on the progress value and the size of the border of the graphic to be rendered.

[0173] Based on the length of the progress line and the offset value, the corner radius of the vertex where the mask to be processed intersects with the graphic to be rendered is determined.

[0174] In one possible implementation, the graphic to be rendered is a foreground bar.

[0175] The apparatus provided in this application embodiment can be used to execute the technical solutions of the above method embodiments. Its implementation principle and technical effect are similar, and will not be repeated here.

[0176] Optionally, Figure 9 A schematic diagram of a possible basic hardware architecture of the graphics rendering device described in this application is provided.

[0177] See Figure 9 The graphics rendering device includes at least one processor 901 and a communication interface 903. Optionally, it may also include a memory 902 and a bus 904.

[0178] In the graphics rendering device, the number of processors 901 can be one or more. Figure 9Only one processor 901 is illustrated. Optionally, processor 901 can be a central processing unit (CPU), a graphics processing unit (GPU), or a digital signal processor (DSP). If the graphics rendering device has multiple processors 901, the types of the multiple processors 901 can be different or the same. Optionally, the multiple processors 901 of the graphics rendering device can also be integrated into a multi-core processor.

[0179] The memory 902 stores computer instructions and data; the memory 902 may store computer instructions and data required to implement the graphics rendering method provided in this application, for example, the memory 902 stores instructions for implementing the steps of the graphics rendering method. The memory 902 may be any one or any combination of the following storage media: non-volatile memory (e.g., read-only memory (ROM), solid-state disk (SSD), hard disk drive (HDD), optical disk), volatile memory).

[0180] The communication interface 903 can provide information input / output for the at least one processor. It may also include any one or any combination of the following devices: a network interface (e.g., an Ethernet interface), a wireless network card, or other devices with network access capabilities.

[0181] Optionally, the communication interface 903 can also be used for data communication between the graphics rendering device and other computing devices or terminals.

[0182] Further optional, Figure 9 Bus 904 is represented by a thick line. Bus 904 connects processor 901 to memory 902 and communication interface 903. In this way, through bus 904, processor 901 can access memory 902 and can also use communication interface 903 to exchange data with other computing devices or terminals.

[0183] In this application, the graphics rendering device executes computer instructions stored in memory 902, causing the graphics rendering device to implement the graphics rendering method provided in this application, or causing the graphics rendering device to deploy the graphics rendering apparatus described above.

[0184] From the perspective of logical functional division, for example, such as Figure 9As shown, the memory 902 may include a graphics display module 801, a masking module 802, and a graphics rendering module 803. This inclusion refers only to the fact that the instructions stored in the memory, when executed, can respectively implement the functions of the graphics display module, the masking module, and the graphics rendering module, and is not limited to the physical structure.

[0185] This application provides a computer-readable storage medium, wherein the computer program product includes computer instructions that instruct a computing device to execute the graphics rendering method described above provided in this application.

[0186] This application provides a computer program product, including computer instructions, which are executed by a processor using the above-described graphics rendering method.

[0187] This application provides a chip including at least one processor and a communication interface, wherein the communication interface provides information input and / or output to the at least one processor. Furthermore, the chip may also include at least one memory for storing computer instructions. The at least one processor is used to invoke and execute the computer instructions to perform the graphics rendering method provided in this application.

[0188] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0189] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0190] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in a combination of hardware and software functional units.

Claims

1. A method of graphics rendering, characterized by, The method comprises: displaying a to-be-rendered graph on a user interface, the to-be-rendered graph comprising one or more vertex corners; determining, in response to a progress value of the to-be-rendered graph, an offset value and a vertex corner size of a to-be-processed mask corresponding to the to-be-rendered graph, the to-be-processed mask covering a border of the to-be-rendered graph, the to-be-rendered graph comprising a foreground bar, the progress value being used to indicate a length of a progress line of the foreground bar; rendering the to-be-rendered graph on the user interface based on the offset value and the vertex corner size of the to-be-processed mask.

2. The method of claim 1, wherein, The rendering the to-be-rendered graph on the user interface based on the offset value and the vertex corner size of the to-be-processed mask comprises: performing vertex shading on the to-be-rendered graph on the user interface based on the offset value of the to-be-processed mask, and performing fragment shading on each of the remaining to-be-rendered pixel points on the user interface based on the vertex-shaded to-be-rendered graph and the vertex corner size of the to-be-processed mask.

3. The method of claim 2, wherein, The performing vertex shading on the to-be-rendered graph on the user interface based on the offset value of the to-be-processed mask comprises: converting a three-dimensional position of a to-be-rendered vertex from a local space to a mask space based on a three-dimensional pose of the to-be-processed mask node in a world space; performing vertex shading on the to-be-rendered graph on the user interface according to the converted three-dimensional position and the offset value of the to-be-processed mask.

4. The method of claim 3, wherein, The performing fragment shading on each of the remaining to-be-rendered pixel points on the user interface based on the vertex-shaded to-be-rendered graph and the vertex corner size of the to-be-processed mask comprises: determining, based on the vertex-shaded to-be-rendered graph, whether the remaining to-be-rendered pixel points are outside the to-be-processed mask region; if the to-be-rendered pixel point i is not outside the to-be-processed mask region, determining whether the to-be-rendered pixel point i is outside a vertex corner region of the to-be-processed mask, wherein the to-be-rendered pixel point i is any one of the remaining to-be-rendered pixel points, i = 1, …, n, n is an integer, and n is determined according to the number of the remaining to-be-rendered pixel points; if the to-be-rendered pixel point i is not outside the vertex corner region of the to-be-processed mask, outputting an original color of the to-be-rendered pixel point i on the user interface.

5. The method of claim 4, wherein, After the determining whether the remaining to-be-rendered pixel points are outside the to-be-processed mask region, the method further comprises: if the to-be-rendered pixel point i is outside the to-be-processed mask region, not coloring or outputting a full-transparent color for the to-be-rendered pixel point i on the user interface.

6. The method according to claim 4 or 5, characterized in that, The determining whether the remaining to-be-rendered pixel points are outside the to-be-processed mask region comprises: obtaining a two-dimensional coordinate of the to-be-rendered pixel point i according to a two-dimensional projection and rasterization of the to-be-rendered vertex; determining, based on the two-dimensional coordinate of the to-be-rendered pixel point i, whether the to-be-rendered pixel point i is outside the to-be-processed mask region.

7. The method of claim 4, wherein, After the determining whether the to-be-rendered pixel point i is outside the vertex corner region of the to-be-processed mask, the method further comprises: If the pixel point i to be rendered is outside the vertex corner region of the to-be-processed mask layer, the pixel point i to be rendered is not colored or outputted with a full transparent color on the user interface.

8. The method according to claim 4 or 7, characterized in that, The to-be-rendered graph includes four corner angles, and the to-be-processed mask layer is a rectangular mask layer covering a border of the to-be-rendered graph. The judgment of whether the pixel point i to be rendered is outside the vertex corner region of the to-be-processed mask layer includes: According to the two-dimensional projection of the to-be-rendered vertex and rasterization, a two-dimensional coordinate of the pixel point i to be rendered is obtained; Based on the two-dimensional coordinate of the pixel point i to be rendered, a vertex corner of the to-be-processed mask layer closest to the pixel point i to be rendered is determined; A center of the vertex corner of the to-be-processed mask layer closest to the pixel point i to be rendered and an outer rectangle of the vertex corner are calculated; According to the center, the outer rectangle and the two-dimensional coordinate of the pixel point i to be rendered, it is judged whether the pixel point i to be rendered is outside the vertex corner region of the to-be-processed mask layer.

9. The method according to any one of claims 1 to 5, characterized in that, The determination of the offset value and the vertex corner size of the to-be-processed mask layer corresponding to the to-be-rendered graph in response to the progress value of the to-be-rendered graph includes: The length of the to-be-rendered graph is obtained; A product of the length and the progress value is calculated, and the calculated product is taken as the offset value of the to-be-processed mask layer relative to the center point of the to-be-rendered graph; According to the progress value and the offset value, the vertex corner size of the to-be-processed mask layer intersecting with the to-be-rendered graph is determined.

10. The method of claim 9, wherein, The determination of the vertex corner size of the to-be-processed mask layer intersecting with the to-be-rendered graph according to the progress value and the offset value includes: According to the progress value and the size of the border of the to-be-rendered graph, the length of the progress line of the to-be-rendered graph is determined; Based on the length of the progress line and the offset value, the vertex corner size of the to-be-processed mask layer intersecting with the to-be-rendered graph is determined.

11. A graphics rendering device, comprising: It includes: A graph display module is configured to display a to-be-rendered graph on a user interface, the to-be-rendered graph including one or more vertex corners; A mask layer processing module is configured to determine an offset value and a vertex corner size of a to-be-processed mask layer corresponding to the to-be-rendered graph in response to a progress value of the to-be-rendered graph, the to-be-processed mask layer covering a border of the to-be-rendered graph, the to-be-rendered graph including a foreground bar, and the progress value being used to indicate the length of a progress line of the foreground bar; A graph rendering module is configured to render the to-be-rendered graph on the user interface based on the offset value and the vertex corner size of the to-be-processed mask layer.

12. The apparatus of claim 11, wherein, The graph rendering module is specifically configured to: perform vertex shading on the to-be-rendered graph on the user interface based on the offset value of the to-be-processed mask layer, and perform fragment shading on each remaining to-be-rendered pixel point on the user interface based on the vertex-shaded to-be-rendered graph and the vertex corner size of the to-be-processed mask layer.

13. A graphics rendering device, comprising: It includes: a processor; a memory; and a computer program; wherein the computer program is stored in the memory and configured to be executed by the processor, and the computer program includes instructions for executing the method of any one of claims 1-10.

14. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, which causes the server to perform the method of any one of claims 1-10.

15. A computer program product, characterised in that, comprising computer instructions that, when executed by a processor, perform the method of any one of claims 1-10.

Images