devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

UnityShader学习笔记 让画面动起来_uv.y -= row / _verticalamount;

作者：我家自动化 | 2024-02-25 03:47:09

赞

踩

uv.y -= row / _verticalamount;

UnityShader内置的时间变量(时间篇)

 

纹理动画

序列帧动画

  1. Shader "Custom/ImageSequency" 
  2. {
  3. 	Properties 
  4. 	{
  5. 		_Color ("Color Tint", Color) = (1, 1, 1, 1)
  6. 		_MainTex ("Image Sequency", 2D) = "white" {}
  7.     	        _HorizontalAmount ("Horizontal Amount", Float) = 4
  8.     	        _VerticalAmount ("Vertical Amount", Float) = 4
  9.     	        _Speed ("Speed", Range(1, 100)) = 30
  10. 	}
  11. 	SubShader 
  12. 	{
  13. 		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
  14. 		
  15. 		Pass 
  16. 		{
  17. 			Tags { "LightMode"="ForwardBase" }
  18. 			
  19. 			ZWrite Off
  20. 			Blend SrcAlpha OneMinusSrcAlpha
  21. 			
  22. 			CGPROGRAM
  23. 			
  24. 			#pragma vertex vert  
  25. 			#pragma fragment frag
  26. 			
  27. 			#include "UnityCG.cginc"
  28. 			
  29. 			fixed4 _Color;
  30. 			sampler2D _MainTex;
  31. 			float4 _MainTex_ST;
  32. 			float _HorizontalAmount;
  33. 			float _VerticalAmount;
  34. 			float _Speed;
  35. 			  
  36. 			struct a2v 
  37. 			{  
  38. 			    float4 vertex : POSITION; 
  39. 			    float2 texcoord : TEXCOORD0;
  40. 			};  
  41. 			
  42. 			struct v2f 
  43. 			{  
  44. 			    float4 pos : SV_POSITION;
  45. 			    float2 uv : TEXCOORD0;
  46. 			};  
  47. 			
  48. 			v2f vert (a2v v) 
  49. 			{  
  50. 				v2f o;  
  51. 				o.pos = UnityObjectToClipPos(v.vertex);  
  52. 				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
  53. 				return o;
  54. 			}  
  55. 			
  56. 			fixed4 frag (v2f i) : SV_Target 
  57. 			{
  58. 				float time = floor(_Time.y * _Speed);  
  59. 				float row = floor(time / _HorizontalAmount);
  60. 				float column = time - row * _HorizontalAmount;
  61. 				
  62. //				half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount);
  63. //				uv.x += column / _HorizontalAmount;
  64. //				uv.y -= row / _VerticalAmount;
  65. 				half2 uv = i.uv + half2(column, -row);
  66. 				uv.x /=  _HorizontalAmount;
  67. 				uv.y /= _VerticalAmount;
  68. 				
  69. 				fixed4 c = tex2D(_MainTex, uv);
  70. 				c.rgb *= _Color;
  71. 				
  72. 				return c;
  73. 			}			
  74. 			ENDCG
  75. 		}  
  76. 	}
  77. 	FallBack "Transparent/VertexLit"
  78. }

 

滚动的背景

  1. Shader "Custom/LoopBg" 
  2. {
  3. 	Properties 
  4. 	{
  5. 		_MainTex ("Base Layer (RGB)", 2D) = "white" {}
  6. 		_DetailTex ("2nd Layer (RGB)", 2D) = "white" {}
  7. 		_ScrollX ("Base layer Scroll Speed", Float) = 1.0
  8. 		_Scroll2X ("2nd layer Scroll Speed", Float) = 1.0
  9. 		_Multiplier ("Layer Multiplier", Float) = 1
  10. 	}
  11. 	SubShader 
  12. 	{
  13. 		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
  14. 		
  15. 		Pass 
  16. 		{ 
  17. 			Tags { "LightMode"="ForwardBase" }
  18. 			
  19. 			CGPROGRAM
  20. 			
  21. 			#pragma vertex vert
  22. 			#pragma fragment frag
  23. 			
  24. 			#include "UnityCG.cginc"
  25. 			
  26. 			sampler2D _MainTex;
  27. 			sampler2D _DetailTex;
  28. 			float4 _MainTex_ST;
  29. 			float4 _DetailTex_ST;
  30. 			float _ScrollX;
  31. 			float _Scroll2X;
  32. 			float _Multiplier;
  33. 			
  34. 			struct a2v 
  35. 			{
  36. 				float4 vertex : POSITION;
  37. 				float4 texcoord : TEXCOORD0;
  38. 			};
  39. 			
  40. 			struct v2f 
  41. 			{
  42. 				float4 pos : SV_POSITION;
  43. 				float4 uv : TEXCOORD0;
  44. 			};
  45. 			
  46. 			v2f vert (a2v v) 
  47. 			{
  48. 				v2f o;
  49. 				o.pos = UnityObjectToClipPos(v.vertex);
  50. 				
  51. 				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);
  52. 				o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
  53. 				
  54. 				return o;
  55. 			}
  56. 			
  57. 			fixed4 frag (v2f i) : SV_Target 
  58. 			{
  59. 				fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
  60. 				fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
  61. 				
  62. 				fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a);
  63. 				c.rgb *= _Multiplier;
  64. 				
  65. 				return c;
  66. 			}
  67. 			
  68. 			ENDCG
  69. 		}
  70. 	}
  71. 	FallBack "VertexLit"
  72. }

