A method for embedding 3D models into UGUI for display

Abstract

The present invention discloses a method for embedding a 3D model in a UGUI for display, comprising the following steps: S1, interrupting the batching work of the UGUI where the 3D model is to be embedded; S2, setting the rendering sequence interval of the UI interface and correcting the sequence of the UI interface and the 3D model to be embedded; S3, directly embedding the 3D model to be embedded into the UI interface, adjusting the proportional relationship and positional relationship between the 3D model and the UI interface, and rendering the 3D model in sequence; S4, cleaning the depth information of the 3D model; S5, rendering the UI object in the UI interface. The method of the present invention retains the 2D plane relationship of the UI, and can directly embed the 3D model into the UI, which not only satisfies the display hierarchy relationship of the UI, but also facilitates the adjustment of the proportional and positional relationship between the 3D model and the UI object.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for embedding a 3D model into a UGUI for display. Background Art

[0002] In the process of game project development, with the continuous pursuit of UI effects, people are no longer satisfied with the simple 2D effects of UI, and the desire to mix 3D models with UI is getting stronger and stronger, that is, to embed 3D models in UI for display. Since all UI objects in the game are 2D plane relationships, and models are 3D spatial relationships, if 3D models are directly placed in UI, the 3D model will always be above the UI or the UI will always be above the 3D model, and the effect of the 3D model being sandwiched between the two UIs cannot be achieved, that is, the display hierarchy relationship of the UI cannot be met, which in turn affects the rendering of subsequent UI objects.

[0003] The existing methods of embedding 3D models in UI for display mainly include the following three methods: 1. Placing the 3D model directly in front of the UI object, and the UI object remains unchanged. This method cannot achieve the UI object blocking the 3D model; 2. Rendering the 3D model to a rendering texture RenderTexture through a camera Camera, and then embedding the rendering texture into the UI as an ordinary picture for display. If the rendering texture resolution is large, this method will bring performance overhead, and it is difficult to adjust the proportion and position relationship between the 3D model and the UI object; 3. Splitting the UI object into 3D relationships, the UI object can have Z value information, and the 3D model is embedded between the UI objects by controlling the Z value of the UI object. This method requires that the UI has enough space to accommodate the 3D model, and changes the 2D plane relationship of the UI object. Therefore, a more optimized method of embedding 3D models in UI for display is needed. Summary of the invention

[0004] To solve the above problems, the present invention provides a method for embedding a 3D model into a UGUI for display.

[0005] The present invention adopts the following technical solutions:

[0006] A method for embedding a 3D model into a UGUI for display, comprising the following steps:

[0007] S1. Interrupt the batching work of UGUI where it wants to embed the 3D model;

[0008] S2. Set the rendering order interval of the UI interface and correct the order of the UI interface and the 3D model to be embedded;

[0009] S3, embedding the 3D model to be embedded directly into the UI interface, adjusting the proportional relationship and position relationship between the 3D model and the UI interface, and rendering the 3D model in sequence;

[0010] S4, cleaning the depth information of the 3D model;

[0011] S5. Rendering UI objects in the UI interface.

[0012] Furthermore, step S1 specifically includes the following steps:

[0013] S11, setting corresponding order values ​​for renderers of 3D models to be embedded through the UIOrder3D component, thereby sorting the 3D models to be embedded;

[0014] S12. Set a corresponding order value for each rendering unit in the UGUI through the CanvasOrder component, so as to sort the UI interfaces in the UGUI.

[0015] Furthermore, step S2 specifically includes the following steps:

[0016] S21, assigning sequence values ​​to each UI interface from low to high, with the sequence interval of each interface set to 100, and the sequence value being 100*N, where N=(0, 1, 2, ..., N);

[0017] S22. The UIOrder3D component and the CanvasOrder component modify their own order values ​​according to the order values ​​specified in the above step S21.

[0018] Furthermore, the sequence value is used to represent the order of rendering, and during rendering, the rendering is performed in order from small to large according to the sequence value.

[0019] Furthermore, when rendering is performed in sequence in step S3, the following rules are used according to whether the 3D model uses a transparent material or an opaque material: the opaque material is rendered before the UI object, and the transparent material is rendered together with the opaque material.

[0020] Furthermore, step S4 is specifically as follows: inserting a picture behind the node of the 3D model, the display area of ​​the picture is sufficient to cover the 3D model, and the material of the picture uses a cleared depth material.

[0021] Furthermore, the clearing depth material does not perform a depth test on its occluders and writes the maximum depth.

[0022] After adopting the above technical solution, the present invention has the following advantages compared with the background technology:

[0023] The method of the present invention preserves the 2D plane relationship of the UI by converting the 3D model rendering into a 2D image and combining it with a method of cleaning up the model rendering depth. The 3D model can be directly dragged and embedded into the UI to achieve the effect of the 3D model being sandwiched between two UI interfaces, located above the UI interface, or located below the UI interface, thereby satisfying the display hierarchy relationship of the UI and facilitating the adjustment of the proportion and position relationship between the 3D model and the UI object. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION

[0025] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0026] Example

[0027] like Figure 1 As shown, a method for embedding a 3D model into a UGUI for display includes the following steps:

