jjzjj

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

implosion98 2023-10-02 原文

一、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

        }
    }
}

结果:

        

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

        还有一种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
        }
    }
}

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

三、外边框效果

        这个不同于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
        }
    }
}

       

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

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

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
        }
    }
}

       

        左边为作者的效果。

四、波纹采样

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

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
        }

    }
}

       

 这个图片的效果不算特别好,找那种有水的会更好。

有关UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  3. 「Python|Selenium|场景案例」如何定位iframe中的元素? - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时,对于使用了iframe的页面,如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候,可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签,如果直接查找是无法找到的,会抛出没有找到元素的异常。比如近在咫尺的例子就是,CSDN的登录窗体就是使用的iframe,大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素,会抛出NoSuchElementException异常。解决

  4. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  5. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug,发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则:20%的主要功能要重点测(eg:支付宝的支付功能,其他功能都是次要的)80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  6. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  7. 【网络】-- 网络基础 - 2

    (本文是网络的宏观的概念铺垫)目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展        是最开始先有的计算机,计算机后来因为多项技术的水平升高,逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速:独立模式:计算机之间相互独立。    如:有三个人,每个人做的不同的事物,但是是需要协作的完成。    而这三个人所做的事是需要进行协作的,然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据

  8. ruby-on-rails - 如何使用 grape swagger ui 传递数组? - 2

    我在下面定义了api端点:paramsdorequires:ids,type:Array,desc:'Arrayofgroupids'end我无法从Swagger生成的UI传递数组。如果我输入[1,2,3,4]或ids%5b%5d=1&ids%5b%5d=2&ids%5b%5d=3然后两者都无效.如果我使用数组调用spec中的api,它就可以工作。我的客户想尝试Swagger的整个api,所以我想要一个适用于SwaggerUI的解决方案。 最佳答案 我对所有情况的解决方案:paramsdorequires:ids,type:Arra

  9. ruby - 在不同的文件中设置断点没有效果 - 2

    ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如,考虑这两个文件,foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在,当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时,我收到消息Setbreakpoint1atfoo.rb:4,但是当我cont时,程序执行到最后,调试器永远不会停止。但是,如果我在main.rb中的一行上打断,例如b./main.rb:3,或者一个方法,

  10. jquery - Sprockets::FileNotFound - 找不到文件 'jquery.ui' - 2

    这个问题已经被问过几次了,但我尝试了提供的解决方案,但仍然没有帮助,所以我提出了一个新问题。gem文件gem'jquery-ui-rails'按照建议,我将gem放在:assets组之外Application.css~*=require_self*=requirejquery.ui*=requirebootstrap-datepicker*=requirejquery.timepicker*=require_tree.*/RailsAssetPipeline根据列出的顺序加载Assets。在这里,我把它排在列表的第2位。Application.css.scss*=require_sel

随机推荐