关于unityShader描边的几种尝试

最新推荐文章于 2024-08-08 16:50:43 发布
最新推荐文章于 2024-08-08 16:50:43 发布
阅读量8.4k 收藏 18
点赞数 2
分类专栏： shader， 文章标签： Unityshader 描边 outLine
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39020624/article/details/77141916
版权

周末了，最近北京总是莫名其妙的下雨，在家里呆着就不想动弹。最近一个星期一直在研究卡通材质，进而对如何描边做了些尝试。

第一种：在材质上描边，由美术组的同学在贴图上根据模型边缘直接绘制描边。

优点：更具有艺术性以及可变性。

缺点：工程量很大，人物角色无法描边，只对固定的场景及建筑可行。

第二种：根据视角和法线来描边。dot(n,v)

代码如下：

Shader "Custom/dotSurfaceShader" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_Size("size",float)=0

	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		Blend SrcAlpha OneMinusSrcAlpha
		
		CGPROGRAM
		// Physically based Standard lighting model, and enable shadows on all light types
		#pragma surface surf Standard Lambert
		// Use shader model 3.0 target, to get nicer looking lighting
		#pragma target 3.0

		sampler2D _MainTex;
		float _Size;

		struct Input {
			float2 uv_MainTex;
			float3 viewDir;
			float3 worldNormal;
		};

		//half _Glossiness;
		//half _Metallic;
		fixed4 _Color;

		// Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
		// See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
		// #pragma instancing_options assumeuniformscaling
		UNITY_INSTANCING_CBUFFER_START(Props)
			// put more per-instance properties here
		UNITY_INSTANCING_CBUFFER_END

		void surf (Input IN, inout SurfaceOutputStandard o) {
			// Albedo comes from a texture tinted by color
			float os=saturate(dot (normalize(IN.viewDir), IN.worldNormal));
			fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Albedo = c.rgb;
			o.Emission = o.Albedo * pow (os, _Size);
			// Metallic and smoothness come from slider variables

			o.Alpha = _Color.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
效果如下：

优点：适用性较广，对复杂的模型尤为出效果。

缺点：类似cube等几何体没办法体现描边光。

第三种：法线外拓。

这种方法也是在复杂面几何体上使用最多的方法。

代码如下：


Shader "Unlit/NormalShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Size("Size",float)=0
		_Color("color",Color)=(1,1,1,1)
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			cull front
			Zwrite off
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;

				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float _Size;
			
			v2f vert (appdata v)
			{
				v2f o;
				float4 Vpos=mul(UNITY_MATRIX_MV,v.vertex);
				float3 Vnormal=mul(UNITY_MATRIX_IT_MV,v.normal);
				Vnormal.z=-0.05;
				o.vertex=mul(UNITY_MATRIX_P,Vpos+float4(Vnormal,0)*_Size/10);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);

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




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


		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			Zwrite off
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float4 _Color;

			
			v2f vert (appdata v)
			{
				v2f o;

				o.vertex=UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 col = tex2D(_MainTex, i.uv);
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return _Color*col;
			}
			ENDCG
		}
	}
}
其中需要注意的地方一个是利用了两个pass，所以在资源耗费上会比较多。另外一个就是 Vnormal.z=-0.05;

这里锁定了z轴是因为需要避免凹面体描边盖住本体。

效果如下：

优点：简单，方便。。分分钟就能上描下描左描右描。。。

缺点：耗费资源，另外像cube等几何体会出现面与面无法交接的情况。（本文章最后会给出解决方案）


第四中：offset偏移

较少使用的一个方法，因为会使本体模型产生一些轻微的面片变形。

代码如下：

Shader "Unlit/offsetShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			cull front
			offset 1,1
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{

				return fixed4(0,0,0,1);
			}
			ENDCG
		}
		Pass
		{
			
			offset 5,5
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				return fixed4(1,0,0,1);
			}
			ENDCG
		}
	}
}

效果如下：

有点：也是比较简单，并且可以形成完全覆盖cube等类型的描边。

缺点：缺点也很明显，模型的片与片之间会产生轻微的变形。



第五种方法：色彩外拓

。。。。。。。。。。。。终于写到第五个了。第一次写这么长的博客。

这个方法是建立在法线外拓基础上进行的改进，利用顶点颜色去传递顶点法线。

代码如下：


