1. 描边效果的核心原理与实现思路描边效果的本质是在物体边缘区域添加高亮颜色使其从背景中凸显出来。想象一下用荧光笔在书本上划重点——描边Shader就是游戏世界的荧光笔。在Unity中实现描边效果主要有四种技术路线基于观察角度利用摄像机方向与表面法线的夹角判断边缘几何扩展通过顶点偏移或新增几何体制造轮廓图像处理对渲染结果进行屏幕后处理识别边缘混合方案结合多种技术实现特殊效果每种方案都有其适用场景和性能特点。比如基于观察角度的方案计算量小但精度有限几何扩展方案效果稳定但对复杂模型支持不佳。我在实际项目中最常遇到的问题是明明在测试场景效果很好放到复杂场景就出现边缘断裂或性能骤降。这通常是因为没有根据项目特点选择合适的技术方案。2. 基于观察角度的描边方案2.1 基础实现原理这个方案的数学原理很简单当表面法线与视线方向接近垂直时我们就认为处于边缘区域。用Shader代码表示就是float rim 1 - saturate(dot(normalize(worldNormal), normalize(viewDir)));我在一个卡通风格项目中实测发现直接这样实现会有两个问题一是边缘宽度不均匀二是模型接缝处会出现断裂。解决方法是在顶点着色器中统一计算视角方向避免在不同顶点间插值时产生偏差。2.2 完整Shader代码解析Shader Custom/RimOutline { Properties { _MainTex (Texture, 2D) white {} _RimColor (Rim Color, Color) (1,1,1,1) _RimPower (Rim Power, Range(0.5, 8.0)) 3.0 _RimThreshold (Rim Threshold, Range(0, 1)) 0.5 } SubShader { Tags { RenderTypeOpaque } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc struct appdata { float4 vertex : POSITION; float3 normal : NORMAL; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; float3 worldNormal : TEXCOORD1; float3 viewDir : TEXCOORD2; }; sampler2D _MainTex; float4 _MainTex_ST; float4 _RimColor; float _RimPower; float _RimThreshold; v2f vert (appdata v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal UnityObjectToWorldNormal(v.normal); o.viewDir normalize(_WorldSpaceCameraPos - mul(unity_ObjectToWorld, v.vertex).xyz); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col tex2D(_MainTex, i.uv); float rim 1 - saturate(dot(normalize(i.worldNormal), i.viewDir)); rim smoothstep(_RimThreshold, 1.0, rim); col.rgb _RimColor.rgb * pow(rim, _RimPower); return col; } ENDCG } } }这个Shader的关键参数有三个_RimColor边缘颜色_RimPower控制边缘衰减曲线_RimThreshold边缘显示的阈值2.3 优缺点与优化建议优点单Pass实现性能开销小适合卡通渲染风格实现简单修改灵活缺点对复杂几何体边缘识别不准确受模型法线影响大无法控制边缘宽度优化方向可以尝试在片段着色器中使用屏幕空间导数计算边缘结合深度测试改善边缘断裂问题使用顶点色控制边缘强度3. 几何扩展描边方案3.1 背面膨胀法实现这是最直观的几何描边方法原理就像给模型套上一层外壳。具体实现需要两个PassPass { Cull Front ZWrite Off // 顶点着色器中将顶点沿法线方向偏移 v.vertex.xyz v.normal * _OutlineWidth; }我在一个机甲项目中遇到的问题是当模型有尖锐边缘时这种简单偏移会导致轮廓变形。后来改用顶点到模型中心的向量作为偏移方向效果改善很多。3.2 几何着色器方案更高级的做法是使用几何着色器动态生成轮廓几何体[maxvertexcount(6)] void geom(triangle v2g input[3], inout TriangleStreamg2f triStream) { // 计算面法线 float3 faceNormal normalize(cross( input[1].pos - input[0].pos, input[2].pos - input[0].pos)); // 生成扩展几何体 g2f g; for(int i 0; i 3; i) { g.pos input[i].pos float4(faceNormal * _Extrusion, 0); triStream.Append(g); } triStream.RestartStrip(); }这种方案虽然效果精准但实测在移动端性能消耗很大。建议只在PC平台使用或者对特定重要角色启用。3.3 模板测试优化技巧结合模板测试可以避免重叠区域的过度绘制Stencil { Ref 1 Comp Always Pass Replace }在第二个Pass中设置Comp NotEqual这样描边就只会出现在模型实际边缘处。我在一个RTS项目中用这个方法成功将描边渲染耗时降低了40%。4. 基于图像处理的描边方案4.1 Sobel边缘检测算法这是经典的图像边缘检测方法通过对像素邻域进行卷积运算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 edgeX 0; half edgeY 0; for(int it 0; it 9; it) { half luminance Luminance(tex2D(_MainTex, i.uv[it])); edgeX luminance * Gx[it]; edgeY luminance * Gy[it]; } return 1 - abs(edgeX) - abs(edgeY); }实际使用中发现纯颜色检测在复杂场景效果不稳定后来改进为结合深度和法线信息4.2 深度法线边缘检测half CheckSame(half4 center, half4 sample) { half2 centerNormal center.xy; float centerDepth DecodeFloatRG(center.zw); // 比较法线和深度差异 return step(length(centerNormal - sample.xy), _NormalThreshold) * step(abs(centerDepth - DecodeFloatRG(sample.zw)), _DepthThreshold); }这种方案在室内场景表现优异但需要额外的_CameraDepthNormalsTexture。建议在URP管线中通过RenderFeature实现。5. 实战中的经验与调优5.1 性能优化关键指标不同方案的性能对比方案类型平均耗时(ms)内存占用适用平台观察角度0.2-0.5低全平台几何扩展0.8-1.5中PC/主机图像处理1.0-2.0高中高端设备在移动端项目中我通常会对主角使用几何扩展方案对NPC使用观察角度方案对场景物体禁用描边或使用最简单的颜色差值5.2 常见问题解决边缘闪烁问题原因深度测试冲突解决调整描边Pass的Offset参数Offset 1, 1边缘断裂问题原因法线不连续解决在建模阶段确保软硬边设置正确性能热点原因过多物体使用描边解决使用LOD系统远距离切换为更简单的描边方案5.3 进阶技巧动态宽度控制根据物体到摄像机的距离调整描边宽度_OutlineWidth * saturate(_CameraDistance / 10.0);颜色渐变使用噪声图控制边缘颜色变化float noise tex2D(_NoiseTex, i.uv * _NoiseScale).r; rimColor * lerp(_Color1, _Color2, noise);多Pass混合结合多种方案实现更丰富的效果在最近的一个赛博朋克项目中我们最终采用的方案是基础轮廓几何扩展法高光边缘观察角度法屏幕空间增强轻量级Sobel处理这种组合在保持60FPS的同时实现了非常具有辨识度的视觉风格。
Unity描边Shader：从原理到实战的完整实现方案
发布时间：2026/5/27 22:54:56
1. 描边效果的核心原理与实现思路描边效果的本质是在物体边缘区域添加高亮颜色使其从背景中凸显出来。想象一下用荧光笔在书本上划重点——描边Shader就是游戏世界的荧光笔。在Unity中实现描边效果主要有四种技术路线基于观察角度利用摄像机方向与表面法线的夹角判断边缘几何扩展通过顶点偏移或新增几何体制造轮廓图像处理对渲染结果进行屏幕后处理识别边缘混合方案结合多种技术实现特殊效果每种方案都有其适用场景和性能特点。比如基于观察角度的方案计算量小但精度有限几何扩展方案效果稳定但对复杂模型支持不佳。我在实际项目中最常遇到的问题是明明在测试场景效果很好放到复杂场景就出现边缘断裂或性能骤降。这通常是因为没有根据项目特点选择合适的技术方案。2. 基于观察角度的描边方案2.1 基础实现原理这个方案的数学原理很简单当表面法线与视线方向接近垂直时我们就认为处于边缘区域。用Shader代码表示就是float rim 1 - saturate(dot(normalize(worldNormal), normalize(viewDir)));我在一个卡通风格项目中实测发现直接这样实现会有两个问题一是边缘宽度不均匀二是模型接缝处会出现断裂。解决方法是在顶点着色器中统一计算视角方向避免在不同顶点间插值时产生偏差。2.2 完整Shader代码解析Shader Custom/RimOutline { Properties { _MainTex (Texture, 2D) white {} _RimColor (Rim Color, Color) (1,1,1,1) _RimPower (Rim Power, Range(0.5, 8.0)) 3.0 _RimThreshold (Rim Threshold, Range(0, 1)) 0.5 } SubShader { Tags { RenderTypeOpaque } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc struct appdata { float4 vertex : POSITION; float3 normal : NORMAL; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; float3 worldNormal : TEXCOORD1; float3 viewDir : TEXCOORD2; }; sampler2D _MainTex; float4 _MainTex_ST; float4 _RimColor; float _RimPower; float _RimThreshold; v2f vert (appdata v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal UnityObjectToWorldNormal(v.normal); o.viewDir normalize(_WorldSpaceCameraPos - mul(unity_ObjectToWorld, v.vertex).xyz); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col tex2D(_MainTex, i.uv); float rim 1 - saturate(dot(normalize(i.worldNormal), i.viewDir)); rim smoothstep(_RimThreshold, 1.0, rim); col.rgb _RimColor.rgb * pow(rim, _RimPower); return col; } ENDCG } } }这个Shader的关键参数有三个_RimColor边缘颜色_RimPower控制边缘衰减曲线_RimThreshold边缘显示的阈值2.3 优缺点与优化建议优点单Pass实现性能开销小适合卡通渲染风格实现简单修改灵活缺点对复杂几何体边缘识别不准确受模型法线影响大无法控制边缘宽度优化方向可以尝试在片段着色器中使用屏幕空间导数计算边缘结合深度测试改善边缘断裂问题使用顶点色控制边缘强度3. 几何扩展描边方案3.1 背面膨胀法实现这是最直观的几何描边方法原理就像给模型套上一层外壳。具体实现需要两个PassPass { Cull Front ZWrite Off // 顶点着色器中将顶点沿法线方向偏移 v.vertex.xyz v.normal * _OutlineWidth; }我在一个机甲项目中遇到的问题是当模型有尖锐边缘时这种简单偏移会导致轮廓变形。后来改用顶点到模型中心的向量作为偏移方向效果改善很多。3.2 几何着色器方案更高级的做法是使用几何着色器动态生成轮廓几何体[maxvertexcount(6)] void geom(triangle v2g input[3], inout TriangleStreamg2f triStream) { // 计算面法线 float3 faceNormal normalize(cross( input[1].pos - input[0].pos, input[2].pos - input[0].pos)); // 生成扩展几何体 g2f g; for(int i 0; i 3; i) { g.pos input[i].pos float4(faceNormal * _Extrusion, 0); triStream.Append(g); } triStream.RestartStrip(); }这种方案虽然效果精准但实测在移动端性能消耗很大。建议只在PC平台使用或者对特定重要角色启用。3.3 模板测试优化技巧结合模板测试可以避免重叠区域的过度绘制Stencil { Ref 1 Comp Always Pass Replace }在第二个Pass中设置Comp NotEqual这样描边就只会出现在模型实际边缘处。我在一个RTS项目中用这个方法成功将描边渲染耗时降低了40%。4. 基于图像处理的描边方案4.1 Sobel边缘检测算法这是经典的图像边缘检测方法通过对像素邻域进行卷积运算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 edgeX 0; half edgeY 0; for(int it 0; it 9; it) { half luminance Luminance(tex2D(_MainTex, i.uv[it])); edgeX luminance * Gx[it]; edgeY luminance * Gy[it]; } return 1 - abs(edgeX) - abs(edgeY); }实际使用中发现纯颜色检测在复杂场景效果不稳定后来改进为结合深度和法线信息4.2 深度法线边缘检测half CheckSame(half4 center, half4 sample) { half2 centerNormal center.xy; float centerDepth DecodeFloatRG(center.zw); // 比较法线和深度差异 return step(length(centerNormal - sample.xy), _NormalThreshold) * step(abs(centerDepth - DecodeFloatRG(sample.zw)), _DepthThreshold); }这种方案在室内场景表现优异但需要额外的_CameraDepthNormalsTexture。建议在URP管线中通过RenderFeature实现。5. 实战中的经验与调优5.1 性能优化关键指标不同方案的性能对比方案类型平均耗时(ms)内存占用适用平台观察角度0.2-0.5低全平台几何扩展0.8-1.5中PC/主机图像处理1.0-2.0高中高端设备在移动端项目中我通常会对主角使用几何扩展方案对NPC使用观察角度方案对场景物体禁用描边或使用最简单的颜色差值5.2 常见问题解决边缘闪烁问题原因深度测试冲突解决调整描边Pass的Offset参数Offset 1, 1边缘断裂问题原因法线不连续解决在建模阶段确保软硬边设置正确性能热点原因过多物体使用描边解决使用LOD系统远距离切换为更简单的描边方案5.3 进阶技巧动态宽度控制根据物体到摄像机的距离调整描边宽度_OutlineWidth * saturate(_CameraDistance / 10.0);颜色渐变使用噪声图控制边缘颜色变化float noise tex2D(_NoiseTex, i.uv * _NoiseScale).r; rimColor * lerp(_Color1, _Color2, noise);多Pass混合结合多种方案实现更丰富的效果在最近的一个赛博朋克项目中我们最终采用的方案是基础轮廓几何扩展法高光边缘观察角度法屏幕空间增强轻量级Sobel处理这种组合在保持60FPS的同时实现了非常具有辨识度的视觉风格。
