UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果

这篇具有很好参考价值的文章主要介绍了UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、UI流光

Shader "Custom/Test0"
{
    Properties
    {
        _MainTex("主纹理",2D)="white"{}
        //使用黑白纹理识别边框
        _MaskTex("黑白纹理",2D)="white"{}
        _FlowTex("流光贴图",2D)="white"{}
        _FlowColor("流光颜色",Color)=(1,1,1,1)
        _FlowSpeed("流光速度",Range(0.1,2))=1.0

    }
    SubShader
    {
        Pass
        {
            //加这句话的原因是使用的素材中把主图片的A通道拆开了
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            sampler2D _MainTex;
            sampler2D _MaskTex;
            sampler2D _FlowTex;
            fixed _FlowSpeed;
            fixed4 _FlowColor;

            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
            };


            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv.xy = v.texcoord;
                return o;
            }

            fixed4 frag(v2f i):SV_Target
            {
                fixed4 texResult_Main = tex2D(_MainTex, i.uv.xy);

                fixed4 texResult_Mask = tex2D(_MaskTex, i.uv.xy);

                //流光速度计算
                i.uv.x += _Time.y * _FlowSpeed;

                //用于做流光范围判定
                fixed alpha = tex2D(_FlowTex, i.uv.xy).a;

                //图片的黑色区域和非流光的位置全是0,代表这些位置不需要流光    
                fixed3 color = alpha * texResult_Mask * _FlowColor;

                //为0就是显示原来图片,非0就显示流光混合颜色
                fixed3 finalColor = texResult_Main + color;

                return fixed4(finalColor, texResult_Main.a);
            }
            ENDCG

        }
    }
}

结果:

        unity怎么做全屏的热浪或者波纹效果,UnityShader开发,unity,技术美术

         实现需要三张图片,一个便是要显示的主纹理,一个是主纹理的透明通道纹理(用于识别边框),一个是流光纹理。

        还有一种UI流光是在外面一直转圈的。

二、UI扭曲

        不只是局限于UI,场景中的传送门也可以这样做,加个广告牌技术,保证时刻面对玩家,这里就不加了。

        扭曲的原理也很简单,采样点旋转一个角度即可,不过为了体现扭曲效果,我们让越靠近中心的点旋转越小,越远离的点旋转越大,不然全旋转成一个角度那叫旋转不叫扭曲。旋转要构建旋转矩阵。   

Shader "Custom/Test0"
{
    Properties
    {
        _MainTex("渲染纹理",2D)="white"{}
        _Strength("扭曲强度",float)=0.5
    }
    SubShader
    {
        Pass
        {           
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _Strength;

            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
                return o;
            }

            fixed4 frag(v2f i):SV_Target
            {
                fixed2 temp = i.uv - fixed2(0.5, 0.5);
                float length = sqrt(dot(temp, temp));
                //计算弧度
                float theta = length * _Strength;
                float3x3 materix =
                {
                    cos(theta), -sin(theta), 0,
                    sin(theta), cos(theta), 0,
                    0, 0, 1
                };
                fixed2 uv = fixed2(0.5, 0.5) +mul(materix,temp);
                fixed4 color=tex2D(_MainTex,uv);
                return color; 
            }
            ENDCG
        }
    }
}

unity怎么做全屏的热浪或者波纹效果,UnityShader开发,unity,技术美术

               这里要说一下图片本身对扭曲的影响,尽量不要选那些可以填满整个图片的纹理,因为四个角的纹理坐标有的时候一旋转会超出去,这时候就要看怎么截取的。

三、外边框效果

        这个不同于3D物体的描边,扩充模型什么的,我们相当于是对纹理进行的描边,这里就有一个可以利用的地方,那就是透明度。                

