zoukankan      html  css  js  c++  java
  • [Shader]Unity裁剪四方形Image为圆形

    <1>新建材质球和shader,shader请在官方下载内置shader(UI)

         效果:

         思路:

                  裁剪成圆,那就剔除大于圆半径的像素,很鸡儿简单

        代码:

                 定义圆形半径 _Radius("半径",Range(0-0.5))=0.5

                 frag片元处理

                       float2 nor = float2(0.5,0.5)-uv;//圆心在0.5,0.5

                       if(length(nor)>_Radius)//计算圆心到UV坐标的距离 大于半径剔除

                             col.a = 0;

                       clip(col.a-0.01);//剔除alpha小于0

    源码:

          

    // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

    Shader "Tang/imgCut"
    {
        Properties
        {
            [PerRendererData] _MainTex("Sprite Texture", 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

            //my member
            _Radius("圆半径",Range(0,0.5)) = 0.3

            [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
        {
            Name "Default"
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile __ UNITY_UI_ALPHACLIP
            #define PI 3.1415926

            struct appdata_t
        {
            float4 vertex : POSITION;
            float4 color : COLOR;
            float2 texcoord : TEXCOORD0;
            UNITY_VERTEX_INPUT_INSTANCE_ID
        };

        struct v2f
        {
            float4 vertex : SV_POSITION;
            fixed4 color : COLOR;
            float2 texcoord : TEXCOORD0;
            float4 worldPosition : TEXCOORD1;
            UNITY_VERTEX_OUTPUT_STEREO
        };

        fixed4 _Color;
        fixed4 _TextureSampleAdd;
        float4 _ClipRect;
        float _Radius;

        v2f vert(appdata_t IN)
        {
            v2f OUT;
            UNITY_SETUP_INSTANCE_ID(IN);
            UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
            OUT.worldPosition = IN.vertex;
            OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

            OUT.texcoord = IN.texcoord;

            OUT.color = IN.color * _Color;
            return OUT;
        }

        sampler2D _MainTex;

        fixed4 frag(v2f IN) : SV_Target
        {
    float2 uv = IN.texcoord.xy;
            float4 col = IN.color;

            float2 nor =float2(0.5,0.5)-uv;
            if (length(nor)>_Radius)
                col.a = 0;
            
    clip(col.w-0.01);
            half4 color = (tex2D(_MainTex,uv) + _TextureSampleAdd) * col;
            color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

    #ifdef UNITY_UI_ALPHACLIP
             clip(color.a - 0.001);
    #endif

             return color;
         }
             ENDCG
         }
        }
    }

                  

  • 相关阅读:
    软件工程-设计
    软工初体验
    机房收费系统系列七:完工篇
    机房收费系统系列六:要点分析
    机房收费系统系列五:报表
    机房收费系统系列四:上下机
    机房收费系统系列三:MSHFlexGrid控件自动调整列宽
    机房收费系统系列二:MDI子窗体和主窗体显示
    [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
    [RN] React Native 使用精美图标库react-native-vector-icons
  • 原文地址:https://www.cnblogs.com/cocotang/p/7308411.html
Copyright © 2011-2022 走看看