Unity技术美术教程，可交互的能量盾，附源文件

小米

演示效果



https://www.zhihu.com/video/1626255034097811456
搭建工程

新建工程，安装Universal RP，我的Unity版本是2022.2


记得勾选DepthTexture和OpaqueTexture，之后会用到


新建Shader





添加UV，法线等信息，用于后续计算

1. struct appdata
2. {
3.     float4 vertex : POSITION;
4.     float2 uv : TEXCOORD0;
5.     float3 normal : NORMAL;
6. };
8. struct v2f
9. {
10.     float4 vertex : SV_POSITION;
11.     float2 uv : TEXCOORD1;
12.     float3 normal : TEXCOORD2;
13.     float3 worldPos : TEXCOORD3;
14.     float4 screenPos : TEXCOORD4;
15.     float4 localPos : TEXCOORD5;
16. };
18. v2f vert (appdata v)
19. {
20.     v2f o;
21.     o.vertex = TransformObjectToHClip(v.vertex.xyz);
22.     o.uv = v.uv;
23.     o.normal = TransformObjectToWorldNormal(v.normal);
24.     o.worldPos = TransformObjectToWorld(v.vertex.xyz);
25.     o.localPos = v.vertex;
26.     o.screenPos = o.vertex;
27.     #if UNITY_UV_STARTS_AT_TOP
28.     o.screenPos.y *= -1;
29.     #endif
30.     return o;
31. }

复制代码

边缘光

先添加边缘光，用模型法线和不雅察看标的目的做点乘

1. //Properties
2. _RimPower (”RimPower”, Float) = 1
3. [HDR] _RimColor (”RimColor”, Color) = (1, 1, 1, 1)
5. float _RimPower;
6. float4 _RimColor;
7.         
8. //frag
9. float3 normal = normalize(i.normal);
10. float3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos);
11. float ndv = dot(normal, viewDir);
12. if(ndv < 0) {
13.     ndv = abs(ndv);
14. }
15. ndv = 1 - ndv;
17. float rimIntensity = pow(ndv, _RimPower);
18. finalColor += _RimColor * rimIntensity;
19. finalColor.a = saturate(finalColor.a);

复制代码

仿佛缺了点什么，噢，忘记开Bloom了


接触高亮

能量盾和其他物体接触时，需要有亮边，通过深度来实现。用盾像素点的屏幕坐标采样深度图，得参加景深度，再与像素点深度做斗劲，当两者足够接近时，显示亮边

1. //Properties
2. _IntersectionWidth (”IntersectionWidth”, Float) = 1
3. [HDR] _IntersectionColor (”IntersectionColor”, Color) = (1, 1, 1, 1)
5. float _IntersectionWidth;
6. float4 _IntersectionColor;
8. sampler2D _CameraDepthTexture;
10. //frag
11. i.screenPos.xyz /= i.screenPos.w;
12. float2 screenUV = i.screenPos.xy;
13. screenUV = (screenUV + 1) / 2;
15. float selfZ = i.screenPos.z;
16. float sceneZ = tex2D(_CameraDepthTexture, screenUV).r;
17. float linearSelfZ = LinearEyeDepth(selfZ, _ZBufferParams);
18. float linearSceneZ = LinearEyeDepth(sceneZ, _ZBufferParams);
19. float zDifference = linearSceneZ - linearSelfZ;
20. if(zDifference < _IntersectionWidth) {
21.     float intersectionIntensity = (1 - zDifference / _IntersectionWidth);
22.     intersectionIntensity = saturate(intersectionIntensity);
23.     intersectionIntensity = pow(intersectionIntensity, 4);
24.     finalColor += _IntersectionColor * intersectionIntensity;
25.     finalColor.a = saturate(finalColor.a);
26. }

复制代码

贴图

接下来给能量盾添加贴图，球的UV是不均匀的，如果直接用UV采样贴图，贴图在顶部会被压缩，在中间区域会被拉伸。
这里我把2D贴图合成了Cubemap，用法线采样，而且判断了像素点是否是背面，如果是，则不显示贴图

1. //Properties
2. _PatternTex (”PatternTex”, Cube) = ”white” {}
3. _PatternPower (”PatternPower”, Float) = 1
4. [HDR] _PatternColor (”PatternColor”, Color) = (1, 1, 1, 1)
6. samplerCUBE _PatternTex;
7. float _PatternPower;
8. float4 _PatternColor;
10. //frag
11. int isFrontFace = 1;
12. //......
13. if(ndv < 0) {
14.     isFrontFace = 0;
15. }
17. float patternIntensity = texCUBE(_PatternTex, normal).a * isFrontFace;
18. patternIntensity *= pow(ndv, _PatternPower);
19. finalColor += patternIntensity * _PatternColor;
20. finalColor.a = saturate(finalColor.a);

复制代码

接下来给贴图添加流动效果，用一张网格遮罩和贴图做叠加

