Interactive interface rendering method and device, equipment, medium and program product

Abstract

The embodiment of the invention provides an interactive interface rendering method and device, equipment, a medium and a program product, and the interactive interface rendering method comprises the steps that in response to a rendering instruction for a target interactive interface, a target interface identifier of the target interactive interface is determined, and the target interactive interface comprises a plurality of target models; a pre-packaged target rendering data packet is queried based on the target interface identifier, the pre-packaged target rendering data packet comprises visual angle information and depth information of the multiple target models, and the visual angle information is used for representing space attribute information of the multiple target models in the display area; the depth information is used for representing depth levels of the multiple target models in the display area; and based on the visual angle information and the depth information, rendering the plurality of target models in the display area. According to the method, a more vivid and natural three-dimensional interactive interface is realized, rich visual effects and interactive experience are provided, higher requirements of players on sense of reality and interactivity are met, and the overall user experience is improved.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of computer technology, and in particular to an interactive interface rendering method, device, equipment, medium and program product. Background Art

[0002] In modern games and virtual reality environments, the User Interface (UI) plays a vital role. UI not only provides necessary information, but also guides the player's actions, serves as a logo, prompts, and other functions, and enhances the user experience.

[0003] Currently, most UIs in games and virtual environments are still 2D or just 3D textures. Although these UIs are simple and easy to use, they are not vivid and natural enough in 3D game scenes. As the quality of game graphics continues to improve, players have higher requirements for the realism and interactivity of UIs. 3D UIs can provide richer visual effects and interactive experiences. However, existing game engines do not support the rendering of 3D UIs.

[0004] Therefore, a three-dimensional interactive interface rendering method is urgently needed. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides an interactive interface rendering method. One or more embodiments of the present invention also relate to an interactive interface rendering device, a computing device, a computer-readable storage medium and a computer program product to solve the technical defects existing in the prior art.

[0006] According to a first aspect of an embodiment of the present invention, there is provided an interactive interface rendering method, comprising: In response to a rendering instruction for a target interaction interface, determining a target interface identifier of the target interaction interface, wherein the target interaction interface includes a plurality of target models; Based on the target interface identifier, a pre-packaged target rendering data packet is queried, wherein the pre-packaged target rendering data packet includes viewing angle information and depth information of multiple target models, the viewing angle information is used to characterize spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize depth levels of the multiple target models in the display area; Based on the viewing angle information and the depth information, multiple target models are rendered in the display area.

[0007] According to a second aspect of an embodiment of the present invention, there is provided an interactive interface rendering device, comprising: A determination module is configured to determine a target interface identifier of a target interaction interface in response to a rendering instruction for a target interaction interface, wherein the target interaction interface includes a plurality of target models; A query module is configured to query a pre-packaged target rendering data packet based on a target interface identifier, wherein the pre-packaged target rendering data packet includes viewing angle information and depth information of multiple target models, the viewing angle information is used to characterize spatial attribute information of the multiple target models in a display area, and the depth information is used to characterize depth levels of the multiple target models in the display area; The rendering module is configured to render multiple target models in the display area based on the viewing angle information and the depth information.

[0008] According to a third aspect of an embodiment of the present invention, there is provided a computing device, including: Memory and processor; The memory is used to store computer programs / instructions, and the processor is used to execute the computer programs / instructions. When the computer programs / instructions are executed by the processor, the steps of the above-mentioned interactive interface rendering method are implemented.

[0009] According to a fourth aspect of an embodiment of the present invention, a computer-readable storage medium is provided, which stores a computer program / instruction, and when the computer program / instruction is executed by a processor, the steps of the above-mentioned interactive interface rendering method are implemented.

[0010] According to a fifth aspect of an embodiment of the present invention, a computer program product is provided, including a computer program / instruction, which implements the steps of the above-mentioned interactive interface rendering method when executed by a processor.

[0011] An embodiment of the present invention implements the following steps: determining a target interface identifier of a target interaction interface in response to a rendering instruction for a target interaction interface, wherein the target interaction interface includes multiple target models; querying a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes the viewing angle information and depth information of multiple target models, the viewing angle information is used to characterize the spatial attribute information of multiple target models in a display area, and the depth information is used to characterize the depth level of multiple target models in a display area; and rendering multiple target models in a display area based on the viewing angle information and the depth information. By responding to the rendering instruction of the target interaction interface, determining the target interface identifier, and querying a pre-packaged rendering data packet based on the identifier, which includes the viewing angle information and depth information of multiple target models. By using this information, the viewing angle and depth level of multiple target models are correctly rendered in the display area, which solves the problem that the existing game engine does not support 3DUI rendering, realizes a more vivid and natural three-dimensional interactive interface, provides rich visual effects and interactive experience, meets the players' higher requirements for realism and interactivity, and improves the overall user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] Figure 1is an interactive schematic diagram of an interactive interface rendering system provided by an embodiment of the present invention; Figure 2 is a flow chart of an interactive interface rendering method provided by an embodiment of the present invention; Figure 3 It is a processing flow chart of an interactive interface rendering method provided by an embodiment of the present invention; Figure 4 It is a structural schematic diagram of an interactive interface rendering device provided by an embodiment of the present invention; Figure 5 It is a structural block diagram of a computing device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0013] Many specific details are set forth in the following description to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the connotation of the present invention, so the present invention is not limited to the specific implementation disclosed below.

