Page rendering method and device, storage medium and electronic device

Abstract

The application discloses a page rendering method and device, a storage medium and an electronic device. The method comprises the following steps: acquiring a first page element, wherein the first page element is used for representing a to-be-rendered element in a target user interface; constructing a target occlusion stack based on the first page element, wherein the target occlusion stack is used for storing a second page element and a merging result of the second page element, and the second page element is used for representing an occlusion element in the target user interface; determining a third page element by using the target occlusion stack, wherein the third page element is used for representing a to-be-displayed element in the target user interface; and rendering and outputting the third page element to obtain a target page. The application solves the technical problem of large performance overhead of a page rendering method in the related art.

Description

Technical Field

[0001] This application relates to the field of games, and more specifically, to a page rendering method, apparatus, storage medium, and electronic device. Background Technology

[0002] During game page rendering, all relevant elements are typically sent to the graphics card for drawing. However, this process involves two aspects of performance overhead: 1. The logical overhead of the CPU preparing rendering data, and the communication overhead caused by driver calls; 2. The bandwidth and computational overhead of the graphics card for reading resources and outputting pixels. Therefore, performance overhead can be reduced by minimizing unnecessary rendering operations, such as omitting content that does not contribute to the current screen. Figure 1 As shown, elements that are off-screen or obscured can be culled.

[0003] For element culling, related technologies employ precise calculations to determine which pixels on the screen an element covers, and whether these pixels are already covered by other elements. If all pixels are covered, the entire element is culled. This process is called rasterization. However, the complexity of rendering game elements is significant, and culling occluded elements incurs substantial performance overhead.

[0004] Therefore, the page rendering methods in related technologies have a large performance overhead.

[0005] There is currently no effective solution to the above problems. Summary of the Invention

[0006] This application provides at least some embodiments of a page rendering method, apparatus, storage medium, and electronic device to at least solve the technical problem of high performance overhead in related technologies.

[0007] According to one embodiment of this application, a page rendering method is provided, including obtaining a first page element, wherein the first page element is used to represent an element to be rendered within a target user interface; constructing a target occlusion stack based on the first page element, wherein the target occlusion stack is used to store a second page element and a merging result of the second page element, the second page element being used to represent an occlusion element within the target user interface; determining a third page element using the target occlusion stack, wherein the third page element is used to represent an element to be displayed within the target user interface; and rendering the third page element to obtain a target page.

[0008] According to one embodiment of this application, a page rendering apparatus is also provided, including an acquisition module for acquiring a first page element, wherein the first page element represents an element to be rendered within a target user interface; a construction module for constructing a target occlusion stack based on the first page element, wherein the target occlusion stack stores a second page element and a merging result of the second page element, the second page element representing an occlusion element within the target user interface; a determination module for determining a third page element using the target occlusion stack, wherein the third page element represents an element to be displayed within the target user interface; and a rendering module for rendering the third page element to obtain a target page.

[0009] According to one embodiment of this application, a computer-readable storage medium is also provided, in which a computer program is stored, wherein the computer program is configured to execute the page rendering method described in any of the preceding claims when run by a processor.

[0010] According to one embodiment of this application, an electronic device is also provided, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the page rendering method described in any of the preceding claims.

[0011] In at least some embodiments of this application, by obtaining a first page element, constructing a target occlusion stack based on the first page element, determining a third page element using the target occlusion stack, and finally rendering and outputting the third page element to obtain the target page, the purpose of effectively rendering the page is achieved. This realizes the technical effect of reducing performance overhead during page rendering, thereby solving the technical problem of high performance overhead in related technologies. Attached Figure Description

[0012] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0013] Figure 1 This is a schematic diagram of an element removal technique in related technologies;

[0014] Figure 2 This is a schematic diagram of a related technology for removing elements from outside the screen;

[0015] Figure 3 This is a hardware structure block diagram of a mobile terminal according to one embodiment of the page rendering method of this application;

[0016] Figure 4 This is a flowchart of a page rendering method according to one embodiment of this application;

[0017] Figure 5 This is a schematic diagram of a tree structure of a UI node according to one embodiment of this application;

[0018] Figure 6 This is a schematic diagram illustrating the merging of page elements according to one embodiment of this application;

[0019] Figure 7 This is a schematic diagram of a target occlusion stack according to one embodiment of this application;

[0020] Figure 8 This is a schematic diagram of a third page element determination process according to one embodiment of this application;

[0021] Figure 9 This is a schematic diagram of a page rendering result according to one embodiment of this application;

[0022] Figure 10 This is a schematic diagram of another page rendering result according to one embodiment of this application;

[0023] Figure 11 This is a structural block diagram of a page rendering apparatus according to one embodiment of the present application;

[0024] Figure 12 This is a schematic diagram of an electronic device according to an embodiment of this application. Detailed Implementation

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

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

[0027] First, some nouns or terms that appear in the description of the embodiments of this application shall be interpreted as follows:

[0028] UI: User Interface, is the graphical user interface in a game.

[0029] 2D: 2 Dimension, a two-dimensional plane, refers to two-dimensional images and game graphics created using two-dimensional images.

[0030] 3D: 3 Dimension, three-dimensional space, refers to game graphics rendered using three-dimensional graphics.

[0031] CPU: Central Processing Unit, is the computing core of computers and smart devices.

[0032] AABB: Axis Aligned Bounding Box. In a two-dimensional plane, axis alignment specifically refers to alignment with the x-axis and y-axis. The bounding box is the outer rectangle of a polygon. Therefore, an axis-aligned bounding box is the outer rectangle of the target polygon, and the sides of the rectangle are parallel to the x-axis and y-axis.

[0033] During the page rendering process of related technologies, content that does not contribute to the current image is not rendered, and elements outside the screen and obscured elements can be removed. Figure 2 This is a schematic diagram of a related technology for removing off-screen elements, such as... Figure 2 As shown, the screen can be viewed as a rectangle. The position and size of the displayed element on the screen (rectangle) are represented by a rectangular bounding box (i.e., an AABB bounding box). By performing simple planar geometric calculations between the rectangular bounding box and the screen (rectangle), it can be determined whether the element is outside the screen. If it is outside the screen, the element will not be rendered.

[0034] Specifically, the specific process of determining whether an element is outside the screen is as follows: Assume that the four vertex coordinates of the screen (rectangle) are: the upper left corner (x_left, y_top), the upper right corner (x_right, y_top), the lower left corner (x_left, y_bottom), and the lower right corner (x_right, y_bottom). Assume that the four vertex coordinates of the AABB bounding box of the drawn element are: the upper left corner (x1, y1), the upper right corner (x2, y1), the lower left corner (x1, y2), and the lower right corner (x2, y2). If x2 < x_left, the element is on the left side outside the screen. Similarly, if x1 > x_right, the element is on the right side outside the screen. If y1 < y_bottom, the element is below the screen. If y2 > y_top, the element is above the screen. If none of the above situations exist, there is an overlapping part between the AABB bounding box of the element and the screen, which can be approximately considered that the element overlaps with the screen. The approximation is because the shape of the element and the shape of the AABB bounding box are not exactly the same.

