失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 【unity shader】unity游戏特效-遮挡显示效果 (含边缘光 描边效果版)

【unity shader】unity游戏特效-遮挡显示效果 (含边缘光 描边效果版)

时间:2021-12-22 13:26:59

相关推荐

【unity shader】unity游戏特效-遮挡显示效果 (含边缘光 描边效果版)

不知道你们有没有在玩Black Squad这个游戏啊

在被对手干掉时会有敌人高亮显示效果

(未被做掉时)

(被做掉后高亮显示敌人位置)

明明敌人被不透明物体挡住却仍然可以被渲染出来

这效果要是能扔进自己的期末作品设计逼格会高不少的好吧?!

那么这么棒的效果该怎么在unity里做出来呢?

模板测试(Stencil Test)就是本文的主角

先上官方链接:Unity Manual

模板测试位于透明度测试之后,在深度测试之前。

GPU会比较模板缓存中的值来决定哪些像素通过了模板测试,通过的像素可以到下一步深度测试,而没通过的就会被抛弃掉。我们可以修改模板缓存的值来告诉我们可爱的GPU哪些像素是主人想让他画出来的,哪些小可怜不是。

OK,先创建一个空场景,一个胶囊体和一个正方体摆好。

上基础材质shader,把它赋值给胶囊体