[0014] The terms used in one or more embodiments of the present invention are only for the purpose of describing specific embodiments, and are not intended to limit one or more embodiments of the present invention. The singular forms of "a", "said" and "the" used in one or more embodiments of the present invention and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in one or more embodiments of the present invention refers to and includes any or all possible combinations of one or more associated listed items.

[0015] It should be understood that, although the terms first, second, etc. may be used to describe various information in one or more embodiments of the present invention, these information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of one or more embodiments of the present invention, the first may also be referred to as the second, and similarly, the second may also be referred to as the first. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0016] In addition, it should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in one or more embodiments of the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0017] First, the terms involved in one or more embodiments of the present invention are explained.

[0018] Pass: A processing or rendering stage in the rendering process.

[0019] SlateShader: A UI rendering shader used to handle tasks such as vertex and pixel color calculations of UI models.

[0020] RenderBatch: A batch of vertex data that needs to be drawn together.

[0021] RenderTarget: Rendering target refers to the texture used to save rendering results.

[0022] In the present invention, a method for rendering an interactive interface is provided. The present invention also relates to an interactive interface rendering system, an interactive interface rendering device, a computing device, a computer-readable storage medium, and a computer program product, which are described in detail one by one in the following embodiments.

[0023] See also Figure 1 , Figure 1 It is an interaction schematic diagram of an interactive interface rendering system provided by an embodiment of the present invention, wherein the interactive interface rendering system includes a user end and a server end, wherein the user end is used to send a rendering instruction for a target interactive interface to the server end, and the server end is used to determine a target interface identifier of the target interactive interface in response to the rendering instruction for the target interactive interface, wherein the target interactive interface includes multiple target models; based on the target interface identifier, a pre-packaged target rendering data packet is queried, wherein the pre-packaged target rendering data packet includes perspective information and depth information of multiple target models, the perspective information is used to characterize spatial attribute information of multiple target models in a display area, and the depth information is used to characterize depth levels of multiple target models in a display area; based on the perspective information and the depth information, multiple target models are rendered in the display area.

[0024] Applied to the interactive interface rendering system, the client sends rendering instructions for the target interactive interface to the server. The server responds to these instructions, determines the target interface identifier of the target interactive interface, and queries the pre-packaged rendering data packet based on this identifier. The data packet contains the perspective information and depth information of multiple target models. The perspective information is used to characterize the spatial attribute information of multiple target models in the display area, and the depth information is used to characterize the depth level of multiple target models in the display area. Based on this perspective information and depth information, the server correctly renders multiple target models in the display area, thereby solving the problem that existing game engines do not support 3DUI rendering, providing rich visual effects and interactive experience, meeting players' higher requirements for realism and interactivity, and improving the overall user experience.

[0025] See also Figure 2 , Figure 2 A flow chart of an interactive interface rendering method provided according to an embodiment of the present invention is shown, which specifically includes the following steps.

[0026] Step 202: In response to a rendering instruction for a target interaction interface, determine a target interface identifier of the target interaction interface, wherein the target interaction interface includes a plurality of target models.

[0027] In actual applications, rendering instructions are first received from the user side. These instructions are usually triggered by the user through some interactive methods (such as clicking, touching, etc.). For example, in the game, when the user clicks the backpack icon, the system will receive a rendering instruction for the three-dimensional backpack interface. After receiving the instruction, the system parses the instruction and extracts the identification information of the target interactive interface from it. The target interactive interface here refers to the interface that the user wants to see, such as the three-dimensional backpack interface. The target interface identifier is usually unique and can be in the form of a string, a number, or an object ID to distinguish different interactive interfaces. The system searches for the corresponding rendering data packet based on the target interface identifier. The data packet contains information about multiple target models, such as prop models rendered at different positions in the internal space of the backpack. The information of these models includes but is not limited to position, rotation angle, scaling, etc., to ensure their correct display in three-dimensional space.

[0028] In a specific embodiment of the present invention, it is assumed that the user clicks on the backpack icon in the game, triggering a rendering instruction for the three-dimensional backpack interface. After receiving this instruction, the system parses the target interface identifier, for example, "BackpackUI_3D". The system searches for a pre-prepared rendering data packet based on this identifier, which contains all the necessary information of the three-dimensional backpack interface, including prop models rendered at different positions in the internal space of the backpack. For example, there is a sword model on the left side of the backpack and a shield model on the right side. Based on the position information of these models, the system correctly renders the prop models in the backpack in three-dimensional space, so that the specific information of the props, such as name, attributes, etc., can be displayed after the player interacts.