Shader "Unlit/ColorShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Size("Size",float)=0
		_Color("color",Color)=(1,1,1,1)
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			cull front
			Zwrite off
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
				float3 normal:NORMAL;
				float4 color:COLOR;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;

				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float _Size;
			
			v2f vert (appdata v)
			{
				v2f o;
				float4 Vpos=mul(UNITY_MATRIX_MV,v.vertex);
				float3 Vnormal=mul(UNITY_MATRIX_IT_MV,v.color.xyz-1);
				Vnormal.z=-0.05;
				o.vertex=mul(UNITY_MATRIX_P,Vpos+float4(Vnormal,0)*_Size/10);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);

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




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


		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			Zwrite off
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float4 _Color;

			
			v2f vert (appdata v)
			{
				v2f o;

				o.vertex=UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 col = tex2D(_MainTex, i.uv);
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return _Color*col;
			}
			ENDCG
		}
	}
}

效果如下：


优点：克服了cube几何体无法交接问题！！！！！！

缺点：模型必须与上级原点重合。否则会产生描边偏移现象，左边的图就是因为没有与上级原点完全重合产生了轻微的偏移。

最后：提供一种在法线外拓基础上能使cube等类型模型描边交接的方法。

将模型的

改为

就可以避免无法交接的情况。。但是很费。。。

