[Archive Account]

Q.

I want to put a character in a UI with a Canvas.
I only want to render inside the sprite, so I used the Raw Image component.
And I rendered the character to a Render Texture, and passed that Render Texture to the Raw Image.

In this implementation, the default background of the Render Texture must be transparent, and the character is not rendered.
It is only rendered properly on an opaque background.

 

A.

There are three approaches to putting characters in a UI.
Each approach requires a different implementation to apply Sprite Masks.

 

<1> Using Raw Image
As you asked, it is recommended to use the “Raw Image” component to put a 3D mesh into a UI group.
Connect a Render Texture to the Raw Image component, and render the AnyPortrait character to the Render Texture using a separate camera.
If the background color is transparent, you can solve the problem by using the “KeepAlpha” material.
You can see how to render to a Render Texture with a transparent background color in the following manual.
https://rainyrizzle.github.io/en/AdvancedManual/AD_RenderTexture.html

However, the KeepAlpha material does not have perfect color expression, so if you are good enough at writing scripts, you may want to try using a “command buffer”.
https://rainyrizzle.github.io/en/AdvancedManual/AD_CommandBuffer.html

Once you’ve finished rendering to a Render Texture with a transparent background color, applying a Sprite Mask to your Raw Image is easy to set up.

 

<2> Place directly on Canvas
Using Render Texture and Raw Image requires a separate camera, which is a cumbersome task.
So, you can consider just putting the character in Canvas without going through Raw Image.
Since Canvas has a separate coordinate system, read the explanation in the following manual to solve this.
https://rainyrizzle.github.io/en/AdvancedManual/AD_2DCanvas.html

And then we need to apply a Sprite Mask. This requires writing a Shader using Stencil.
https://rainyrizzle.github.io/en/AdvancedManual/AD_SpriteMask.html

 

<3> Placement with a separate camera from the UI
Another way is to render over/under the UI with a separate camera without a Canvas.
Using the Screen coordinate system to place it exquisitely according to the UI layout is the most common way to display a 3D model with the UI.
If the character does not necessarily need to be placed on the Canvas and only needs to be rendered realistically, this method is recommended.
Since the Sprite Renderer can be placed independently of the Canvas, implementing the Sprite Mask can be implemented independently of the UI. (For writing a Stencil Shader, please refer to “Method 2”.)

 

You can implement it using any of the methods above, whichever is more convenient.

[Author]

Posts