[0029] Furthermore, before responding to a rendering instruction for the target interactive interface and determining the target interface identifier of the target interactive interface, it also includes: obtaining a candidate interface identifier, and obtaining corresponding candidate depth information and candidate viewing angle information based on the candidate interface identifier, wherein the candidate interface identifier is any interface identifier configured by a front-end user; encapsulating the candidate depth information and the candidate viewing angle information into a first candidate rendering data packet; and associating and storing the candidate rendering data packet with the candidate interface identifier.

[0030] In actual applications, the system first obtains the candidate interface identifier, and obtains the corresponding candidate depth information and candidate perspective information based on the candidate interface identifier. The candidate interface identifier is configured by the front-end user. For example, in a game, the front-end user may configure multiple different interface identifiers to represent different interactive interfaces. The system reads these candidate interface identifiers and obtains the corresponding candidate depth information and candidate perspective information based on the identifiers. For example, the front-end user configures an interface identifier named "BackpackUI_3D". The system reads this identifier and obtains the corresponding candidate depth information and candidate perspective information.

[0031] After obtaining the candidate depth information and candidate perspective information, the system encapsulates this information into the first candidate rendering data packet. Specifically, the system organizes the candidate depth information and candidate perspective information to form a data packet containing this information. For example, the system encapsulates the information that the sword model is located on the left side of the backpack, the information that the shield model is located on the right side of the backpack, and the information that the potion model is located at the bottom of the backpack, together with their respective depth information, into a data packet.

[0032] Next, the system associates and stores the candidate rendering data packets with the candidate interface identifiers. Specifically, the system creates a mapping table or uses a similar data structure to associate the candidate rendering data packets with the corresponding candidate interface identifiers. For example, the system associates the packaged data packets containing the depth information and perspective information of the sword, shield, and potion models with the identifier "BackpackUI_3D" so that the corresponding rendering data packet can be quickly found according to the identifier in the subsequent rendering process.

[0033] Based on this, by obtaining the candidate interface identifiers and their corresponding candidate depth information and candidate viewing angle information, and encapsulating them into candidate rendering data packets, the system can efficiently store and manage this information. In the subsequent rendering process, the system can quickly find the corresponding rendering data packets based on the candidate interface identifiers, and correctly render multiple target models in three-dimensional space based on this information, thereby providing users with a richer and more natural interactive experience.

[0034] Furthermore, the corresponding candidate depth information and candidate viewing angle information are obtained according to the candidate interface identifier, including: based on the candidate interface identifier, querying multiple candidate models corresponding to the candidate interface identifier; encapsulating the vertex information and geometric texture information of the multiple candidate models into a position parameter matrix; obtaining the depth identifier of each vertex in the multiple candidate models in the vertex information, and determining the candidate depth information corresponding to the candidate interface identifier according to the depth identifier; obtaining the viewing angle parameter matrix of the current display area, and merging the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier.

[0035] In actual applications, the system first queries multiple candidate models corresponding to the candidate interface identifier based on the candidate interface identifier. Specifically, the system reads the candidate interface identifier and queries the corresponding multiple candidate models based on the identifier. For example, during the game development stage, the front-end developer configures an interface identifier named "BackpackUI_3D". The system reads this identifier and obtains multiple candidate models corresponding to it, such as sword, shield, and potion models.

[0036] Next, the system encapsulates the vertex information and geometric texture information of multiple candidate models into a position parameter matrix. Specifically, the system reads the vertex information of each candidate model, including the vertex position, normal, texture coordinates, etc., and encapsulates this information into a position parameter matrix. For example, the system encapsulates the vertex information of the sword model, the vertex information of the shield model, and the vertex information of the potion model into a position parameter matrix.

[0037] Then, the system obtains the depth identifier of each vertex in the multiple candidate models in the vertex information, and determines the candidate depth information corresponding to the candidate interface identifier based on the depth identifier. Specifically, the system reads the depth identifier of each vertex, which is used to determine the depth level of the model in three-dimensional space. For example, the system reads the vertex depth identifier of the sword model, the vertex depth identifier of the shield model, and the vertex depth identifier of the potion model, and determines the candidate depth information based on these identifiers.

[0038] Next, the system obtains the viewing angle parameter matrix of the current display area, and merges the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier. Specifically, the system reads the viewing angle parameter matrix of the current display area, which contains information such as the direction and position of the current viewing angle. The system merges the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier. For example, the system reads the viewing angle parameters of the current display area.

[0039] Based on this, by obtaining corresponding candidate depth information and candidate viewing angle information for candidate interface identifiers and ensuring the accuracy of depth identifiers and viewing angle parameters, the system can efficiently store and manage this information.

[0040] Furthermore, before obtaining the viewing angle parameter matrix of the current display area and merging the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier, it also includes: obtaining the initial viewing angle matrix of the current display area; based on the position parameter matrix, according to preset update rules, updating the initial viewing angle matrix to obtain the viewing angle parameter matrix of the current display area.

[0041] Among them, the initial viewing angle matrix is ​​used to represent the initial viewing angle state of the current display area, the position parameter matrix is ​​the viewport matrix of the device, and the preset update rule is used to update the initial viewing angle matrix according to the position parameter matrix so that the updated viewing angle parameter matrix conforms to the viewport of the current device.

