【每日一记】unity3d 图片置灰shader

雨点打透心脏的1/2处 2021-09-17 17:04 544阅读 0赞

项目须要。參考了一下网上的资料，写了一个shader，给button置灰。

shader详细实现例如以下：

2016.07.25补充，支持mask剪裁

Shader "Transparent Colored Gray"  
\{  
Properties  
\{  
\_MainTex ("Base (RGB), Alpha (A)", 2D) = "white" \{\}  
\_Color ("Tint", Color) = (1,1,1,1)  
  
\_StencilComp ("Stencil Comparison", Float) = 8  
\_Stencil ("Stencil ID", Float) = 0  
\_StencilOp ("Stencil Operation", Float) = 0  
\_StencilWriteMask ("Stencil Write Mask", Float) = 255  
\_StencilReadMask ("Stencil Read Mask", Float) = 255  
  
  
\_ColorMask ("Color Mask", Float) = 15  
  
  
\[Toggle(UNITY\_UI\_ALPHACLIP)\] \_UseUIAlphaClip ("Use Alpha Clip", Float) = 0  
\}  
  
  
SubShader  
\{  
Tags  
\{   
"Queue"="Transparent"   
"IgnoreProjector"="True"   
"RenderType"="Transparent"   
"PreviewType"="Plane"  
"CanUseSpriteAtlas"="True"  
\}  
  
Stencil  
\{  
Ref \[\_Stencil\]  
Comp \[\_StencilComp\]  
Pass \[\_StencilOp\]   
ReadMask \[\_StencilReadMask\]  
WriteMask \[\_StencilWriteMask\]  
\}  
  
  
Cull Off  
Lighting Off  
ZWrite Off  
ZTest \[unity\_GUIZTestMode\]  
Blend SrcAlpha OneMinusSrcAlpha  
ColorMask \[\_ColorMask\]  
  
  
Pass  
\{  
CGPROGRAM  
\#pragma vertex vert  
\#pragma fragment frag  
  
  
\#include "UnityCG.cginc"  
\#include "UnityUI.cginc"  
  
  
\#pragma multi\_compile \_\_ UNITY\_UI\_ALPHACLIP  
  
struct appdata\_t  
\{  
float4 vertex   : POSITION;  
float4 color    : COLOR;  
float2 texcoord : TEXCOORD0;  
\};  
  
  
struct v2f  
\{  
float4 vertex   : SV\_POSITION;  
fixed4 color    : COLOR;  
half2 texcoord  : TEXCOORD0;  
float4 worldPosition : TEXCOORD1;  
\};  
  
fixed4 \_Color;  
fixed4 \_TextureSampleAdd;  
float4 \_ClipRect;  
  
  
v2f vert(appdata\_t IN)  
\{  
v2f OUT;  
OUT.worldPosition = IN.vertex;  
OUT.vertex = mul(UNITY\_MATRIX\_MVP, OUT.worldPosition);  
  
  
OUT.texcoord = IN.texcoord;  
  
\#ifdef UNITY\_HALF\_TEXEL\_OFFSET  
OUT.vertex.xy += (\_ScreenParams.zw-1.0)\*float2(-1,1);  
\#endif  
  
OUT.color = IN.color \* \_Color;  
return OUT;  
\}  
  
  
sampler2D \_MainTex;  
  
  
fixed4 frag(v2f IN) : SV\_Target  
\{  
// Sample the texture  
half4 color = tex2D(\_MainTex, IN.texcoord) \* IN.color;  
float c = 0.299\*color.r + 0.587\*color.g + 0.184\*color.b;  
color.r = color.g = color.b = c;  
color.a \*= UnityGet2DClipping(IN.worldPosition.xy, \_ClipRect);  
\#ifdef UNITY\_UI\_ALPHACLIP  
clip (color.a - 0.001);  
\#endif  
  
  
return color;  
\}  
ENDCG  
\}  
\}  
\}

先建一个名为colorGrayMat的材质，把shader文件附加到材质上。

管理material材质代码：

public class MaterialManager  
\{  
    public static void addMaterial(Image img, string materialName)  
    \{  
        Material material = GameAssets.instance.loadMaterial(materialName);  
        if (img != null && material != null)  
        \{  
            img.material = material;  
        \}  
    \}

public static void addGrayMaterial(Image img)  
    \{  
        addMaterial(img,"colorGrayMat");  
    \}  
\}

调用代码：

MaterialManager.addGrayMaterial(img);

关于shader资料：

官网资料： [http://docs.unity3d.com/Manual/SL-SurfaceShaders.html][http_docs.unity3d.com_Manual_SL-SurfaceShaders.html]（英文）

[ http://unity3d.9tech.cn/news/2013/1220/39315.html][http_unity3d.9tech.cn_news_2013_1220_39315.html]（中文）

猫都能学会的Unity3D Shader入门指南 [ http://www.onevcat.com/2013/07/shader-tutorial-1/][http_www.onevcat.com_2013_07_shader-tutorial-1]

[http_docs.unity3d.com_Manual_SL-SurfaceShaders.html]: http://docs.unity3d.com/Manual/SL-SurfaceShaders.html
[http_unity3d.9tech.cn_news_2013_1220_39315.html]: http://unity3d.9tech.cn/news/2013/1220/39315.html
[http_www.onevcat.com_2013_07_shader-tutorial-1]: http://www.onevcat.com/2013/07/shader-tutorial-1/