【UnityShader】常用效果内外发光、 描边

最新推荐文章于 2024-04-26 10:03:45 发布
最新推荐文章于 2024-04-26 10:03:45 发布
阅读量915 收藏
点赞数
原文链接：https://www.szcbjs.com/Cr12MoV/
版权

这篇博客记录一下常用的几种效果：内发光、外发光以及描边的几种实现方法

内发光
实现方法
一般实现方法就是使用Empricial菲涅尔近似公式来实现：

F (v,n)=saturate(base + pow(scale * (1 - v·n), power))
1
base为基础反射率，scale为菲涅尔效应强弱，power为菲涅尔效应作用角度范围大小（即power越大，反射率会在越小的范围内迅速变为1）
在计算菲涅尔效应时，使用F对反射和基础颜色值进行插值混合，在这里计算内发光，就对发光颜色和基础颜色进行插值混合。
half shine = max(pow(1-dot(normal, viewDir), _ShinePower * 10), 0.001) * _ShineScale;
col.rgb = lerp(col.rgb, _ShineColor.rgb, shine);
1
2
内发光

实现代码
Shader “Custom/Effect/Shine_Out”
{
Properties
{
_Color (“Main Color”, Color) = (1,1,1,1)
_ShineColor (“Shine Color”, Color) = (1,1,1,1)
_ShineScale (“Shine Scale”, Range(0, 1)) = 0.5
_ShinePower (“Shine Power”, Range(0, 1)) = 0.5
}
SubShader
{
Tags { “Queue”=“Transparent” }

    LOD 200

    Pass
    {
		Blend SrcAlpha OneMinusSrcAlpha

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"
		#include "Lighting.cginc"

		half4 _Color;
		half4 _ShineColor;
		float _ShineScale;
		float _ShinePower;

        struct a2v
        {
            float4 vertex : POSITION;
			float3 normal : NORMAL;
        };

        struct v2f
        {
			float4 pos : SV_POSITION;
			float3 normal : TEXCOORD0;
			float3 worldPos : TEXCOORD1;
        };


        v2f vert (a2v v)
        {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);
			o.normal = UnityObjectToWorldNormal(v.normal);
			o.worldPos = mul(unity_ObjectToWorld, v.vertex);

            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
			half3 normal = normalize(i.normal);
			half3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
			half3 lightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));

			fixed4 col = fixed4(0,0,0,1);
			col.rgb = _LightColor0.rgb * _Color.rgb * (dot(lightDir, normal)*0.5+0.5);
			half shine = max(pow(1-dot(normal, viewDir), _ShinePower * 10), 0.001) * _ShineScale;
			col.rgb = lerp(col.rgb, _ShineColor.rgb, shine);
			
            return col;
        }
        ENDCG
    }
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
描边
内发光方法实现
沿用上文写的内发光实现方法，仅在内发光的值上做mask或者数值限制。这里仅使用step做限制，需要更风格化的效果需要制作mask做描边的限制。
half shine = max(pow(1-dot(normal, viewDir), _ShinePower * 10), 0.001) * _ShineScale;
shine = step(_Threshold, shine);
col.rgb = lerp(col.rgb, _ShineColor.rgb, shine);
1
2
3
阈值为新增变量，当内发光的渐变范围值大于阈值时，显示为描边颜色，小于阈值则显示为原颜色
为了显示清楚描边，图中去掉了原本的光照计算
描边
优点
实现简单，可以在一个Pass里实现，性能消耗小
缺点
只能向内描边，且描边宽度受视角与法线方向影响，不易控制
沿法线外扩背面方法实现
这种方法比较常用，用两个Pass实现，一个Pass只渲染背面，且把物体背面沿法线方向向外扩张，第二个Pass正常渲染物体。