[0042] In actual applications, the system first obtains the initial viewing angle matrix of the current display area. This step is to record the default viewing direction and angle without external intervention. The initial viewing angle matrix can be a pre-set standard viewing angle configuration, or a viewing angle setting saved by the user last time. Then, the system updates this initial viewing angle matrix based on the position parameter matrix. The position parameter matrix contains the user's current position information, which may come from the user's input device (such as mouse movement, keyboard keys, touch screen sliding, etc.), or the actual physical displacement information obtained by sensors (such as gyroscopes, accelerometers, etc.). For the processing of the position parameter matrix, the system will follow the preset update rules. The update rules can be a set of mathematical operation formulas or logical judgment conditions. The purpose is to adjust the change of viewing angle according to the change of the user's position to ensure that the content seen by the user is consistent with what he expects. After the update is completed, the system will obtain the viewing angle parameter matrix of the current display area.

[0043] In a specific embodiment of the present invention, consider a display interface after clicking a backpack icon in a game, a three-dimensional backpack internal space, and a situation where prop models in the backpack are rendered at different positions. When the player clicks the backpack icon on the screen, the system reads the initial perspective matrix stored in the device, which records the default perspective setting toward the backpack opening direction. As the player drags the touch screen or uses other input devices to change the perspective, the sensor detects these actions and forms a position parameter matrix. The system applies the information in the position parameter matrix to the initial perspective matrix according to preset update rules, such as through quaternion rotation operations, to dynamically update the user's perspective setting. The updated perspective parameter matrix will reflect the player's current viewing direction of the inside of the backpack, ensuring that the rendering of the prop model in the three-dimensional space matches the player's interactive actions. After the player interacts, the specific information of the prop can be displayed, and the perspective change in this process is also achieved by continuously updating the perspective parameter matrix.

[0044] Based on this, by combining the position parameter matrix and the initial perspective matrix and updating them according to preset rules, the system can accurately reflect the changes in the user's viewing direction in the virtual environment in real time. This approach not only improves the realism of the user experience, but also reduces the discomfort caused by delayed or incorrect perspective updates. In particular, for different device viewport sizes and ratios, the system can effectively adjust the perspective projection matrix to ensure that the prop model and its detailed information inside the backpack can be correctly displayed on both large-screen displays and small-sized mobile devices, providing users with a smoother and more natural interactive experience.

[0045] Step 204: Query a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes perspective information and depth information of multiple target models, the perspective information is used to characterize spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize depth levels of the multiple target models in the display area.

[0046] The spatial attribute information includes the direction and / or position information of the target model, and may also include the distance information from the reference point or plane, etc., depending on the specific application scenario. It is worth noting that direction and position do not necessarily exist at the same time; for example, in some cases, the direction can be inferred only from the position information, and vice versa. The spatial attribute information is used to accurately determine the layout and appearance of the model in the display area.

[0047] In actual applications, the system first queries the pre-packaged target rendering data package based on the target interface identifier. These data packages are prepared in advance during the development phase and contain various information about the target model. Specifically, the data package includes the perspective information and depth information of multiple target models. The perspective information is used to characterize the spatial attribute information of the target model in the display area, while the depth information is used to characterize the depth level of the target model in the display area. This information ensures the correct display of the target model in three-dimensional space.

[0048] In a specific embodiment of the present invention, in the game, when the user clicks on the backpack icon, the system will receive a rendering instruction for the three-dimensional backpack interface. The system queries the pre-packaged rendering data packet according to the target interface identifier "BackpackUI_3D". The data packet contains information about all prop models in the three-dimensional backpack interface, including their direction, position, and depth level. The system reads this information and uses it for the rendering process. For example, the data packet records that the sword model is located on the left side of the backpack, the shield model is located on the right side of the backpack, and the potion model is located at the bottom of the backpack. In addition, the data packet also records the depth levels of these models in three-dimensional space to ensure the correct occlusion relationship. The system correctly renders each prop model in three-dimensional space based on this information.

[0049] Step 206: Render multiple target models in the display area based on the viewing angle information and the depth information.

[0050] The system first determines the direction and / or position of each target model based on the perspective information. Specifically, the system reads the perspective information of each target model and determines its direction and / or position in the display area. For example, in a three-dimensional backpack interface, the system reads the information that the sword model is located on the left side of the backpack and determines its direction; reads the information that the shield model is located on the right side of the backpack and determines its direction; reads the information that the potion model is located at the bottom of the backpack and determines its direction. This information ensures the correct display of the target model in three-dimensional space.

[0051] In a specific embodiment of the present invention, it is assumed that the user clicks on the backpack icon in the game, triggering the rendering instruction of the three-dimensional backpack interface. The system reads a pre-packaged rendering data packet, which contains information about all prop models in the three-dimensional backpack interface, including their direction, position, and depth level. The system correctly renders each prop model in three-dimensional space based on this information. For example, the sword model is located on the left side of the backpack, the shield model is located on the right side of the backpack, and the potion model is located at the bottom of the backpack. The system correctly renders each prop model in three-dimensional space based on this information, ensuring that the player can see the specific information of the prop, and the detailed properties of the prop, such as name, attributes, etc., can be displayed after interaction.