_MainTex和_DetailTex分别是第一层和第二层的背景纹理，_ScrollX和_Scroll2X对应了各自的水平滚动速度。_Multiplier参数则用于控制纹理的整体亮度。

在进行顶点变换时，把顶点从模型空间变换到裁剪空间中。然后我们计算了两层背景纹理的纹理坐标，然后利用_Time.y在水平方向上对纹理坐标进行偏移，以此达到滚动的效果。

在片元着色器中，首先分别利用i.uv.xy和i.uv.zw对两张背景纹理进行采样。然后，使用第二层纹理的透明通道来混合两张纹理。最后使用_Multiplier参数和输出颜色进行相乘，以调整背景亮度。

 

顶点动画

流动的河流

  1. Shader "Custom/Water" 
  2. {
  3. 	Properties 
  4. 	{
  5. 		_MainTex ("Main Tex", 2D) = "white" {}
  6. 		_Color ("Color Tint", Color) = (1, 1, 1, 1)
  7. 		_Magnitude ("Distortion Magnitude", Float) = 1
  8.  		_Frequency ("Distortion Frequency", Float) = 1
  9.  		_InvWaveLength ("Distortion Inverse Wave Length", Float) = 10
  10.  		_Speed ("Speed", Float) = 0.5
  11. 	}
  12. 	SubShader 
  13. 	{
  14. 		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "DisableBatching"="True"}
  15. 		
  16. 		Pass 
  17. 		{
  18. 			Tags { "LightMode"="ForwardBase" }
  19. 			
  20. 			ZWrite Off
  21. 			Blend SrcAlpha OneMinusSrcAlpha
  22. 			Cull Off
  23. 			
  24. 			CGPROGRAM  
  25. 			#pragma vertex vert 
  26. 			#pragma fragment frag
  27. 			
  28. 			#include "UnityCG.cginc" 
  29. 			
  30. 			sampler2D _MainTex;
  31. 			float4 _MainTex_ST;
  32. 			fixed4 _Color;
  33. 			float _Magnitude;
  34. 			float _Frequency;
  35. 			float _InvWaveLength;
  36. 			float _Speed;
  37. 			
  38. 			struct a2v 
  39. 			{
  40. 				float4 vertex : POSITION;
  41. 				float4 texcoord : TEXCOORD0;
  42. 			};
  43. 			
  44. 			struct v2f 
  45. 			{
  46. 				float4 pos : SV_POSITION;
  47. 				float2 uv : TEXCOORD0;
  48. 			};
  49. 			
  50. 			v2f vert(a2v v) 
  51. 			{
  52. 				v2f o;
  53. 				
  54. 				float4 offset;
  55. 				offset.yzw = float3(0.0, 0.0, 0.0);
  56. 				offset.x = sin(_Frequency * _Time.y + v.vertex.x * _InvWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * _InvWaveLength) * _Magnitude;
  57. 				o.pos = UnityObjectToClipPos(v.vertex + offset);
  58. 				
  59. 				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
  60. 				o.uv +=  float2(0.0, _Time.y * _Speed);
  61. 				
  62. 				return o;
  63. 			}
  64. 			
  65. 			fixed4 frag(v2f i) : SV_Target 
  66. 			{
  67. 				fixed4 c = tex2D(_MainTex, i.uv);
  68. 				c.rgb *= _Color.rgb;
  69. 				
  70. 				return c;
  71. 			} 
  72. 			
  73. 			ENDCG
  74. 		}
  75. 	}
  76. 	FallBack "Transparent/VertexLit"
  77. }

使用正弦函数模拟水流。

_MainTex是河流纹理，_Color用于控制整体颜色，_Magnitude用于控制水流波动的幅度，_Frequency用于控制波动频率，_InvWaveLength用于控制波长的倒数，_Speed用于控制河流纹理的移动速度。

注意需要设置SubShader标签DisableBatching，不能使用批处理，这是因为批处理会合并所有相关的模型，而这些模型各自的模型空间就会丢失。而在本例中我们需要在物体的模型空间下对顶点位置进行偏移。

