[Shader] Ngui and Ashing

1, the demand of ashing

Many times, we encounter a situation when we play games. For example, a skill icon, you can point the time is normal color, not point when it is gray. Another example of a function, open when the normal color, not open when it is gray. More commonly, such as your QQ friends, not online avatar will also become gray.

So, there is a need to turn a picture into gray.

2, talk about Gray and gray

First of all, you can not say let the art out of two sets of pictures, a set of color gray bar. This increases resource consumption.

Then we can only find a way to deal with the procedure.

Then we need to figure out what the gray picture is.

Color

(After ashing)

See the "squad upgrade" the words and their background, is gray.

How to turn a picture into Gray, first, the color is composed of RGB (you want to say by CMYK, HSB, even indexed color, I will not argue with you, after all, I am a literate person), we see the so-called Gray. The three values of R, G and B are the same. That is, we want to calculate the original RGB value of the picture into a new RGB, the new color of his r=g=b.

Well, how does RGB calculate into a grayscale value?

Here comes a ashing formula, which is an empirical formula, which means that the formula is not fixed. As long as you figure out, the effect is gray, then it's okay.

For example, the simplest, you can use the formula:

K = (r + G + B)/3

This is the average value of RGB.

There is also a psychological formula:

K = r*.222 + g*.707 + b*.071;

What does this formula mean? As you can see, 0.222+0.707+0.071 = 1

In fact, the meaning of this formula is that RGB accounted for a different proportion, such as r accounted for 0.222. Then he multiplies the RGB values by the corresponding weights, and gets a new value. and Equation 1, in fact, it is considered that the proportion of RGB is the same.

These formulas end up with gray images (because you r=g=b=k), but look different visually. You can also try other weights on your own.

3, Ngui practice of ashing

If you say so much, you might as well try to masturbate a few lines of code.

The idea is to modify the Ngui transparent colored this shader. We handle it by losing a color. Use (0,0,0) as a grayscale-enabled switch.

The Transparent colored code is as follows:

Shader "Unlit/transparent colored" {Properties{_maintex ("Base (RGB), Alpha (A)", 2D) = "Black" {}}subshader{lod 100tags{" Queue "=" Transparent "" ignoreprojector "=" True "" rendertype "=" Transparent "}cull offlighting offzwrite offfog {Mode Off }offset-1, -1blend srcalpha oneminussrcalphapass{cgprogram#pragma vertex vert#pragma fragment Frag#include " Unitycg.cginc "struct appdata_t{float4 vertex:position;float2 texcoord:texcoord0;fixed4 color:color;}; struct V2F{FLOAT4 vertex:sv_position;half2 texcoord:texcoord0;fixed4 color:color;fixed gray:texcoord1;}; sampler2d _maintex;float4 _maintex_st;v2f Vert (appdata_t v) {v2f O;o.vertex = Mul (UNITY_MATRIX_MVP, V.vertex); O. Texcoord = V.texcoord;o.color = V.color;o.gray = Dot (V.color, fixed4 (1,1,1,0)); return o;} Fixed4 Frag (v2f i): color{fixed4 col;col = tex2d (_maintex, I.texcoord); if (I.gray = = 0) {Float grey = dot (Col.rgb, flo AT3 (0.299, 0.587, 0.114)); Col.rgb = FLOAT3 (grey, grey, grey);} else{col = col * I.color;} return col;} ENDCg}}subshader{lod 100tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull Offlighting offzwrite offfog {Mode Off}offset-1, -1colormask rgbalphatest Greater. 01Blend Srcalpha Oneminussrcalphacol Ormaterial ambientanddiffusesettexture [_maintex]{combine Texture * Primary}}}

We calculate the color of the setting in vert (where the figure below is set) is all 0

If all is 0, the ashing formula is applied in the Frag.

It was done with the modification.

4, Support Softclip

In order to make use of softclip, please modify it together.

Transparent colored 1.shader, Transparent colored 2.shader, Transparent colored 3.shader for the following code:

Many articles on the internet did not mention the above 3 shader changes, causing many developers to use the gray in the softclip when the effect.

Shader "Hidden/unlit/transparent colored 1" {Properties{_maintex ("Base (RGB), Alpha (A)", 2D) = "Black" {}}subshader{lod 2 00tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull offlighting offzwrite OffOffset-1, -1fog {Mode Off}colormask rgbalphatest Greater. 01Blend Srcalpha oneminussrcalphacgprogram#pragma Vertex v Ert#pragma fragment Frag#include "Unitycg.cginc" sampler2d _maintex;float4 _cliprange0 = float4 (0.0, 0.0, 1.0, 1.0);  Float2 _clipargs0 = Float2 (1000.0, 1000.0); struct APPDATA_T{FLOAT4 vertex:position;half4 color:color;float2 texcoord: TEXCOORD0;}; struct V2F{FLOAT4 vertex:position;half4 color:color;float2 texcoord:texcoord0;float2 worldpos:texcoord1;}; v2f Vert (appdata_t v) {v2f O;o.vertex = Mul (UNITY_MATRIX_MVP, V.vertex); o.color = V.color;o.texcoord = V.texcoord;o.world Pos = v.vertex.xy * _cliprange0.zw + _cliprange0.xy;return o;} Half4 Frag (v2f in): color{//softness factorfloat2 factor = (FLOAT2 (1.0, 1.0)-ABS (In.worLdpos) * _clipargs0;//Sample the Texturehalf4 col = tex2d (_maintex, In.texcoord); if (dot (In.color, fixed4 (1,1,1,0)) = = 0  ) {col = tex2d (_maintex, In.texcoord); Col.rgb = Dot (Col.rgb, fixed3 (. 222,.707,.071));} else{col = col * in.color;} col.a *= Clamp (min (factor.x, factor.y), 0.0, 1.0); return col;} Endcg}}subshader{lod 100tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull Offlighting offzwrite offfog {Mode Off}colormask rgbalphatest Greater. 01Blend srcalpha oneminussrcalphacolormaterial Am bientanddiffusesettexture [_maintex]{combine Texture * Primary}}}

Shader "Hidden/unlit/transparent colored 2" {Properties{_maintex ("Base (RGB), Alpha (A)", 2D) = "Black" {}}subshader{lod 2 00tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull offlighting offzwrite OffOffset-1, -1fog {Mode Off}colormask rgbalphatest Greater. 01Blend Srcalpha oneminussrcalphacgprogram#pragma Vertex v Ert#pragma fragment Frag#include "Unitycg.cginc" sampler2d _maintex;float4 _cliprange0 = float4 (0.0, 0.0, 1.0, 1.0); FLOAT4 _clipargs0 = FLOAT4 (1000.0, 1000.0, 0.0, 1.0); Float4 _cliprange1 = float4 (0.0, 0.0, 1.0, 1.0); Float4 _clipargs1 = f LOAT4 (1000.0, 1000.0, 0.0, 1.0); struct APPDATA_T{FLOAT4 vertex:position;half4 color:color;float2 texcoord:texcoord0; };struct v2f{float4 vertex:position;half4 color:color;float2 texcoord:texcoord0;float4 worldpos:texcoord1;};  Float2 Rotate (Float2 V, float2 rot) {FLOAT2 ret;ret.x = v.x * ROT.Y-V.Y * rot.x;ret.y = v.x * rot.x + v.y * Rot.y;return RET;} v2f Vert (appdata_t v) {v2f O;o.vertex = Mul (UNITY_MATRIX_MVP, V.vertex); o.color = V.color;o.texcoord = V.texcoord;o.worldpos.xy = V.vertex.xy * _ClipRange0.z W + _cliprange0.xy;o.worldpos.zw = Rotate (V.vertex.xy, _CLIPARGS1.ZW) * _cliprange1.zw + _cliprange1.xy;return o; Half4 Frag (v2f in): color{//first clip regionfloat2 factor = (FLOAT2 (1.0, 1.0)-ABS (IN.WORLDPOS.XY)) * _clipargs0.xy;f Loat f = min (factor.x, factor.y);//Second Clip regionfactor = (FLOAT2 (1.0, 1.0)-ABS (IN.WORLDPOS.ZW)) * _clipargs1.xy;f  = Min (f, min (factor.x, factor.y)), Half4 Col;col = tex2d (_maintex, In.texcoord), if (dot (In.color, fixed4 (1,1,1,0)) = = 0) { Col.rgb = Dot (Col.rgb, fixed3 (. 222,.707,.071));} else{col = col * In.color;} COL.A *= Clamp (f, 0.0, 1.0); return col;} Endcg}}subshader{lod 100tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull Offlighting offzwrite offfog {Mode Off}colormask rgbalphatest Greater. 01Blend srcalpha oneminussrcalphacolormaterial Am Bientanddiffusesettexture [_maintex]{combinE Texture * Primary}}} 

Shader "Hidden/unlit/transparent colored 3" {Properties{_maintex ("Base (RGB), Alpha (A)", 2D) = "Black" {}}subshader{lod 2 00tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull offlighting offzwrite OffOffset-1, -1fog {Mode Off}colormask rgbalphatest Greater. 01Blend Srcalpha oneminussrcalphacgprogram#pragma Vertex v Ert#pragma fragment Frag#include "Unitycg.cginc" sampler2d _maintex;float4 _cliprange0 = float4 (0.0, 0.0, 1.0, 1.0); FLOAT4 _clipargs0 = FLOAT4 (1000.0, 1000.0, 0.0, 1.0); Float4 _cliprange1 = float4 (0.0, 0.0, 1.0, 1.0); Float4 _clipargs1 = f  LOAT4 (1000.0, 1000.0, 0.0, 1.0); Float4 _cliprange2 = float4 (0.0, 0.0, 1.0, 1.0); Float4 _clipargs2 = Float4 (1000.0, 1000.0, 0.0, 1.0); struct APPDATA_T{FLOAT4 vertex:position;half4 color:color;float2 texcoord:texcoord0;}; struct V2F{FLOAT4 vertex:position;half4 color:color;float2 texcoord:texcoord0;float4 worldpos:texcoord1;float2 wor Ldpos2:texcoord2;}; Float2 Rotate (Float2 V, float2 roT) {FLOAT2 ret;ret.x = v.x * ROT.Y-V.Y * rot.x;ret.y = v.x * rot.x + v.y * rot.y;return ret;} v2f Vert (appdata_t v) {v2f O;o.vertex = Mul (UNITY_MATRIX_MVP, V.vertex); o.color = V.color;o.texcoord = V.texcoord;o.world Pos.xy = v.vertex.xy * _cliprange0.zw + _CLIPRANGE0.XY;O.WORLDPOS.ZW = Rotate (V.vertex.xy, _CLIPARGS1.ZW) * _ClipRange1.z W + _cliprange1.xy;o.worldpos2 = Rotate (V.vertex.xy, _CLIPARGS2.ZW) * _cliprange2.zw + _cliprange2.xy;return o; Half4 Frag (v2f in): color{//first clip regionfloat2 factor = (FLOAT2 (1.0, 1.0)-ABS (IN.WORLDPOS.XY)) * _clipargs0.xy;f Loat f = min (factor.x, factor.y);//Second Clip regionfactor = (FLOAT2 (1.0, 1.0)-ABS (IN.WORLDPOS.ZW)) * _clipargs1.xy;f = Min (f, min (factor.x, factor.y));//Third Clip regionfactor = (FLOAT2 (1.0, 1.0)-ABS (IN.WORLDPOS2)) * _clipargs2.xy;f = Min (f, min (factor.x, factor.y));//Sample the Texturehalf4 col = tex2d (_maintex, In.texcoord); if (dot (In.color, fixed4 (1, 1,1,0) = = 0) {Col.rgb = dot (Col.rgb, fixed3 (. 222,.707,.071));} Else{col = col * In.color;} COL.A *= Clamp (f, 0.0, 1.0); return col;} Endcg}}subshader{lod 100tags{"Queue" = "Transparent" "ignoreprojector" = "True" "rendertype" = "Transparent"}pass{cull Offlighting offzwrite offfog {Mode Off}colormask rgbalphatest Greater. 01Blend srcalpha oneminussrcalphacolormaterial Am bientanddiffusesettexture [_maintex]{combine Texture * Primary}}}

Okay, we're done. The test project will be uploaded later.

[Shader] Ngui and Ashing