【Shader】实验08——水面的环形涟漪

最新推荐文章于 2025-06-12 18:21:53 发布

原创最新推荐文章于 2025-06-12 18:21:53 发布 · 2.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#Shader #Unity

Shader 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何使用Unity和Shader实现水面环形涟漪效果。通过C#脚本进行碰撞检测，将碰撞点传给Shader作为涟漪中心，利用正弦公式计算采样offset，实现动态水面波动。关键词包括Unity、Shader、C#、环形涟漪、碰撞检测、水面模拟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上篇，这篇详细写写水面的环形涟漪模拟的shader。

所有的shader实验源码都可以在GitHub找到。
水面的环形涟漪

C#脚本

首先把碰撞检测的C#脚本写了

C#脚本的主要任务：
1、碰撞检测
2、如果发生碰撞，把碰撞点传给shader，作为环形涟漪模拟的圆心
3、如果发生碰撞，首先传一个开始范围值，过一定时间后再传一个结束范围值，这样就可以模拟人物踩上水后，先出现外围涟漪，再从内圈开始消失。

using System.Collections;
using UnityEngine;

public class SimpleWater : MonoBehaviour
{
    [Range(0,0.5f)]
    public float waveWidth = 0.1f;

    [Range(0.01f, 0.1f)]
    public float timeMince = 0.02f;

    [Range(0,1)]
    public float waveDissolveRatioTime = 0.5f;

    private Vector3 point = new Vector3(0, 0, 0);

    private Material material;

    private float panelWidth;
    private float panelHeight;

    private bool isCollision = false;

    private void Awake()
    {
        material = GetComponent<MeshRenderer>().material;

        if (material == null)
            Debug.Log("material is null!");

        panelWidth = transform.localScale.x * 5;
        panelHeight = transform.localScale.z * 5;

        material.SetVector("_wavePos", new Vector4(0, 0, 0, 0));
        material.SetFloat("_StartWaveWidth", 0);
        material.SetFloat("_EndWaveWidth", 0);
    } 

    private void OnCollisionEnter(Collision collision)
    {
        ContactPoint contact = collision.contacts[0];
        //碰撞点坐标 
        Vector3 pos = contact.point; 

        pos -= transform.position;

        pos.x /= panelWidth;
        pos.z /= panelHeight;

        pos.x = pos.x / 2 + 0.5f;
        pos.z = pos.z / 2 + 0.5f;

        isCollision = true;

        StartCoroutine(ChangeWaveWidth("_StartWaveWidth", 0.8f,true));

        //把panel的长宽也传递过去，以消除缩放影响
        material.SetVector("_wavePos", new Vector4(1 - pos.x, 1 - pos.z, panelWidth, panelHeight));
    }

    private IEnumerator ChangeWaveWidth(string name, float time, bool isStartWaveWidth)
    {
        //把设定的waveWidth每timeMince传给shader一次，每传一次加一点，从0逐渐接近设定的waveWidth值
        for (int i = 0; i < time / timeMince; i++)
        {
            material.SetFloat(name, waveWidth * i / (time * 50));

            //在设定的wave消失时间(比例)时，开始给shader的EndWaveWidth，这样就可以模拟波从内圈开始消失了
            if (Mathf.Abs(i - waveDissolveRatioTime * time / timeMince) <= 0.05f)
            {
                if (isStartWaveWidth)
                    StartCoroutine(ChangeWaveWidth("_EndWaveWidth", 1f, false));
            }
            yield return new WaitForSeconds(timeMince);
        }

        StopCoroutine(ChangeWaveWidth(name, time, isStartWaveWidth));
    }
}

主要是用协程开启动画传值，关键部分都详细写了注释，就不再重复了。

然后就是重头戏——Shader的部分。

Shader

要模拟环形涟漪，首先计算各点到圆心的向量，用点的uv坐标减去圆心uv坐标即可

float2 dv = i.uv.xy - float2(_wavePos.x, _wavePos.y);
dv = dv * float2(_wavePos.z / _wavePos.w, 1);//消除scale缩放影响

然后计算点到圆心的距离，在距离上使用正弦公式计算采样的offset

float distance = sqrt(dv.x * dv.x + dv.y * dv.y);
float sinFactor = sin(_Frequency * distance - _Time.y);

计算振幅amplitude，决定波的上下起伏大小，同时使用_StartWaveWidth和_EndWaveWidth来限制波的范围，用smoothstep而不是clamp是为了边缘过渡平滑

float amplitude = _Amplitude * smoothstep(0, _StartWaveWidth, _StartWaveWidth - distance.x) * smoothstep(0, _EndWaveWidth, distance.x - _EndWaveWidth);

计算圆心到点的方向，再乘上上述计算结果，就得到了采样贴图的offset。在uv坐标上加上offset和上一篇文章提到的折射偏移speed就可以了。

