Mask 3D objects inside UI ScrollRect

Question

I have a ScrollRect containing a list of cars with 3D models inside every entry of the list itself. The cars are placed in front of the whole UI. It's working as expected, except obviously for the masking of the 3D models:

alt text

The masking is done with the standard UI Mask component. Is it possible to mask them with a shader, somehow? I'd like to avoid using RenderTextures or dirty pieces of UI sticked above the cars just to cover them strategically. I'd also like to keep the Canvas set to Screen Space - Camera (current setup of the whole UI).
I tried applying UI shaders on the cars, but they just render wrong and never get correctly masked.

Thanks for any help!

Answer 1

Answer by Rodrysson · Nov 04, 2018 at 03:19 AM

Hello! I know that the question is too old, but I had the same problem with 3D objects in the UI, so I would like to help. I found some website where there is a solution (https://alastaira.wordpress.com/2014/12/27/using-the-stencil-buffer-in-unity-free/).

However, I think it's a little bit confusing, so I'm going to explain what I did:

First of all, you need 2 different shaders. (Create >> Shader >> Standard Shader). I called them 'Portal' (the space to see the objects) and 'Backobjects'.
Here are the 2 shaders (I just copied the examples in the page that I mentioned before)
Now you need to create 2 different materials which use these shaders (Create >> Material >> Shader: Custom/Portal OR right click on the shader, and create material).
The last step is to apply the materials to the objects and it's done!

I hope this will help everyone who reads this answer. :D

portal-backobjects.png (50.2 kB)

result.png (50.1 kB)

5 Show 2 · Share

unitylicense21 · May 07, 2019 at 04:59 AM 1

Share

Can you tell where to apply these materials as for given question?? Scroll rect viewport or scroll objects( car as in above Question)?

Adore20 · Mar 12, 2022 at 10:36 AM 0

Share

Hey man how can I add texture to this shader i have properties for texture and color but it just white and doesn't render texture or color

Answer 2

Answer by maxizrin · Oct 06, 2019 at 07:02 AM

You can assign a mesh to the canvas renderer (manually through script), then the mask component will work on that as expected.

1 · Share

Answer 3

Answer by stevencr4z · Sep 16, 2020 at 11:27 PM

Sebastian Lague has a super-simple tutorial on creating a system like Rodrysson referred to. Here's the link: https://www.youtube.com/watch?v=xkcCWqifT9M&t=283s

1 · Share

Answer 4

Answer by kaksaveksaka · Dec 08, 2021 at 10:27 PM

Yo, I found a solution by rendering the objects into a image via secondary camera and making the camera and image child of ui and making the secondary camera and all the 3D objects away from primary camera. It worked flawlessly for me.

1 Show 3 · Share

TreseBrothers · Dec 08, 2021 at 10:30 PM 0

Share

Agreed here -- you can use a second camera to write to a render texture and then use an Image to display that texture. Then you can mask the image regularly.

Adore20 · Mar 10, 2022 at 11:37 PM 0

Share

Can specify the steps a bit more?

kaksaveksaka Adore20 · Mar 11, 2022 at 11:45 AM 0

Share

this might help https://youtu.be/28JTTXqMvOU

Mask 3D objects inside UI ScrollRect

4 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions