(noob) frag shader to combine textures on sprite

I decided its time for me to learn shaders, reading some tutorials and watching Unite talks. This is what I want to achieve:



So my base texture acts like a mask (for alpha shape) but also I can tint it a colour. This base texture is a character sprite with more detail (trying to get this working using a basic white shape). I want to overlay a 2nd texture, but be able to tint that one too. That 2nd texture overlay, imagine a simple photoshop layer with the tint and alpha changed.

So progress:



So trying this out in the frag shader I do
fixed4 returnTexture = (mainTexture * _ColorMain) + (overlayTexture * _ColorOverlay);

Output


fixed4 returnTexture = (mainTexture * _ColorMain) + (overlayTexture * _ColorOverlay);


fixed4 returnTexture = mainTexture * _ColorMain;
if(overlayTexture.a > 0 && mainTexture.a>0){
returnTexture += (overlayTexture*_ColorOverlay);
}
returnTexture.a = mainTexture.a;

getting closer...


fixed4 returnTexture = mainTexture * _ColorMain;
if(overlayTexture.a > 0 && mainTexture.a>0){
returnTexture *= (overlayTexture*_ColorOverlay);
}
returnTexture.a = mainTexture.a;



Anyone have any tips for me on the way to add a texture (on top of) another? Some sort of blend mode I'm not understanding yet, instead of + and * ?

Many thanks

 

Oops here is the shader code so far

Code (csharp):

1.  
2. Shader "MyTests/textureCombine"
3. {
4.  
5.     Properties
6.     {
7.         // main
8.         _ColorMain ("Base Tint", Color) = (1,1,1,1)
9.         _MainTex ("Base Texture", 2D) = "white" {}
10.  
11.         // overlay
12.         _ColorOverlay ("Overlay Tint", Color) = (1,1,1,1)
13.         _OverlayTex ("Overlay Texture", 2D) = "white" {}
14.  
15.     }
16.  
17.     SubShader
18.     {
19.         Tags {
20.             "IgnoreProjector"="True"
21.             "Queue"="Transparent"
22.             "RenderType"="Transparent"
23.         }
24.         ZWrite Off
25.         Lighting Off
26.         Cull Off
27.         Fog { Mode Off }
28.         Blend SrcAlpha OneMinusSrcAlpha
29.        
30.         Pass
31.         {
32.             CGPROGRAM
33.             #pragma vertex vert
34.             #pragma fragment frag
35.  
36.             #pragma fragmentoption ARB_precision_hint_fastest
37.             #include "UnityCG.cginc"
38.  
39.             // variables
40.             fixed4 _ColorMain;
41.             fixed4 _ColorOverlay;
42.  
43.             sampler2D _MainTex;
44.             sampler2D _OverlayTex;
45.  
46.  
47.             // input
48.             struct vertexIn
49.             {
50.                 float4 vertex : POSITION;
51.                 float2 texcoord : TEXCOORD0;
52.                 float2 texcoord1 : TEXCOORD1;
53.             };
54.  
55.             // output
56.             struct vertexOut
57.             {
58.                 float4 vertex : SV_POSITION;
59.                 float4 texcoord01 : TEXCOORD0;
60.                 float4 texcoord02 : TEXCOORD1;
61.             };
62.  
63.             vertexOut vert(vertexIn v)
64.             {
65.                 vertexOut OUT;
66.                 OUT.vertex = UnityObjectToClipPos(v.vertex);
67.                 OUT.texcoord01.xy = v.texcoord;
68.                 OUT.texcoord02.xy = v.texcoord1;
69.                 return OUT;
70.             }
71.  
72.             // frag
73.             fixed4 frag(vertexOut IN) : SV_Target
74.             {
75.                 fixed4 mainTexture = tex2D(_MainTex, IN.texcoord01.xy);
76.                 fixed4 overlayTexture = tex2D(_OverlayTex, IN.texcoord02.xy);
77.  
78.                 fixed4 returnTexture = mainTexture * _ColorMain;
79.                 if(overlayTexture.a > 0 && mainTexture.a>0){
80.                     returnTexture *= (overlayTexture*_ColorOverlay);
81.                 }
82.                 returnTexture.a = mainTexture.a;
83.                 return returnTexture;
84.             }
85.  
86.             ENDCG
87.         }
88.     }
89. }
90.  
91.  
92.  

 

Disclaimer: I am very tired and writing this from the top of my head, sooooo, your mileage may vary.

Code (csharp):

