Unity UI.Image 六边形+流光 Shader

效果图

参考代码

Shader"Custom/HexFlowImage"
{
    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

         /*六边形参数*/
        _HexLineSize("HexLineSize",Range(0.02,0.2)) = 0.05       //线条粗细
        _HexZoom("HexZoom",Range(5,50)) = 10                     //六边形缩放
 
        /*流光参数*/
        _Angle("Angle",Range(0,3.1415926))=0                     //坐标系旋转角度
        _LineStrength("LineStrength",Range(0.01,0.99))=0.1       //流光线条粗细
        _LineEdge("LineEdge",Range(0,0.1))=0.01                  //流光边界过度粗细
        _LineOffset("LineOffset",Range(0,1))=0.5                 //流光坐标偏移
        _LineSpeed("MoveSpeed",float) =1                         //流光移动速度
        _LineColor("Color",Color)=(1,1,1,1)                      //流光颜色

        [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 One
        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_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP
            #define aspec _ScreenParams.x/_ScreenParams.y                          /*屏幕长款比例*/                                   
            #define rot float2x2(cos(_Angle),sin(_Angle),-sin(_Angle),cos(_Angle)) /*旋转矩阵*/        
            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;
                   float4 mask : TEXCOORD2;
                   float2 viewTexcoord : TEXTCOORD3;   //屏幕坐标
                   UNITY_VERTEX_OUTPUT_STEREO
              };

               sampler2D _MainTex;
               fixed4 _Color;
               fixed4 _TextureSampleAdd;

               float4 _ClipRect;
               float4 _MainTex_ST;
               float _UIMaskSoftnessX;
               float _UIMaskSoftnessY;
               float _HexLineSize;
               float _HexZoom;

               float _Angle;
               float _LineStrength;
               float _LineEdge;
               float _LineOffset;
               float _LineSpeed;
               fixed4 _LineColor;

               float HexDist(fixed2 p)
               {
                   p = abs(p);
                   float c = dot(p, normalize(fixed2(1, 1.73)));
                   c = max(c, p.x);
                   return c;
               }

               fixed4 HexCoords(fixed2 uv)
               {
                   const fixed2 r = fixed2(1, 1.73);
                   const fixed2 h = r * .5;
                   fixed2 a = fmod(uv, r) - h;
                   fixed2 b = fmod(uv - h, r) - h;  
                   fixed2 gv = dot(a, a) < dot(b, b) ? a : b;
                   float x = atan2(gv.x, gv.y);
                   float y = .5 - HexDist(gv);
                   fixed2 id = uv - gv;
                   return fixed4(x, y, id.x, id.y);
               }

               v2f vert(appdata_t v)
               {
                   v2f OUT;
                   UNITY_SETUP_INSTANCE_ID(v);
                   UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                   float4 vPosition = UnityObjectToClipPos(v.vertex);
                   OUT.worldPosition = v.vertex;
                   OUT.vertex = vPosition;

                   float2 pixelSize = vPosition.w;
                   pixelSize /= float2(1, 1) * abs(mul((float2x2) UNITY_MATRIX_P, _ScreenParams.xy));

                   float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
                   float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
                   OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
                   OUT.mask = float4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));

                   OUT.color = v.color;

                   //计算屏幕坐标
                   fixed4 vpos = ComputeScreenPos(OUT.vertex);
                   OUT.viewTexcoord = vpos.xy / vpos.w;
                   OUT.viewTexcoord.x *= aspec;
                   OUT.viewTexcoord += 0.5;
                   return OUT;
               }

               fixed4 frag(v2f IN) : SV_Target
               {
                   const half alphaPrecision = half(0xff);
                   const half invAlphaPrecision = half(1.0 / alphaPrecision);
                   IN.color.a = round(IN.color.a * alphaPrecision) * invAlphaPrecision;

                   //获取屏幕坐标 计算六边形像素
                   float2 uv1 = IN.viewTexcoord + float2(0, sin(IN.viewTexcoord.x * 5. + _Time.y) * 0.01);
                   half4 hex = smoothstep(_HexLineSize, .0, HexCoords(uv1 * _HexZoom).y) * IN.color.a;

                   //旋转屏幕坐标计算流光像素
                   float2 uv2 =   mul(rot,IN.viewTexcoord.xy);
                   uv2.x +=  _Time.y * _LineSpeed;
                   uv2.x = frac(uv2.x);
                   float d = smoothstep(_LineOffset,_LineOffset + _LineEdge,uv2.x) * smoothstep(_LineOffset + _LineStrength,_LineOffset + _LineStrength - _LineEdge,uv2.x);

                   //通过lerp函数进行差值融合 再与原始图像进行叠加
                   half4 color = lerp( IN.color * hex , hex  * _LineColor,d)+ tex2D(_MainTex, IN.texcoord);

#ifdef UNITY_UI_CLIP_RECT
                   half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
                   color.a *= m.x * m.y;
#endif

#ifdef UNITY_UI_ALPHACLIP
                   clip (color.a - 0.001);
#endif
                   color.rgb *= color.a;
                   return color;
               }
        ENDCG
        }
    }
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/73350.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SQL | 注释

