Unity UGUI 边缘泛光描边的简单实现

先看效果

该效果是RawImage组件下实现。单纯Shader实现，不用c#辅助，当然，肯定也有缺点，在一些场合下或许不适用，我也希望能最大化适用，奈何技术有限。网上看过一些实现有些只适合3D，并且不适合棱角的，有些适用UI，效果也不错，但是为了泛光范围加大，性能指数级飙升，令人发指。这个shader原理就是，在一个UI里，把一部分分辨率拿出来用作泛光，一部分分辨率用来显示UI，缺点就出来了，不能够完整分辨率显示UI，因为有一部分被拿去用作泛光。

顺便还多说一局，Shader里的_Edge参数和_UVScale存在某种联系，本人愚钝，没能发现，或许是线性关系或许不是。如果处理好了，直接修改_Edge参数即可，不用手动再改_UVScale.

shader如下

//该shader无法根据Edge的参数来修正图片的UV,需要_UVScale参数手动匹配UV。_Edge参数一变化，_UVScale参数必定要修改
//该shader只适用于UGUI，并且会把图片的分辨率自动缩小一定数值，多出的分辨率用来做泛光处理
//该shader边缘光是根据长宽比例得到，不是根据像素宽度，意思就是说，长度越长，泛光越宽，越短，泛光越短
Shader "Custom/Edge"
{Properties{_Edge ("Edge", Range(0, 0.5)) = 0.1_EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)_MainTex ("MainTex", 2D) = "white" {}_UVScale ("UVScale", Range(0, 30)) = 0.13_Intensity ("Intensity", Range(0, 3)) = 1.86}SubShader{Tags  {  "Queue"="Transparent"  }  Blend SrcAlpha OneMinusSrcAlphaPass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"fixed _Edge;fixed4 _EdgeColor;sampler2D _MainTex;float _UVScale;float _Intensity;float _Test;struct appdata{float4 vertex : POSITION;fixed2 uv : TEXCOORD0;};struct v2f{float4 vertex : SV_POSITION;float4 objVertex : TEXCOORD0;fixed2 uv : TEXCOORD1;};v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.objVertex = v.vertex;o.uv = v.uv;return o;}fixed4 frag (v2f i) : SV_Target{    fixed x = i.uv.x ;fixed y = i.uv.y;//确定泛光的矩形的四个点float2 leftUp = float2(_Edge,1-_Edge);float2 leftDown = float2(_Edge,_Edge);float2 RightUp = float2(1-_Edge,1-_Edge);float2 RightDown = float2(1-_Edge,_Edge);//确定该像素点距离 四个位置的距离float leftUpD = distance(leftUp,i.uv); float2 leftDownD = distance(leftDown,i.uv); float2 RightUpD = distance(RightUp,i.uv); float2 RightDownD =  distance(RightDown,i.uv); float alpha =0;//像素判断，判断该像素在九宫格的哪个位置，然后做的alpha赋值运算if(x<_Edge && (1-y)<_Edge)//左上alpha=  pow((_Edge-leftUpD)/_Edge,_Intensity);else if(x<_Edge && y<_Edge)//左下alpha=  pow((_Edge-leftDownD)/_Edge,_Intensity);else if((1-x)<_Edge && y<_Edge)//右下alpha=  pow((_Edge-RightDownD)/_Edge,_Intensity);else if((1-x)<_Edge && (1-y)<_Edge)//左上alpha=  pow((_Edge-RightUpD)/_Edge,_Intensity);else if((x < _Edge))//左边alpha = pow(x/_Edge,_Intensity);else if(1 - x < _Edge)//右边alpha = pow((1-x)/_Edge,_Intensity);else if(1 - y < _Edge)//上边alpha = pow((1-y)/_Edge,_Intensity);else if(y < _Edge)    //下边 alpha =pow(y/_Edge,_Intensity);else //中间显示的图形{float4 addUV = float4(-_UVScale,-_UVScale,1+_UVScale*2,1+_UVScale*2);fixed4 col = tex2D(_MainTex, i.uv*addUV.zw+addUV.xy);alpha=1;_EdgeColor.xyz =col.xyz;}return fixed4(_EdgeColor.xyz,alpha);}ENDCG}}
}

需要注意点是

1：该shader无法根据Edge的参数来修正图片的UV,需要_UVScale参数手动匹配UV。_Edge参数一变化，_UVScale参数必定要修改 _Edge参数主要是为了缩放泛光范围，
2：该shader只适用于UGUI，并且会把图片的分辨率自动缩小一定数值，多出的分辨率用来做泛光处理
3：该shader边缘光是根据长宽比例得到，不是根据像素宽度，意思就是说，长度越长，泛光越宽，越短，泛光越短

Unity UGUI 边缘泛光描边的简单实现相关推荐

Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用，并取消拖拽(滑动内容)效果，拖拽只在Scrollbar 上起作用
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用目录 Unity UGUI基础之 Scro ...
【Unity UGUI】简单的美术字体的制作(教你写插件)
在 unity UGUI 使用中我们常常用到美术字体,然而有时却没有那么复杂那么多,再此介绍下生成美术字体的原理选中预先制作好的图片点击Go 就可以生成一个简单的字体了使用也很简单要注意设置( ...
Unity UGUI 效果之 UI 元素多边形UI （例如雷达图,圆形,不规则多边形 UI等）显示的简单实现的几种方法整理
Unity UGUI 效果之 UI 元素多边形UI (例如雷达图,圆形,不规则多边形 UI等)显示的简单实现的几种方法整理目录 Unity UGUI 效果之 UI 元素多边形UI (例如雷 ...
Unity UGUI简单的音频播放+读歌词(实现类似 QQ音乐，网易云音乐歌词滚动)
Unity UGUI简单的音频播放+读歌词(实现类似 QQ音乐,网易云音乐歌词滚动) 效果图 (demo下载地址 demo下载地址) 简单代码 /// <summary> /// 解析数据 ...
unity shader遮挡边缘光描边
Shader "Unlit/遮挡边缘光描边" {Properties{_MainTex("Texture", 2D) = "white" { ...
Unity UGUI开发设计及案例讲解
Unity--UGUI开发设计及案例讲解 1． Unity4.6跟以前的版本的最大区别首先在于在层级视图中点鼠标右键时出现的弹出菜单上,它把以前许多的菜单项进行了归类,比如cube sphere ca ...
Unity UGUI Rect
Unity UGUI Rect rect.x与rect.y rect.min和rect.max rect.center rect.x与rect.y x,y就是rect类的根坐标,有了它我们就能确定我们 ...
Unity UGUI Button 中文详解-Chinar
Chinar blog :www.chinar.xin Unity UGUI 完整系列教程 (Chinar中文图解) Unity UGUI Button 组件本文提供全流程,中文翻译. Chinar ...
unity c 语言教程,程序丨Unity教程：如何用最简单的方式创建Simplex噪声？
原标题:程序丨Unity教程:如何用最简单的方式创建Simplex噪声? 翻译:刘甜甜(青悠) 审校:周伟杰 (Senser) 在本篇教程中,你将学会创建Value噪声与Perlin噪声的替代噪声,即 ...

Unity UGUI 边缘泛光描边的简单实现

Unity UGUI 边缘泛光描边的简单实现相关推荐

最新文章

热门文章

Unity UGUI 边缘泛光 描边 的简单实现

Unity UGUI 边缘泛光 描边 的简单实现相关推荐

最新文章

热门文章

Unity UGUI 边缘泛光描边的简单实现

Unity UGUI 边缘泛光描边的简单实现相关推荐