2
\$\begingroup\$

The main goal is to animate my player with animator on a canvas. The problem is that any 3d object (my player, a cube) I drag over the canvas is transparent/not seen.

The main camera is set to Clear Flags : Depth Only and Culling Mask to Everything.

The Main Menu Canvas is set render mode to Screen Space Camera and I selected the main camera.

The Main Menu Background Material is set to New Material I created and on the new material I added a shader I created that make this image to be blur.

The main camera settings screenshot :

Main camera settings

And the Canvas settings :

Canvas settings

And the Main Menu Background settings :

main menu background settings

You can see in all the screenshots in the scene view top left that my player and the cube both are transparent on the canvas.

Now if I change the Main Camera Clear Flags to SkyBox then I see my player and the cube but also they are not looking like they should be with the texture/materials and also I don't want the Main Camera to be the clear flags on SkyBox I want the objects to be over the blur image so the Main Camera should be clear flags depth only.

The main goal again is to put my player on the canvas with the blur image and animate my player. This is for my main menu.

  • The canvas that will display the player if the player will be on his own canvas should be transparent and only display the player so the canvas will not overlap the other cnavas with the blur image.

  • I want to animate using animator the player not only to display it as static object.

This is a screenshot of what I mean I used paint to cut my player and put it on but the player canvas should be transparent or without a canvas the player should be on like the ui button on the left :

Example of what I mean

Another screenshot. On the top it's the scene view window the player the ui button and the blur image.

On the bottom the game view window the ui button is on the blur image. I want the player to be the same as the ui button on the blur image and then to animate the player. Not like in my other screenshot the player should not have a skybox background or something it should be like the ui button on the blur image:

Example

\$\endgroup\$
3
  • \$\begingroup\$ Canvases are not for 3D animated characters. This is not the correct solution to your problem. Did you mean to render your character to an off-screen RenderTexture, then display that texture with a blur effect on a RawImage UI element inside your canvas? \$\endgroup\$ – DMGregory Aug 24 '20 at 20:35
  • \$\begingroup\$ I think rawimage, The idea is that the main menu background will be the blu image as default all the time and on this blur image to see my player on the right side make some animations like idle and on the left some button and stuff of the main menu. \$\endgroup\$ – Benzi Avrumi Aug 24 '20 at 20:48
  • \$\begingroup\$ @DMGregory I added another screenshot at the bottom to explain what I mean. Just the player should be background transparent like the ui button. So it will display the player on the blur image background. Just like the ui button the same idea. \$\endgroup\$ – Benzi Avrumi Aug 24 '20 at 20:54
1
\$\begingroup\$

You have 2 options:

  1. Make your canvas (with buttons and UI elements) transparent, and put your blurred background as a texture on a plane pointed at the camera, with your animated character in front.

  2. Setup a second camera which renders only the character to a RenderTexture and use the RenderTexture as a RawImage in your GUI.

The first option is pretty self-explanatory, but will take some tweaking to avoid unrealistic shadows. The second option is a bit more complicated:

  1. Set up a new Layer, lets call it "characterRender".
  2. Assign your character to this layer.
  3. Remove this layer from your main/GUI camera culling mask so that it does not get rendered.
  4. Create a new camera, and set its culling mask to only "characterRender" layer.
  5. Set its clear flags to Color only, and its color alpha to 0.
  6. Place your character in front of the second camera (with gizmos enabled and the second camera selected in the hierarchy you can tweak the positioning with the camera preview)
  7. Create a RenderTexture, and assign it as the Target Texture of the second camera.
  8. Add that texture as a RawImage element to the GUI on your first camera.
  9. Animate your character normally

I hope that makes sense. If not, let me know and I will get some screenshots when I get home from work.

\$\endgroup\$
1
  • \$\begingroup\$ Oh my god I did it. Took me hours but in the end I got it. I will post a solution soon with a short video clip. Its 5:30 am here so I will see if I have the power to create a solution now to to go to sleep but it's working ! \$\endgroup\$ – Benzi Avrumi Aug 25 '20 at 2:24
1
\$\begingroup\$

After so many tries I finally got it.

  1. Created a new scene Main Menu

  2. Deleted the Main Camera and created a new Camera.

  3. Created a Canvas named it Main Menu Canvas.

  4. Created a Rawimage named it Main Menu Background and made it child of the Main Menu Canvas.

This is a screenshot of my Hierarchy :

Hierarchy

Now screenshots to show the settings :

The first screenshot is of the Canvas : Very important is to look at the Order In Layer I set it to -1

Canvas settings

Next the Rawimage settings, To get this blur image I used a shader and added the shader to a new material and then dragged the new material to the Rawimage :

Rawimage settings

Last screenshot the Camera settings : Look at the Clear Flags set to Don't Clear and Culling Mask is set to Everything.

Camera settings

In the end I used one Camera not the Main Camera it didn't work with the Main Camera. but since it's a new scene and only for the main menu you don't need the main camera at least not for this.

Very easy and working great.

Later I will add also a short video clip to show the player animation.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.