Shader "Unlit/CSDN_visibleOcclusion"{Properties{_Color ("Color",Color) = (1,1,1,1)_MainTex ("Texture", 2D) = "white" {}_SpecularColor ("SpecularColor",Color) = (1,1,1,1)_Gloss ("Gloss",Range(8.0,255)) = 20}SubShader{Tags {"RenderType"="Opaque" "Queue"="Transparent"}//该Pass用来绘制正常状态Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "Lighting.cginc"#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;fixed4 _Color;fixed _Gloss;fixed4 _SpecularColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag (v2f i) : SV_Target{fixed3 lightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 normalDir = normalize(i.worldNormal);fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;fixed3 halfDir = normalize(ViewDir+lightDir);fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(normalDir,lightDir));fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(normalDir,halfDir)),_Gloss);fixed3 col = ambient + diffuse + specular;return fixed4(col,1.0);}ENDCG}}}

默认情况下如上图,胶囊体被遮住的部分看不见。

接下来就是我们的主角Pass:

//主要Pass,用于实现遮挡显示。Pass{ZWrite OffZTest GreaterCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;};struct v2f{float4 vertex : SV_POSITION;};fixed4 _HideColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);return o;}fixed4 frag (v2f i) : SV_Target{return fixed4(_HideColor.rgb,1.0);}ENDCG}

注意到多了什么没?ZTest Greater , ZWrite Off这两个命令。

他们分别是深度测试和深度写入

ZTest Greater意味着告诉深度测试,当这个材质对象的Z值大于当前摄像机在这个像素上的Z值,才可以通过深度测试(被画出来)

换句话说,条件为Greater时这个几何体只在被另一个实际的物体遮挡住时才画这个几何体。

unity官方手册介绍的ZTest参数如下:

unity平时默认应该是ZTest Less(只有物体在另一个物体前面的像素画出来,被遮挡的像素不画)。

而深度写入呢?

深度写入是将对象的深度值写入深度缓存(depth buffer),他发生在深度测试之后,通过深度测试的片元才可以被深度写入写进深度缓存和颜色缓存。如果关闭了深度写入,通过深度测试的片元会被写入颜色缓存而不会写入深度缓存。

这将有可能导致渲染顺序发生错误。具体看下方PS(附言)部分。

综上,效果的核心部分是告诉ZTest,这个乖乖的片元只在被遮挡的情况下才可以被画出来哦。

以上shader效果如下:

芜湖,效果已经出来了。

PS:切记关闭深度写入!默认情况下Pass都是开启深度写入的。别忘了我们已经修改了深度缓冲里的值,GPU是用这里面的值做判断物体前后顺序的!那样的话:

就会出现胶囊体在方体的前面这样的错误渲染效果。。。)

特效实战1:摩尔庄园同款效果

图片取自视频:bilibili

上图,摩尔未被遮挡状态下正常渲染

此图,摩尔被遮挡的部分改为另一种渲染方法。

看上去像是直接用边缘光填充被遮挡部分实现的。Shader如下:

Shader "Unlit/CSDN_visibleOcclusion"{Properties{_Color ("Color",Color) = (1,1,1,1)_MainTex ("Texture", 2D) = "white" {}_SpecularColor ("SpecularColor",Color) = (1,1,1,1)_Gloss ("Gloss",Range(8.0,255)) = 20_HideColor ("HideColor",Color) = (1,1,1,1)}SubShader{Tags {"RenderType"="Opaque" "Queue"="Transparent"}//主要Pass,用于实现遮挡显示。Pass{ZWrite OffZTest GreaterBlend SrcAlpha OneMinusSrcColor//Cull FrontCGPROGRAM#pragma vertex vert#pragma fragment frag#include "Lighting.cginc"#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};fixed4 _HideColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag (v2f i) : SV_Target{fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 normalDir = normalize(i.worldNormal);//计算边缘光,利用法线和视角向量的点乘值判断该面是在视线正前方还是侧面//点乘值越大,说明余弦值越接近1,二者夹角越接近重合。减法计算后结果为0判断其为视线正前方fixed3 rim = 1.0 - saturate(dot(normalDir,ViewDir));return fixed4(rim * _HideColor.rgb,1.0);}ENDCG}//该Pass用来绘制正常状态Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "Lighting.cginc"#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;fixed4 _Color;fixed _Gloss;fixed4 _SpecularColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag (v2f i) : SV_Target{fixed3 lightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 normalDir = normalize(i.worldNormal);fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;fixed3 halfDir = normalize(ViewDir+lightDir);fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(normalDir,lightDir));fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(normalDir,halfDir)),_Gloss);fixed3 col = ambient + diffuse + specular;return fixed4(col,1.0);}ENDCG}}}

(因为正方体白色不好显示胶囊体边缘光效果,将边缘光颜色改为红色,正方体改为黑色)

嗯,差不多做成摩尔庄园的遮挡显示效果了。

特效实战2:Black Squad同款效果

(话说这破游戏挂B这么多居然还能撑这么久。。。)

仔细观察游戏内效果,他和摩尔庄园不一样的是,他是人物外描边,摩尔庄园的是内边缘光。即使没有被遮挡它一样会显示描边线条。

最开始我采用的是冯乐乐的《Unity Shader入门精要》第14章绘制描边方法来实现效果。

代码和图如下:

Shader "Unlit/CSDN_visibleOcclusion"{Properties{_Color ("Color",Color) = (1,1,1,1)_MainTex ("Texture", 2D) = "white" {}_SpecularColor ("SpecularColor",Color) = (1,1,1,1)_Gloss ("Gloss",Range(8.0,255)) = 20_OutLine("OutLine",Range(0,1)) = 0.1_HideColor ("HideColor",Color) = (1,1,1,1)}SubShader{Tags {"RenderType"="Opaque" "Queue"="Transparent"}//主要Pass,用于实现遮挡显示。Pass{ZWrite OffZTest AlwaysCull FrontCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};fixed4 _HideColor; half _OutLine;v2f vert (appdata v){v2f o;float4 pos = mul(UNITY_MATRIX_MV,v.vertex);float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);normal.z = -0.5;pos = pos + float4(normalize(normal),0) * _OutLine;o.vertex = mul(UNITY_MATRIX_P,pos);return o;}fixed4 frag (v2f i) : SV_Target{//fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));//fixed3 normalDir = normalize(i.worldNormal);计算边缘光,利用法线和视角向量的点乘值判断该面是在视线正前方还是侧面点乘值越大,说明余弦值越接近1,二者夹角越接近重合。减法计算后结果为0判断其为视线正前方//fixed3 rim = 1.0 - saturate(dot(normalDir,ViewDir));return fixed4( _HideColor.rgb,1.0);}ENDCG}//该Pass用来绘制正常状态Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "Lighting.cginc"#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;fixed4 _Color;fixed _Gloss;fixed4 _SpecularColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag (v2f i) : SV_Target{fixed3 lightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 normalDir = normalize(i.worldNormal);fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;fixed3 halfDir = normalize(ViewDir+lightDir);fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(normalDir,lightDir));fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(normalDir,halfDir)),_Gloss);fixed3 col = ambient + diffuse + specular;return fixed4(col,1.0);}ENDCG}}}

在没被遮挡时效果很好,但一旦遮挡了就。。。

淦!

///7/16晚更新。

今天早上醒来就在想能不能在顶点着色器中完成扩展法线的顶点面部分剔除,不过捣鼓了一会还是没啥进展。百度了下搜到这篇文章

大佬文章链接,作者:AndrewChan

文章作者的思路是,再写一个不输出颜色的Pass块来剔除中间区域,剔除用的pass和描边pass都要写特殊的Stencil块

但是呢,原作者的代码贴过来渲染顺序有问题。如下图:

啊这。。。

最后捣鼓半天发现问题出现在剔除用的Pass块里,没有关闭深度写入

加了一句ZWrite Off,完美解决!爽!

另外原作者说该方法的缺点在于未被遮挡的部分也会被描边。但我在修改上面的问题时意外解决了这个问题。。。方法就是把描边Pass块的ZTest改成Greater就行。如下图

上代码!

Shader "Unlit/CSDN_visibleOcclusion"{Properties{_Color ("Color",Color) = (1,1,1,1)_MainTex ("Texture", 2D) = "white" {}_SpecularColor ("SpecularColor",Color) = (1,1,1,1)_Gloss ("Gloss",Range(8.0,255)) = 20_OutLine("OutLine",Range(0,1)) = 0.1_HideColor ("HideColor",Color) = (1,1,1,1)}SubShader{Tags {"RenderType"="Opaque" "Queue"="Transparent"}Pass{ColorMask 0ZWrite offZTest AlwaysStencil{Ref 1Comp AlwaysPass Replace}CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;};struct v2f{float4 vertex : SV_POSITION;};v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);return o;}fixed4 frag (v2f i) : SV_Target{return fixed4(1,1,1,1);}ENDCG}Pass{Stencil{Ref 0Comp EqualPass Keep}ZWrite offZTest Always//改成Greater可以实现仅遮挡部分描边CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};float _OutLine;fixed4 _HideColor;v2f vert (appdata_base v){v2f o;v.vertex.xyz += v.normal * _OutLine;o.vertex = UnityObjectToClipPos(v.vertex);return o;}[earlyDepthStencil]fixed4 frag (v2f i) : SV_Target{fixed4 col = _HideColor;return col;}ENDCG}//该Pass用来绘制正常状态Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "Lighting.cginc"#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;fixed4 _Color;fixed _Gloss;fixed4 _SpecularColor; v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag (v2f i) : SV_Target{fixed3 lightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed3 ViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed3 normalDir = normalize(i.worldNormal);fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;fixed3 halfDir = normalize(ViewDir+lightDir);fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(normalDir,lightDir));fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(normalDir,halfDir)),_Gloss);fixed3 col = ambient + diffuse + specular;return fixed4(col,1.0);}ENDCG}}}

不得不说,大佬利用stencil块来剔除中间部分的思路真的6

如果觉得《【unity shader】unity游戏特效-遮挡显示效果 (含边缘光 描边效果版)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。