未寒
关注
专栏目录
Unity Shader-遮挡处理（X-Ray，遮挡描边，遮挡半透，遮挡溶解）
puppet_master的专栏
07-26 4万+
游戏中处理遮挡的几种常用的方法，遮挡溶解，遮挡描边，遮挡半透，X光效果。
Unity Shader 卡通渲染 实时模型动画描边的研究
lht748的博客
03-04 2523
前言 卡通渲染也叫非真实感渲染（英文简写：NPR），"描边"在图形学和数字图像里都叫边缘检测。因此你可以在很多文献网站上面找到很多这类文献，但最后我发现基于图形学使用的方式基本都是类似的，没有太多特别的做法。最后忙着研究unity3d的坑，都忘记记下来了，只保留了几个映像比较深的文献。有误请指正。 一、模型上的边缘 1.1、边缘的分类 很长一段时间我在网上找到的描边法，给我的感觉都是...
unity找到的最好的描边着色器shader
10-14
unity找到的最好的描边着色器shader,平常的描边shader加上去后物体没了高光效果,里面的Standard那一款完美解决此问题.
unity3d描边shader
810364804
05-22 364
Shader "Custom/OutLine" {Properties { _Color ("Main Color", Color) = (.5,.5,.5,1) _OutlineColor ("Outline Color", Color) = (0,0,0,1) _Outline ("Outline width", Range (0.0, 0.03)) = .005 _MainT...
Unity 2d描边基于SpriteRender，高性能的描边解决方案
最新发布
qq_58047420的博客
08-08 1365
以Unity默认渲染管线为例，打造不需要图片内边距，描边平滑，高性能的描边解决方案
unity shader 实现通用描边shader -文字描边-字体描边
qq_58047420的博客
12-08 3894
在制作游戏时,可以遇到要对字体添加描边的需求,unity 的UGUI自带的OutLine组件,描边效果不好,宽度过大会出现穿帮,顶点数量也会增加,性能不好,如果对于有几百字,顶点数量会很多,而且无法扩展功能可以看出Outline创建了4个方向的文字Unity5.2以前的版本要求，每一个Canvas下至多只能有2^16-1=65535个顶点(使用2个字节(16位)存储顶点索引)，超过就会报错以上的种种原因,让我们不得不自己编写文字图片的描边shader。
Unity3D Shader系列之描边
老王的博客
04-10 1万+
参考文章 Unity Shader-描边效果 Outline Shader offset的作用 Unity Shader 中 Offset 设置的作用 Shader Depth Offset [Polygon Offset] [OpenGL][SharpGL]用Polygon Offset解决z-fighting和stitching问题
UnityShader 描边效果
05-17
描边效果是游戏里面非常常用的一种效果，一般是为了凸显游戏中的某个对象，会给对象增加一个描边效果。
Unity Shader-边缘检测效果（基于颜色，基于深度法线，边缘流光效果，转场效果）
puppet_master的专栏
11-17 1万+
边缘检测，在图像处理，计算机视觉中都是很重要的一个概念。在图像处理领域，由于输入只有一张图片，所以一般是将图片转成灰度，然后判断图片像素间的梯度来判断图像中的边界的；而在3D渲染领域，除了场景渲染结果图片外，我们还可以得到场景的深度以及法线等信息，让我们可以得到更加精确的边缘检测结果。边缘检测在渲染中虽然可能没有图像处理领域那样出名，但是也是可以用来实现一些特殊渲染风格，渲染效果，以及后处理AA等功能。
怎么样防止unity 轮廓描边断开
06-10
如果在 Unity 中使用轮廓描边（outline）效果时出现了断开的情况，可以尝试以下几种方法来解决： 1. 增加轮廓宽度：可以尝试增加轮廓宽度来遮盖住断开的部分。在 Shader 中通过修改轮廓采样的半径大小，来增加轮廓...
Unity Shader-Decal贴花（SelfDecal，Alpha Blend，Mesh Decal，Projector，Deferred Decal）
热门推荐
puppet_master的专栏
01-06 2万+
本篇blog主要讨论了一下目前常见的一些贴花的实现方式，并全部在Unity中给出了基本的实现，包括自身二套uv贴花（Self Decal），叠片贴花（Alpha Blend面片贴花），内置投影器贴花（Projector），碰撞网格构造贴花（Mesh Decal），延迟贴花的多种实现方式（Depth Decal，Depth Normal Decal，Deferred Decal，同时影响多通道的贴花）等。
unity 描边Shader
05-07
unity 描边Shaderunity 描边Shaderunity 描边Shaderunity 描边Shaderunity 描边Shaderunity 描边Shader
unity3d描边效果shader
07-15
有详细的模型描边代码，很简单，但也很适用，所有代码都在里面。
Unity物体轮廓描边Shader
05-11
unity3d中实现物体轮廓描边的Shader
unity描边shader
12-24
unity描边shader，有两种描边方式可选。
Unity Shader实现描边OutLine效果
08-25
主要为大家详细介绍了Unity Shader实现描边OutLine效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity-shader描边
木马人
05-02 736
shader描边效果的原理：两个pass，第一个pass渲染背面（将顶点沿着 法线方向外拓），第二个pass渲染正面 Cull 指令：(详细命令介绍参考：https://blog.csdn.net/a133900029/article/details/80593513) 原图： 描边后： 顶点外拓可以是 模型空间，世界空间，视角空间，这里在模型空间中进行法线外拓 Shader "Unlit/O...
Unity Shader - 描边
长生但酒狂的博客
12-31 948
我们都知道描边效果在游戏中很常见，比如选中某个角色时需要凸显该模型，就会采用描边效果，今天我们就来实现一下该效果。 描边的效果实现方式有很多种，就以目前我知道的就有三种方式。 一：模型扩张 大致思路：需要两个pass，一个pass渲染背面并且沿着法线方向扩张，用来作为轮廓，一个pass渲染正面，正常渲染。 核心：主要在第一个pass的顶点着色器中对顶点的偏移，偏移方向为法线方向。 话不多说直接上代...
shader graph 描边案例
09-07
当然，我可以为您提供一个简单的Shader Graph描边案例。以下是一个使用Unity的Shader Graph实现描边效果的示例步骤： 1. 在Unity中创建一个新的Shader Graph材质。 2. 将材质应用于您想要进行描边的对象上。 3. 在Shader Graph编辑器中，创建一个新的Sub Graph（子图），并将其命名为"Outline"（或其他您喜欢的名称）。 4. 在Sub Graph中添加一个"Sample Texture 2D"节点，并将其命名为"Main Texture"。将该节点连接到输出节点。 5. 添加一个"Color"节点，并连接到"Main Texture"节点的采样输出。 6. 添加一个"Gradient Noise"节点，并将其命名为"Noise". 这将用于创建描边效果的噪声纹理。 7. 创建两个新的属性节点，一个用于控制描边颜色，另一个用于控制描边宽度。将这两个属性连接到"Outline" Sub Graph中的适当节点。 8. 使用"Step"节点和"Noise"节点结合创建描边效果。将"Noise"节点的输出连接到"Step"节点的输入，并将描边宽度属性连接到"Step"节点的阈值输入。然后将"Step"节点的输出连接到一个"Multiply"节点。 9. 将"Multiply"节点的输出连接到"Color"节点的输入。这样，您就可以通过调整描边宽度属性来控制描边的强度。 10. 将"Color"节点的输出连接到输出节点，然后将"Outline" Sub Graph的输出节点连接到Sub Graph的主输出节点。 11. 返回到主Shader Graph编辑器中，将"Outline" Sub Graph的输出节点连接到主输出节点。 12. 在主Shader Graph中添加一个"Color"节点，用于控制对象的基础颜色。 13. 将主Shader Graph的基础颜色连接到"Outline" Sub Graph的输入节点。 14. 调整描边颜色和描边宽度属性，来达到您想要的描边效果。 15. 应用该材质，并查看对象的描边效果。 这只是一个简单的示例，您可以根据自己的需求对描边效果进行进一步定制。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值