在顶点着色器中，对顶点的x方向进行位移，利用_Frequency属性和内置的_Time.y变量来控制正弦函数的频率，并加上模型空间下的位置位置分量，并乘以_InvWaveLength来控制波长，最后，对结果乘以_Magnitude属性来控制波动幅度，得到最终位移，加到顶点位置上进行正常得分顶点变换即可。

 

广告牌

  1. Shader "Custom/Board" 
  2. {
  3. 	Properties 
  4. 	{
  5. 		_MainTex ("Main Tex", 2D) = "white" {}
  6. 		_Color ("Color Tint", Color) = (1, 1, 1, 1)
  7. 		_VerticalBillboarding ("Vertical Restraints", Range(0, 1)) = 1 
  8. 	}
  9. 	SubShader 
  10. 	{
  11. 		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "DisableBatching"="True"}
  12. 		
  13. 		Pass 
  14. 		{ 
  15. 			Tags { "LightMode"="ForwardBase" }
  16. 			
  17. 			ZWrite Off
  18. 			Blend SrcAlpha OneMinusSrcAlpha
  19. 			Cull Off
  20. 		
  21. 			CGPROGRAM
  22. 			
  23. 			#pragma vertex vert
  24. 			#pragma fragment frag
  25. 			
  26. 			#include "Lighting.cginc"
  27. 			
  28. 			sampler2D _MainTex;
  29. 			float4 _MainTex_ST;
  30. 			fixed4 _Color;
  31. 			fixed _VerticalBillboarding;
  32. 			
  33. 			struct a2v 
  34. 			{
  35. 				float4 vertex : POSITION;
  36. 				float4 texcoord : TEXCOORD0;
  37. 			};
  38. 			
  39. 			struct v2f 
  40. 			{
  41. 				float4 pos : SV_POSITION;
  42. 				float2 uv : TEXCOORD0;
  43. 			};
  44. 			
  45. 			v2f vert (a2v v) 
  46. 			{
  47. 				v2f o;
  48. 				
  49. 				float3 center = float3(0, 0, 0);
  50. 				float3 viewer = mul(unity_WorldToObject,float4(_WorldSpaceCameraPos, 1));
  51. 				
  52. 				float3 normalDir = viewer - center;
  53. 			
  54. 				normalDir.y =normalDir.y * _VerticalBillboarding;
  55. 				normalDir = normalize(normalDir);
  56. 			
  57. 				float3 upDir = abs(normalDir.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0);
  58. 				float3 rightDir = normalize(cross(upDir, normalDir));
  59. 				upDir = normalize(cross(normalDir, rightDir));
  60. 				
  61. 				float3 centerOffs = v.vertex.xyz - center;
  62. 				float3 localPos = center + rightDir * centerOffs.x + upDir * centerOffs.y + normalDir * centerOffs.z;
  63.               
  64. 				o.pos = UnityObjectToClipPos(float4(localPos, 1));
  65. 				o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
  66.  
  67. 				return o;
  68. 			}
  69. 			
  70. 			fixed4 frag (v2f i) : SV_Target 
  71. 			{
  72. 				fixed4 c = tex2D (_MainTex, i.uv);
  73. 				c.rgb *= _Color.rgb;
  74. 				
  75. 				return c;
  76. 			}
  77. 			
  78. 			ENDCG
  79. 		}
  80. 	} 
  81. 	FallBack "Transparent/VertexLit"
  82. }

在顶点着色器中，首先选择模型空间中的原点作为广告牌的锚点，利用内置变量获取模型空间下的视角位置。

开始计算3个正交矢量，根据观察位置和锚点计算目标法线方向，并根据_VerticalBillboarding属性来控制垂直方向上的约束度。

接着得到粗略的向上方向，如果法向方向的单位矢量的y接近与1了向上，那么取(0,0,1)，否则为（0,1,0）。

然后根据法线方向和粗略的向上方向得到向右的方向，归一化，最后，再根据法线方向和右方向得到向上方向。

这样，三个方向上的正交基向量就可以得到了，再根据原始位置相对于锚点的偏移量以及3个正交基向量，以得到新的顶点位置。

最后完成顶点位置变换。

 

需要注意的是，在模型空间中增加顶点动画，往往画会通过SubShader的DiableBatching标签来强制取消批处理，增加Dc，因此尽量避免显示使用迷哦行空间下的一些绝对位置和方向来进行计算。

在广告牌的例子中，我们可以利用顶点颜色来存储每个顶点到锚点的距离值。

如果想要为添加了顶点动画的物体添加阴影，无法使用内置的Diffuse等包含的阴影Pass来渲染，无法向其他物体正确地投射阴影，这是因为Unity的阴影绘制需要调用一个ShaderCasterPass，而如果直接使用这些内置的Pass并没有进行相关的顶点动画。

 

