Unity：圆底烧瓶中液体液面升降变革的结果

一、结果展示


二、实现的原理

1、从image的filled模式提及

image的filled模式，适适用来做进度条：


2、可否为一个3D object实现一个image filled 的shader ？

1. Shader "Custom/FilledImageEffect"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _Color ("Color", Color) = (1, 1, 1, 1)
7.         _FillAmount ("Fill Amount", Range(0, 1)) = 1
8.     }
10.     SubShader
11.     {
12.         Tags {"Queue"="Transparent" "RenderType"="Transparent"}
13.         LOD 100
15.         CGPROGRAM
16.         #pragma surface surf Lambert
18.         sampler2D _MainTex;
19.         float4 _Color;
20.         float _FillAmount;
22.         struct Input
23.         {
24.             float2 uv_MainTex;
25.         };
27.         void surf (Input IN, inout SurfaceOutput o)
28.         {
29.             float2 uv = IN.uv_MainTex;
30.             float4 c = tex2D(_MainTex, uv) * _Color;
32.             if (uv.x > _FillAmount)
33.             {
34.                 c.a = 0;
35.             }
37.             o.Albedo = c.rgb;
38.             o.Alpha = c.a;
39.         }
40.         ENDCG
41.     }
42.     FallBack "Diffuse"
43. }

复制代码

3、液面变革的Shader

1. Shader "Custom/LiquidBottle"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _MainColor("MainColor",Color) = (1, 1, 1, 1)
7.         _TopColor("TopColor",Color) = (1, 1, 0, 1)
8.         _FillAmount("FillAmout",Range(-1 , 2)) = 0
9.         _EdgeWidth("EdgeWidth",Range(0 , 1)) = 0.2
11.         _BottleWidth("BottleWidth",Range(0,1)) = 0.2
12.         _BottleColor("BottleColor",Color) = (1,1,1,1)
14.         _RimColor("RimColor",Color)=(1,1,1,1)
15.         _RimWidth("RimWidth",float)=0.2
17.     }
18.     SubShader
19.     {
20.         Tags { "RenderType"="Opaque" }
21.         LOD 100
23.         Pass
24.         {
25.             Cull OFF
26.             AlphaToMask on
27.             //ZWrite On
28.             Blend SrcAlpha OneMinusSrcAlpha
29.             CGPROGRAM
30.             #pragma vertex vert
31.             #pragma fragment frag
32.             // make fog work
33.             #pragma multi_compile_fog
35.             #include "UnityCG.cginc"
37.             struct appdata
38.             {
39.                 float4 vertex : POSITION;
40.                 float2 uv : TEXCOORD0;
41.                 float3 normal : NORMAL;
42.                
43.             };
45.             struct v2f
46.             {
47.                 float2 uv : TEXCOORD0;
48.                 UNITY_FOG_COORDS(1)
49.                 float4 vertex : SV_POSITION;
50.                 float fillEdge : TEXCOORD1;
51.                 float3 viewDir : COLOR;
52.                 float3 normal : COLOR2;
53.             };
55.             sampler2D _MainTex;
56.             float4 _MainTex_ST;
58.             float4 _MainColor;
59.             float _FillAmount;
60.             float4 _TopColor;
61.             float _EdgeWidth;
63.             float4 _RimColor;
64.             float _RimWidth;
66.             v2f vert (appdata v)
67.             {
68.                 v2f o;
69.                 o.vertex = UnityObjectToClipPos(v.vertex);
70.                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
71.                 UNITY_TRANSFER_FOG(o,o.vertex);
72.                 o.fillEdge=mul(unity_ObjectToWorld,v.vertex.xyz).y+_FillAmount;
73.                 o.normal=v.normal;
74.                 o.viewDir=normalize(ObjSpaceViewDir(v.vertex));
75.                 return o;
76.             }
78.             fixed4 frag (v2f i,fixed facing : VFace) : SV_Target
79.             {
80.                 // sample the texture
81.                 fixed4 col = tex2D(_MainTex, i.uv) * _MainColor;
82.                 // apply fog
83.                 UNITY_APPLY_FOG(i.fogCoord, col);
85.                 float dotProduct = 1-pow(dot(i.normal, i.viewDir),_RimWidth);
86.                 float4 rimCol=_RimColor*smoothstep(0.5,1,dotProduct);
88.                 fixed4 edgeVal=step(i.fillEdge,0.5)-step(i.fillEdge,0.5-_EdgeWidth);
89.                 fixed4 edgeCol=edgeVal *= _TopColor*0.9;
91.                 fixed4 finalVal=step(i.fillEdge,0.5)-edgeVal;
92.                 fixed4 finalCol=finalVal*col;
93.                 finalCol+=edgeCol+rimCol;
95.                  fixed4 topCol=_TopColor * (edgeVal+finalVal);
96.                 // float dotVal = 1- pow(dot(i.normal, i.viewDir),0.3);
97.                 // return float4(dotVal,dotVal,dotVal,1);
98.                 return facing > 0 ? finalCol : topCol;
99.             }
100.             ENDCG
101.         }
103.         Pass
104.         {
105.             //Cull Front
106.             Blend SrcAlpha OneMinusSrcAlpha
107.             CGPROGRAM
108.             #pragma vertex vert
109.             #pragma fragment frag
110.             // make fog work
111.             #pragma multi_compile_fog
113.             #include "UnityCG.cginc"
115.             struct appdata
116.             {
117.                 float4 vertex : POSITION;
118.                 float2 uv : TEXCOORD0;
119.                 float4 normal : NORMAL;
120.             };
122.             struct v2f
123.             {
124.                 float2 uv : TEXCOORD0;
125.                 UNITY_FOG_COORDS(1)
126.                 float4 vertex : SV_POSITION;
127.                 float3 viewDir : COLOR;
128.                 float3 normal :NORMAL;
129.             };
131.             float4 _BottleColor;
132.             float _BottleWidth;
134.             float4 _RimColor;
135.             float _RimWidth;
137.             v2f vert (appdata v)
138.             {
139.                 v2f o;
140.                 v.vertex.xyz+=v.normal.xyz*_BottleWidth;
141.                 o.vertex = UnityObjectToClipPos(v.vertex);
142.                 o.uv = v.uv;
143.                 UNITY_TRANSFER_FOG(o,o.vertex);
144.                 o.normal=v.normal.xyz;
145.                 o.viewDir=normalize(ObjSpaceViewDir(v.vertex));
147.                 return o;
148.             }
150.             fixed4 frag (v2f i,fixed facing : VFace) : SV_Target
151.             {
152.                 // sample the texture
153.                 fixed4 col = _BottleColor;
154.                 // apply fog
155.                 UNITY_APPLY_FOG(i.fogCoord, col);
157.                 float dotProduct = 1-pow(dot(i.normal, i.viewDir),_RimWidth);//1-pow(dot(i.normal, i.viewDir),_RimWidth/10);
158.                 float4 rimCol=_RimColor*smoothstep(0.2,1,dotProduct);
159.               
160.                 return rimCol;
161.             }
162.             ENDCG
163.         }
164.     }
165. }

