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 OffLighting OffZWrite OffZTest[unity_GUIZTestMode]Blend OneOneMinusSrcAlphaColorMask[_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_RECThalf2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);color.a *= m.x * m.y;
#endif#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);
#endifcolor.rgb *= color.a;return color;}ENDCG}}
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLO v8目标跟踪详细解读(一)

在此之前&#xff0c;我们已经对yolo系列做出了详细的探析&#xff0c;有兴趣的朋友可以参考yolov8等文章。YOLOV8对生态进行了优化&#xff0c;目前已经支持了分割&#xff0c;分类&#xff0c;跟踪等功能&#xff0c;这对于我们开发者来说&#xff0c;是十分便利。今天我们对…

【Vue+Element-plus】记录后台首页多echart图静态页面

一、页面效果 二、完整代码 Index.vue <template><div><div><DateTime /><!-- {{username}} --></div><el-row :gutter"20"><el-col :span"8"><div class"grid-content bg-purple"><P…

【Python数据容器】--- 元组的基本使用

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【Python小白从入门到精通】&#x1f388; 本专栏旨在分享学习Python的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 元组…

CSS基础:学习CSS样式的基本语法和应用,了解如何美化网页。

CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页上元素&#xff08;例如文字、图像、背景等&#xff09;外观和布局的样式语言。通过使用CSS&#xff0c;您可以控制和改变网页的外观&#xff0c;使其更具吸引力和易于使用。 下面是一些CSS基础知识和常用的语法&#…

LeetCode150道面试经典题-删除有序数组中的重复项(简单)

1.题目 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &#xff0c…

spring按条件注入@Condition及springboot对其的扩展

概述 spring的ioc极大的方便了日常开发&#xff0c;但随着业务的迭代。配置的一些参数在某些情况下需要按条件注入。 比如原先定义的db公共模块下&#xff0c;相关的配置和工具类只是基于mysql的。但是后续有模块需要使用mongo/es等其他数据库&#xff0c;又想继续使用db公共…

【12】Git工具 协同工作平台使用教程 Gitee使用指南 腾讯工蜂使用指南【Gitee】【腾讯工蜂】【Git】

tips&#xff1a;少量的git安装和使用教程&#xff0c;更多讲快速使用上手Gitee和工蜂平台 一、准备工作 1、下载git Git - Downloads (git-scm.com) 找到对应操作系统&#xff0c;对应版本&#xff0c;对应的位数 下载后根据需求自己安装&#xff0c;然后用git --version验…

K8S MetalLB LoadBalancer

1. 简介 kubernetes集群没有L4负载均衡&#xff0c;对外暴漏服务时&#xff0c;只能使用nodePort的方式&#xff0c;比较麻烦&#xff0c;必须要记住不同的端口号。 LoadBalancer&#xff1a;使用云提供商的负载均衡器向外部暴露服务&#xff0c;外部负载均衡器可以将流量路由…

日常BUG——使用Long类型作id,后端返回给前段后精度丢失问题

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 数据库long类型Id: 前端返回的Id实体类: Data ApiModel("xxx") public class …

【socket】非阻塞可以不用select吗?

问&#xff1a;socket 非阻塞可以不用select吗&#xff1f; 答&#xff1a; 对于非阻塞socket,可以不用select,但需要注意以下几点: 1. 非阻塞(non-blocking)模式下,socket相关的操作如connect、read、write调用都会立即返回,而不会被阻塞。 2. 如果没有数据可读时,read调用会…

【广州华锐视点】VR燃气轮机故障判断模拟演练系统

VR燃气轮机故障判断模拟演练系统由广州华锐视点开发&#xff0c;是一款基于虚拟现实技术的教育工具&#xff0c;旨在为学生提供一个安全、高效、互动的学习环境&#xff0c;帮助他们更好地掌握燃气轮机的故障诊断技能。 这款VR实训软件能够模拟真实的燃气轮机故障诊断场景&…

案例13 Spring MVC参数传递案例

基于Spring MVC实现HttpServletRequest、基本数据类型、Java Bean、数组、List、Map、JSON方式的参数传递。 1. 创建项目 选择Maven快速构建web项目&#xff0c;项目名称为case13-springmvc02。 2. 配置Maven依赖 <?xml version"1.0" encoding"UTF-8&quo…

前沿分享-鱼形机器人

可能并不太前沿了&#xff0c;是21年底的新闻了&#xff0c;但是看见了就顺便发一下吧。 大概就是&#xff0c;通过在pH响应型水凝胶中编码不同的膨胀速率而构建了一种环境适应型变形微机器人,让微型机器人直接向癌细胞输送药物从而减轻药物带来副作用。 技术原理是&#xff0c…

【每日一题Day292】LC1572矩阵对角线元素的和 模拟

矩阵对角线元素的和【LC1572】](https://leetcode.cn/problems/matrix-diagonal-sum/) 思路 简单模拟&#xff0c;主对角线的元素横纵坐标相等&#xff0c;副对角线的元素横纵坐标相加为n-1&#xff0c;注意避免重复计算 实现 class Solution {public int diagonalSum(int[][]…

数据结构:力扣刷题

题一&#xff1a;删除有序数组中的重复项 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的…

剑指 Offer 13. 机器人的运动范围

地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之和大于k的格子。例如&am…

C++:模拟实现vector以及vector的迭代器失效和拷贝问题

文章目录 实现的功能模拟实现迭代器失效隐含浅拷贝问题 实现的功能 模拟实现 由于前面实现了string&#xff0c;因此这里实现过程不为重点&#xff0c;重点为关于迭代器失效和拷贝问题 template <class T> class vector { public:typedef T* iterator;typedef const T*…

OpenStack简介

OpenStack简介 目录 OpenStack简介 1、云计算模式2、云计算 虚拟化 openstack之间的关系&#xff1f;3、OpenStack 中有哪些组件&#xff1f;4、计算节点负责虚拟机运行5、网络节点负责对外网络与内网之间的通信 5.1 网络节点仅包含Neutron服务5.2 网络节点包含三个网络端口6、…

【Python matplotlib】鼠标右键移动画布

在 Matplotlib 中&#xff0c;鼠标右键移动画布的功能通常是通过设置交互模式来实现的&#xff0c;例如使用 mpl_connect 方法。以下是一个示例代码&#xff0c;展示如何在 Matplotlib 中使用 mpl_connect 方法来实现鼠标右键移动画布的功能&#xff1a; import numpy as np …

ts知识点——基础积累

第一章 快速入门 0、TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。TS完全兼容JS&#xff0c;换言之&#xff0c;…