[0035] According to the above process, only the elements outside the screen can be removed. For the elements blocked inside the screen, in the related art, they are removed through the rasterization method. However, rasterization will increase the CPU overhead.

[0036] In a possible implementation manner, for the page rendering method commonly used in the background of the game field, after practice and careful research by the inventor, there is still a technical problem of relatively large performance overhead. Based on this, a page rendering method is proposed. The technical concept adopted is to obtain the first page element, then construct a target occlusion stack based on the first page element, then use the target occlusion stack to determine the third page element, and finally render and output the third page element to obtain the target page, achieving the purpose of effectively rendering the page, thus realizing the technical effect of reducing the performance overhead during page rendering, and further solving the technical problem of relatively large performance overhead of the page rendering method in the related art.

[0037] The above method embodiments involved in this application can be executed on a mobile terminal, a computer terminal, or a similar computing device. Taking running on a mobile terminal as an example, the mobile terminal can be a smart phone, a tablet computer, a handheld computer, a mobile Internet device, a PAD, a game console, and other terminal devices.

[0038] Figure 3 It is a hardware structure block diagram of a mobile terminal for a page rendering method according to an embodiment of the present application. As Figure 3 shown, the mobile terminal can include one or more ( Figure 3Only one is shown in the image. Processor 302 (processor 302 may include, but is not limited to, a central processing unit (CPU), graphics processing unit (GPU), digital signal processing (DSP) chip, micro controller unit (MCU), field programmable gate array (FPGA), neural network processor (NPU), tensor processing unit (TPU), artificial intelligence (AI) type processor, etc.) and memory 304 for storing data. In one embodiment of this application, it may also include: input / output device 308 and display device 310.

[0039] In some optional embodiments primarily focused on gaming scenarios, the aforementioned device may also provide a human-computer interaction interface with a touch-sensitive surface. This interface can sense finger contact and / or gestures to interact with a graphical user interface (GUI). The human-computer interaction functions may include the following: creating web pages, drawing, word processing, creating electronic documents, playing games, video conferencing, instant messaging, sending and receiving emails, call interfaces, playing digital videos, playing digital music, and / or web browsing, etc. Executable instructions for performing the aforementioned human-computer interaction functions are configured / stored in one or more processor-executable computer program products or readable storage media.

[0040] Those skilled in the art will understand that Figure 3 The structure shown is for illustrative purposes only and does not limit the structure of the mobile terminal described above. For example, the mobile terminal may also include components that are more... Figure 3 The more or fewer components shown, or having the same Figure 3 The different configurations shown.

[0041] According to one embodiment of this application, an embodiment of a page rendering method is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0042] In one possible implementation, embodiments of this application provide a page rendering method. Figure 4This is a flowchart of a page rendering method according to one embodiment of this application, such as... Figure 4 As shown, the method includes the following steps:

[0043] Step S42: Obtain the first page element, where the first page element represents the element to be rendered within the target user interface.

[0044] In step S42 above, the first page element is used to represent all the elements to be rendered within the target user interface (UI), and can also be called UI elements or UI nodes.

[0045] In game UI design, artists create the interface by arranging UI elements. Each UI node can have a hierarchical relationship, forming an overall tree-like node structure, which can be like... Figure 5 As shown. Figure 5 This is a schematic diagram of a tree structure of UI nodes according to one embodiment of this application, such as... Figure 5 As shown, regions, groups, images, and labels are all UI nodes and also the units for UI rendering.

[0046] exist Figure 5 In the tree structure of the UI nodes shown, the UI is rendered from top to bottom, following the order from the root node to the leaf node.

[0047] Step S44: Construct a target occlusion stack based on the first page elements, wherein the target occlusion stack is used to store the second page elements and the merging result of the second page elements, and the second page elements are used to represent the occlusion elements within the target user interface.

[0048] In step S44 above, after obtaining the first page element, a target occlusion stack can be constructed based on the first page element.

[0049] Specifically, the aforementioned target occlusion stack can be used to store the second page element and the merged result of the second page element. The second page element is used to represent the occlusion element in the UI, that is, the element that is occluded by other elements, which can also be called the occlusion body.

[0050] For example, after obtaining all the elements to be rendered in the UI, a target occlusion stack can be constructed based on all the elements to be rendered. The target occlusion stack stores all the occlusion elements in the UI and the merging result of the occlusion elements.

[0051] Step S46: Determine the third page element using the target occlusion stack, where the third page element represents the element to be displayed within the target user interface.

[0052] In step S46 above, after constructing the target occlusion stack based on the first page element, the third page element can be determined using the target occlusion stack.

[0053] Since elements to be rendered in the UI may be obscured by other elements, it is not necessary to render the obscured elements; only the unobscured elements need to be rendered. Therefore, the target occlusion stack can be used to determine the elements to be displayed in the UI, i.e., the unobscured elements, so that the unobscured elements can be rendered.

[0054] Step S48: Render the elements of the third page to obtain the target page.

[0055] In step S48 above, after determining the third page element using the target occlusion stack, the third page element can be rendered and output to obtain the target page.

[0056] Specifically, after determining the elements to be displayed in the UI (i.e., the elements that are not occluded) using the target occlusion stack, the elements to be displayed in the UI can be rendered to obtain the rendered page.

[0057] Based on the above steps S42 to S48, by obtaining the first page element, constructing a target occlusion stack based on the first page element, determining the third page element using the target occlusion stack, and finally rendering and outputting the third page element, the target page is obtained, thus achieving the purpose of effectively rendering the page. This achieves the technical effect of reducing performance overhead during page rendering, thereby solving the technical problem of high performance overhead in page rendering methods in related technologies.

[0058] The page rendering method in the above embodiments will be further described below.

[0059] Optionally, in step S44 above, constructing the target occlusion stack based on the first page element includes:

[0060] Step S441: Traverse the first page elements based on a preset order to obtain the second page elements, wherein the preset order is the reverse of the rendering order of the first page elements.

[0061] In step S441 above, the preset order is the opposite of the rendering order of the elements to be rendered, that is, the first page elements are traversed in reverse order. The rendering order is from top to bottom, so the preset order is from bottom to top, thereby traversing the first page elements from bottom to top to obtain the second page elements.

[0062] Specifically, iterate through all elements to be rendered from bottom to top to obtain all obscuring elements within the UI. For example, such as Figure 5 As shown, the rendering order of the UI is region, group, image, label, list. By traversing these elements to be rendered in the order of list, label, image, group, region, all occluded elements in the UI can be obtained.

