UnityShader3实现彩光效果

本文实例为大家分享了UnityShader3实现彩光效果展示的具体代码,供大家参考,具体内容如下

参考链接: 【OpenGL】Shader实例分析(八)- 彩色光圈

效果图:

这里我把它分三部分实现:1.彩色 2.光圈 3.动画

1.先实现彩色效果。分析一下那张彩色图,它是以中心为原点的,然后颜色分为三部分,如下图。当角度为90度时,蓝色最多;当角度为-150度时,红色最多;当角度为-30度时,绿色最多。然后其他地方就是三色混合。

Shader "Custom/Colors"
{
 Properties
 {
 _AngleRange ("AngleRange", Range(60, 120)) = 60
 }
 SubShader
 {
 Pass
 {
 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"

 #define PI 3.142

 struct appdata
 {
 float4 vertex : POSITION;
 };

 struct v2f
 {
 float4 vertex : SV_POSITION;
 float4 scrPos : TEXCOORD0;
 };

 half _AngleRange;

 v2f vert (appdata v)
 {
 v2f o;
 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
 o.scrPos = ComputeScreenPos(o.vertex);

 return o;
 }

 fixed4 frag (v2f i) : SV_Target
 {
 //范围在(0, 1)
 float2 wcoord = i.scrPos.xy / i.scrPos.w;
 //映射到(-1, 1),即屏幕中心为(0, 0)
 wcoord = wcoord * 2 - 1;
 //atan2(y, x):反正切,y/x的反正切范围在[-π, π]内
 float radian = atan2(wcoord.y, wcoord.x);
 //1度(°)=0.017弧度(rad)
 //1弧度(rad)=57.29578度(°)
 float angle = radian * 57.3;
 //映射到(0, 360)
 if(angle < 0) angle = 360 + angle;

 fixed b = 1 - saturate(abs(angle - 90) / _AngleRange);
 fixed g;
 if(angle > 180) g = 1 - saturate(abs(angle - 330) / _AngleRange);
 else g = 1 - saturate((angle + 30) / _AngleRange);
 fixed r = 1 - saturate(abs(angle - 210) / _AngleRange);

 return fixed4(r, g, b, 1);
 }
 ENDCG
 }
 }
}

2.先说一下1 / (xxx)这个式子的强大,它实现的效果,往往会带有光晕效果。其中第六个就是我们想要实现的光圈效果。

Shader "Custom/Test"
{
 Properties
 {
 _Value ("Value", Range(1, 50)) = 1
 }
 SubShader
 {
 Pass
 {
 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"

 struct appdata
 {
 float4 vertex : POSITION;
 float2 uv : TEXCOORD0;
 };

 struct v2f
 {
 float4 vertex : SV_POSITION;
 float2 uv : TEXCOORD0;
 };

 half _Value;

 v2f vert (appdata v)
 {
 v2f o;
 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
 o.uv = v.uv;
 return o;
 }

 fixed4 frag (v2f i) : SV_Target
 {
 //映射到(-1, 1),使其中心点为原点
 float2 uv = i.uv * 2 - float2(1, 1);
 float v;

 //v = 1 / abs(_Value * uv.y);//1
 //v = 1 / abs(_Value * (uv.y + uv.x));//2
 //v = 1 / abs(_Value * (uv.y + 2 * uv.x));//3
 //v = 1 / abs(_Value * (abs(uv.y) + abs(uv.x)));//4
 //v = 1 / abs(_Value * length(uv));//5
 //v = 1 / abs(_Value * abs(length(uv) - 0.5));//6
 v = 1 / abs(_Value * abs(uv.x / uv.y));//7 x越小y越大,则越亮

 return fixed4(v, v, v, 1);
 }
 ENDCG
 }
 }
}

3.动画。这里我做的效果是基于角度的光线间隔效果,首先当然就是计算角度了,间隔的实现就是fmod和step的使用。