1. fixed4 mainTexture = tex2D(_MainTex, IN.texcoord01.xy);
2. fixed4 overlayTexture = tex2D(_OverlayTex, IN.texcoord02.xy);
3. fixed4 returnTexture = mainTexture * _ColorMain;
4. overlayTexture.rgb *= _ColorOverlay.rgb;
5. returnTexture.rgb = overlayTexture.a * _ColorOverlay.a * (overlayTexture.rgb-returnTexture.rgb) + returnTexture.rgb;
6. returnTexture.a = mainTexture.a;
7. return returnTexture;

 

return fixed4(lerp(mainTexture * _ColorMain, overlayTexture * _ColorOverlay, overlayTexture.a * _ColorOverlay.a).rgb, mainTexture.a);

 

Thanks! This seems to work, I'm just trying to unpack what you did so that I can understand the code and add a third texture on top.

 

thanks for replying. the colours are right and the base mask, but the overlay colour alpha doesn't work in this example.

 

If you add * _ColorOverlay.a right after overlayTexture.a, rsmeenk's code will work just fine.

(because basically it's the same thing with mine, only I kinda wrote what the lerp does without using a lerp, because I'm tired )

 

Edited my previous post with mentioned comment. Little bit confusing to communicate on Twitter and the forum at the same time.

Your basemap alpha acts as the final alpha used for blending with the rest of the scene. (defines the shape)
Your overlay alpha is used as the blendfactor for the overlay color. (color override)
You can stack up multiple lerps (linear interpolations) to build up the final color.

Hope that help.

 

Thanks both for your help.

So I wanted to add a third texture and tint, I've tried this (making the code longer so I can understand better)

Code (csharp):

1.  
2.             fixed4 frag(vertexOut IN) : SV_Target
3.             {
4.                 // texture references
5.                 fixed4 mainTexture = tex2D(_MainTex, IN.texcoord01.xy);
6.                 fixed4 overlayTexture = tex2D(_OverlayTex, IN.texcoord02.xy);
7.                 fixed4 overlayTextureTwo = tex2D(_OverlayTexTwo, IN.texcoord02.xy);
8.  
9.                 fixed4 mainTextureTinted = mainTexture * _ColorMain; // main texture tinted
10.                 fixed4 overlayTextureTinted = overlayTexture * _ColorOverlay; // overlay texture tinted
11.                 fixed4 overlayTextureTintedTwo = overlayTextureTwo * _ColorOverlayTwo; // 2nd overlay
12.  
13.                 fixed4 firstOverlay = mainTexture; // just for a return texture to store (also keeps the alpha from main)
14.  
15.                 // one lerp to add first overlay to main texture
16.                 firstOverlay.rgb = lerp(mainTextureTinted, overlayTextureTinted, overlayTexture.a * _ColorOverlay.a).rgb;
17.  
18.                 // 2nd lerp to add 2nd overlay on top of above
19.                 fixed4 returnTexture = firstOverlay;
20.  
21.                 returnTexture.rgb = lerp(firstOverlay, overlayTextureTintedTwo, overlayTextureTwo.a * _ColorOverlayTwo.a).rgb;
22.  
23.                 // set to main texture
24.                 returnTexture.a = mainTexture.a;
25.  
26.                 return returnTexture;
27.  
28.             }
29.  
30.  

Output...



Seems to work as expected.

Could the code be sped up / cleaner, or ok to leave it as above?

Should work ok on mobile?

Is there a limit to the number of textures you can combine like this?

Thanks!

 

There's always a limit. And it depends on the number of texture samplers that the hardware supports.
Sampling textures is a relatively costly operation so you want to minimize those. In your example you are using full four channel textures (rgb + alpha), but this could be reduced to a grayscale texture (since you really only are using the alpha for blend factor). If you combine four grayscale textures (for 4 different overlays) into a combined four channel texture you reduce the number of texture samples. This way you can reduce your samples by a factor of four, but note that this can only be used if you are using the same texture coordinate (which is the case with your two overlay textures). So you save a texture sample and still have room for two more for free! There is no difference in cost between sampling a four channel vs single channel texture.

 

Thanks, I'll look into using grayscale for the two overlays.

The issue I'm trying to solve right now is uv mapping.

So the base texture is actually a sprite atlas, in my code I'm using the same uv on the overlays, but they are both 512x512 repeating images.

Whats the best way to keep my base texture using its own uv co-ords and then the overlays using their own?

 

Here is what my code looks like at the moment, trying to combine a base texture (on an atlas (tk2d not unity sprite, so basically just mesh with verts)) and a single repeating overlay

Code (csharp):