[0063] Step S442: Construct an initial occlusion stack using the elements of the second page.

[0064] In step S442 above, after traversing the first page elements according to a preset order to obtain the second page elements, an initial occlusion stack can be constructed using the second page elements, wherein the initial occlusion stack is used to store all occlusion elements.

[0065] Specifically, in the initial occlusion stack, the bottom of the stack contains the last rendered occlusion element, and the top of the stack contains the first rendered occlusion element. For example, there are three interfaces: interface A, interface B, and interface C. Interface C is at the bottom, and interfaces B and A are on top. The UI rendering order is C, B, A. The stack is traversed according to the order A, B, C. When A is an occlusion element, A will be written to the bottom of the stack. If B is also an occlusion element, but C is not an occlusion element, then B will also be written to the stack. Therefore, the initial occlusion stack is [B, A], where A is the bottom element.

[0066] Step S443: Merge the initial occlusion stack to obtain the target occlusion stack.

[0067] In step S443 above, after constructing the initial occlusion stack using the second page element, the initial occlusion stack can be merged to obtain the target occlusion stack.

[0068] Based on the above steps S441 to S443, the first page elements are traversed according to a preset order to obtain the second page elements. Then, the second page elements are used to construct an initial occlusion stack. Finally, the initial occlusion stack is merged to obtain the target occlusion stack, so as to determine the third page elements.

[0069] Optionally, in step S441 above, the elements of the first page are traversed according to a preset order to obtain the elements of the second page, including:

[0070] Step S4411: Obscuration marker recognition is performed on the first page elements according to a preset order.

[0071] In step S4411 above, the occlusion markers of the first page elements are identified according to a preset order, which can determine whether the first page elements have corresponding occlusion markers.

[0072] Specifically, during the UI creation process, the graphic designer will actively select a portion of the page and mark it as an occlusion element in the editor. Therefore, the occlusion markers of the elements to be rendered can be identified in the reverse order of the rendering order, thereby determining whether the elements to be rendered have corresponding occlusion markers.

[0073] In step S4412, in response to the existence of a corresponding occlusion marker for the first page element, the first page element is determined as the second page element.

[0074] In step S4412 above, when the first page element has a corresponding occlusion mark, the first page element is determined as the second page element. Specifically, when the element to be rendered has a corresponding occlusion mark, the element to be rendered can be determined as the occlusion element.

[0075] Based on the above steps S4411 to S4412, by identifying the occlusion markers of the first page elements in a preset order, and then in response to the existence of corresponding occlusion markers for the first page elements, the first page elements are determined as the second page elements, thus identifying the occluded elements.

[0076] Optionally, in step S442 above, constructing the initial occlusion stack using the second page element includes:

[0077] Step S4421: Write the second page element as the top element of the stack into the initial occlusion stack.

[0078] In step S4421 above, after determining the second page element, the second page element can be written sequentially as the top element of the stack into the initial occlusion stack. Specifically, after determining the occlusion element, the occlusion element can be written sequentially to the top of the initial occlusion stack.

[0079] Based on step S4421 above, by writing the second page element as the top element of the stack into the initial occlusion stack in sequence, an initial occlusion stack including all occlusion elements can be obtained.

[0080] Optionally, in step S443 above, the initial occlusion stack is merged to obtain the target occlusion stack, which includes:

[0081] Step S4431: Obtain the bounding box information of the second page element.

[0082] In step S4431 above, when merging the initial occlusion stack, it is necessary to obtain the bounding box information of the second page element. The second page element can be represented by a rectangular bounding box, and the bounding box information can include the coordinates of each vertex of the rectangular bounding box.

[0083] Step S4432: Starting from the bottom element of the initial occlusion stack, traverse the initial occlusion stack and merge adjacent second page elements in the initial occlusion stack based on the bounding box information to obtain the merged result.

[0084] In step S4432 above, the initial occlusion stack is traversed starting from the bottom element of the initial occlusion stack. That is, each occlusion element in the initial occlusion stack is traversed from bottom to top. Then, based on the bounding box information, adjacent occlusion elements in the initial occlusion stack can be merged to obtain the merging result.

[0085] For example, the initial occlusion stack is [B, O, A], where A is the bottom element of the stack. Starting from A, we can traverse each occlusion element in the initial occlusion stack from bottom to top. Based on the bounding box information of the occlusion elements, we can merge A and O to obtain the merged result AO.

[0086] Step S4433: Obtain the target occlusion stack using the merging result.

[0087] In step S4433 above, when the merging result is obtained, the target occlusion stack can be obtained using the merging result.

[0088] Based on the above step S4421, by obtaining the bounding box information of the second page element, the initial occlusion stack is traversed starting from the bottom element of the initial occlusion stack. The adjacent second page elements in the initial occlusion stack are merged based on the bounding box information to obtain the merging result. Finally, the target occlusion stack is obtained using the merging result, which can merge the occluded elements and thus accurately determine whether an element is occluded.

[0089] Figure 6 This is a schematic diagram of page element merging according to one embodiment of this application, such as... Figure 6 As shown in the figure, there is an element I to be rendered, represented by rectangle I. Figure 6 (1) and Figure 6 In (2), the element I to be rendered is at the bottom of the page, that is, it is obscured by A and O. Figure 6 (3) and Figure 6 In (4), the element I to be rendered is not obscured by A and O.

[0090] In related technologies, whether element I is occluded is determined by bounding box coverage. For example, when A and O are merged, a merged bounding box is obtained (the area enclosed by the dashed line in the figure), and then coverage is determined based on the merged bounding box and element I. When the merged result of A and O is... Figure 6 (1) and Figure 6 When the area enclosed by the dashed line in (2) is merged, the bounding box completely covers element I. Therefore... Figure 6 (1) and Figure 6 (2) The merging of A and O can accurately determine whether element I is occluded.

[0091] However, when A and O are merged, the following may also occur: Figure 6(3) and Figure 6 (4) The result of merging A and O is that the bounding box obtained after merging A and O will cover element I. However, element I is not actually covered by A and O. Therefore, element I will be misjudged as an occluding element, which will cause the rendering of element I to fail and thus affect the rendering effect of the page.

[0092] To address this misjudgment, this application proposes a page element merging strategy, which will be described in detail below.

[0093] Optionally, in step S4432 above, adjacent second page elements in the initial occlusion stack are merged based on bounding box information to obtain the following merged results:

[0094] Step S44321: Based on the bounding box information, determine the first area corresponding to the first target element, the second area corresponding to the second target element, and the third area after merging the first target element and the second target element. The first target element and the second target element are adjacent second page elements in the initial occlusion stack, and the first target element is pushed onto the stack before the second target element.

