[UnityShader3]网格渐现效果

参考链接:http://liweizhaolili.blog.163.com/blog/static/1623074420140591864/


效果图:



1.首先就是简单的渐现效果,同时要注意,在出现网格时,需要用到透明度混合

Shader "Custom/Mesh"
{
	Properties
	{
		_MainTex ("MainTex", 2D) = "white" {}
		_MeshTex ("MeshTex", 2D) = "white" {}
		_ThresholdY ("ThresholdY", Range(-8, 0)) = -8//调试出来的范围
	}
	SubShader
	{
		Tags { "Queue" = "Transparent" "IgnoreProjector" = "true" "RenderType"="Transparent" }

		Pass
		{
			ZWrite off
			Blend SrcAlpha OneMinusSrcAlpha

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

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _MeshTex;
			half _ThresholdY;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);

				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				//最好选择世界空间坐标系下的顶点而非模型空间下的顶点
				//因为后者会因为模型制作的规范不同而不同
				half y = -i.vertex.y;
				if(y < _ThresholdY * 50)//50是调试出来的值
				{
					fixed4 col = tex2D(_MainTex, i.uv);
					return col;
				}
				else
				{
					return fixed4(0, 0, 0, 0);
				}
			}
			ENDCG
		}
	}
}



2.上面的是手动拖动_ThresholdY的情况,现在我们需要使它自动化

Shader "Custom/Mesh"
{
	Properties
	{
		_MainTex ("MainTex", 2D) = "white" {}
		_MeshTex ("MeshTex", 2D) = "white" {}
		_ThresholdY ("ThresholdY", Range(-8, 0)) = -8//调试出来的范围
		_Speed ("Speed", Range(0.1, 1)) = 0.5
	}
	SubShader
	{
		Tags { "Queue" = "Transparent" "IgnoreProjector" = "true" "RenderType"="Transparent" }

		Pass
		{
			ZWrite off
			Blend SrcAlpha OneMinusSrcAlpha

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

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _MeshTex;
			half _ThresholdY;
			half _Speed;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);

				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				//最好选择世界空间坐标系下的顶点而非模型空间下的顶点
				//因为后者会因为模型制作的规范不同而不同
				half y = -i.vertex.y;
				half threY = lerp(-8, 0, _Time.y * _Speed);

				//_ThresholdY就不需要了
				if(y < threY * 50)//50是调试出来的值
				{
					fixed4 col = tex2D(_MainTex, i.uv);
					return col;
				}
				else
				{
					return fixed4(0, 0, 0, 0);
				}
			}
			ENDCG
		}
	}
}

3.上面的渐现,是一条“线”从下到上去“扫描”模型,而想达到效果图那样的效果,就要使用两条"线",为了更好了解,我画了幅图。如下图,其中高度范围会随时间不断向上。对于每个像素的Y值,如果大于maxY,则透明;如果小于maxY大于minY,则显示网格;如果小于minY,则出现真正的贴图



Shader "Custom/Mesh"  
{  
    Properties  
    {  
        _MainTex ("MainTex", 2D) = "white" {}  
        _MeshTex ("MeshTex", 2D) = "white" {}  

        _MinY ("MinY", Range(-20, 0)) = -20
		_MaxY ("MaxY", Range(-15, 0)) = -15

		_Speed ("Speed", Range(1, 10)) = 5  
    }  
    SubShader  
    {  
        Tags { "Queue" = "Transparent" "IgnoreProjector" = "true" "RenderType"="Transparent" }  
  
        Pass  
        {  
            ZWrite off  
            Blend SrcAlpha OneMinusSrcAlpha  
  
            CGPROGRAM  
            #pragma vertex vert  
            #pragma fragment frag  
            #include "UnityCG.cginc"  
  
            struct appdata  
            {  
                float4 vertex : POSITION;  
                float2 uv : TEXCOORD0;  
            };  
  
            struct v2f  
            {  
                float4 vertex : SV_POSITION;  
                float2 uv : TEXCOORD0;  
            };  
  
            sampler2D _MainTex;  
            float4 _MainTex_ST;  
            sampler2D _MeshTex;  

			half _MinY;
			half _MaxY;
            half _Speed;  
  
            v2f vert (appdata v)  
            {  
                v2f o;  
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);  
  
                return o;  
            }  
              
            fixed4 frag (v2f i) : SV_Target  
            {  
                //最好选择世界空间坐标系下的顶点而非模型空间下的顶点  
                //因为后者会因为模型制作的规范不同而不同  
                half y = -i.vertex.y;  
				_MinY += _Time.y * _Speed;  
				_MaxY += _Time.y * _Speed;
				_MinY *= 50;//让_MinY更"负"
				_MaxY *= 50;//让_MaxY更"负"

				if(y > _MaxY)
				{
					return fixed4(0, 0, 0, 0); 
				}
                else if(y > _MinY)
                {  
					fixed4 col = tex2D(_MeshTex, i.uv);  
                    return col;       
                }  
				else 
				{
					fixed4 col = tex2D(_MainTex, i.uv);  
                    return col; 
				}
            }  
            ENDCG  
        }  
    }  
}  


最上面的效果图是先显示完整的网格,然后再显示原贴图的,那么我们可以通过缩小高度范围,达到边显示网格边显示原贴图



这是unitypackage:

http://pan.baidu.com/s/1pLvQuON

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
要使用Shader绘制网格,需要在Unity中创建一个材质(Material)并将其分配给网格对象(Mesh)。材质中包含着Shader的代码,它会告诉Unity如何绘制网格。 以下是一个简单的示例,演示如何使用Shader绘制一个简单的网格: 1. 创建一个新的ShaderUnity中,选择"Create" -> "Shader"创建一个新的Shader。选择一个合适的命名,例如"MyShader"。 2. 编写Shader代码 打开新创建的Shader,你会看到一个空白的代码文件。在这里,你可以自由编写你的Shader代码。以下是一个简单的示例,它会绘制一个灰色的网格: ``` Shader "Custom/MyShader" { Properties { _MainTex ("Texture", 2D) = "white" {} } SubShader { Tags {"Queue"="Transparent" "RenderType"="Opaque"} Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { return tex2D(_MainTex, i.uv) * 0.5; } ENDCG } } } ``` 这个Shader中包含一个名为"_MainTex"的属性,它是一个2D纹理。在Pass块中,Shader使用这个纹理对网格进行着色,并将颜色乘以0.5,以便将其变为灰色。 3. 创建一个材质 现在,你需要创建一个材质(Material),并将Shader分配给它。在Unity中,选择"Create" -> "Material"创建一个新的材质。给它一个合适的名称,例如"MyMaterial"。 选择新创建的材质,将Shader分配给它。在Inspector窗口中,将Shader字段设置为新创建的Shader。 4. 将材质分配给网格对象 最后一步是将材质分配给网格对象。在Unity中,选择你想要绘制的网格对象,并将新创建的材质分配给它。 现在,当你在场景中查看网格对象时,它应该使用你编写的Shader进行着色了。如果需要,你可以进一步调整你的Shader代码,以实现更复杂的效果
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值