Unity3d Shader實現(xiàn)圓形頭像

Unity3d Shader實現(xiàn)圓形頭像

設計需要頭像顯示圓形规个,但是默認圖片類型都是矩形矾飞。因為沒有美術兄弟幫助所以自己搜了方法栓拜,結合在一起實現(xiàn)座泳。

一、 在Unity中需要配合使用材質(zhì)(Material)和Unity Shader 來實現(xiàn)幕与。

(1)創(chuàng)建一個材質(zhì)挑势;

1.jpeg

(2)創(chuàng)建一個Unity Shader,并把它賦值給材質(zhì);

2.jpeg

Shader "Self/Circular"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}

        _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
        // 以 1 - _Radius 長度為半徑的圓形
        _Radius ("Radius", Range(0,0.5)) = 0.5
    }
    
    SubShader
    {
        LOD 100

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType"="Plane"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }
        
        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Offset -1, -1
        Fog { Mode Off }
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            CGPROGRAM
                #pragma target 3.0
                #pragma vertex vert
                #pragma fragment frag
                #include "UnityCG.cginc"

                float _Radius;

                struct appdata_t
                {
                    float4 vertex : POSITION;
                    float2 texcoord : TEXCOORD0;
                    fixed4 color : COLOR;
                };
    
                struct v2f
                {
                    float4 vertex : SV_POSITION;
                    half2 texcoord : TEXCOORD0;
                    fixed4 color : COLOR;
                };
    
                sampler2D _MainTex;
                float4 _MainTex_ST;
                
                v2f vert (appdata_t v)
                {
                    v2f o;
                    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                    o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                    o.color = v.color;
#ifdef UNITY_HALF_TEXEL_OFFSET
                    o.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
                    return o;
                }
                
                fixed4 frag (v2f i) : COLOR
                {
                    float2 uv = i.texcoord.xy;
                    float4 c = i.color;
                    // 左下四方塊
                    if(uv.x < _Radius && uv.y < _Radius)
                    {
                        float2 r;
                        r.x = uv.x - _Radius;
                        r.y = uv.y - _Radius;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }
                    }
                    // 左上四方塊
                    else if(uv.x < _Radius && uv.y > 1- _Radius)
                    {
                        float2 r;
                        r.x = uv.x - _Radius;
                        r.y = uv.y + _Radius - 1;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }   
                    }
                    // 右下四方塊
                    else if(uv.x > 1 - _Radius && uv.y < _Radius)
                    {
                        float2 r;
                        r.x = uv.x + _Radius - 1;
                        r.y = uv.y - _Radius;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }   
                    }
                    // 右上四方塊
                    else if(uv.x > 1 - _Radius && uv.y > 1- _Radius)
                    {
                        float2 r;
                        r.x = uv.x + _Radius - 1;
                        r.y = uv.y + _Radius - 1;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }   
                    }                                   
                    
                    fixed4 col = tex2D(_MainTex, i.texcoord) * c;
                    clip (col.a - 0.01);
                    return col;
                }
            ENDCG
        }
    }
}

參考地址: http://shadowkong.com/archives/2091

(3)把材質(zhì)賦值給需要渲染的Image啦鸣;

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末潮饱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子诫给,更是在濱河造成了極大的恐慌香拉,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件中狂,死亡現(xiàn)場離奇詭異凫碌,居然都是意外死亡,警方通過查閱死者的電腦和手機胃榕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門盛险,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人勋又,你說我怎么就攤上這事苦掘。” “怎么了楔壤?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵鹤啡,是天一觀的道長。 經(jīng)常有香客問我挺邀,道長揉忘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任端铛,我火速辦了婚禮泣矛,結果婚禮上,老公的妹妹穿的比我還像新娘禾蚕。我一直安慰自己您朽,他們只是感情好,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布换淆。 她就那樣靜靜地躺著哗总,像睡著了一般。 火紅的嫁衣襯著肌膚如雪倍试。 梳的紋絲不亂的頭發(fā)上讯屈,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機與錄音县习,去河邊找鬼涮母。 笑死,一個胖子當著我的面吹牛躁愿,可吹牛的內(nèi)容都是我干的叛本。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼彤钟,長吁一口氣:“原來是場噩夢啊……” “哼来候!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逸雹,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤营搅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后峡眶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剧防,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年辫樱,在試婚紗的時候發(fā)現(xiàn)自己被綠了峭拘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡狮暑,死狀恐怖鸡挠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情搬男,我是刑警寧澤拣展,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站缔逛,受9級特大地震影響备埃,放射性物質(zhì)發(fā)生泄漏姓惑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一按脚、第九天 我趴在偏房一處隱蔽的房頂上張望于毙。 院中可真熱鬧,春花似錦辅搬、人聲如沸唯沮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽介蛉。三九已至,卻和暖如春溶褪,著一層夾襖步出監(jiān)牢的瞬間币旧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工猿妈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佳恬,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓于游,卻偏偏與公主長得像毁葱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子贰剥,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 板子是一個獨立的世界倾剿,里面有好多新奇的東西,需要自己去探索蚌成,施加輸入前痘,查看輸出,直到一切完美運行担忧。 每調(diào)一塊新的板...
    IEEE1364閱讀 388評論 0 1