[0095] In step S44321 above, the first target element and the second target element are adjacent second page elements in the initial occlusion stack. The first target element is pushed onto the stack before the second target element. For example, if the initial occlusion stack is [A, O, B], where A is the bottom element of the stack, then the first target element can be A, and the second target element can be O.

[0096] Specifically, the first area corresponding to the first target element, the second area corresponding to the second target element, and the third area after merging the first and second target elements can be determined based on the bounding box information. For example, if the initial occlusion stack is [A, O, B], where A is the bottom element of the stack, then the first target element can be A, and the second target element can be O. Furthermore, the area (A) corresponding to A can be determined based on the vertex information of the bounding box of A, the area (B) corresponding to B can be determined based on the vertex information of the bounding box of B, and the area (OA) corresponding to the merged bounding box of A and B can be determined based on the vertex coordinates of the bounding boxes of A and B.

[0097] In step S44322, in response to the sum of the first area and the second area being greater than or equal to the third area, the bounding box information of the third area is used as the merging result corresponding to the second target element.

[0098] In step S44322 above, when the sum of the first area and the second area is greater than or equal to the third area, the bounding box information of the third area can be used as the merging result corresponding to the second target element.

[0099] Specifically, when the sum of the areas of the first target element and the second target element is greater than or equal to the third area after merging the first target element and the second target element, the bounding box information of the merged third area can be used as the merging result corresponding to the second target element.

[0100] For example, such as Figure 6 As shown in (1), when the sum of the area of ​​A (A) and the area of ​​O (O) is equal to the area (AO) after A and O are merged, the bounding box information of the area (AO), that is, the vertex coordinates of the rectangular bounding box after AO is merged, can be used as the merging result corresponding to O.

[0101] For example, such as Figure 6 As shown in (2), when the sum of the area of ​​A (A) and the area of ​​O (O) is greater than the area (AO) after A and O are merged, the bounding box information of the area (AO), that is, the vertex coordinates of the rectangular bounding box after AO is merged, can be used as the merging result corresponding to O.

[0102] When A and O are successfully merged, that is, when the sum of the areas of A (A) and O (O) is greater than or equal to the area (AO) after merging A and O, the bounding box information of the area (AO), that is, the vertex coordinates of the bounding box of the rectangle after merging AO, can be used as the merged result AO corresponding to O. At this time, the initial occlusion stack is [A, O, B], where the merged result corresponding to O is actually AO.

[0103] Then, O and B can be merged, that is, AO and B can be merged to obtain the target occlusion stack. If the merging of AO and B fails, that is, the sum of the area of ​​AO (AO) and the area of ​​B (B) is less than the area of ​​AO and B after merging (AOB), then the target occlusion stack is [A, O, B], where the merging result corresponding to B is actually B; if the merging of AO and B succeeds, that is, the sum of the area of ​​AO (AO) and the area of ​​B (B) is greater than or equal to the area of ​​AO and B after merging (AOB), then the target occlusion stack is [A, O, B], where the merging result corresponding to B is actually AOB;

[0104] In step S44323, in response to the fact that the sum of the first area and the second area is less than the third area, the bounding box information of the second area is used as the merging result corresponding to the second target element.

[0105] In step S44323 above, when the sum of the first area and the second area is less than the third area, the bounding box information of the second area is used as the merging result corresponding to the second target element.

[0106] Specifically, when the sum of the areas of the first target element and the second target element is less than the third area after merging the first and second target elements, the bounding box information of the second target element can be used as the merging result corresponding to the second target element.

[0107] For example, such as Figure 6 As shown in (3), when the sum of the area of ​​A (A) and the area of ​​O (O) is larger than the area (AO) after A and O are merged, the vertex coordinates of the bounding box of O can be used as the merged result corresponding to O. That is to say, the occlusion range after merging is the occlusion range of O.

[0108] Based on steps S44321 to S44323 above, by determining the first area corresponding to the first target element, the second area corresponding to the second target element, and the third area after merging the first and second target elements based on bounding box information, and then responding to the fact that the sum of the first area and the second area is greater than or equal to the third area, the bounding box information of the third area is used as the merging result corresponding to the second target element, and responding to the fact that the sum of the first area and the second area is less than the third area, the bounding box information of the second area is used as the merging result corresponding to the second target element, the occlusion range of occluding elements can be merged, thereby improving the accuracy of element occlusion judgment.

[0109] Figure 7 This is a schematic diagram of determining a target occlusion stack according to one embodiment of this application, as shown below. Figure 7 As shown, the process of determining the target occlusion stack mainly includes the following execution steps:

[0110] Step S701: Sort the elements of the first page according to the rendering order;

[0111] Step S702: Traverse the elements of the first page in a preset order;

[0112] Step S703: Determine whether the element on the first page is an element on the second page;

[0113] Step S704: Write the second page element as the top element of the stack into the initial occlusion stack.

[0114] Step S705: Determine if there are any untraversed elements on the first page;

[0115] Step S706: Merge the initial occlusion stack to obtain the target occlusion stack.

[0116] In the process of determining the target occlusion stack, the first page elements are sorted according to the rendering order and traversed in a preset order to determine whether the first page element is a second page element. When the first page element is a second page element, it is written into the initial occlusion stack as the top element. When the first page element is not a second page element, it is determined whether there are any untraversed first page elements. If there are untraversed first page elements, the first page elements are traversed in a preset order. When all first page elements have been traversed, the initial occlusion stack is merged to obtain the target occlusion stack.

[0117] Optionally, in step S46 above, determining the third page element using the target occlusion stack includes:

[0118] Step S461: Use the top element of the target occlusion stack to determine the occlusion of the first page element and obtain the determination result.

[0119] In step S461 above, after obtaining the target occlusion stack, the top element of the target occlusion stack can be used to determine the occlusion of the first page element and obtain the determination result.

[0120] For example, when the target occlusion stack is [A, O, B], where the merged result corresponding to O is AO and the merged result corresponding to B is AOB, and the page elements from top to bottom are A, O, B, C, they are rendered in the normal order. When only page element C is rendered, the top element B of the target occlusion stack [A, O, B] can be used to determine the occlusion of page element C and obtain the result.

[0121] Step S462: Determine the third page element based on the judgment result.

[0122] In step S462 above, after using the top element of the target occlusion stack to determine the occlusion of the first page element and obtaining the determination result, the third page element can be determined based on the determination result.

[0123] Based on the above steps S461 to S462, by using the top element of the target occlusion stack to perform occlusion judgment on the first page element, the judgment result is obtained, and then the third page element is determined based on the judgment result. This enables accurate occlusion judgment of the elements to be rendered, thereby determining the final page element to be rendered.

[0124] Optionally, the page rendering method also includes:

[0125] Step S463: In response to the fact that the first page element and the top element of the stack are the same element, perform a pop operation on the top element of the stack.