[0052] Furthermore, based on the viewing angle information and the depth information, multiple target models are rendered in the display area, including: based on the viewing angle information and the depth information, performing a depth test to obtain a positional relationship of each vertex in the multiple target models relative to the viewpoint in the display area, wherein any target model includes multiple vertices; when the positional relationship satisfies a preset perspective rule, rendering the multiple target models in the display area based on the positional relationship.

[0053] Among them, depth testing is a graphics technology used to determine the front and back order of objects in the scene to ensure that nearby objects cover distant objects.

[0054] The system first performs a depth test based on the viewing angle information and depth information. During this process, the system will calculate the positional relationship of each vertex in multiple target models relative to the viewpoint in the display area. Since each target model is composed of multiple vertices, the position information of these vertices needs to be determined separately. For example, if the target model is a cube, then the positions of the eight vertices that make up the cube need to be calculated. By combining the viewing angle information with the depth information, the system can derive the coordinates of each vertex in three-dimensional space. Next, the system performs a depth test, which compares the relative distance between each vertex and the viewpoint to determine which vertices should be displayed on the screen and which vertices are blocked by other vertices that are closer to the viewpoint. For the step of performing a depth test, one implementation method is to use a Z buffer algorithm, and another implementation method is to use other types of hardware acceleration technology to quickly complete the depth test.

[0055] Once the positional relationships are determined and these relationships meet the preset perspective rules, the system will render multiple target models in the display area based on these positional relationships. The perspective rules define how objects are projected onto a two-dimensional plane in three-dimensional space in order to simulate real visual effects. For example, distant objects appear smaller than near objects, and near objects cover distant objects. For the parts where the positional relationships meet the preset perspective rules, the system will use the appropriate projection matrix to calculate the coordinates of each vertex on the two-dimensional screen, and then connect these vertices to form a complete polygonal model, and fill in textures and colors. If the positional relationship of a vertex does not meet the preset perspective rules, for example, it is behind the viewpoint or is completely blocked by other objects, the vertex will not be rendered.

[0056] In a specific embodiment of the present invention, imagine a three-dimensional backpack interior space displayed after clicking a backpack icon in a game, which contains multiple prop models. The system first performs a depth test to determine the positional relationship of the vertices of each prop model based on the player's perspective information and the depth information of each prop model. If the positional relationship of these vertices meets the preset perspective rules, that is, they are located in front of the viewpoint and are not completely blocked by other prop models, the system will render these vertices. Players can see these prop models appear on the screen in the correct size and position, with distant props appearing smaller, nearby props appearing larger, and nearby props covering distant props.

[0057] Based on this, through the comprehensive use of perspective information and depth information, the system can accurately control the rendering order and display effect of the target model, ensuring the realism and immersion of the three-dimensional scene. The system can effectively manage the depth conflict in the scene, avoid rendering errors and visual distortion, and provide high-quality graphics display.

[0058] Furthermore, the interactive interface rendering method further includes: in response to a user inputting a model of a target material type in the editor interface, adding a model of the target material type in the material database.

[0059] The target material type refers to a specific set of material properties specified by the user in the editor interface, which can include color, reflectivity, transparency, etc. The material database is a data set that stores various models and their related material information.

[0060] In actual applications, when the user enters the operation of adding a model of the target material type in the editor interface, the system responds to this request and adds the model of the target material type to the material database. First, the user selects or creates a new material type in the editor interface and applies it to one or more models. This can be achieved by selecting a menu item, dragging a material sample onto a model, or through other interactive means. Once the user confirms their selection or creation, the system saves this information to the material database. For example, if the user selects a material with a metallic luster and high reflectivity, the system records the properties of this material in the database and associates it with the model selected by the user. In addition, the system creates a new UMG (User Interface Manager) animation track and material track in the project to control the UI model, so that the model effect can be previewed in real time in the editor. With these newly created tracks, UI artists can adjust the material properties directly in the editor and instantly see the impact of material changes on the appearance of the model, thereby optimizing the final visual effect.

[0061] In a specific embodiment of the present invention, it is assumed that a UI artist is developing an application program interface for a game. The artist hopes to add some prop models with a metallic texture to the three-dimensional model of the backpack interface in the game. In the editor interface, the artist selects a metal material type and applies it to several backpack prop models. In response to the artist's operation, the system records the model information of these new material types in the material database. At the same time, the system automatically creates new UMG animation tracks and material tracks in the project, so that the artist can preview the appearance of these models in real time in the editor. The artist can further adjust the details of the material, such as adding wear and tear effects or changing the reflective properties of the metal, and all these changes can be immediately reflected in the editor's preview window.