Shader "Custom/Test2"
{
    Properties
    {
        _MainTex("渲染纹理",2D)="white"{}
        _EdgeColor("边缘颜色",Color)=(1,1,1,1)
        _EdgeArea("边缘范围",float)=1
    }
    SubShader
    {
        Pass
        {  
            Blend SrcAlpha OneMinusSrcAlpha
                     
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

		    
            sampler2D _MainTex;
            float4 _MainTex_TexelSize;
            fixed4 _EdgeColor;
            fixed _EdgeArea;
            

            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
      
                return o;
            }

            fixed4 frag(v2f i):SV_Target
            {
                fixed4 texResult=tex2D(_MainTex,i.uv);
                //通过采样周围点的Alpha,判断边缘                
                float2 uv_up = i.uv + _MainTex_TexelSize.xy * float2(0,1) * _EdgeArea;
				float2 uv_down = i.uv + _MainTex_TexelSize.xy * float2(0,-1) * _EdgeArea;
				float2 uv_left = i.uv + _MainTex_TexelSize.xy * float2(-1,0) * _EdgeArea;
				float2 uv_right = i.uv + _MainTex_TexelSize.xy * float2(1,0) * _EdgeArea;
                
                //周围的Alpha
                fixed aroundAlpha=tex2D(_MainTex,uv_up).a*tex2D(_MainTex,uv_down).a*
                                    tex2D(_MainTex,uv_left).a*tex2D(_MainTex,uv_right).a;                
                //判定颜色
                fixed3 color=lerp(_EdgeColor,texResult,aroundAlpha);
                
                return fixed4(color,texResult.a); 
            }
            ENDCG
        }
    }
}

       

unity怎么做全屏的热浪或者波纹效果,UnityShader开发,unity,技术美术

        这个是参考网上的写法,但这个写法本身好像会对图片有一定的要求,主要是最后混合时用的参数,个人感觉怪怪的。

        下面这个是作者的写法,仅供参考 。       

Shader "Custom/Test0"
{
    Properties
    {
        _MainTex("渲染纹理",2D)="white"{}
        _EdgeColor("边缘颜色",Color)=(1,1,1,1)
        _EdgeArea("边缘范围",float)=1
    }
    SubShader
    {
        Pass
        {  
            Blend SrcAlpha OneMinusSrcAlpha
                     
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

		    
            sampler2D _MainTex;
            float4 _MainTex_TexelSize;
            fixed4 _EdgeColor;
            fixed _EdgeArea;
            

            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
      
                return o;
            }

            fixed4 frag(v2f i):SV_Target
            {
                fixed4 texResult=tex2D(_MainTex,i.uv);
                //通过采样周围点的Alpha,判断边缘                
                float2 uv_up = i.uv + _MainTex_TexelSize.xy * float2(0,1) * _EdgeArea;
				float2 uv_down = i.uv + _MainTex_TexelSize.xy * float2(0,-1) * _EdgeArea;
				float2 uv_left = i.uv + _MainTex_TexelSize.xy * float2(-1,0) * _EdgeArea;
				float2 uv_right = i.uv + _MainTex_TexelSize.xy * float2(1,0) * _EdgeArea;
                
                //周围的Alpha
                fixed aroundAlpha=tex2D(_MainTex,uv_up).a+tex2D(_MainTex,uv_down).a+
                                    tex2D(_MainTex,uv_left).a+tex2D(_MainTex,uv_right).a;
                aroundAlpha=saturate(aroundAlpha);
                //判定颜色
                fixed3 color=lerp(_EdgeColor,texResult,aroundAlpha*texResult.a);
                
                return fixed4(color,aroundAlpha); 
            }
            ENDCG
        }
    }
}

       

unity怎么做全屏的热浪或者波纹效果,UnityShader开发,unity,技术美术

        左边为作者的效果。

四、波纹采样

        通过正弦或者余弦函数对采样做偏移来营造出波纹感觉。        

Shader "Custom/Test0"
{
    Properties
    {
        _MainTex("主颜色",2D)="white"{}
        _A("波幅",Range(0.01,10))=0.2
        _W("波频",Range(3,50))=0.5
        _Area("波纹区域",Range(0,1))=0.2
        _Atten("波幅衰减速度",Range(0,10))=1
    }
    SubShader
    {
        Pass
        {
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            sampler2D _MainTex;
            float2 _MainTex_TexelSize;
            float _A;
            float _W;           
            float _Area;
            float _Atten;

            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
            };

            v2f vert(a2v v)
            {
                v2f o;

                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
                return o;
            }

            fixed4 frag(v2f i):SV_Target
            {
                 float2 center = float2(0.5, 0.5);
                //我们利用采样点距离中心点的距离作为t变量,这里就不加时间变化了,如果需要和距离混在一起加就行                
                float w=sqrt(dot(i.uv - center, i.uv - center));
                //length用于检测区域
                float length = saturate(_Area-w);                
                //做出离的越远振幅越小
                float a = _A / (_A + w*_Atten)*_A;                

                float2 uv = i.uv;
                
                uv.y += a * cos(_W * w * UNITY_PI)*length; //*length;
                fixed4 texColor = tex2D(_MainTex, uv);
                return texColor;
            }
            ENDCG
        }

    }
}

       