[0028] S1. Interrupt the batching work of UGUI where it wants to embed the 3D model;

[0029] Step S1 specifically includes the following steps:

[0030] S11, setting corresponding order values ​​for renderers of 3D models to be embedded through the UIOrder3D component, thereby sorting the 3D models to be embedded;

[0031] The UIOrder3D component automatically collects the renderers of each node and subnode of the 3D model to be embedded and assigns the order attribute, and then sets an order value for the renderer; in addition, the UIOrder3D component also supports the clipping function.

[0032] S12. Assign an order attribute to each rendering unit in the UGUI and set a corresponding order value through the CanvasOrder component, so as to sort the UI interfaces in the UGUI.

[0033] UGUI uses Canvas as the rendering unit. All UI objects under Canvas are in the same rendering batch. The batch is interrupted where the 3D model is embedded, which can ensure the correct hierarchical relationship between the embedded 3D model and UI objects.

[0034] S2. Setting the rendering order interval of the UI interface and correcting the order of the UI interface and the 3D model to be embedded; the UI is organized based on the interface as a unit, and there is an upper and lower occlusion relationship between each UI interface.

[0035] Step S2 specifically includes the following steps:

[0036] S21. Assigning sequence values ​​to each UI interface from low to high, with the sequence interval of each interface set to 100, and the sequence value being 100*N, where N=(0, 1, 2, ..., N). For example, the sequence values ​​of each interface from low to high are 0, 100, 200 ...;

[0037] S22. The UIOrder3D component and the CanvasOrder component modify their own order values ​​according to the order values ​​specified in the above step S21.

[0038] S3. Embed the 3D model to be embedded directly into the UI interface, adjust the proportional relationship and positional relationship between the 3D model and the UI interface, and render the 3D model in sequence; after rendering, the 3D model is converted into a 2D image, which has the same 2D plane relationship as the UI; wherein, by modifying the order value of the 3D model through the UIOrder3D component, the 3D model can be controlled to be displayed below the UI interface, between UI objects in the UI interface, or above the UI interface; after the 3D model is embedded in the UI interface, it is in the same space as the UI interface and has the same proportional size. The size of the model is modified by using the model's scaling tool until the size of the model is adjusted to a degree that is suitable for the size of the UI interface.

[0039] When rendering is performed in sequence in step S3, the following rules are applied according to whether the 3D model uses a transparent material or an opaque material: the opaque material is rendered before the UI object, and the transparent material is rendered together with the opaque material. For example, when rendering an opaque material, the value of the rendering queue of the opaque material is forcibly modified to the value of the rendering queue of the transparent material, while the transparent material is not processed and is rendered in the same queue as the opaque material.

[0040] S4. Cleaning the depth information of the 3D model to ensure that it does not affect the rendering of subsequent UI objects.

[0041] Step S4 specifically includes: inserting a picture behind the node of the 3D model, wherein the display area of ​​the picture is sufficient to cover the 3D model, and the material of the picture uses a clean depth material. The clean depth material does not perform a depth test on its occluders and writes the maximum depth.

[0042] S5. Rendering UI objects in the UI interface.

[0043] The above sequence values ​​are used to represent the order of rendering, and during rendering, the objects are drawn in order from small to large according to the sequence values.

[0044] The above is only a preferred specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A method for embedding a 3D model into a UGUI for display, characterized in that: The steps include: S1. Interrupt the batching work of UGUI where it wants to embed the 3D model; Step S1 specifically includes the following steps: S11, setting corresponding order values ​​for renderers of 3D models to be embedded through the UIOrder3D component, thereby sorting the 3D models to be embedded; S12. Setting a corresponding order value for each rendering unit in the UGUI through the CanvasOrder component, thereby sorting each UI interface in the UGUI; S2. Set the rendering order interval of the UI interface and correct the order of the UI interface and the 3D model to be embedded; Step S2 specifically includes the following steps: S21. Assigning sequence values ​​to each UI interface from low to high, with the sequence interval of each interface set to 100, and the sequence value being 100*N, where N=(0, 1, 2, ..., N); S22, the UIOrder3D component and the CanvasOrder component modify their own order values ​​according to the order values ​​specified in the above step S21; S3, embedding the 3D model to be embedded directly into the UI interface, adjusting the proportional relationship and position relationship between the 3D model and the UI interface, and rendering the 3D model in sequence; S4, cleaning the depth information of the 3D model; Step S4 specifically comprises: inserting a picture behind the node of the 3D model, the display area of ​​the picture is sufficient to cover the 3D model, and the material of the picture uses the cleaned depth material; The cleaning depth material does not perform depth testing on its occluders, and writes the maximum depth; S5. Rendering UI objects in the UI interface.

2. A method for embedding a 3D model into a UGUI for display as claimed in claim 1, characterized in that: The sequence value is used to represent the order of rendering, and during rendering, the rendering is performed in order from small to large according to the sequence value.

3. A method for embedding a 3D model into a UGUI for display as claimed in claim 2, characterized in that: When rendering is performed in sequence in step S3, the following rules are used according to whether the 3D model uses a transparent material or an opaque material: the opaque material is rendered before the UI object, and the transparent material is rendered together with the opaque material.

Images