[0062] Based on this, the system greatly simplifies the UI design workflow by allowing users to directly specify the target material type in the editor interface and apply it to the model. Artists can easily use these tools to create UI model effects, and can complete the entire process from material selection to model rendering without leaving the editor environment, improving work efficiency and design quality. The system can effectively support the needs of UI artists in creating complex and beautiful user interfaces, improving the visual appeal and user experience of the final product.

[0063] An embodiment of the present invention implements the following steps: determining a target interface identifier of a target interaction interface in response to a rendering instruction for a target interaction interface, wherein the target interaction interface includes multiple target models; querying a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes the viewing angle information and depth information of multiple target models, the viewing angle information is used to characterize the spatial attribute information of multiple target models in a display area, and the depth information is used to characterize the depth level of multiple target models in a display area; and rendering multiple target models in a display area based on the viewing angle information and the depth information. By responding to the rendering instruction of the target interaction interface, determining the target interface identifier, and querying a pre-packaged rendering data packet based on the identifier, which includes the viewing angle information and depth information of multiple target models. By using this information, the viewing angle and depth level of multiple target models are correctly rendered in the display area, which solves the problem that the existing game engine does not support 3DUI rendering, realizes a more vivid and natural three-dimensional interactive interface, provides rich visual effects and interactive experience, meets the players' higher requirements for realism and interactivity, and improves the overall user experience.

[0064] The following combination Figure 3 Taking the application of the interactive interface rendering method provided by the present invention in the game UI as an example, the interactive interface rendering method is further described. Figure 3 It is a processing flow chart of an interactive interface rendering method provided by an embodiment of the present invention, which specifically includes the following steps.

[0065] Step 302: Package the 3D container in UMG.

[0066] Specifically, the 3D container that encapsulates UMG (UnrealMotionGraphics UI Designer, a visual UI production tool) provides a streamlined camera field of view (FOV) and encapsulated parameters of displacement, rotation, and scaling (i.e., the aforementioned viewing angle parameters). It adapts to different device viewports by modifying the perspective projection matrix, encapsulates the view projection matrix (View Projection) in the form of inverted Z to solve the Z precision problem close to the camera, and propagates these parameters to subcomponents.

[0067] Step 304: Encapsulate the UI model component.

[0068] Specifically, the UI model component is encapsulated. When setting the model in the editor, the vertex (Vertex), triangle ID (Index), texture coordinate (UV) and color (Color) information are cached. When drawing, it is divided into perspective and orthogonal modes. The model's matrix is ​​combined with the parent container's view projection matrix (VP) to synthesize the model view projection matrix (Mesh VP, MVP). In order to save memory and bandwidth, the existing vertex buffer (Buffer) structure is reused, and no new Slate shader (Shader) is added. The Z value of the 3D model vertex is set into the shader parameter of the per-vertex information (PerVertexInfo), and then the primitive, matrix, viewport (i.e. the aforementioned viewing angle parameter) and depth identification information (i.e. the aforementioned depth parameter) are encapsulated together into the object / container (Payload, i.e. the aforementioned rendering data packet) that loads the data. Then a rendering batch (RenderBatch) is created in the game thread, and finally these rendering batches are used for rendering in the rendering thread.

[0069] Step 306: Modify the depth reading and writing in SlateRenderer.

[0070] Specifically, in SlateRenderer, the engine originally had a depth stencil buffer (DepthStencilBuffer), but the stencil buffer (StencilBuffer) has been used. In order to solve the problem of face interlacing of model drawing under perspective projection, SlateRenderer has added depth reading and writing functions. In the primitive statistics stage, the model (Mesh) to be drawn in depth is extracted using a memory-optimized batch (Batch) structure. Before rendering the batch, draw the depth once, then turn on the depth test on the required model drawing call (MeshPass), and set the viewport through the viewport parameters to adapt to the correct projection effect on the UI interface. The switching of rendering calls (RenderPass) has been optimized to solve the problem of poor performance.

[0071] Step 308: Add a custom shader node to the material.

[0072] Specifically, since the last step in the Slate shader will superimpose the position offset (Position Offset), this feature is used to add a custom shader node to the material, and the Z value of the shader parameter in the vertex buffer is combined with the existing 2D position into a 3D position. In this way, the rendering of the 3D model (Mesh) is realized without adding new shaders and vertex buffer memory size.

[0073] Step 310: Create a new UMG animation track and material track to control the UI model.

[0074] Specifically, new UMG animation tracks and material tracks that control UI models are created in the project, which can be previewed in real time in the editor. This completes a complete UI-based 3D model workflow, and UI artists can easily use these tools to create UI model effects.

[0075] After the above steps 302 to 310, the rendering of the 3D UI can be achieved by the client sending a rendering instruction to the server and the server responding to the rendering instruction.

[0076] Corresponding to the above method embodiment, the present invention also provides an interactive interface rendering device embodiment, Figure 4 FIG. 1 is a schematic diagram of the structure of an interactive interface rendering device provided by an embodiment of the present invention. Figure 4 As shown, the device comprises: A determination module 402 is configured to determine a target interface identifier of a target interaction interface in response to a rendering instruction for a target interaction interface, wherein the target interaction interface includes a plurality of target models; The query module 404 is configured to query a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes perspective information and depth information of multiple target models, the perspective information is used to characterize the spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize the depth level of the multiple target models in the display area; The rendering module 406 is configured to render multiple target models in the display area based on the viewing angle information and the depth information.