1.  
2. Shader "MyTest/twoTextureTest"
3. {
4.  
5.     Properties
6.     {
7.         _MainTex ("Base Texture", 2D) = "white" {}
8.         _OverlayTex ("Overlay Texture", 2D) = "white" {}
9.  
10.     }
11.  
12.     SubShader
13.     {
14.         Tags {
15.             "IgnoreProjector"="True"
16.             "Queue"="Transparent"
17.             "RenderType"="Transparent"
18.         }
19.         ZWrite Off
20.         Lighting Off
21.         Cull Off
22.         Fog { Mode Off }
23.         Blend SrcAlpha OneMinusSrcAlpha
24.        
25.         Pass
26.         {
27.             CGPROGRAM
28.             #pragma vertex vert
29.             #pragma fragment frag
30.  
31.             #pragma fragmentoption ARB_precision_hint_fastest
32.             #include "UnityCG.cginc"
33.  
34.             // variables
35.             sampler2D _MainTex;
36.             sampler2D _OverlayTex;
37.             float4 _OverlayTex_ST;
38.  
39.             // input
40.             struct vertexIn
41.             {
42.                 float4 vertex : POSITION;
43.                 float2 uv : TEXCOORD0;
44.                 float2 uv1 : TEXCOORD1;
45.             };
46.  
47.             // output
48.             struct vertexOut
49.             {
50.                 float4 vertex : SV_POSITION;
51.                 float4 uv : TEXCOORD0;
52.                 float4 uv1 : TEXCOORD1;
53.             };
54.  
55.             vertexOut vert(vertexIn v)
56.             {
57.                 vertexOut OUT;
58.                 OUT.vertex = UnityObjectToClipPos(v.vertex);
59.                 OUT.uv.xy = v.uv;
60.                 OUT.uv1.xy = TRANSFORM_TEX(v.uv1, _OverlayTex);
61.                 return OUT;
62.             }
63.  
64.             // frag
65.             fixed4 frag(vertexOut IN) : SV_Target
66.             {
67.                
68.                 fixed4 mainTexture = tex2D(_MainTex, IN.uv.xy);
69.                 fixed4 overlayTexture = tex2D(_OverlayTex, IN.uv1.xy);
70.  
71.                 fixed4 returnTexture = mainTexture;
72.  
73.                 returnTexture.rgb = lerp(mainTexture, overlayTexture, overlayTexture.a).rgb;
74.  
75.                 return returnTexture;
76.  
77.             }
78.  
79.             ENDCG
80.         }
81.     }
82. }
83.  
84.  
85.  

 

I made this texture to use as the overlay to debug what is happening (black is transparent)





This is how it looks using the above shader on 3 sprites of different shape and size...



I find it really unpredictable to see how the overlay will work, the more sprites in the atlas makes it worse.

Any thoughts on using the same uv positions from the overlay on each mesh, or how to do it properly?

Many thanks indeed.

 

Not sure what tk2d does with second UV channel, but you should be able to use the 1st uv channel again with different tiling parameters.

What happens when you change

Code (csharp):

1. OUT.uv1.xy = TRANSFORM_TEX(v.uv1, _OverlayTex);

to

Code (csharp):

1. OUT.uv1.xy = TRANSFORM_TEX(v.uv, _OverlayTex);

(although it's probably not what you want again, but at least this should be predictable)

 

For debugging I often output to color in a fragment shader:
return fixed4(IN.uv.xy, 0.0, 1.0);
This will create a red/green output that will tell you where 0 is (black) or 1 (full green or red).

But, for learning purposes it may be easier to start with
return fixed4(IN.uv.xxx, 1.0);

See what happens
and then

return fixed4(IN.uv.yyy, 1.0);

This will output the incoming uv coordinate values as grayscale color.

 

output using these sprites:


this is the output from your suggestions @rsmeenk

return fixed4(IN.uv.xy, 0.0, 1.0);


return fixed4(IN.uv.xxx, 1.0);


return fixed4(IN.uv.yyy, 1.0);


this is how the atlas looks


basically i want to keep the UV of the base texture as you see from the atlas, but from the overlay it would repeat on its own co-ordinates, not taking texture position from the base and using it on the overlay, using the overlay own co-ords.

 

HI @Remy_Unity thank you for taking the time to make this example!

The approach of making the overlay from one image and using the 4 channels to basically make 4 single overlays is a good one. However ultimately I wanted to use different textures with a tint on them, as one of the textures will have multiple colours in.

Also changed since I posted above, I found that changing the colours on a per sprite basis using MaterialPropertyBlock increases draw calls, so I just wanted to get the tiling working and then work on passing the colour tints hidden in the uv data, that way I could per sprite tint different colours and not use materialproperty block.

I can post up an example if you want, which version of Unity are you using? (I'm 2017)

Thanks!