2-注释 2.1-单行注释 select prod_name -- 这是一条行内注释 from products; 使用两个连字符(-- ) 放在行内&#xff0c;两个连字符后的内容即为注释内容。 # 这是一条注释 select prod_name from products; 这种注释方式可能有些数据库不支持&#xff0c;所以使用前应该…

shiro框架基本概念介绍

目录 什么是Shiro: Shiro的核心功能包括&#xff1a; Shiro主要组件及相互作用&#xff1a; Shiro 认证过程&#xff1a; Shiro 授权过程&#xff1a; 资料获取方法 什么是Shiro: Shiro 是一个强大灵活的开源安全框架&#xff0c;可以完全处理身份验证、授权、加密和会话…

funbox3靶场渗透笔记

funbox3靶场渗透笔记 靶机地址 https://download.vulnhub.com/funbox/Funbox3.ova 信息收集 fscan找主机ip192.168.177.199 .\fscan64.exe -h 192.168.177.0/24___ _/ _ \ ___ ___ _ __ __ _ ___| | __/ /_\/____/ __|/ __| __/ _ |/ …

单源最短路的扩展应用

选择最佳线路 有一天&#xff0c;琪琪想乘坐公交车去拜访她的一位朋友。 由于琪琪非常容易晕车&#xff0c;所以她想尽快到达朋友家。 现在给定你一张城市交通路线图&#xff0c;上面包含城市的公交站台以及公交线路的具体分布。 已知城市中共包含 n 个车站&#xff08;编号…

Azure概念介绍

云计算定义 云计算是一种使用网络进行存储和处理数据的计算方式。它通过将数据和应用程序存储在云端服务器上&#xff0c;使用户能够通过互联网访问和使用这些资源&#xff0c;而无需依赖于本地硬件和软件。 发展历史 云计算的概念最早可以追溯到20世纪60年代的时候&#x…

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序&#xff0c;双击webui.bat界面启动插件安装&#xff08;github&#xff09;模型下载(有些需要魔法&#xff09;安装过程遇到的大坑总结参考的博客 整个过程坑巨多&#xff0c;我花了一个晚上的时间才全部搞定,本教程针对有编程基础…

网络设备(防火墙、路由器、交换机)日志分析监控

外围网络设备&#xff08;如防火墙、路由器、交换机等&#xff09;是关键组件&#xff0c;因为它们控制进出公司网络的流量。因此&#xff0c;监视这些设备的活动有助于 IT 管理员解决操作问题&#xff0c;并保护网络免受攻击者的攻击。通过收集和分析这些设备的日志来监控这些…

苹果Mac像Windows一样使用

一、将磁盘访问设置的像Windows一样&#xff1a; 1.1、点击任务栏第一个按钮打开“访达”&#xff0c;点击菜单栏上的访达-偏好设置&#xff1a; 1.2、勾选“硬盘”&#xff0c;这样macOS的桌面上就会显示一个本地磁盘&#xff0c;之后重命名为磁盘根&#xff0c;相当于window…

部署Springboot项目注意事项