复制代码

三、服用方法

• 1、创建一个液面结果的材质
  
  
• 2、把这个材质挂载到瓶子中的【液体】模型上
  
• 3、在面板上拖动FillAmout
  
• 4、在脚本中设置mat的该属性
  mat.SetFloat(“_FillAmount”, currentValue);
  

四、附录：C#调用代码

1、液面升降动画的异步方法

1. /// <summary>
2. /// 容器的液面变化：化学实验中，量筒中倒入液体或者被吸取液体后，液面会升降
3. /// 材质用shader，控制其fillAmout参数
4. /// </summary>
5. /// <param name="mat">操作的材质</param>
6. /// <param name="levelStart">起始液面位置</param>
7. /// <param name="levelEnd">结束页面位置</param>
8. /// <param name="duration">动画的时间</param>
9. /// <returns></returns>
10. public static async UniTask DoLiquidLevel(Material mat, float levelStart, float levelEnd, float duration)
11. {
12.     float currentValue = levelStart;
13.     float timeElapsed = 0f;
14.     while (timeElapsed < duration)
15.     {
16.         currentValue = Mathf.Lerp(levelStart, levelEnd, timeElapsed / duration);
17.         Debug.Log(currentValue);
18.         mat.SetFloat("_FillAmount", currentValue);      //变量名字确保与Shader源码中的变量一致。
19.         await UniTask.Yield();
20.         timeElapsed += Time.deltaTime;
21.     }
22.     mat.SetFloat("_FillAmount", levelEnd);              //确保最终结果准确
23. }

复制代码

2、monobehaviour示例脚本

1. using System;
2. using Cysharp.Threading.Tasks;
3. using UnityEngine;
4. using static txlib;//包含 DoLiquidLevel()
6. /// <summary>
7. /// 容器的液面升降控制
8. /// </summary>
9. public class ChangeLiquidLevel : MonoBehaviour
10. {
11.     /// <summary>
12.     /// 物体
13.     /// </summary>
14.     public GameObject obj;
16.     /// <summary>
17.     /// 起始液面
18.     /// </summary>
19.     public float levelStart;
21.     /// <summary>
22.     /// 终止液面
23.     /// </summary>
24.     public float levelEnd;
26.     /// <summary>
27.     /// 动画耗时
28.     /// </summary>
29.     public float duration;
30.    
31.     /// <summary>
32.     /// 材质
33.     /// </summary>
34.     private Material mat;
36.     [ContextMenu("测试液面")]
37.     async UniTask Test()
38.     {
39.         mat = obj.GetComponent<Renderer>().sharedMaterial;
40.         while (true)
41.         {
42.             await DoLiquidLevel(mat, levelStart, levelEnd, duration);
43.             await DoLiquidLevel(mat, levelEnd, levelStart, duration);
44.             await UniTask.Delay(TimeSpan.FromSeconds(0.8f));
45.         }
46.     }
47. }

复制代码

来源：https://blog.csdn.net/dzj2021/article/details/130819256
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！