1. //Properties
2. _Mask (”Mask”, 2D) = ”black” {}
3. [HDR] _MaskColor (”MaskColor”, Color) = (1, 1, 1, 1)
5. sampler2D _Mask;
6. float4 _Mask_ST;
7. float4 _MaskColor;
9. //frag
10. float mask = 0;
11. mask += tex2D(_Mask, i.uv * _Mask_ST.xx + _Mask_ST.zz * _Time.y).a;
12. mask += tex2D(_Mask, i.uv * _Mask_ST.yy + _Mask_ST.ww * _Time.y).a;
13. mask = saturate(mask);
14. finalColor += patternIntensity * mask * _MaskColor;
15. finalColor.a = saturate(finalColor.a);

复制代码

https://www.zhihu.com/video/1626235816711299073


溶解

接下来制作溶解效果，用像素点的y坐标控制溶解，再叠加噪声做犯警则的轮廓

1. //Properties
2. _Noise (”Noise”, 2D) = ”white” {}
4. _DissolveThreshold (”DissolveThreshold”, Float) = 1
5. _DissolveWidth (”DissolveWidth”, Float) = 0.1
6. [HDR] _DissolveColor (”DissolveColor”, Color) = (1, 1, 1, 1)
8. sampler2D _Noise;
9. float4 _Noise_ST;
11. float _DissolveThreshold;
12. float _DissolveWidth;
13. float4 _DissolveColor;
15. //frag
16. if(i.localPos.y > _DissolveThreshold) {
17.     discard;
18. }
19. else if(i.localPos.y > _DissolveThreshold - _DissolveWidth) {
20.     float t = (i.localPos.y - _DissolveThreshold + _DissolveWidth) / _DissolveWidth;
21.     float noise = tex2D(_Noise, i.uv * _Noise_ST.xy + _Noise_ST.zw * _Time.y);
22.     noise = lerp(1, noise * (1 - t), pow(t, 0.5));
23.     if(noise > 0.5) {
24.         finalColor = _DissolveColor;
25.     }else {
26.         discard;
27.     }
28. }

复制代码

https://www.zhihu.com/video/1626236203392466944
颜色交互

接下来制作最复杂的交互功能，思路是用脚本把交互点，交互半径，交互颜色传入材质球，然后在shader中计算像素点和交互点的距离，如果在半径内则显示相应的颜色。
听起来很简单，一句话的事，实现起来


新建Shield.cs脚本，这个脚本负责传递交互信息到材质球

1. public class Shield : MonoBehaviour {  
2.     private class InteractionData {
3.         public Color color;
4.         public Vector3 interactionStartPos;
5.         public float timer;
6.     }
8.     public List<Material> materials;
10.     private List<InteractionData> interactionDatas = new List<InteractionData>();
12.     private void Update() {
13.         //......
14.         for (int i = 0; i < materials.Count; i++) {
15.             materials[i].SetInt(”_InteractionNumber”, interactionDatas.Count);
17.             if (interactionDatas.Count > 0) {
18.                 materials[i].SetVectorArray(”_InteractionStartPosArray”, interactionStartPosArray);
19.                 materials[i].SetFloatArray(”_InteractionInnerRadiusArray”, interactionInnerRadiusArray);
20.                 materials[i].SetFloatArray(”_InteractionOuterRadiusArray”, interactionOuterRadiusArray);
21.                 materials[i].SetFloatArray(”_InteractionAlphaArray”, interactionAlphaArray);
22.                 materials[i].SetColorArray(”_InteractionColorArray”, interactionColorArray);
23.                 materials[i].SetFloatArray(”_DistortAlphaArray”, distortAlphaArray);
24.             }
25.         }
26.     }
28.     public void AddInteractionData(Vector3 pos, Color color) {
29.         if (interactionDatas.Count >= 100) {
30.             return;
31.         }
33.         InteractionData interactionData = new InteractionData();
34.         interactionData.color = color;
35.         interactionData.interactionStartPos = pos;
36.         interactionDatas.Add(interactionData);
37.     }
38. }

复制代码

新建ShootManager.cs脚本，在点击鼠标时，做射线检测，如果碰撞到能量盾，调用交互接口

1. public class ShootManager : MonoBehaviour {
2.     [ColorUsage(true, true)] public Color interactionColor;
4.     private void Update() {
5.         if (Input.GetMouseButtonDown(0)) {
6.             RaycastHit hitInfo;
7.             bool hited = Physics.Raycast(Camera.main.ScreenPointToRay(Input.mousePosition), out hitInfo, Mathf.Infinity);
8.             if (hited) {
9.                 Shield.instance.AddInteractionData(hitInfo.point, interactionColor);
10.             }
11.         }
12.     }
13. }

复制代码

然后在Shader里计算像素点到交互点的距离

