Custom shaders clipping UITexture

[Avatarchik]

Hi! Here is my shader:

1. Shader "Unlit/Logo (SoftClip)"
2. {
3.     Properties
4.     {
5.         _Color1 ("Color 1", Color) = (1,1,1,255)
6.         _Color2 ("Color 2", Color) = (0,0,0,255)
7.         _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
8.         _PatternTex ("Pattern (RGB)", 2D) = "black" {}
9.         _FrameTex ("Frame (RGB)", 2D) = "black" {}
10.         _Logo ("Logo (RGB)", 2D) = "black" {}
11.         _ColorLogo ("Logo Color", Color) = (1,1,1,255)
12.     }
13.  
14.     SubShader
15.     {
16.  
17.  
18.         Tags
19.         {
20.             "Queue" = "Transparent"
21.             "IgnoreProjector" = "True"
22.             "RenderType" = "Transparent"
23.         }
24.        
25.         Pass
26.         {
27.                 LOD 200
28.             Cull Off
29.             Lighting Off
30.             ZWrite Off
31.             Offset -1, -1
32.             Fog { Mode Off }
33.             ColorMask RGB
34.             AlphaTest Greater .01
35.             Blend SrcAlpha OneMinusSrcAlpha
36.  
37.             CGPROGRAM
38.             #pragma vertex vert
39.             #pragma fragment frag
40.  
41.             #include "UnityCG.cginc"
42.  
43.             sampler2D _MainTex;
44.             sampler2D _PatternTex;
45.             sampler2D _FrameTex;
46.             float4 _MainTex_ST;
47.             float4 _PatternTex_ST;
48.             float4 _FrameTex_ST;
49.                 float2 _ClipSharpness = float2(20.0, 20.0);
50.             fixed4 _Color1;
51.             fixed4 _Color2;
52.            
53.             struct appdata_t
54.             {
55.                 float4 vertex : POSITION;
56.                 half4 color : COLOR;
57.                 float2 texcoord : TEXCOORD0;
58.             };
59.  
60.             struct v2f
61.             {
62.                 float4 vertex : POSITION;
63.                 half4 color : COLOR;
64.                 float2 texcoord : TEXCOORD0;
65.                 float2 worldPos : TEXCOORD1;
66.             };
67.  
68.             v2f vert (appdata_t v)
69.             {
70.                 v2f o;
71.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
72.                 o.color = v.color;
73.                 o.texcoord = v.texcoord;
74.                 o.worldPos = TRANSFORM_TEX(v.vertex.xy, _MainTex);
75.                 return o;
76.             }
77.  
78.             half4 frag (v2f IN) : COLOR
79.             {
80.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipSharpness;
81.                 half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
82.                 half4 col2 = tex2D(_PatternTex, IN.texcoord) * IN.color;
83.                 fixed4 mix = lerp(_Color1, _Color2, col2.a);
84.                 col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
85.                 return col * mix;
86.             }
87.             ENDCG
88.         }
89.        
90.         Pass
91.         {
92.                 LOD 200
93.             Cull Off
94.             Lighting Off
95.             ZWrite Off
96.             Offset -1, -1
97.             Fog { Mode Off }
98.             ColorMask RGB
99.             AlphaTest Greater .01
100.             Blend SrcAlpha OneMinusSrcAlpha
101.  
102.             CGPROGRAM
103.             #pragma vertex vert
104.             #pragma fragment frag
105.  
106.             #include "UnityCG.cginc"
107.            
108.             sampler2D _MainTex;
109.             float4 _MainTex_ST;
110.             sampler2D _Logo;
111.             float4 _FrameLogo_ST;
112.             float2 _ClipSharpness = float2(20.0, 20.0);
113.             fixed4 _ColorLogo;
114.            
115.             struct appdata_t
116.             {
117.                 float4 vertex : POSITION;
118.                 half4 color : COLOR;
119.                 float2 texcoord : TEXCOORD0;
120.             };
121.  
122.             struct v2f
123.             {
124.                 float4 vertex : POSITION;
125.                 half4 color : COLOR;
126.                 float2 texcoord : TEXCOORD0;
127.                 float2 worldPos : TEXCOORD1;
128.             };
129.  
130.             v2f vert (appdata_t v)
131.             {
132.                 v2f o;
133.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
134.                 o.color = v.color;
135.                 o.texcoord = v.texcoord;
136.                 o.worldPos = TRANSFORM_TEX(v.vertex.xy, _MainTex);
137.                 return o;
138.             }
139.  
140.             half4 frag (v2f IN) : COLOR
141.             {
142.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipSharpness;
143.                 half4 col = _ColorLogo * tex2D(_Logo, IN.texcoord) * IN.color;
144.                 col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
145.                 return col;
146.             }
147.             ENDCG
148.         }
149.        
150.         Pass
151.         {
152.                 LOD 200
153.             Cull Off
154.             Lighting Off
155.             ZWrite Off
156.             Offset -1, -1
157.             Fog { Mode Off }
158.             ColorMask RGB
159.             AlphaTest Greater .01
160.             Blend SrcAlpha OneMinusSrcAlpha
161.  
162.             CGPROGRAM
163.             #pragma vertex vert
164.             #pragma fragment frag
165.  
166.             #include "UnityCG.cginc"
167.            
168.             sampler2D _MainTex;
169.             sampler2D _PatternTex;
170.             sampler2D _FrameTex;
171.             float4 _MainTex_ST;
172.             float4 _PatternTex_ST;
173.             float4 _FrameTex_ST;
174.             float2 _ClipSharpness = float2(20.0, 20.0);
175.            
176.             struct appdata_t
177.             {
178.                 float4 vertex : POSITION;
179.                 half4 color : COLOR;
180.                 float2 texcoord : TEXCOORD0;
181.             };
182.  
183.             struct v2f
184.             {
185.                 float4 vertex : POSITION;
186.                 half4 color : COLOR;
187.                 float2 texcoord : TEXCOORD0;
188.                 float2 worldPos : TEXCOORD1;
189.             };
190.  
191.             v2f vert (appdata_t v)
192.             {
193.                 v2f o;
194.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
195.                 o.color = v.color;
196.                 o.texcoord = v.texcoord;
197.                 o.worldPos = TRANSFORM_TEX(v.vertex.xy, _MainTex);
198.                 return o;
199.             }
200.            
201.      
202.             half4 frag (v2f IN) : COLOR
203.             {
204.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipSharpness;
205.                 half4 col =  tex2D(_FrameTex, IN.texcoord) * IN.color;
206.                 col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
207.                 return col;
208.             }
209.             ENDCG
210.       }
211.     }
212.    
213.     SubShader
214.         {
215.                 LOD 100
216.  
217.                 Tags
218.                 {
219.                         "Queue" = "Transparent"
220.                         "IgnoreProjector" = "True"
221.                         "RenderType" = "Transparent"
222.                 }
223.                
224.                 Pass
225.                 {
226.                         Cull Off
227.                         Lighting Off
228.                         ZWrite Off
229.                         Fog { Mode Off }
230.                         ColorMask RGB
231.                         AlphaTest Greater .01
232.                         Blend SrcAlpha OneMinusSrcAlpha
233.                         ColorMaterial AmbientAndDiffuse
234.                        
235.                         SetTexture [_MainTex]
236.                         {
237.                                 Combine Texture * Primary
238.                         }
239.                 }
240.         }
241. }