步骤 步骤 1&#xff1a;将数据库内容在云服务器上的数据库部署一份 我使用mariadb&#xff1b;会出现一些不兼容现象&#xff1b;我们需要把默认值删掉 2&#xff1a;配置文件你得修改地方 a&#xff1a;linux是磁盘区分(像我自己项目用来储存验证码的文件我们得换这个配置;…

Spring_AOP

一、AOP简介 AOP&#xff0c;Aspect Oriented Programming,面向切面编程,是对面向对象编程0OP的升华。OOP是纵向对一个事物的抽象&#xff0c;一个对象包括静态的属性信息&#xff0c;包括动态的方法信息等。而AOP是横向的对不同事物的抽象,属性与属性、方法与方法、对象与对象…

cs231n assignment2 q5 PyTorch on CIFAR-10

文章目录 嫌啰嗦直接看源码Q5 :PyTorch on CIFAR-10three_layer_convnet题面解析代码输出 Training a ConvNet题面解析代码输出 ThreeLayerConvNet题面解析代码输出 Train a Three-Layer ConvNet题面解析代码输出 Sequential API: Three-Layer ConvNet题面解析代码输出 CIFAR-1…

【MongoDB】解决ProxmoxVE下CentOS7虚拟机安装MongoDB6后启动失败的问题

目录 安装步骤&#xff1a; 2.1 配置yum源 2.2 安装MongoDB 2.3 启 动MongoDB ProxmoxVE上新装的CentOS7.4虚拟机&#xff0c;安装MongoDB6。 安装步骤&#xff1a; 2.1 配置yum源 # 创建mongodb yum源&#xff08;https://www.mongodb.com/docs/manual/tutorial/insta…

27岁了学plc还来得及吗?

如果你是学电气或者自控&#xff0c;完全没问题&#xff0c;PLC其实只是你的理解力的问题&#xff0c;真正底层的&#xff0c;都帮你打包了&#xff0c;你直接用就是。问题只是&#xff1a;你要能透彻理解 如果你从一个完全陌生的行业转过来&#xff0c;完全没必要。如果本身就…

[数据分析与可视化] Python绘制数据地图5-MovingPandas绘图实例

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。关于MovingPandas的使用见文章&#xff1a;MovingPandas入门指北&#xff0c;本文主要介绍三个MovingPandas的绘图实例。 MovingPandas官方仓库地址为&#xff1a;mo…

自定义批量修改图像位深度

什么是图像位深度&#xff1f;&#xff1f;&#xff1f; 图像位深度(Bit Depth)是指图像中每个像素所占的比特数,它决定了图像能够表示的颜色数量和亮度层级。 简单来说: 位深度越高,每个像素所能表示的颜色数和亮度等级越多。位深度越低,每个像素所能表示的颜色数和亮度等级…

容器安全的常见风险与防护实践

运行在云平台上的容器产品&#xff0c;因为具备一个完整的可移植应用程序环境&#xff0c;能够帮助用户轻松地完成对应用程序的开关控制&#xff0c;提升应用程序的敏捷性&#xff0c;同时节约企业的IT建设成本。在巨大优势作用下&#xff0c;容器产品的采用率在2021年达到了新…

恒运资本:算力股爆发,地产股全线下挫,海外机构调研股出炉

60股近期获海外组织调研&#xff0c;医疗龙头最受组织重视。 今日早盘三大指数全线低开&#xff0c;延续调整走势&#xff0c;上证指数跌1.01%&#xff0c;深证成指跌1.35%&#xff0c;创业板指跌1.6%。AI概念股逆市走强&#xff0c;算力、数据要素等方向领涨&#xff0c;朗威股…

通达信接口调用过程需要借助什么?

通达信接口是一种用于获取、传输和处理股票市场相关数据的软件接口&#xff0c;以提供了一种连接股票市场数据源和数据使用者之间的通道&#xff0c;允许开发者通过编程方式获取股票行情数据、交易数据和相关信息等。如果调用通达信接口&#xff0c;需要借助以下几个方面的工具…

竞赛项目 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

【Linux】网络层、数据链路层、DNS、ICMP协议、NAT技术

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《学会Linux》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录 &#x1f449;网络层&a…
最新文章