unity怎么做全屏的热浪或者波纹效果,UnityShader开发,unity,技术美术

 这个图片的效果不算特别好,找那种有水的会更好。文章来源地址https://www.toymoban.com/news/detail-783730.html

到了这里,关于UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 纯CSS实现边框流光效果(跑马灯效果)

    首先上一个效果图 有木有发现和夜晚街上的广告牌很像,接下来让我们看看如何使用css实现的吧 首先很明显应该使用一个盒子将文字装起来,并且将文字进行了居中,然后我们看到这盒子的周围围绕了两条光带,那么这两条光带是怎么实现的呢? 其实这是用四个小盒子实现

    2024年02月07日
    浏览(48)
  • Unity之ASE实现UI流光效果

    之前我们做过UV流动的效果,今天我们来做一个用于UI界面的特效–UI流光效果,先看下效果如下: 1.创建一个Legacy/Default UI的Shader,这是专门用于UI的shader模板 2.添加一个Templete Parameter节点,作为Image的Sprite Texture贴图 3.然后我们把Sprite Texture输出给一个Texture Sample节点 如下所示

    2023年04月21日
    浏览(42)
  • Unity中Shader实现UI流光效果

    在很多游戏的 UI 中,都有实现 一道光扫过 UI 的效果 Unity中Shader的时间_Time 注意: 因为,这是UGUI的Shader,记着修改渲染顺序为 透明层级 和 混合模式 Tags {“Queue” = “TransParent”} Blend SrcAlpha OneMinusSrcAlpha 代码: 效果: Unity3D Shader系列之UI流光效果 Unity流光shader,无需图片

    2024年02月05日
    浏览(49)
  • C++复刻:[流光按钮]+[悬浮波纹按钮]

    Python版本:GitHub地址 B站主页 使用 QRegularExpression 对象的 match() 函数,可以将正则表达式应用于目标文本,并检查是否存在匹配项; QRegularExpressionMatch 类存储匹配结果,并提供方法来访问和提取捕获组中的具体内容。 QPainterPath 用于绘制复杂图形路径的类; QPainter::setClipPath() 设

    2024年02月15日
    浏览(36)
  • UnityShader基础(七)——屏幕后处理效果

            屏幕后处理是基于渲染纹理实现的,通过更改渲染纹理的颜色等等实现某些某些视觉效果。          OnRenderImage函数是MonoBehaviour提供的事件回调函数,不止MonoBehaviour拥有这个函数,Camera也拥有着这个函数,就很怪,而且普通物体上这个回调好像还不生效,官网的说

    2024年02月02日
    浏览(31)
  • UnityShader基础案例(三)——外发光(泛光)和内发光

    基于菲涅尔反射来判断边缘所在。                     这种写法是建立在顶点数多的情况,而且对于模型的对称也有一定的要求。         球形效果就还行,但立方体的效果就很差 。                这种基于菲涅尔的泛光对模型的要求很高,可以用基于高斯

    2024年02月10日
    浏览(47)
  • SwiftUI 打造酷炫流光边框 + 微光滑动闪烁的 3D 透视滚动卡片墙

    有时候我们希望自己的 App 能向用户展示与众不同、富有创造力的酷炫视觉效果: 如上图所示,我们制作了一款流光边框 + 微光滑动闪烁的 3D 透视卡片滚动效果。这是怎么做到的呢? 小伙伴们是不是都兴奋了呢?无需等待,让我们马上开始冒险吧! Let‘s go!!!😉

    2024年01月25日
    浏览(51)
  • css实现动态水波纹效果

    效果如下: 外层容器 ( shop_wrap ): 设置外边距 ( padding ) 提供一些间距和边距 圆形容器 ( TheCircle ): 使用相对定位 ( position: relative ),宽度和高度均为 180px ,形成一个圆形按钮 圆角半径 ( border-radius ) 设置为 50% ,使其呈现圆形 边框 ( border ) 和阴影 ( box-shadow ) 提供边框和轻微

    2024年01月18日
    浏览(37)
  • UE5 材质 运动的扭曲效果

    本篇使用UE5的材质系统实现运动的扭曲效果,并解决他的重复性 总结思路 为uv坐标添加time节点 实现 如下图所示,Texcoord指定uv起始坐标,提供一个float2变量和Time节点相乘(这样对Time有控制权),将相乘结果与uv坐标相加,最后传给采样器 原理 由于噪声的值是固定随机的,将噪

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包