koobas.hobune.stream
Mask 3D objects inside UI ScrollRect
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:
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!
Hi! I'm not sure, that it's the best variant and will it work for you at all, but what if you will render your cars with additional camera to RawImage on UI or something like this, i.e. using two cameras?
From what i have found in the last hour. I think it does not mask due to the shader. I think the shader have to support and/or set the stenceling to comply with something in the UI...but i could be wrong
Yes, in a different way; with an additional camera I render the cars only, then created a script that sets the view rect of that camera to be the same area of the scroll view.
This will work if you are ok with a rectangular mask (which is my case), but won't work if you need to mask things behind rounded corners or complex shapes.
Hi @DanjelRicci . I have tried to do the same approach with additional camera, but had no success with it. Can you please share camera parameters and script that sets the view rect for that camera?
I can't open and check the project now, but this is the script that does what I said earlier, just attach it to a new camera. GUI3DCameraFitter.cs
Thank you! Works perfect! The only changes from my side is to replace Update function with Start, because this calculations probably needed once.
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
Can you tell where to apply these materials as for given question?? Scroll rect viewport or scroll objects( car as in above Question)?
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
You can assign a mesh to the canvas renderer (manually through script), then the mask component will work on that as expected.
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
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.
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.