[0126] Specifically, when the element to be rendered is the top element of the target occlusion stack, a pop operation is performed on the top element. This is because the element to be rendered will not be occluded by itself, so a pop operation is needed on the top element. For example, when the target occlusion stack is [A, O, B], where the top element is B and the element to be rendered is B, then the top element B is popped from the target occlusion stack, and the target occlusion stack is now [A, O].

[0127] Based on step S463 above, by performing a pop operation on the top element of the stack in response to the first page element being the same as the top element of the stack, the target occlusion stack can be adjusted so as to more accurately determine the occlusion of the first page element.

[0128] Optionally, in step S461 above, the top element of the target occlusion stack is used to determine the occlusion of the first page element, and the determination result includes:

[0129] Step S4611: Obtain the bounding box information of the first page element.

[0130] In step S4611 above, when using the top element of the target occlusion stack to determine the occlusion of the first page element and obtaining the determination result, it is necessary to obtain the bounding box information of the first page element.

[0131] Step S4612: Compare the bounding box information of the first page element with the merged result corresponding to the top element of the stack to obtain the comparison result.

[0132] In step S4612 above, after obtaining the bounding box information of the first page element, the bounding box information of the first page element can be compared with the merged result corresponding to the top stack element to obtain the comparison result.

[0133] For example, when the target occlusion stack is [A, O, B] and the first page element is C, the vertex coordinate information of the bounding box of C can be compared with the merged result AOB corresponding to B to obtain the comparison result.

[0134] Step S4613: Based on the comparison result, the response determines that the bounding box information of the first page element is included in the merge result, and determines that the top element of the stack occludes the first page element.

[0135] In step S4613 above, when it is determined from the comparison result that the bounding box information of the element to be rendered is included in the merged result, it is determined that the top element of the stack occludes the element to be rendered.

[0136] For example, when the target occlusion stack is [A, O, B] and the element to be rendered is C, the vertex coordinates of the bounding box of C can be compared with the merged result AOB corresponding to B. When it is determined that all the vertex coordinates of the bounding box of C fall within the occlusion range of AOB, it can be determined that the top element of the stack, B, occludes C.

[0137] To determine whether the bounding box of C is contained within the merged result AOB corresponding to B, the following conditions can be met: the minimum X and Y coordinates of the bounding box of the merged result AOB are less than or equal to the minimum X and Y coordinates of the bounding box of C, and the maximum X and Y coordinates of the bounding box of the merged result AOB are greater than or equal to the maximum X and Y coordinates of the bounding box of C. When these conditions are met, it can be determined that the top element B of the stack occludes C.

[0138] In step S4614, the response determines, based on the comparison result, that the bounding box information of the first page element is not included in the merge result, and determines that the top element of the stack does not obscure the first page element.

[0139] In step S4614 above, when it is determined based on the comparison result that the bounding box information of the element to be rendered is not included in the merging result, it is determined that the top element of the stack does not occlude the element to be rendered.

[0140] For example, when the target occlusion stack is [A, O, B] and the element to be rendered is C, the vertex coordinates of the bounding box of C can be compared with the merged result AOB corresponding to B. If it is determined that the vertex coordinates of the bounding box of C do not all fall within the occlusion range of AOB, then it can be determined that the top element B of the stack does not occlude C.

[0141] Based on the steps S4611 to S4614 above, by obtaining the bounding box information of the first page element, and then comparing the bounding box information of the first page element with the merging result corresponding to the top element of the stack, a comparison result is obtained. Finally, the response determines that the bounding box information of the first page element is included in the merging result based on the comparison result, thus determining that the top element of the stack occludes the first page element. The response also determines that the bounding box information of the first page element is not included in the merging result based on the comparison result, thus determining that the top element of the stack does not occlude the first page element. This allows for accurate determination of whether the element to be rendered is occluded.

[0142] Optionally, the page rendering method also includes:

[0143] In step S4615, in response to the top element of the stack obscuring the first page element, the rendering output of the first page element is stopped.

[0144] In step S4615 above, when the top element of the stack obscures the element to be rendered, the rendering output of the element to be rendered is stopped.

[0145] Based on the above step S4615, by responding to the top element of the stack occluding the first page element, the rendering output of the first page element is stopped, which can reduce CPU performance consumption while ensuring the page rendering effect.

[0146] Optionally, in step S462 above, determining the third page element based on the judgment result includes:

[0147] Step S4621: In response to the fact that the top element of the stack does not obscure the first page element, the first page element is determined as the third page element.

[0148] In step S4621 above, when the top element of the stack does not obscure the first page element, the first page element is determined as the third page element so that the third page element can be rendered.

[0149] Based on the above step S4621, by responding to the fact that the top element of the stack does not obscure the first page element, the first page element is determined as the third page element. This allows us to determine the elements that need to be rendered in the end, so that these elements can be rendered instead of the obscured elements. This can reduce CPU performance consumption while ensuring the page rendering effect.

[0150] Figure 8 This is a schematic diagram illustrating a third page element determination process according to one embodiment of this application, such as... Figure 8 As shown, the process of determining the elements on the third page mainly includes the following steps:

[0151] Step S801: Sort the elements of the first page according to the rendering order;

[0152] Step S802: Traverse the elements of the first page in the rendering order;

[0153] Step S803: Determine whether the element on the first page is the top element of the stack;

[0154] Step S804: Perform a pop operation on the top element of the stack;

[0155] Step S805: Determine whether the top element of the stack obscures the first page element;

[0156] Step S806: Determine the first page element as the third page element and render the third page element.

[0157] In the process of determining the third page element, the first page elements are sorted according to the rendering order and traversed in the rendering order to determine whether the first page element is the top element of the stack. If the first page element is the top element of the stack, a pop operation is performed on the top element of the stack. If the first page element is not the top element of the stack, it is determined whether the top element of the stack obscures the first page element. If the top element of the stack obscures the first page element, the first page elements are traversed in the rendering order. If the top element of the stack does not obscure the first page element, the first page element is determined as the third page element and the third page element is rendered.

[0158] This application significantly reduces the number of rendered nodes by using UI occlusion culling, while the algorithm is simple and efficient, effectively improving game performance. Several application scenarios are compared below.

[0159] Figure 9 This is a schematic diagram of a page rendering result according to one embodiment of this application, such as... Figure 9 As shown, when the user exits the game's main interface ( Figure 9 (1) Click on the Collection Pavilion, and the collection page will pop up. Figure 9 (2)), when occlusion culling is not enabled, such as Figure 9 As shown in (2), the game needs to render the main page first, and then render the collection page, with a total of 403 rendering nodes; however, after enabling occlusion culling, as Figure 9 As shown in (3), the number of rendering nodes is reduced to 269, thereby reducing performance consumption.

[0160] Figure 10 This is a schematic diagram of another page rendering result according to one embodiment of this application, such as... Figure 10 As shown, when the user accesses the role page ( Figure 10 (1) Click on the character equipment, and the character equipment page will pop up. Figure 10 (2)), when occlusion culling is not enabled, such as Figure 10 As shown in (2), the number of rendering nodes on the character equipment page is 203; however, after enabling occlusion culling, as shown in (2), Figure 10 As shown in (3), the number of rendering nodes is reduced to 131, thereby reducing performance consumption.

[0161] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0162] This embodiment also provides a page rendering apparatus for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0163] Figure 11 This is a structural block diagram of a page rendering apparatus according to one embodiment of the present application, such as... Figure 11 As shown, the device includes: an acquisition module 1101, used to acquire a first page element, wherein the first page element represents an element to be rendered within a target user interface; a construction module 1102, used to construct a target occlusion stack based on the first page element, wherein the target occlusion stack stores a second page element and the merging result of the second page element, wherein the second page element represents an occlusion element within the target user interface; a determination module 1103, used to determine a third page element using the target occlusion stack, wherein the third page element represents an element to be displayed within the target user interface; and a rendering module 1104, used to render and output the third page element to obtain a target page.

[0164] Optionally, the construction module 1102 is further configured to traverse the first page elements according to a preset order to obtain the second page elements, wherein the preset order is the reverse of the rendering order of the first page elements; construct an initial occlusion stack using the second page elements; and merge the initial occlusion stack to obtain the target occlusion stack.

[0165] Optionally, the construction module 1102 is further configured to identify occlusion markers for the first page elements in a preset order; and to determine the first page element as the second page element in response to the existence of a corresponding occlusion marker for the first page element.

[0166] Optionally, the building module 1102 is also used to write the second page element as the top element of the stack sequentially into the initial occlusion stack.

[0167] Optionally, the construction module 1102 is also used to obtain the bounding box information of the second page elements; traverse the initial occlusion stack starting from the bottom element of the initial occlusion stack, merge adjacent second page elements in the initial occlusion stack based on the bounding box information, and obtain the merged result; and use the merged result to obtain the target occlusion stack.

[0168] Optionally, the construction module 1102 is further configured to determine, based on the bounding box information, the first area corresponding to the first target element, the second area corresponding to the second target element, and the third area after merging the first target element and the second target element, wherein the first target element and the second target element are adjacent second page elements in the initial occlusion stack, and the push time of the first target element is earlier than the push time of the second target element; in response to the sum of the first area and the second area being greater than or equal to the third area, the bounding box information of the third area is used as the merging result corresponding to the second target element; in response to the sum of the first area and the second area being less than the third area, the bounding box information of the second area is used as the merging result corresponding to the second target element.

[0169] Optionally, the determining module 1103 is further configured to use the top element of the target occlusion stack to determine the occlusion of the first page element and obtain the determination result; and determine the third page element based on the determination result.

[0170] Optionally, the page rendering apparatus further includes an execution module 1105, which performs a pop operation on the top element of the stack in response to the first page element being the same as the top element of the stack.

[0171] Optionally, the determining module 1103 is further configured to obtain the bounding box information of the first page element; compare the bounding box information of the first page element with the merge result corresponding to the top element of the stack to obtain a comparison result; respond to determine that the bounding box information of the first page element is included in the merge result based on the comparison result, and determine that the top element of the stack occludes the first page element; respond to determine that the bounding box information of the first page element is not included in the merge result based on the comparison result, and determine that the top element of the stack does not occlude the first page element.

[0172] Optionally, the execution module 1105 is also configured to stop rendering output on the first page element in response to the top element of the stack obscuring the first page element.

[0173] Optionally, the determining module 1103 is further configured to determine the first page element as the third page element in response to the top element of the stack not obscuring the first page element.

[0174] It should be noted that the above modules can be implemented by software or hardware. For the latter, they can be implemented in the following ways, but are not limited to: all the above modules are located in the same processor; or, the above modules are located in different processors in any combination.

[0175] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the page rendering method described in any of the preceding claims when run by a processor.

[0176] Optionally, in this embodiment, the computer-readable storage medium may include, but is not limited to, various media capable of storing computer programs, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0177] Optionally, in this embodiment, the computer-readable storage medium may be located in any computer terminal in a group of computer terminals in a computer network, or in any mobile terminal in a group of mobile terminals.

[0178] Optionally, in this embodiment, the computer-readable storage medium may be configured to store a computer program for performing the following steps:

[0179] Step S1: Obtain the first page element, wherein the first page element is used to represent the element to be rendered within the target user interface;

[0180] Step S2: Construct a target occlusion stack based on the first page elements, wherein the target occlusion stack is used to store the second page elements and the merging result of the second page elements, and the second page elements are used to represent the occlusion elements within the target user interface;

[0181] Step S3: Determine the third page element using the target occlusion stack, where the third page element represents the element to be displayed within the target user interface;

[0182] Step S4: Render the elements of the third page to obtain the target page.

[0183] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: constructing a target occlusion stack based on first page elements includes: traversing the first page elements according to a preset order to obtain second page elements, wherein the preset order is the reverse of the rendering order of the first page elements; constructing an initial occlusion stack using the second page elements; and merging the initial occlusion stack to obtain a target occlusion stack.

[0184] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: traversing the first page elements based on a preset order to obtain the second page elements includes: identifying occlusion markers on the first page elements according to the preset order; and determining the first page element as the second page element in response to the existence of a corresponding occlusion marker on the first page element.

[0185] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: constructing an initial occlusion stack using second page elements includes: sequentially writing the second page elements as the top elements of the stack into the initial occlusion stack.

[0186] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: merging the initial occlusion stack to obtain the target occlusion stack, including: obtaining the bounding box information of the second page elements; traversing the initial occlusion stack starting from the bottom element of the initial occlusion stack, merging adjacent second page elements in the initial occlusion stack based on the bounding box information, and obtaining the merged result; and using the merged result to obtain the target occlusion stack.

[0187] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: merging adjacent second page elements in the initial occlusion stack based on bounding box information to obtain a merging result including: determining a first area corresponding to a first target element, a second area corresponding to a second target element, and a third area after merging the first and second target elements based on bounding box information, wherein the first target element and the second target element are adjacent second page elements in the initial occlusion stack, and the push time of the first target element is earlier than the push time of the second target element; in response to the sum of the first area and the second area being greater than or equal to the third area, using the bounding box information of the third area as the merging result corresponding to the second target element; in response to the sum of the first area and the second area being less than the third area, using the bounding box information of the second area as the merging result corresponding to the second target element.

[0188] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: determining a third page element using a target occlusion stack includes: using the top element of the target occlusion stack to perform an occlusion judgment on a first page element and obtaining a judgment result; and determining a third page element based on the judgment result.

[0189] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: in response to the first page element and the top element of the stack being the same element, performing a pop operation on the top element of the stack.

