UnityShader3实现彩光效果

作者:宏哥1995 时间:2021-09-02 03:48:53 

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

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

效果图:

UnityShader3实现彩光效果

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

UnityShader3实现彩光效果UnityShader3实现彩光效果

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

UnityShader3实现彩光效果


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
}
}
}

UnityShader3实现彩光效果

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
}
}
}

UnityShader3实现彩光效果

UnityShader3实现彩光效果

UnityShader3实现彩光效果

UnityShader3实现彩光效果

UnityShader3实现彩光效果

UnityShader3实现彩光效果

UnityShader3实现彩光效果

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
}
}
}

>UnityShader3实现彩光效果

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
}
}
}

来源:https://blog.csdn.net/lyh916/article/details/51913146

标签:UnityShader3,彩光
0
投稿

猜你喜欢

  • Java基于Tcp协议的socket编程实例

    2022-03-08 00:04:13
  • Java实现简单邮件发送功能

    2023-08-15 00:53:23
  • Java语言实现最大堆代码示例

    2021-09-22 14:20:44
  • C#利用XML创建Excel文档的实现方法

    2022-12-21 07:15:53
  • C# 得到某一天的起始和截止时间的代码

    2021-11-13 10:57:54
  • 解析Android框架之Volley源码

    2021-09-30 19:44:28
  • Spring Boot自动配置的原理及@Conditional条件注解

    2021-08-31 21:14:11
  • Spark Streaming算子开发实例

    2023-03-17 02:28:41
  • Android实现遮罩层(蒙板)效果

    2023-04-26 18:43:03
  • android实现常驻通知栏遇到的问题及解决办法

    2022-10-12 06:06:58
  • Android实现应用内置语言切换功能

    2021-11-14 13:19:50
  • Android适配底部虚拟按键的方法详解

    2023-11-09 18:20:55
  • C语言 简单粗暴的笨方法找水仙花数

    2023-11-27 21:53:29
  • SpringBoot文件上传功能的实现方法

    2021-11-23 11:24:27
  • C++对string进行大小写转换操作方法

    2023-11-03 04:32:59
  • SpringBoot如何用java生成静态html

    2023-08-08 08:46:59
  • java数据结构之希尔排序

    2023-11-08 18:16:18
  • C#发送Get、Post请求(带参数)

    2023-04-11 07:28:14
  • c# 如何实现一个简单的json解析器

    2021-06-10 15:02:54
  • Android Application的使用全面解析

    2023-08-26 04:23:49
  • asp之家 软件编程 m.aspxhome.com