IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 【shader】游戏特效-遮挡显示效果 (含边缘光、描边效果版) -> 正文阅读

[游戏开发]【shader】游戏特效-遮挡显示效果 (含边缘光、描边效果版)

不知道你们有没有在玩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 Off
			ZTest Greater

			CGPROGRAM
            #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 这两个命令。

//改天写原理,太困了先把实战效果贴上来

以上shader效果如下:
在这里插入图片描述
芜湖,效果已经出来了。
PS:切记关闭深度写入!默认情况下Pass都是开启深度写入的。别忘了我们已经修改了深度缓冲里的值,GPU是用这里面的值做深度测试的!那样的话:
在这里插入图片描述
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 Off
			ZTest Greater
			Blend SrcAlpha OneMinusSrcColor
			//Cull Front
			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;
            };

			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 Off
			ZTest Always
			Cull Front
			CGPROGRAM
            #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
        }
    }
}

在这里插入图片描述
在没被遮挡时效果很好,但一旦遮挡了就。。。
在这里插入图片描述
淦!

//2021/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 0
			ZWrite off
            ZTest Always
            Stencil
            {
                Ref 1
                Comp Always
                Pass 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 0
                Comp Equal
                Pass Keep
            }
            ZWrite off
            ZTest 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

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 12:15:58  更:2021-07-17 12:16:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 17:31:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码