[0190] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: determining occlusion of a first page element using the top element of a target occlusion stack, and obtaining a determination result including: obtaining the bounding box information of the first page element; comparing the bounding box information of the first page element with the merge result corresponding to the top element of the stack, and obtaining a comparison result; responding by determining, based on the comparison result, that the bounding box information of the first page element is included in the merge result, and determining that the top element of the stack occludes the first page element; responding by determining, based on the comparison result, that the bounding box information of the first page element is not included in the merge result, and determining that the top element of the stack does not occlude the first page element.

[0191] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: in response to the top element of the stack obscuring the first page element, stopping the rendering output of the first page element.

[0192] Optionally, the aforementioned computer-readable storage medium is further configured to store program code for performing the following steps: determining the third page element based on the judgment result includes: in response to the top element of the stack not obscuring the first page element, determining the first page element as the third page element.

[0193] This embodiment of the computer-readable storage medium provides a page rendering technical solution. By acquiring a first page element, constructing a target occlusion stack based on the first page element, determining a third page element using the target occlusion stack, and finally rendering and outputting the third page element to obtain the target page, the purpose of effectively rendering the page is achieved. This reduces performance overhead during page rendering, thereby solving the technical problem of high performance overhead in related technologies.

[0194] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a computer-readable storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, terminal device, or network device, etc.) to execute the methods according to the embodiments of this application.

[0195] In exemplary embodiments of this application, a computer-readable storage medium stores a program product capable of implementing the methods described above in this embodiment. In some possible implementations, various aspects of the embodiments of this application may also be implemented as a program product including program code, which, when the program product is run on a terminal device, causes the terminal device to perform the steps described in the "Exemplary Methods" section of this embodiment according to various exemplary embodiments of this application.

[0196] The program product for implementing the above-described method according to embodiments of this application may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the program product of the embodiments of this application is not limited thereto. In the embodiments of this application, the computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0197] The aforementioned program product may take the form of any combination of one or more computer-readable media. Such computer-readable storage media may be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples (not exhaustive) of computer-readable storage media include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0198] It should be noted that the program code contained on the computer-readable storage medium can be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0199] Embodiments of this application also provide an electronic device including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the steps in any of the above method embodiments.

[0200] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.

[0201] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:

[0202] Step S1: Obtain the first page element, wherein the first page element is used to represent the element to be rendered within the target user interface;

[0203] Step S2: Construct a target occlusion stack based on the first page elements, wherein the target occlusion stack is used to store the second page elements and the merging result of the second page elements, and the second page elements are used to represent the occlusion elements within the target user interface;

[0204] Step S3: Determine the third page element using the target occlusion stack, where the third page element represents the element to be displayed within the target user interface;

[0205] Step S4: Render the elements of the third page to obtain the target page.

[0206] Optionally, the processor may also be configured to perform the following steps via a computer program: constructing a target occlusion stack based on the first page elements includes: traversing the first page elements according to a preset order to obtain second page elements, wherein the preset order is the reverse of the rendering order of the first page elements; constructing an initial occlusion stack using the second page elements; and merging the initial occlusion stack to obtain the target occlusion stack.

[0207] Optionally, the processor may also be configured to perform the following steps via a computer program: traversing the first page elements according to a preset order to obtain the second page elements, including: identifying occlusion markers on the first page elements according to the preset order; and determining the first page element as the second page element in response to the existence of a corresponding occlusion marker on the first page element.

[0208] Optionally, the processor described above may also be configured to perform the following steps via a computer program: constructing an initial occlusion stack using the second page elements includes: sequentially writing the second page elements as the top elements of the stack into the initial occlusion stack.

[0209] Optionally, the processor may also be configured to perform the following steps via a computer program: merging the initial occlusion stack to obtain the target occlusion stack, including: obtaining the bounding box information of the second page elements; traversing the initial occlusion stack starting from the bottom element of the initial occlusion stack, merging adjacent second page elements in the initial occlusion stack based on the bounding box information, and obtaining the merged result; and using the merged result to obtain the target occlusion stack.

[0210] Optionally, the processor may also be configured to perform the following steps via a computer program: merging adjacent second page elements in the initial occlusion stack based on bounding box information to obtain a merging result including: determining a first area corresponding to a first target element, a second area corresponding to a second target element, and a third area after merging the first and second target elements based on bounding box information, wherein the first target element and the second target element are adjacent second page elements in the initial occlusion stack, and the first target element is pushed onto the stack before the second target element; in response to the sum of the first area and the second area being greater than or equal to the third area, using the bounding box information of the third area as the merging result corresponding to the second target element; in response to the sum of the first area and the second area being less than the third area, using the bounding box information of the second area as the merging result corresponding to the second target element.

[0211] Optionally, the processor may also be configured to perform the following steps via a computer program: determining the third page element using a target occlusion stack includes: using the top element of the target occlusion stack to determine the occlusion of the first page element and obtaining a determination result; and determining the third page element based on the determination result.

[0212] Optionally, the processor described above can also be configured to perform the following steps via a computer program: in response to the first page element and the top element of the stack being the same element, perform a pop operation on the top element of the stack.

[0213] Optionally, the processor may also be configured to perform the following steps via a computer program: occlusion determination of the first page element using the top element of the target occlusion stack, and obtaining the determination result including: obtaining the bounding box information of the first page element; comparing the bounding box information of the first page element with the merge result corresponding to the top element of the stack, and obtaining a comparison result; responding by determining, based on the comparison result, that the bounding box information of the first page element is included in the merge result, and determining that the top element of the stack occludes the first page element; responding by determining, based on the comparison result, that the bounding box information of the first page element is not included in the merge result, and determining that the top element of the stack does not occlude the first page element.

[0214] Optionally, the processor described above can also be configured to perform the following steps via a computer program: in response to the top element of the stack obscuring the first page element, stop rendering output to the first page element.

[0215] Optionally, the processor may also be configured to perform the following steps via a computer program: determining the third page element based on the judgment result includes: in response to the top element of the stack not obscuring the first page element, determining the first page element as the third page element.

[0216] In the electronic device of this embodiment, a page rendering technical solution is provided. By acquiring a first page element, constructing a target occlusion stack based on the first page element, determining a third page element using the target occlusion stack, and finally rendering and outputting the third page element to obtain the target page, the purpose of effectively rendering the page is achieved. This reduces performance overhead during page rendering, thereby solving the technical problem of high performance overhead in related technologies.

[0217] Figure 12 This is a schematic diagram of an electronic device according to an embodiment of this application. Figure 12 As shown, the electronic device 1200 is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0218] like Figure 12 As shown, the electronic device 1200 is presented in the form of a general-purpose computing device. The components of the electronic device 1200 may include, but are not limited to: at least one processor 1210, at least one memory 1220, a bus 1230 connecting different system components (including memory 1220 and processor 1210), and a display 1240.