1. //Properties
2. int _InteractionNumber;
3. float3 _InteractionStartPosArray[100];
4. float _InteractionInnerRadiusArray[100];
5. float _InteractionOuterRadiusArray[100];
6. float _InteractionAlphaArray[100];
7. float4 _InteractionColorArray[100];
8.             
9. float _DistortAlphaArray[100];
11. float GetInteractionIntensity(v2f i, float3 startPos, float innerRadius, float outerRadius) {
12.     float dist = distance(i.worldPos, startPos);
13.     if(dist > outerRadius || dist < innerRadius) {
14.         return 0;
15.     }
16.     else {
17.       float intensity = (dist - innerRadius) / (outerRadius - innerRadius);
18.       return intensity;
19.     }
20. }
22. //frag
23. float interactionIntensity = 0;
24. float4 interactionColor = 0;
25. for(int iii = 0; iii < _InteractionNumber; iii++) {
26.     float tempInteractionIntensity = GetInteractionIntensity(i, _InteractionStartPosArray[iii], _InteractionInnerRadiusArray[iii], _InteractionOuterRadiusArray[iii]) * _InteractionAlphaArray[iii];
27.     interactionIntensity += tempInteractionIntensity;
29.     interactionColor += _InteractionColorArray[iii] * tempInteractionIntensity;
30. }
32. interactionIntensity = saturate(interactionIntensity);
34. finalColor += interactionColor;
35. finalColor.a = saturate(finalColor.a);

复制代码

https://www.zhihu.com/video/1626237758866972672
在交互区域，对贴图做提亮和扭曲

1. //Properties
2. _DistortNormal (”DistortNormal”, 2D) = ”bump” {}
3. _DistortIntensity (”DistortIntensity”, Float) = 1
5. sampler2D _DistortNormal;
6. float4 _DistortNormal_ST;
7. float _DistortIntensity;
9. float GetDistortIntensity(v2f i, float3 startPos, float innerRadius, float outerRadius) {
10.     float dist = distance(i.worldPos, startPos);
11.     if(dist > outerRadius) {
12.         return 0;
13.     }
14.     else {
15.         float intensity = dist / outerRadius;
16.         return intensity;
17.     }
18. }
20. //frag
21. float3 distortNormal = UnpackNormal(tex2D(_DistortNormal, i.uv * _DistortNormal_ST.xy + _DistortNormal_ST.zw * _Time.y));
22. distortNormal *= _DistortIntensity * distortIntensity;
24. float distortIntensity = 0;
25. for(int iii = 0; iii < _InteractionNumber; iii++) {
26.     //......
27.     distortIntensity += GetDistortIntensity(i, _InteractionStartPosArray[iii], _InteractionInnerRadiusArray[iii], _InteractionOuterRadiusArray[iii]) * _DistortAlphaArray[iii];
28.     distortIntensity = saturate(distortIntensity);
29. }
31. float patternIntensity = texCUBE(_PatternTex, normal + distortNormal).a * isFrontFace;
32. patternIntensity *= pow(ndv + interactionIntensity, _PatternPower);
33. finalColor += patternIntensity * _PatternColor;
34. finalColor.a = saturate(finalColor.a);

复制代码

https://www.zhihu.com/video/1626213140663791616
扭曲交互

交互功能还差最后一步


接下来做屏幕扭曲效果，道理是用一张法线贴图改削屏幕UV，然后采样_CameraOpaqueTexture，
新建Shield_Distort.shader，把能量盾Shader里的代码复制过来，添加

1. sampler2D _CameraOpaqueTexture;
2. float4 _CameraOpaqueTexture_TexelSize;

复制代码

重写片元着色器，改削屏幕UV，采样_CameraOpaqueTexture

1. float4 frag (v2f i) : SV_Target
2. {
3.     float4 finalColor = 0;
5.     float distortIntensity = 0;
6.     for(int iii = 0; iii < _InteractionNumber; iii++) {
7.         distortIntensity += GetDistortIntensity(i, _InteractionStartPosArray[iii], _InteractionInnerRadiusArray[iii], _InteractionOuterRadiusArray[iii]) * _DistortAlphaArray[iii];
8.         distortIntensity = saturate(distortIntensity);
9.     }
11.     float3 distortNormal = UnpackNormal(tex2D(_DistortNormal, i.uv * _DistortNormal_ST.xy + _DistortNormal_ST.zw * _Time.y));
12.     distortNormal *= _DistortIntensity * distortIntensity;
14.     i.screenPos.xyz /= i.screenPos.w;
15.     float2 screenUV = i.screenPos.xy;
16.     screenUV = (screenUV + 1) / 2;
18.     finalColor = tex2D(_CameraOpaqueTexture, screenUV + distortNormal.xy * _CameraOpaqueTexture_TexelSize.xy);
20.     return finalColor;
21. }

复制代码

再把能量盾复制一份，换上新材质




https://www.zhihu.com/video/1626217980341170177
至此，我们的能量盾就完成了！


源文件下载

Github：https://github.com/MagicStones23/Unity-Shader-Tutorial-Interactable-Energy-Shield
百度网盘：https://pan.baidu.com/s/1R58a9uPzq3pGugyFwZshEA?pwd=1111 提取码：1111
备注：工程中部门素材取自互联网，仅供学习交流使用，请勿在商业项目中使用
主页

此次的教程就到此结束了，如果喜欢记得点个赞，我们下篇文章再见！