【Unity Shader】实现UGUI下图片的倒影效果

效果如下

原理：

倒影区域也用图片本体，做个镜像翻转（RectTransform中的scale的Y设为-1），然后shader对图片进行处理，达到一个透明度Y方向上渐变的效果。

实现：

因为是UGUI上使用，推荐直接在内置的UI-Default.shader中进行修改（官网可以下载）。

要达到Y方向上的透明度渐变，可以使用UV坐标中的v作为变化因子，通过一个衰减曲线达到效果，我这里采用的指数函数（Pow），关键代码其实就下面这一句，如下：

color.a *= pow(1 - IN.texcoord.y, _Pow);

_Pow就是调节范围变化：

而整体透明度调整可以直接修改RawImage中的Color的Alpha即可（这里就直接修改的顶点颜色）。

完整代码：

Shader "Unlit/UIShadow"
{Properties{[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}[HideInInspector]_Color ("Tint", Color) = (1,1,1,1)[HideInInspector]_StencilComp ("Stencil Comparison", Float) = 8[HideInInspector]_Stencil ("Stencil ID", Float) = 0[HideInInspector]_StencilOp ("Stencil Operation", Float) = 0[HideInInspector]_StencilWriteMask ("Stencil Write Mask", Float) = 255[HideInInspector]_StencilReadMask ("Stencil Read Mask", Float) = 255[HideInInspector]_ColorMask ("Color Mask", Float) = 15[HideInInspector][Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0_Pow("Pow",range(1,10)) = 1}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 SrcAlpha OneMinusSrcAlphaColorMask [_ColorMask]Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma target 2.0#include "UnityCG.cginc"#include "UnityUI.cginc"#pragma multi_compile __ UNITY_UI_CLIP_RECT#pragma multi_compile __ UNITY_UI_ALPHACLIPstruct 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;UNITY_VERTEX_OUTPUT_STEREO};sampler2D _MainTex;fixed4 _Color;fixed4 _TextureSampleAdd;float4 _ClipRect;float4 _MainTex_ST;float _Pow;v2f vert(appdata_t v){v2f OUT;UNITY_SETUP_INSTANCE_ID(v);UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);OUT.worldPosition = v.vertex;OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);OUT.color = v.color * _Color;return OUT;}fixed4 frag(v2f IN) : SV_Target{half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;color.a *= pow(1 - IN.texcoord.y, _Pow);#ifdef UNITY_UI_CLIP_RECTcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);#endif#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}
}

【Unity Shader】实现UGUI下图片的倒影效果相关推荐

Unity Shader - Built-in管线下优化 multi_compile_fwdbase、multi_compile_fog 变体
文章目录变体过多的缺点项目情况 #pragma multi_compile_fwdbase 和 multi_compile_fog 生存的变体(keyword) 生存的变体变体的数量查看编译生 ...
Unity shader图集Atlas下的UV坐标归一化转换
unity中如果图片打入了图集中,在shader中取到的uv坐标默认是图集中的坐标,如果需要shader做一些类似流光的效果,需要转换成常用的0-1区间的归一化uv坐标,转换方法如下: 步骤一: C# ...
unity Shader Graph实现2D图片扭曲波纹效果
先看效果,制作版本:unity2019.4.2 制作2D图片效果,不需要用到光照信息,所以创建ShaderGraph时选用Unlit Graph. 图片一般都会有透明通道,记得修改Unlit Mast ...
【备份】《Unity Shader入门精要》配图
说明:本页面是书籍<Unity Shader入门精要>的随书彩图集锦,包含了书中所有的插图,使用时可通过图片编号进行搜索. 作者:冯乐乐邮箱:lelefeng1992@gmail.c ...
【备忘】《Unity Shader入门精要》随书彩色插图
转载来源:http://www.manew.com/blog-194008-42590.html <Unity Shader入门精要>随书彩色插图 <Unity Shader入门精要 ...
《Unity Shader入门精要》随书彩色插图
说明:本页面是书籍<Unity Shader入门精要>的随书彩图集锦,包含了书中所有的插图,使用时可通过图片编号进行搜索. 作者:冯乐乐邮箱:lelefeng1992@gmail.c ...
Unity在OpenGL模式下Shader编译报错
报错信息 GLSL compilation failed: 0(21) : error C7528: OpenGL reserves names containing '__' 双击报错VS自动打开V ...
Unity Shader 之正方形图片四角圆角的简单实现（不用遮罩Mask）
Unity Shader 之正方形图片四角圆角的简单实现(不用遮罩Mask) 目录 Unity Shader 之正方形图片四角圆角的简单实现(不用遮罩Mask)
Unity NGUI高端游戏小地图6组图标Unity游戏素材资源（UGUI可用图片素材）
Unity NGUI高端游戏小地图6组图标Unity游戏素材资源(UGUI可用图片素材) 项目下载 Demo下载地址效果图例子场景项目下载 Demo下载地址

【Unity Shader】实现UGUI下图片的倒影效果

效果如下

原理：

实现：

完整代码：

【Unity Shader】实现UGUI下图片的倒影效果相关推荐

最新文章

热门文章