Issue with a Panel clipping some avatars that already use a masked shader

[ccontinisio]

Hi everyone, I'm having some issues with a clipped panel. As the title says, I have a panel that's draggable and clipped, which displays a list of GameObjects, each one composed of usernames, avatars, and some other text.

The avatars are not square, they have an hexagonal mask. To achieve this, they are Texture widgets with a special shader I found here. The shader works fine in general (you can see the avatars - all with the FB icon - are hex-shaped), but when they get clipped by the panel, they keep showing even outside the boundaries. Only when completely out of sight, they get hidden (probably the GameObject is disabled?).

Check the screen:


In my understanding the problem is the shader that doesn't support clipping, but I can't really write shaders, so I'm asking if any of you would be so nice to help me with this. As I said, the shader I'm using for those avatars is this. I think I just need a modified version of it, maybe mixed with NGUI's default "Unlit - Transparent Colored (AlphaClip)" for alpha clipping.

Thanks a lot!

[Nicki]

This is an interesting problem. I haven't done loads of work with shaders, but I'll try to take a look and see if I can make it work.

[ccontinisio]

Thanks a lot, Nicki, that'd be lovely.

[Nicki]

Sorry, I haven't had time to look into this properly yet. I'm hoping to mess with it tonight when I get home from work.

[ccontinisio]

Sorry, I haven't had time to look into this properly yet. I'm hoping to mess with it tonight when I get home from work.

Hi Nicki, have you had time to look into this shader? I'm really struggling with it!
Thank you!

[Nicki]

Still haven't - I'm a busy man.

I'll make a note to myself to do it asap.

[Nicki]

Ez. 

1. Shader "Custom/MaskClipShader (AlphaClip)"
2. {
3.   Properties
4.   {
5.     _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
6.     _AlphaTex ("Yeahyeah", 2D) = "white" {}
7.   }
8.  
9.   SubShader
10.   {
11.     LOD 100
12.  
13.     Tags{
14.       "Queue" = "Transparent"
15.       "IgnoreProjector" = "True"
16.       "RenderType" = "Transparent"
17.     }
18.      Pass
19.                 {
20.                         Cull Off
21.                         Lighting Off
22.                         ZWrite Off
23.                         Offset -1, -1
24.                         Fog { Mode Off }
25.                         ColorMask RGB
26.                         Blend SrcAlpha OneMinusSrcAlpha
27.                
28.                         CGPROGRAM
29.                         #pragma vertex vert
30.                         #pragma fragment frag
31.                         #include "UnityCG.cginc"
32.  
33.                         sampler2D _MainTex;
34.                         float4 _MainTex_ST;
35.                         sampler2D _AlphaTex;
36.  
37.                         struct appdata_t
38.                         {
39.                                 float4 vertex : POSITION;
40.                                 half4 color : COLOR;
41.                                 float2 texcoord : TEXCOORD0;
42.                         };
43.  
44.                         struct v2f
45.                         {
46.                                 float4 vertex : POSITION;
47.                                 half4 color : COLOR;
48.                                 float2 texcoord : TEXCOORD0;
49.                                 float2 worldPos : TEXCOORD1;
50.                         };
51.  
52.                         v2f vert (appdata_t v)
53.                         {
54.                                 v2f o;
55.                                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
56.                                 o.color = v.color;
57.                                 o.texcoord = v.texcoord;
58.                                 o.worldPos = TRANSFORM_TEX(v.vertex.xy, _MainTex);
59.                                 return o;
60.                         }
61.  
62.                         half4 frag (v2f IN) : COLOR
63.                         {
64.                                 // Sample the texture
65.                                 half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
66.                                 half4 a2 = tex2D(_AlphaTex, IN.texcoord);
67.  
68.                                 float2 factor = abs(IN.worldPos);
69.                                 float val = 1.0 - max(factor.x, factor.y);
70.  
71.                                 // Option 1: 'if' statement
72.                                 if (val < 0.0) col.a = 0.0;
73.                                 if (a2.a < col.a) col.a = a2.a;
74.  
75.                                 // Option 2: no 'if' statement -- may be faster on some devices
76.                                 //col.a *= ceil(clamp(val, 0.0, 1.0));
77.  
78.                                 return col;
79.                         }
80.                         ENDCG
81.                 }
82.   }
83. }
84.  

[ccontinisio]

Awesome. Thank you so much.

After loads of testing, I found out it works just fine. I did some testing because at first I wasn't seeing the avatars at all: the shader seemed not to work! The reason is, your version of the shader doesn't work if the panel that's rendering the avatars is not clipped, so when I imported it and substituted it to mine, the avatars disappeared completely.
(this is the line that was making them disappear: if (val < 0.0) col.a = 0.0; )

Now, I just need to use my version of the shader for non-clipped avatars, and yours for AlphaClip ones.

Thanks again Nicki!

[Nicki]

Yeah it's beacuse the UIPanel uses the name of the shader to choose which to use - that means [name] with no clipping, "[name] (AlphaClip)" with alphaclipping and so on. If you name your original mask shader to the [name] and the one I provided to [name] (AlphaClip) then both works.

[Nicki]

I made a blog post about this http://nickithansen.dk/masking-and-clipping-textures-using-shaders-in-ngui/

[ccontinisio]

Cool, the world needs to know!

[Romano]

This shader will be working with Label?

[Nicki]

It's not really meant for labels - they should just keep their regular shader.

This isn't a stencil clip, so you can put all sorts of stuff inside the "mask", the mask is defined directly on the material, so it has a very narrow use.