v2f vert (appdata v)
{
v2f o;
float4 viewPos = float4(UnityObjectToViewPos(v.vertex), 1.0);
float3 viewNormal = mul(UNITY_MATRIX_IT_MV, v.normal);

viewNormal.z = -0.5;//防止内凹模型背面扩张后遮挡正面
float3 normal = normalize(viewNormal);
viewPos += float4(normal, 1.0) * _OutlineWidth;

o.pos = mul(UNITY_MATRIX_P, viewPos);
o.worldPos = mul(unity_ObjectToWorld, v.vertex);
o.normal = UnityObjectToWorldNormal(v.normal);

return o;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果图如下
描边

优点

实现简单，大部分模型的描边效果都很不错
缺点

对于例如正方体这样平整且转折锐利的物体无法使用
多使用了一个Pass，渲染性能消耗提高了不少
全部代码如下

Shader “Custom/Effect/Outline”
{
Properties
{
_Color (“Main Color”, Color) = (1,1,1,1)
[HDR]_OutlineColor (“Outline Color”, Color) = (1,1,1,1)
_OutlineWidth (“Outline Width”, Range(0, 2)) = 1
}
SubShader
{
Tags { “Queue”=“Transparent” }

    LOD 200

    Pass
    {
		Cull Front
		Blend SrcAlpha OneMinusSrcAlpha

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
			float3 normal : NORMAL;
        };

        struct v2f
        {
            float4 pos : SV_POSITION;
        };

		half4 _OutlineColor;
		float _OutlineWidth;

        v2f vert (appdata v)
        {
            v2f o;
			float4 viewPos = float4(UnityObjectToViewPos(v.vertex), 1.0);
			float3 viewNormal = mul(UNITY_MATRIX_IT_MV, v.normal);

			viewNormal.z = -0.5;
			float3 normal = normalize(viewNormal);
			viewPos += float4(normal, 1.0) * _OutlineWidth;

			o.pos = mul(UNITY_MATRIX_P, viewPos);

            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
            return _OutlineColor;
        }
        ENDCG
    }

	Pass
    {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
        };

        struct v2f
        {
            float4 pos : SV_POSITION;
        };

        half4 _Color;

        v2f vert (appdata v)
        {
            v2f o;
			o.pos = UnityObjectToClipPos(v.vertex);

            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
            fixed4 col = _Color;

            return col;
        }
        ENDCG
    }
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
图像处理方法实现
基于后处理图像处理的边缘检测方法：常用的一般是Sobel算子和Roberts算子，边缘处的梯度绝对值会较大，也就是计算每个像素的梯度，并用梯度对初始颜色和描边颜色进行插值，也就完成了描边的操作。

half Sobel(v2f i)
{
const half Gx[9] = { -1,-2,-1,
0, 0, 0,
1, 2, 1 };

const half Gy[9] = { -1, 0, 1,
					 -2, 0, 2,
					 -1, 0, 1 };

half texColor;
half edgeX = 0;
half edgeY = 0;
for (int it = 0; it < 9; it++)
{
	texColor = luminance(tex2D(_MainTex, i.uv[it]));
	edgeX += texColor * Gx[it];
	edgeY += texColor * Gy[it];
}

half edge = lerp(0, abs(edgeX) + abs(edgeY), _EdgeWidth);

return edge;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
效果如下
描边

优点

适用于任何模型
不用增加一个Pass的渲染性能消耗
缺点

增加了后处理的性能消耗
无法单独对一个物体进行描边
一些变化很小的变换难以检测
全部代码如下

Shader “Custom/Postprocess/EdgeDetection”
{
Properties
{
_MainTex (“Texture”, 2D) = “white” {}
_EdgeColor (“EdgeColor”, Color) = (1,0,0,1)
_BackgroundColor (“BackgroundColor”, Color) = (1,1,1,1)
_EdgeOnly (“Edge Only”, Range(0,1)) = 0.5
_EdgeWidth (“Edge Width”, Range(0,1)) = 1
}
SubShader
{

	Pass
	{
		ZTest Always Cull Off ZWrite Off

		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		
		#include "UnityCG.cginc"

		struct v2f
		{				
			float4 vertex : SV_POSITION;
			half2 uv[9] : TEXCOORD0;
		};

		sampler2D _MainTex;
		float2 _MainTex_TexelSize;
		fixed4 _EdgeColor;
		fixed4 _BackgroundColor;
		fixed _EdgeOnly;
		fixed _EdgeWidth;
	
		v2f vert (appdata_img v)
		{
			v2f o;
			o.vertex = UnityObjectToClipPos(v.vertex);
			half2 uv = v.texcoord;

			o.uv[0] = uv + half2(_MainTex_TexelSize.x *-1, _MainTex_TexelSize.y *-1);
			o.uv[1] = uv + half2(_MainTex_TexelSize.x * 0, _MainTex_TexelSize.y *-1);
			o.uv[2] = uv + half2(_MainTex_TexelSize.x * 1, _MainTex_TexelSize.y *-1);
			o.uv[3] = uv + half2(_MainTex_TexelSize.x *-1, _MainTex_TexelSize.y * 0);
			o.uv[4] = uv + half2(_MainTex_TexelSize.x * 0, _MainTex_TexelSize.y * 0);
			o.uv[5] = uv + half2(_MainTex_TexelSize.x * 1, _MainTex_TexelSize.y * 0);
			o.uv[6] = uv + half2(_MainTex_TexelSize.x *-1, _MainTex_TexelSize.y * 1);
			o.uv[7] = uv + half2(_MainTex_TexelSize.x * 0, _MainTex_TexelSize.y * 1);
			o.uv[8] = uv + half2(_MainTex_TexelSize.x * 1, _MainTex_TexelSize.y * 1);

			return o;
		}
		
		fixed luminance(fixed4 color)
		{
			return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
		}

		half Sobel(v2f i)
		{
			const half Gx[9] = { -1,-2,-1,
								  0, 0, 0,
								  1, 2, 1 };

			const half Gy[9] = { -1, 0, 1,
								 -2, 0, 2,
								 -1, 0, 1 };

			half texColor;
			half edgeX = 0;
			half edgeY = 0;
			for (int it = 0; it < 9; it++)
			{
				texColor = luminance(tex2D(_MainTex, i.uv[it]));
				edgeX += texColor * Gx[it];
				edgeY += texColor * Gy[it];
			}

			half edge = lerp(0, abs(edgeX) + abs(edgeY), _EdgeWidth);

			return edge;
		}

		fixed4 frag (v2f i) : SV_Target
		{
			half edge = Sobel(i);

			fixed4 withEdgeColor = lerp(tex2D(_MainTex, i.uv[4]), _EdgeColor, edge);
			fixed4 onlyEdgeColor = lerp(_BackgroundColor, _EdgeColor, edge);

			half4 col = lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);

			return col;
		}
		ENDCG
	}
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
外发光
Bloom
后处理非常常用的Bloom效果，也是最为常用的外发光渲染方案。
基本思路为，提取图像中的亮部，渲染为RT，再对这张RT进行模糊，最后再把模糊后的亮部RT叠加回原图，就得到了发光物体外一层光晕的效果。
HDR可以让颜色亮度高于1，与Bloom配合可以让暗部不会也随着Bloom效果一起发光，仅仅让亮部有Bloom效果
实现代码有很多，之前的一篇写后处理的博客也有写过，就不贴代码了
效果图
Bloom
沿法线外扩背面方法实现
在上文的沿法线外扩背面实现的描边方法基础上，给背面的alpha像内发光一样，乘以视角与法线点积。不过要稍作改动，让背面从中心向外逐渐透明，模拟光晕的效果。

float ndotv = max(pow(-dot(normal, viewDir),_OutlineFeather), 0.001);
fixed4 col = _OutlineColor;
col.a *= ndotv;
1
2
3
外发光

注意：

因为是背面的法线，所以点积的范围在[-1,0],要乘以-1让它在0到1之间。
内发光是从中心到边缘逐渐变大，而此处是需要让alpha从中心到边缘逐渐变小，所以之前是1-ndotv，现在直接使用ndotv计算
全部代码如下

Shader “Custom/Effect/Shine_In”
{
Properties
{
_Color (“Main Color”, Color) = (1,1,1,1)
[HDR]_ShineColor (“Shine Color”, Color) = (1,1,1,1)
_ShineWidth (“Shine Width”, Range(0, 2)) = 1
_ShineFeather (“Shine Feather”, Range(0, 10)) = 0
}
SubShader
{
Tags { “Queue”=“Transparent” }

    LOD 200

    Pass
    {
		Cull Front
		Blend SrcAlpha OneMinusSrcAlpha

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
			float3 normal : NORMAL;
        };

        struct v2f
        {
            float4 pos : SV_POSITION;
			float3 worldPos : TEXCOORD0;
			float3 normal : TEXCOORD1;
        };

		half4 _ShineColor;
		float _ShineWidth;
		float _ShineFeather;

        v2f vert (appdata v)
        {
            v2f o;
			float4 viewPos = float4(UnityObjectToViewPos(v.vertex), 1.0);
			float3 viewNormal = mul(UNITY_MATRIX_IT_MV, v.normal);

			viewNormal.z = -0.5;
			float3 normal = normalize(viewNormal);
			viewPos += float4(normal, 1.0) * _ShineWidth;

			o.pos = mul(UNITY_MATRIX_P, viewPos);
			o.worldPos = mul(unity_ObjectToWorld, v.vertex);
			o.normal = UnityObjectToWorldNormal(v.normal);

            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
			float3 normal = normalize(i.normal);
			float3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));

			float ndotv = max(pow(-dot(normal, viewDir),_ShineFeather), 0.001);
            fixed4 col = _ShineColor;
			col.a *= ndotv;

            return col;
        }
        ENDCG
    }

	Pass
    {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
        };

        struct v2f
        {
            float4 pos : SV_POSITION;
        };

        half4 _Color;

        v2f vert (appdata v)
        {
            v2f o;
			o.pos = UnityObjectToClipPos(v.vertex);

            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
            fixed4 col = _Color;

            return col;
        }
        ENDCG
    }
}

}