[0077] Optionally, the interactive interface rendering device also includes a packaging module, which is configured to obtain a candidate interface identifier, and obtain corresponding candidate depth information and candidate viewing angle information based on the candidate interface identifier, wherein the candidate interface identifier is any interface identifier configured by the front-end user; encapsulate the candidate depth information and the candidate viewing angle information into a first candidate rendering data packet; and associate and store the candidate rendering data packet with the candidate interface identifier.

[0078] Optionally, the encapsulation module is further configured to query multiple candidate models corresponding to the candidate interface identifier based on the candidate interface identifier; encapsulate the vertex information and geometric texture information of the multiple candidate models into a position parameter matrix; obtain the depth identifier of each vertex in the multiple candidate models in the vertex information, and determine the candidate depth information corresponding to the candidate interface identifier based on the depth identifier; obtain the viewing angle parameter matrix of the current display area, and merge the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier.

[0079] Optionally, the encapsulation module is further configured to obtain an initial viewing angle matrix of the current display area; based on the position parameter matrix and in accordance with a preset update rule, the initial viewing angle matrix is ​​updated to obtain a viewing angle parameter matrix of the current display area.

[0080] Optionally, the rendering module 406 is further configured to perform a depth test based on the viewing angle information and the depth information to obtain the positional relationship of each vertex in the multiple target models relative to the viewpoint in the display area, wherein any target model includes multiple vertices; and render the multiple target models in the display area based on the positional relationship when the positional relationship satisfies a preset perspective rule.

[0081] Optionally, the interactive interface rendering device also includes an editing module, which is configured to add a model of the target material type in the material database in response to a user's operation of inputting a model of the target material type in the editor interface.

[0082] Applied to the interactive interface rendering device, a more vivid and natural three-dimensional interactive interface is realized through the collaborative work of the determination module 402, the query module 404 and the rendering module 406. The determination module 402 determines the target interface identifier of the target interactive interface in response to the rendering instruction for the target interactive interface, wherein the target interactive interface includes multiple target models. The query module 404 queries the pre-packaged target rendering data packet based on the target interface identifier, and the data packet includes the perspective information and depth information of the multiple target models. The perspective information is used to characterize the spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize the depth level of the multiple target models in the display area. Based on these perspective information and depth information, the rendering module 406 correctly renders multiple target models in the display area, thereby solving the problem that the existing game engine does not support 3DUI rendering, providing rich visual effects and interactive experience, meeting the players' higher requirements for realism and interactivity, and improving the overall user experience.

[0083] The above is a schematic scheme of an interactive interface rendering device of this embodiment. It should be noted that the technical scheme of the interactive interface rendering device and the technical scheme of the interactive interface rendering method described above belong to the same concept, and the details not described in detail in the technical scheme of the interactive interface rendering device can be referred to the description of the technical scheme of the interactive interface rendering method described above.

[0084] Figure 5 The block diagram of a computing device 500 provided according to an embodiment of the present invention is shown. The components of the computing device 500 include but are not limited to a memory 510 and a processor 520. The processor 520 is connected to the memory 510 via a bus 530, and the database 550 is used to store data.

[0085] The computing device 500 also includes an access device 540 that enables the computing device 500 to communicate via one or more networks 560. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 540 may include one or more of any type of network interface (e.g., a network interface card (NIC)) that is wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a world-wide interoperability for microwave access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, and a near field communication (NFC).

[0086] In one embodiment of the present invention, the above components of the computing device 500 and Figure 5 Other components not shown in the figure may also be connected to each other, for example, via a bus. It should be understood that Figure 5 The computing device structure block diagram shown is only for the purpose of illustration, and is not intended to limit the scope of the present invention. Those skilled in the art may add or replace other components as needed.

[0087] The computing device 500 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smart phone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other types of mobile devices, or a stationary computing device such as a desktop computer or a personal computer (PC). The computing device 500 may also be a mobile or stationary server.

[0088] The processor 520 is used to execute the following computer program / instructions, which, when executed by the processor, implement the steps of the above-mentioned interactive interface rendering method.

[0089] Each embodiment of the present invention is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the computing device embodiment, since it is basically similar to the interactive interface rendering method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the interactive interface rendering method embodiment.

[0090] An embodiment of the present invention further provides a computer-readable storage medium storing a computer program / instruction, which implements the steps of the above-mentioned interactive interface rendering method when executed by a processor.

[0091] Each embodiment of the present invention is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the computer-readable storage medium embodiment, since it is basically similar to the interactive interface rendering method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the interactive interface rendering method embodiment.

[0092] An embodiment of the present invention further provides a computer program product, including a computer program / instruction, which implements the steps of the above-mentioned interactive interface rendering method when executed by a processor.

