[Unity] Complex rendering hierarchy among UI, 3D objects, and particles

In actual projects, such requirements are often encountered: for example, a UI background, there are particles on the background, there may be a picture on the particle, and then there is a 3D model on it, and then there is a UI on the model, and another UI on the UI. There are particles, and then there is another particle on it, such as a particle generated by mouse click. . .
Do you feel a little dizzy? If it is represented by a picture, it may be clearer, as follows:
schematic diagram
the order of rendering is: background-"particle 1-"UI1-"3D object-"UI2-"particle 2-"particle 3

In fact, 3D objects can be used as a dividing line here, and background->particle 1->UI1 can be divided into one group, 3D objects into a group, UI2->particle 2->particle 3 into a group, because particles and UI can They all belong to the UI layer, and it is difficult for 3D objects to be integrated into the UI without using the RenderTexture method.
Here, we need to clarify the priority of rendering in Unity, which is roughly the depth of Camera (the larger the value, the later rendering)-"Sorting Layer (the larger the value, the later rendering)-"Order In Layer (the larger the value, the later rendering) )-"RenderQueue (the larger the value, the later the rendering)

So in general, a large group such as UI and 3D objects are rendered with Cameras with different Depths, Canvases are distinguished by Sorting Layer, and sub-objects under each Canvas are distinguished by Order In Layer. If not specified, the default It is rendered sequentially from top to bottom in the Hierarchy panel (of course, it is not possible between particles and UI, because these two are not a rendering system in essence, it can only be said that particles can be placed in the UI layer).

So we use 3 Cameras here, the first Camera renders the background-"Particle 1-"UI1 layer, the second Camera renders the 3DModel, and the third renders the UI2-"Particle 2-"Particle 3 layer (actually If the particle 3 is the top layer, it can be taken out separately, and it is put in here for simplicity)

Note here that all Cameras must be set to Depth Only, so that the UI can be seen, and all Cameras used to render the UI must be set to Orthographic, so that the UI will not be too small.

First of all, we need to add two layers Model and UI2 to put 3D objects and the second layer UI so that they can be rendered separately. (The first layer of UI is lazy and uses the original UI layer)
insert image description here
Then first create a new ModelCamera to render 3D objects, so its CullingMask only needs the Model layer. This Model layer is a new layer we created, and the 3D objects must also belong to this layer. As follows:
insert image description here
insert image description here

Then we create two new Cameras to render two layers of UI respectively, each performing its duties, so the Model layer and another UI layer need to be removed from their CullingMask.
insert image description here
insert image description here
Finally, the rendering levels of the three Cameras are controlled by Depth, from small to large, and the value The smaller the value is rendered first, the larger the value is rendered later, so set the depth to 0, 1, 2 in the order of UI1Camera-》ModelCamera-》UI2Camera, of course, other increasing orders are also possible.
insert image description here
insert image description here
insert image description here
After that, create a Canvas for each layer of UI, each Canvas must be set as Screen Space-Camera, and then specify their respective cameras.
insert image description here
insert image description here
In this way, the three groups can be rendered in order. Of course, each group needs to be subdivided. At this time, the Sorting Layer and Order In Layer will be used.
The first is the first layer. The first layer is probably to have a particle sandwiched between two UIs (this is also a common question in Unity interviews). It is very simple, just put them into a Canvs (this Canvas must be rendered with a Camera) Just work) and then control the Order In Layer between them. The bigger the one, the more it will be rendered later, that is to say, the Order In Layer of Background-"Particle 1-"UI1 can be filled in order from small to large, here It should be noted that some UIs such as Image do not have Sorting Order and Order In Layer properties, then you need to add a Canvas component yourself and check Override Soring to fill in the Order In Layer. Of course, this method is bound to add Canvas Increase Batches so you still need to control the quantity. Particles do not need to add Canvas, just change it here in Render's Order In Layer.
insert image description here
insert image description here
insert image description here
Needless to say, the Model layer, after all, the rendering is completely controlled by the dpeth of the Camera. You only need to set all the 3D objects that need to be rendered in this layer as the Model layer.

The last is the second layer UI, which is the same as the first layer. You only need to control the Order In Layer of the UI and particles. The only thing you don’t need is to add a layer of Sorting Layer, which is higher than the Model and UI (but actually It doesn’t matter if you don’t add it, because the rendering level has been controlled by the camera, but it’s still added for clarity)
insert image description here
insert image description here
insert image description here
Of course, if the top layer of particles is to cover all UI, such as mouse click particles or petal particles, etc. It can be taken out separately, as long as its Sorting Layer and Order In Layer are higher than the others.

Finally, there is the hierarchical diagram of the whole system and the final effect. You can see that the white particles are sandwiched between the gray background and the red picture, and the yellow ones are 3D objects, which are sandwiched between the red picture and the blue picture. are two particles, with the black particle on top.
insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/qq_39804671/article/details/123963705