15150229228苏州超博金属
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity ShaderGraph实现Sprite图片描边/发光效果 URP
01-18
具体效果及操作步骤，详见这篇： https://blog.csdn.net/Katrina419/article/details/135648241
UnityShader基础案例（三）——外发光（泛光）和内发光
SliverAsh_的博客
10-05 4110
基于菲涅尔反射来判断边缘所在。
unity 用菲涅尔光强度公式实现边缘光shader
最新发布
lcfengokok的博客
04-26 334
请注意，这个Shader是一个非常基础的示例，仅用于说明如何实现边缘光效果。在实际应用中，你可能需要调整和优化这个Shader以适应你的具体需求，比如添加更多的光照模型、处理阴影、调整性能等。此外，对于更复杂的场景，你可能还需要考虑其他因素，比如法线贴图、环境光遮蔽等。在Unity中实现基于菲涅尔光强度公式的边缘光（Rim Lighting）Shader，你可以编写一个自定义的Shader代码。在这个Shader中，我们定义了一个简单的Pass，其中包含了顶点着色器（），然后计算了菲涅尔效应的边缘光因子（
Unity高光外发光HighlightGlow
06-06
UnityHighLightGlowSystem v5,强大的外发光，自发光插件，支持2017 2.x系列，手机亲测性能良好
unity3d模型外发光.unitypackage
03-24
unity3d 模型外发光，闪动，颜色切换
Unity_物体轮廓外发光
cherry_f_f的博客
04-11 3395
物体轮廓外发光shader
Unity实现物体外发光
ChenyangDu的博客
10-08 2543
https://www.cnblogs.com/mrmocha/p/8320994.html
UnityShader应用——外发光实现
Jeff的博客
12-25 1万+
学习了一下实现物体外发光的Shader。 实现外发光的Pass //pass2 生成模型外部的光晕 Pass { Name &quot;OutLight&quot; Tags {&quot;LightMode&quot; = &quot;Always&quot;} Cull Front //不正面剔除会出错 Blend SrcAlpha One CGPROGRAM #pragma vertex ve..
Unity Shader实现描边OutLine效果
12-23
本文实例为大家分享了Unity Shader实现描边OutLine效果的具体代码，供大家参考，具体内容如下 Shader实现描边流程大致为：对模型进行2遍（2个pass）绘制，第一遍（描边pass）在vertex shader中对模型沿顶点法线方向...
UnityShader3实现2D描边效果
08-26
本篇文章将深入探讨如何使用UnityShader3来实现2D描边效果，这对于创建像素艺术风格的游戏或者视觉效果非常有用。 首先，我们来看第一个Shader示例。这个Shader定义了一个名为"Custom/Edge"的自定义着色器，它包含...
Unity外发光插件MK
06-05
Unity 强大的Glow插件，可用于实现外发光等高亮特效。
unity3D自发光透明SHADER
06-25
unity3D的自发光透明SHADER,用于UNITY里面的一种材质的代码
Unity 物体边缘发光 shader
08-01
放到工程文件夹里面，让物体（gameObject）的材质（material）添加这个shader，就行。
Mk Glow unity3d
10-08
一款比较好使的Glow,VR上面使也没有问题
Unity物体轮廓描边Shader
05-11
unity3d中实现物体轮廓描边的Shader
unity3d描边效果shader
07-15
在描述中提到的"有详细的模型描边代码，很简单，但也很适用"，这可能是指一个使用Unity内置的表面着色器语言（Surface Shader）编写的简单描边Shader示例。 描边效果的实现通常涉及以下几个关键步骤： 1. **分离...
unity3d 不规则外发光描边_Shader案例之内发光和边缘泛光效果
weixin_39996478的博客
11-20 1013
在很多游戏都可以看到这种效果，具体怎么去实现呢，其实超级简单。首先呢，我们先去把内发光的效果给做出了，然后再去实现外发光的效果。1，我们最开始先实现一个显示再屏幕上的颜色： pass{ CGPROGRAM #pragma vertex vert #pragma fragment frag ...
【unityshader小实例】 轮廓外发光（光晕）
热门推荐
赞美月亮的专栏
10-17 3万+
发光效果 外发光（光晕）：在模型轮廓外形成逐渐衰减的光 生成光晕的原理 原理并不复杂： 让物体的顶点位置沿着法线方向延伸，然后使用视角法线点积物体法线的方式形成一个中间最亮向四周扩散亮度逐渐衰减的效果，再给物体贴上贴图或者填上色盖住物体内部的光晕，我们就实现了轮廓外发光 手写unity shader实现光晕（外发光） // Upgrade NOTE: replace...
Unity中实现模型外发光——HighlightingSystem插件
L的博客
08-14 4949
一：最基础的外发光 ——演示效果 ——给相机添加HighlightingRenderer组件 ——给自发光的物体添加Highlighter组件 1.Tween：必须勾选上才可以发光 2.Gradient：设置发光的颜色(可以渐变) 3.Duration：持续时间 4.Loop Mode：颜色渐变循环模式 ...
用unity shader编写一个描边的效果
03-14
使用Unity Shader编写描边效果可以通过在渲染对象时，根据深度值和法线信息来计算边缘的位置，然后在边缘处绘制一条线条。这可以通过使用Sobel算子或Laplacian算子来实现。同时，还可以使用颜色混合来实现描边的效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值