[0219] The memory 1220 stores program code that can be executed by the processor 1210, causing the processor 1210 to perform the steps described in the method section of the embodiments of this application according to various exemplary implementations of this application.

[0220] The memory 1220 may include a readable medium in the form of volatile memory cells, such as random access memory (RAM) 8201 and / or cache memory 12202, and may further include read-only memory (ROM) 8203, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory.

[0221] In some instances, memory 1220 may also include programs / utilities 12204 having a set (at least one) of program modules 12205, including but not limited to: an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Memory 1220 may further include memory remotely located relative to processor 1210, which can be connected to electronic device 1200 via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0222] Bus 1230 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, peripheral bus, graphics acceleration port, processor 1210, or a local bus using any of the various bus structures.

[0223] The display 1240 may be, for example, a touch screen liquid crystal display (LCD) that allows a user to interact with the user interface of the electronic device 1200.

[0224] Optionally, the electronic device 1200 can also communicate with one or more external devices 1300 (e.g., keyboard, pointing device, Bluetooth device, etc.), one or more devices that enable a user to interact with the electronic device 1200, and / or any device that enables the electronic device 1200 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via the input / output (I / O) interface 1250. Furthermore, the electronic device 1200 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via the network adapter 1260. Figure 12 As shown, network adapter 1260 communicates with other modules of electronic device 1200 via bus 1230. It should be understood that, although... Figure 12 As not shown, other hardware and / or software modules may be used in conjunction with electronic device 1200, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0225] The aforementioned electronic device 1200 may further include: a keyboard, a cursor control device (such as a mouse), an input / output interface (I / O interface), a network interface, a power supply, and / or a camera.

[0226] Those skilled in the art will understand that Figure 12 The structure shown is for illustrative purposes only and does not limit the structure of the electronic device described above. For example, the electronic device 1200 may also include components that are more... Figure 12 The more or fewer components shown, or having the same Figure 3 Different configurations are shown. The memory 1220 can be used to store computer programs and corresponding data, such as the computer program and corresponding data corresponding to the page rendering method in this embodiment. The processor 1210 executes various functional applications and data processing by running the computer program stored in the memory 1220, thereby implementing the aforementioned page rendering method.

[0227] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0228] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

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

[0230] 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 units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0231] 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 as a software functional unit.

[0232] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0233] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method of rendering a page, the method comprising: include: Obtain the first page element, wherein the first page element is used to represent the element to be rendered within the target user interface; A target occlusion stack is constructed based on the first page element, wherein the target occlusion stack is used to store the second page element and the merging result of the second page element, and the second page element is used to represent the occlusion element in the target user interface; The third page element is determined using the target occlusion stack, wherein the third page element represents the element to be displayed within the target user interface; The third page element is rendered and output to obtain the target page; The construction of the target occlusion stack based on the first page element includes: The first page elements are traversed according to a preset order to obtain the second page elements, wherein the preset order is the reverse of the rendering order of the first page elements; an initial occlusion stack is constructed using the second page elements; the bounding box information of the second page elements is obtained; the initial occlusion stack is traversed starting from the bottom element of the initial occlusion stack, and adjacent second page elements in the initial occlusion stack are merged based on the bounding box information to obtain the merged result; the target occlusion stack is obtained using the merged result.

2. The page rendering method of claim 1, wherein, Based on the preset order, the first page elements are traversed to obtain the second page elements, including: The first page elements are marked and identified according to the preset order; In response to the existence of a corresponding occlusion marker for the first page element, the first page element is determined to be the second page element.

3. The page rendering method of claim 1, wherein, Constructing the initial occlusion stack using the second page element includes: The second page element is written sequentially as the top element of the stack into the initial occlusion stack.

4. The page rendering method of claim 1, wherein, Based on the bounding box information, adjacent second page elements in the initial occlusion stack are merged to obtain the merging result, which includes: Based on the bounding box information, the first area corresponding to the first target element, the second area corresponding to the second target element, and the third area after merging the first target element and the second target element are determined, wherein the first target element and the second target element are adjacent second page elements in the initial occlusion stack, and the push time of the first target element is earlier than the push time of the second target element. In response to the fact that the sum of the first area and the second area is greater than or equal to the third area, the bounding box information of the third area is used as the merging result corresponding to the second target element; In response to the fact that the sum of the first area and the second area is less than the third area, the bounding box information of the second area is used as the merging result corresponding to the second target element.

5. The page rendering method of claim 1, wherein, Determining the third page element using the target occlusion stack includes: The first page element is occlusion determined by the top element of the target occlusion stack, and the determination result is obtained. The third page element is determined based on the judgment result.

6. The page rendering method of claim 5, wherein, The method further includes: In response to the first page element being the same as the top element of the stack, a pop operation is performed on the top element of the stack.

7. The page rendering method according to claim 5, characterized in that, Using the top element of the target occlusion stack to determine the occlusion of the first page element, the determination result includes: Obtain the bounding box information of the first page element; The bounding box information of the first page element is compared with the merging result corresponding to the top stack element to obtain a comparison result; The response determines, based on the comparison result, that the bounding box information of the first page element is included in the merge result, and determines that the top element of the stack occludes the first page element; The response determines, based on the comparison result, that the bounding box information of the first page element is not included in the merge result, and determines that the top element of the stack does not obscure the first page element.

8. The page rendering method according to claim 7, characterized in that, The method further includes: In response to the top element of the stack obscuring the first page element, rendering output for the first page element is stopped.

9. The page rendering method according to claim 7, characterized in that, Based on the judgment result, the third page elements include: In response to the fact that the top element of the stack does not obscure the first page element, the first page element is determined as the third page element.

10. A page rendering apparatus, characterized in that, include: The acquisition module is used to acquire a first page element, wherein the first page element represents an element to be rendered within the target user interface; A construction module is used to construct a target occlusion stack based on the first page element, wherein the target occlusion stack is used to store the second page element and the merging result of the second page element, and the second page element is used to represent the occlusion element in the target user interface; A determining module is used to determine a third page element using the target occlusion stack, wherein the third page element represents an element to be displayed within the target user interface; The rendering module is used to render and output the third page elements to obtain the target page; The construction module is further configured to: traverse the first page elements according to a preset order to obtain the second page elements, wherein the preset order is the reverse of the rendering order of the first page elements; construct an initial occlusion stack using the second page elements; obtain the bounding box information of the second page elements; traverse the initial occlusion stack starting from the bottom element of the initial occlusion stack, and merge adjacent second page elements in the initial occlusion stack based on the bounding box information to obtain the merged result; and obtain the target occlusion stack using the merged result.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, wherein the computer program is configured to execute the page rendering method according to any one of claims 1 to 9 when run by a processor.

12. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to run the computer program to perform the page rendering method according to any one of claims 1 to 9.

Images