添加阴影的水流动画

  1. Shader "Custom/VertexAnimationWithShadow" 
  2. {
  3. 	Properties 
  4.         {
  5. 		_MainTex ("Main Tex", 2D) = "white" {}
  6. 		_Color ("Color Tint", Color) = (1, 1, 1, 1)
  7. 		_Magnitude ("Distortion Magnitude", Float) = 1
  8.  		_Frequency ("Distortion Frequency", Float) = 1
  9.  		_InvWaveLength ("Distortion Inverse Wave Length", Float) = 10
  10.  		_Speed ("Speed", Float) = 0.5
  11. 	}
  12. 	SubShader 
  13.         {
  14. 		// Need to disable batching because of the vertex animation
  15. 		Tags {"DisableBatching"="True"}
  16. 		
  17. 		Pass 
  18.                 {
  19. 			Tags { "LightMode"="ForwardBase" }
  20. 			
  21. 			Cull Off
  22. 			
  23. 			CGPROGRAM  
  24. 			#pragma vertex vert 
  25. 			#pragma fragment frag
  26. 			
  27. 			#include "UnityCG.cginc" 
  28. 			
  29. 			sampler2D _MainTex;
  30. 			float4 _MainTex_ST;
  31. 			fixed4 _Color;
  32. 			float _Magnitude;
  33. 			float _Frequency;
  34. 			float _InvWaveLength;
  35. 			float _Speed;
  36. 			
  37. 			struct a2v 
  38.                         {
  39. 			    float4 vertex : POSITION;
  40. 			    float4 texcoord : TEXCOORD0;
  41. 			};
  42. 			
  43. 			struct v2f 
  44.                         {
  45. 			    float4 pos : SV_POSITION;
  46. 			    float2 uv : TEXCOORD0;
  47. 			};
  48. 			
  49. 			v2f vert(a2v v) 
  50.                         {
  51. 				v2f o;
  52. 				
  53. 				float4 offset;
  54. 				offset.yzw = float3(0.0, 0.0, 0.0);
  55. 				offset.x = sin(_Frequency * _Time.y + v.vertex.x * _InvWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * _InvWaveLength) * _Magnitude;
  56. 				o.pos = UnityObjectToClipPos(v.vertex + offset);
  57. 				
  58. 				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
  59. 				o.uv +=  float2(0.0, _Time.y * _Speed);
  60. 				
  61. 				return o;
  62. 			}
  63. 			
  64. 			fixed4 frag(v2f i) : SV_Target 
  65.                         {
  66. 				fixed4 c = tex2D(_MainTex, i.uv);
  67. 				c.rgb *= _Color.rgb;
  68. 				
  69. 				return c;
  70. 			} 
  71. 			
  72. 			ENDCG
  73. 		}
  74. 		
  75. 		// Pass to render object as a shadow caster
  76. 		Pass 
  77.                 {
  78. 			Tags { "LightMode" = "ShadowCaster" }
  79. 			
  80. 			CGPROGRAM
  81. 			
  82. 			#pragma vertex vert
  83. 			#pragma fragment frag
  84. 			
  85. 			#pragma multi_compile_shadowcaster
  86. 			
  87. 			#include "UnityCG.cginc"
  88. 			
  89. 			float _Magnitude;
  90. 			float _Frequency;
  91. 			float _InvWaveLength;
  92. 			float _Speed;
  93. 			
  94. 			struct v2f 
  95.                         { 
  96. 			    V2F_SHADOW_CASTER;
  97. 			};
  98. 			
  99. 			v2f vert(appdata_base v) 
  100.                         {
  101. 				v2f o;
  102. 				
  103. 				float4 offset;
  104. 				offset.yzw = float3(0.0, 0.0, 0.0);
  105. 				offset.x = sin(_Frequency * _Time.y + v.vertex.x * _InvWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * _InvWaveLength) * _Magnitude;
  106. 				v.vertex = v.vertex + offset;
  107.  
  108. 				TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)
  109. 				
  110. 				return o;
  111. 			}
  112. 			
  113. 			fixed4 frag(v2f i) : SV_Target 
  114.                         {
  115. 			    SHADOW_CASTER_FRAGMENT(i)
  116. 			}
  117. 			ENDCG
  118. 		}
  119. 	}
  120. 	FallBack "VertexLit"
  121. }

在自定义投射阴影的Pass中，我们通常会使用Unity提供的内置宏V2F_SHADOW_CASTER，TRANSFER_SHADOW_CASTER_NORMALOFFSET和SHADOW_CASTER_FRAGMENT来计算阴影投射的各种变量。

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/138342
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号