Search code examples
unity-game-engineshader

Unity UI mask does not work on children with different Canvas component and particles

The UI's structure are as follows:

--Canvas C (Render mode: Screen Space - Camera; sorting layer is s1)    
----Image A (with a UI Mask; it's a viewport in a `ScrollView`)    
------Particle P (Particles Effect, Renderer's Sorting Layer s2 is above s1)    
------Image B (with Canvas Component, Sorting Layer s3 is above s2)

The UI mask on A does not work on P and B. How can I make it work?

A custom UI mask shader that work with different Canvas component, sorting layers, and non-UI children(Particles) would be a perfect solution. However my knowledge about shader is very basic. I would like to know what direction or keywords should I look for. Thanks!

Solution

  • I finally solved this.

    In simple words, on the child that wants to be masked but with a different canvas, use a custom UI/Default material with the following parameters.

    enter image description here

    Important parameters are: 1 Stencil ID, should be the same with the one with Mask component. 2 Stencil Comparison, 3 means "Render pixels when their reference value is equal to the current value in the stencil buffer."

    The built-in Mask also achieved it by changing the stencil parameters for each child gameobject. They just forget to change so for child with different Canvas or did this on purpose.

    Reference: https://docs.unity3d.com/Manual/SL-Stencil.html#comparison-operation-values