Shader "Custom/Test"
{
 Properties
 {
 _Width ("Width", Range(30, 90)) = 45
 }
 SubShader
 {
 Pass
 {
 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"

 struct appdata
 {
 float4 vertex : POSITION;
 float2 uv : TEXCOORD0;
 };

 struct v2f
 {
 float4 vertex : SV_POSITION;
 float2 uv : TEXCOORD0;
 };

 half _Width;

 v2f vert (appdata v)
 {
 v2f o;
 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
 o.uv = v.uv;
 return o;
 }

 fixed4 frag (v2f i) : SV_Target
 {
 //映射到(-1, 1),使其中心点为原点
 float2 uv = i.uv * 2 - float2(1, 1);

 float a = atan2(uv.y, uv.x);
 a *= 57.3;
 if(a < 0) a += 360;

 float b = fmod(a + _Time.y * 20, _Width);
 b = step(0.5 * _Width, b);

 return fixed4(b, b, b, 1);
 }
 ENDCG
 }
 }
}

>

4.最后当然就是将它们揉在一起了。

Shader "Custom/Colors"
{
 Properties
 {
 _AngleRange ("AngleRange", Range(60, 120)) = 60
 _Width ("Width", Range(30, 90)) = 45
 }
 SubShader
 {
 Pass
 {
 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"

 #define PI 3.142

 struct appdata
 {
 float4 vertex : POSITION;
 float2 uv : TEXCOORD0;
 };

 struct v2f
 {
 float4 vertex : SV_POSITION;
 float4 scrPos : TEXCOORD0;
 float2 uv : TEXCOORD1;
 };

 half _AngleRange;
 half _Width; 

 v2f vert (appdata v)
 {
 v2f o;
 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
 o.scrPos = ComputeScreenPos(o.vertex);
 o.uv = v.uv; 

 return o;
 }

 fixed4 frag (v2f i) : SV_Target
 {
 //1.彩色

 //范围在(0, 1)
 float2 wcoord = i.scrPos.xy / i.scrPos.w;
 //映射到(-1, 1),即屏幕中心为(0, 0)
 wcoord = wcoord * 2 - 1;
 //atan2(y, x):反正切,y/x的反正切范围在[-π, π]内
 float radian = atan2(wcoord.y, wcoord.x);
 //1度(°)=0.017弧度(rad)
 //1弧度(rad)=57.29578度(°)
 float angle = radian * 57.3;
 //映射到(0, 360)
 if(angle < 0) angle = 360 + angle;

 fixed b = 1 - saturate(abs(angle - 90) / _AngleRange);
 fixed g;
 if(angle > 180) g = 1 - saturate(abs(angle - 330) / _AngleRange);
 else g = 1 - saturate((angle + 30) / _AngleRange);
 fixed r = 1 - saturate(abs(angle - 210) / _AngleRange);

 //2.光圈

 //映射到(-1, 1),使其中心点为原点
 float2 uv = i.uv * 2 - float2(1, 1);
 float v = 1 / abs(30 * abs(length(uv) - 0.3));

 //3.转动

 float a = atan2(uv.y, uv.x);
 a *= 57.3;
 if(a < 0) a += 360; 

 float aa = fmod(a + _Time.y * 20, _Width);
 aa = step(0.5 * _Width, aa); 

 //////////////////////
 //////////////////////
 if(length(uv) < 0.3) return fixed4(0, 0, 0, 1);
 return fixed4(r, g, b, 1) * aa + fixed4(v, v, v, 1);
 }
 ENDCG
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • OpenGL Shader实例分析(8)彩色光圈效果

    本文实例为大家分享了OpenGL实现彩色光圈效果的具体代码,供大家参考,具体内容如下 研究了一个彩色光圈效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/TotalNoob" { //https://www.shadertoy.com/view/XdlSDs Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0&q

  • UnityShader3实现彩光效果

    本文实例为大家分享了UnityShader3实现彩光效果展示的具体代码,供大家参考,具体内容如下 参考链接: [OpenGL]Shader实例分析(八)- 彩色光圈 效果图: 这里我把它分三部分实现:1.彩色 2.光圈 3.动画 1.先实现彩色效果.分析一下那张彩色图,它是以中心为原点的,然后颜色分为三部分,如下图.当角度为90度时,蓝色最多:当角度为-150度时,红色最多:当角度为-30度时,绿色最多.然后其他地方就是三色混合. Shader "Custom/Colors" { Pr

  • UnityShader3实现2D描边效果

    本文实例为大家分享了UnityShader3实现2D描边效果的具体代码,供大家参考,具体内容如下 1. Shader "Custom/Edge" { Properties { _MainTex ("Texture", 2D) = "white" {} _OffsetUV ("OffsetUV", Range(0, 1)) = 0.1 _EdgeColor ("EdgeColor", Color) = (1,

  • VUE 自定义取色器组件的实现

    本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1.点击色块中任何一点,色块中的正方形显示该点的颜色. 2.点击色块上方的颜色圆点,色块选中该颜色所在的位置,并在正方形中显示相应颜色. 3.上方圆点如果不是rgb格式,需要转换. 4.组件的大小从调用它的页面中传过去. 组件代码(CanvasColor2.vue): <template> <!--    <div>-->     <div id='outDiv' style=&

  • HTC教程

    在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的.这个问题一直困扰着DHTML(动态 HEML)的网页编程者.他们只能不断地重复书写HTML.CSS和javascript的代码,以满足多个页面上的重复或相似的功能.自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地.这个新的技术就是我们要谈到的DHTML

  • 给图片在博客中添加滤镜效果

    配合同事文章的技巧,用自己的博客来测试一下.首先插入一张测试图片: 终极技巧之图片篇:为图片添加滤镜效果 纯文字博客看上去会显得很枯燥,适当的配图能够让页面更美观,也能更好地表达自己的思想.那么如何为图片添加一些Photoshop里面才有的特殊滤镜效果呢?一张张修改图片吗?太烦琐了,更何况很多时候我们是引用网络上的图片地址,并没有对原图片的修改权限.这里有一个简单的方法,可以修改图片在博客上的显示效果.一般的博客编辑页面都有"插入图片"功能,此外还有"源代码编辑"模

  • 红酒开了喝不完的保存方法

    红酒开了喝不完怎么办?  红酒一般没有特定的保存场所就比较难保存了.因为保存红酒要对温度,湿度,阴暗度有严格的要求.在专业酒窑中,温度需控制在10度至14度,湿度维持在70%.在一般家庭中,先将酒封存在具有隔热.隔光效果的瓦楞纸箱或保丽龙箱内,再放置于阴凉通风且温度变化不大的地方,也可保存较长时间.  至于已开瓶而未喝完的酒,比较理想的方法是先将酒瓶中的空气抽光,再塞上瓶塞,这样一来,可以保存大概一周时间.但较经济的做法是将喝剩的葡萄酒换到小瓶中,让瓶中存不住空气,就可再保存24小时.不过,已开

  • Unity实现角色受击身体边缘发光特效

    游戏中经常需要制作角色受击打的身体边缘光效果,本文使用的方法是,给Renderer叠加一个制作好的边缘光材质球,并通过脚本动态控制边缘光的渐变效果,表现出受击后的边缘光效果 工程结构如下 1 创建一个材质球HittedMatEffect.mat放在Assets/Resources/Material目录中,使用TransparentRim.shader 注意代码中用了Resources.Load,所以必须放在这个目录里,你可以改成别的方式 2 场景中创建一个Sphere(球体),挂上Runner脚

  • js实现类似光照的炫彩文字渐变视觉冲击效果

    炫彩的文字效果 body,div,td{font:menu} 欢迎使用 Internet 信息服务! Microsoft Internet 信息服务是一个桌面 Web 服务器,使用它,您可以从自己的计算机上发布个人主页,并把您计算机上的文档共享到整个网络. 在将站点上载到 Internet 提供商之前,也可以将 IIS 用作开发平台. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript和jQuery制作光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { var lis = document.getElementsByTagName("li"); //定义DOM变量接受标签为li的元素 for (var i = 0; i < lis.length;i++){ lis[i].onmouseover = function () { //方式

  • asp.net下让Gridview鼠标滑过光棒变色效果

    复制代码 代码如下: //光棒效果 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.back

随机推荐