[0093] The above is a schematic scheme of a computer program product of this embodiment. It should be noted that the technical scheme of the computer program product and the technical scheme of the above-mentioned interactive interface rendering method belong to the same concept, and the details not described in detail in the technical scheme of the computer program product can be referred to the description of the technical scheme of the above-mentioned interactive interface rendering method.

[0094] The above describes specific embodiments of the present invention. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0095] The computer instructions include computer program codes, which may be in source code form, object code form, executable files or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of patent practice. For example, in some regions, according to patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0096] It should be noted that, for the convenience of description, the aforementioned method embodiments are all described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the described action sequence, because according to the embodiments of the present invention, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the embodiments of the present invention.

[0097] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0098] The preferred embodiments of the present invention disclosed above are only used to help explain the present invention. The optional embodiments do not describe all the details in detail, nor do they limit the invention to the specific implementation methods described. Obviously, many modifications and changes can be made according to the content of the embodiments of the present invention. The present invention selects and specifically describes these embodiments in order to better explain the principles and practical applications of the embodiments of the present invention, so that those skilled in the art can understand and use the present invention well. The present invention is limited only by the claims and their full scope and equivalents.

Claims

1. A method for rendering an interactive interface, characterized in that: include: In response to a rendering instruction for a target interaction interface, determining a target interface identifier of the target interaction interface, wherein the target interaction interface includes a plurality of target models; Querying a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes viewing angle information and depth information of the multiple target models, the viewing angle information is used to characterize spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize depth levels of the multiple target models in the display area; Based on the viewing angle information and the depth information, the multiple target models are rendered in the display area.

2. The method according to claim 1, characterized in that Before determining the target interface identifier of the target interaction interface in response to the rendering instruction for the target interaction interface, the method further includes: Acquire a candidate interface identifier, and acquire corresponding candidate depth information and candidate viewing angle information according to the candidate interface identifier, wherein the candidate interface identifier is any interface identifier configured by a front-end user; Encapsulating the candidate depth information and the candidate viewing angle information into a first candidate rendering data packet; The candidate rendering data packet and the candidate interface identifier are stored in association.

3. The method according to claim 2, characterized in that The acquiring corresponding candidate depth information and candidate viewing angle information according to the candidate interface identifier includes: Based on the candidate interface identifier, query multiple candidate models corresponding to the candidate interface identifier; Encapsulating the vertex information and geometric texture information of the plurality of candidate models into a position parameter matrix; Acquire the depth identifier of each vertex in the multiple candidate models from the vertex information, and determine the candidate depth information corresponding to the candidate interface identifier according to the depth identifier; The viewing angle parameter matrix of the current display area is obtained, and the position parameter matrix and the viewing angle parameter matrix are merged to obtain the candidate viewing angle information corresponding to the candidate interface identifier.

4. The method according to claim 3, characterized in that Before acquiring the viewing angle parameter matrix of the current display area and merging the position parameter matrix with the viewing angle parameter matrix to obtain the candidate viewing angle information corresponding to the candidate interface identifier, the method further includes: Get the initial viewing angle matrix of the current display area; Based on the position parameter matrix and according to a preset updating rule, the initial viewing angle matrix is ​​updated to obtain the viewing angle parameter matrix of the current display area.

5. The method according to claim 1, characterized in that The rendering of the plurality of target models in the display area based on the viewing angle information and the depth information includes: Based on the viewing angle information and the depth information, a depth test is performed to obtain a positional relationship of each vertex in the plurality of target models relative to a viewpoint in a display area, wherein any of the target models includes a plurality of vertices; In a case where the positional relationship satisfies a preset perspective rule, the plurality of target models are rendered in the display area based on the positional relationship.

6. The method according to claim 1, characterized in that The method further comprises: In response to a user inputting a model of a target material type in an editor interface, the model of the target material type is added to a material database.

7. An interactive interface rendering device, characterized in that: include: A determination module is configured to determine a target interface identifier of a target interaction interface in response to a rendering instruction for the target interaction interface, wherein the target interaction interface includes a plurality of target models; A query module is configured to query a pre-packaged target rendering data packet based on the target interface identifier, wherein the pre-packaged target rendering data packet includes viewing angle information and depth information of the multiple target models, the viewing angle information is used to characterize the spatial attribute information of the multiple target models in the display area, and the depth information is used to characterize the depth level of the multiple target models in the display area; A rendering module is configured to render the multiple target models in the display area based on the viewing angle information and the depth information.

8. A computing device, characterized in that include: Memory and processor; The memory is used to store computer programs / instructions, and the processor is used to execute the computer programs / instructions. When the computer program / instructions are executed by the processor, the steps of the interactive interface rendering method described in any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium, characterized in that: It stores a computer program / instruction, which, when executed by a processor, implements the steps of the interactive interface rendering method described in any one of claims 1-6.

10. A computer program product, characterized in that It includes a computer program / instruction, which, when executed by a processor, implements the steps of the interactive interface rendering method described in any one of claims 1 to 6.

Images