When the fields _Color1,_Color2,_PatternTex ...
uiTexture.material.SetTexture("_PatternTex",patternTex);
uiTexture.material.SetColor("_Color1", colorOne);
uiTexture.MarkAsChanged();
Changes for some reason, do not take effect...
Enter into force after the play button is off...

[keysosaurus]

Think you may be having the same problem as I am, materials don't update at runtime.

http://www.tasharen.com/forum/index.php?topic=6002.0

http://www.tasharen.com/forum/index.php?topic=4135.0

Seems to work fine in older versions of NGUI, just not 3.0 

[Avatarchik]

I have version 2.7 and 2.6.4 (

[ArenMook]

NGUI creates copies of materials in order to make things draw in a proper order. You can no longer modify material properties like that.

You can do what you're trying to do by using global shader variables instead of per-material ones. Have a look at Unity's documentation for functions like Shader.SetGlobalFloat.

[nwsx]

UISprite class should have a link to material instance.
just like unity meshes, they have "sharedMaterial" and "material"(instance)

[nwsx]

i found a way to refresh sprite material. iam calling UIPanel.Refresh() in UIPanel that contains animated sprite every frame
i bet its clonning shitload of material instances. we need better solution (reference to material instances in UISprite class)

[nwsx]

i found a better way to do that 
i had to make mMat public (in UIDrawCall class)

then just sprite.drawCall.mMat.SetWhateverYouWant();

enjoy my solution 

----------------------------
also you should do setting of material/shader properties in LateUpdate instead of Update
and put your script in ProjectSettings/ExecutionOrder after UIPanel
otherwise you will get strange flickering.

[ArenMook]

I've added a "dynamicMaterial" property to the draw call class that you will be able to use in the next version onwards so you won't have to make "mMat" public.

[Avatarchik]

I UITexture with these methods do not work,
I have a bunch of T-shirts with this shader, and I need to ask each T-shirt color and texture

[keysosaurus]

@nwsx Thanks a million, works like a charm! 

@ArenMook Cheers, I'll change over to the new "dynamicMaterial" when its working, but for now I'm delighted and relieved! 

@Avatarchik Sounds like we are doing something similar, but we split our t-shirt assets into layers and use UISprite.color to tint each layer individually.
It's only one draw call for each atlas (thanks again ArenMook!)

[Avatarchik]

Is there a way to update a specific UITexture?
Option with UISprite not suitable...

[ArenMook]

Same as any other widget -- UIWidget.drawCall.dynamicMaterial property is accessible from the UITexture as well, but if you don't have the latest Pro version you will need to add an accessor for it in UIDrawCall.

1. /// <summary>
2. /// Dynamically created material used by the draw call to actually draw the geometry.
3. /// </summary>
4.  
5. public Material dynamicMaterial { get { return mMat; } }

[Ferazel]

This might be a different question, but is there a way to have a UITexture use a custom mesh (instead of a square)? This would allow you to decrease the fill rate if a lot of the texture is invisible? If so, what recommendations would you have to do that?

I'm trying to do something similar. Mainly so that I can have a RenderTexture mapped to a UITexture and it would respect the UI depth space so I could place elements behind and in front of this texture. However, I need to have this render texture not be a square, but rather a custom shape like a circle or a hexagon.

[ArenMook]

UITexture? nope. But you can always derive from the UITexture script and overwrite the OnFill method. Inside you can set up your own vertices -- a circle, for example, if you are so inclined.

[Ferazel]

Hi ArenMook,

Thanks for the reply. I looked into the process that you described and came up with the following code:

1. public MeshFilter MeshData;
2.         public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols) {
3.                 Color colF = color;
4.                 colF.a *= mPanel.alpha;
5.                 Color32 col = premultipliedAlpha ? NGUITools.ApplyPMA(colF) : colF;
6.  
7.                 MeshData.sharedMesh.GetIndices(0);
8.  
9.                 Vector3[] meshVerts = MeshData.sharedMesh.vertices;
10.                 Vector2[] meshUVs = MeshData.sharedMesh.uv;
11.                 for(int i = 0; i < meshVerts.Length; i++) {
12.                         verts.Add(meshVerts[i]);
13.                         uvs.Add(meshUVs[i]);
14.                         cols.Add(col);
15.                 }
16.         }
17.  

However, I found 2 problems. One was trying to get the mesh data as a triangle strip (as I assume that is the topology that you're using). It appeared correctly, but I ended up finding that there was rendering issues (some of the triangles were at the right depth some of them were not). The other problem that I ran across was in the UIDrawCall.Set method where it expects only quads to render. Am I understanding the code correctly there?