float2 direction = normalize(dv);
float2 wave_offset = normalize(dv) * sinFactor * amplitude;
fixed3 bump = UnpackNormal(tex2D(_Bump, i.uv.zw + speed + wave_offset)).rgb;

源码

Shader "MyShaderTest/7_SimpleWater"
{
	Properties
	{
		_MainTex("Main Tex",2D) = "white"{}
		_MainColor("Main Color",Color) = (1,1,1,1)

		_Bump("Bump",2D) = "bump" {}
		_BumpScale("Bump Scale",float) = 1
		_BumpSpeed("Bump Speed",Range(0,2)) = 1

		_ReflectionColor("Reflection Color",Color) = (1,1,1,1)

		_RefractionScale("Refraction Scale",float) = 1

		_Frequency("Frequency",float) = 0
		_Amplitude("Amplitude",float) = 1
	}

	SubShader
	{
		Tags{ "RenderType" = "Opaque" }

		Pass
		{
			Tags{ "LightMode" = "ForwardBase" }

				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				#pragma multi_compile_fwdbase

				#include "UnityCG.cginc"
				#include "Lighting.cginc"

				struct a2v
				{
					float4 vertex : POSITION;
					float3 normal : NORMAL;
					float4 tangent : TANGENT;
					float2 texcoord : TEXCOORD0;
				};

				struct v2f
				{
					float4 pos : SV_POSITION;
					float4 uv : TEXCOORD0;
					float4 Ttw0 : TEXCOORD2;
					float4 Ttw1 : TEXCOORD3;
					float4 Ttw2 : TEXCOORD4;
				};

				sampler2D _MainTex;
				half4 _MainTex_ST;
				half4 _MainTex_TexelSize;
				half4 _MainColor;

				sampler2D _Bump;
				half4 _Bump_ST;
				half _BumpScale;
				half _BumpSpeed;

				fixed4 _ReflectionColor;
				half _RefractionScale;

				float _Frequency;
				float _Amplitude;

				float4 _wavePos;
				float _StartWaveWidth;
				float _EndWaveWidth;


				v2f vert(a2v v)
				{
					v2f o;
					float3 worldPos = mul(unity_ObjectToWorld, v.vertex);

					float3 worldNormal = UnityObjectToWorldNormal(v.normal);
					float3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
					float3 worldBitangent = cross(worldNormal, worldTangent) * v.tangent.w;

					o.pos = mul(UNITY_MATRIX_VP, float4(worldPos, 1));
					o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
					o.uv.zw = TRANSFORM_TEX(v.texcoord, _Bump);

					#if UNITY_UV_STARTS_AT_TOP
						if (_MainTex_TexelSize.y < 0.0)
						{
							o.uv.y = 1.0 - o.uv.y;
							o.uv.w = 1.0 - o.uv.w;
						}
					#endif

					o.Ttw0 = float4(worldTangent.x, worldBitangent.x, worldNormal.x, worldPos.x);
					o.Ttw1 = float4(worldTangent.y, worldBitangent.y, worldNormal.y, worldPos.y);
					o.Ttw2 = float4(worldTangent.z, worldBitangent.z, worldNormal.z, worldPos.z);

					return o;
				}

				fixed4 frag(v2f i) : SV_Target
				{
					float3 worldPos = float3(i.Ttw0.w,i.Ttw1.w,i.Ttw2.w);
					fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
					float2 speed = half2(_BumpSpeed, _BumpSpeed) * _Time.y;
					float2 dv = i.uv.xy - float2(_wavePos.x, _wavePos.y);
					dv = dv * float2(_wavePos.z / _wavePos.w, 1);//消除scale缩放影响

					float distance = sqrt(dv.x * dv.x + dv.y * dv.y);
					float sinFactor = sin(_Frequency * distance - _Time.y);
					float amplitude = _Amplitude * smoothstep(0, _StartWaveWidth, _StartWaveWidth - distance.x) * smoothstep(0, _EndWaveWidth, distance.x - _EndWaveWidth);
					float2 direction = normalize(dv);
					float2 wave_offset = normalize(dv) * sinFactor * amplitude;
					fixed3 bump = UnpackNormal(tex2D(_Bump, i.uv.zw + speed + wave_offset)).rgb;

					bump.xy *= _BumpScale;
					bump.z = sqrt(1 - saturate(dot(bump.xy, bump.xy)));
					bump = normalize(half3(dot(bump, i.Ttw0.xyz), dot(bump, i.Ttw1.xyz), dot(bump, i.Ttw2.xyz)));

					float2 mainTex_uv_offset = bump.xy * _MainTex_TexelSize.xy * _RefractionScale;
					fixed3 refrColor = tex2D(_MainTex, i.uv.xy + mainTex_uv_offset).rgb * _MainColor;
					half3 reflColor = dot(worldViewDir, bump) * _ReflectionColor;

					return fixed4(reflColor + refrColor, 1);
				}
				ENDCG
		}
	}
	FallBack "Diffuse"
}