使用透明度实现Mask遮罩的Unity Shader

发表于2016-11-09
评论0 3.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

关于遮罩的需求
  将矩形的图片做成圆角矩形、圆形
常用实现方式
  使用UGUI自带的Mask组件实现
  使用网上一搜一大把的简单切割shader实现
存在的问题
  这些实现方案容易出现锯齿问题,见下图

            

常见实现方案的锯齿

锯齿的由来
  由于屏幕都是像素化的,所以看似圆滑的曲线,在屏幕上其实都是有锯齿的,但由于人眼的识别能力有限,所以当锯齿小到一定程度的时候就会认为曲线是圆滑的。
  然而,由于分辨率问题,我们很难做到锯齿足够小,所以需要在产生锯齿的边缘添加颜色过渡,避免明显的分界线,从而使人眼忽略锯齿问题。
现有方案的锯齿原因
  由于现有方案是简单的判断遮罩的边界:
  UGUI的Mask组件是通过透明度判断,如果遮罩某像素点透明度达到一个值,则该像素点对应的颜色透明度不变,否则透明度置为0 ,使用遮罩的透明度作为掩码写入缓冲区,之后只渲染缓冲区为1的区域。

以下为官方文档说明
Implementation
Masking is implemented using the stencil buffer of the GPU.
The first Mask element writes a 1 to the stencil buffer 
All elements below the mask check when rendering, and only render to areas where there is a 1 in the stencil buffer
Nested Masks will write incremental bit masks into the buffer, this means that renderable children need to have the logical & of the stencil values to be rendered.
简单切割shader的实现是通过边缘检测来判断该点是否显示,不显示则透明度置为0
发现了吗,这些方案都是非黑即白的的方案,根本实现不了颜色过渡,所以存在锯齿的现象

解决方案
我给出的方案是使用透明度叠加来做
1、制作一张PS做的带透明度过渡的遮罩
2、编写shader,获取这张遮罩的透明度,将该透明度和目标图片的透明度进行混合效果

           

使用遮罩前

              

制作材质球

              

添加材质球

           

使用遮罩后

           
其他形状的遮罩

shader代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
Shader "ImageEffect/MaskIcon"
    Properties
    
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Mask ("Base (RGB)", 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 a2v
            {
                fixed2 uv : TEXCOORD0;
                half4 vertex : POSITION;
                float4 color    : COLOR;
            };
 
            fixed4 _Color;
 
            struct v2f
            {
                fixed2 uv : TEXCOORD0;
                half4 vertex : SV_POSITION;
                float4 color    : COLOR;
            };
 
            sampler2D _MainTex;
            sampler2D _Mask; 
 
            v2f vert (a2v i)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, i.vertex);
                o.uv = i.uv;
 
                o.color = i.color * _Color;
                return o;
            }
 
            fixed4 frag (v2f i) : COLOR
            {
                half4 color = tex2D(_MainTex, i.uv) * i.color;
                half4 mask = tex2D(_Mask, i.uv);
                color.a *= mask.a;
                return color;
            }
            ENDCG
        
    }  
}

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台