1. 项目概述从“水波荡漾”到屏幕交互的魔法最近在做一个需要增强视觉沉浸感的项目琢磨着怎么让静态的界面“活”起来。一个偶然的灵感让我想起了石子投入水面泛起的涟漪——那种由中心扩散开来的动态波纹既有美感又能清晰地指示交互焦点。于是我决定在Unity里实现一个屏幕涟漪效果。这个效果的核心目标很明确不仅要能通过代码自动触发模拟环境中的动态事件比如角色技能释放、能量波动更要能响应用户的点击或触摸让每一次交互都有直观、优雅的视觉反馈。你可能会在不少精致的独立游戏或应用启动动画中见过类似效果它不属于游戏世界内的3D物体而是覆盖在整个屏幕2D空间上的全屏后处理特效。实现它的技术栈并不复杂核心在于片段着色器Fragment Shader与后处理Post-Processing的配合。通过着色器实时计算每个像素点到“涟漪中心”的距离并依据一个随时间变化的波动函数来偏移其UV坐标或颜色就能模拟出波纹扩散的视觉效果。而交互逻辑则通过将屏幕坐标如鼠标点击位置传递给着色器参数来实现。无论你是想为你的游戏菜单增加一点灵动的反馈还是为你的数字孪生可视化项目添加一个数据波动的指示器亦或是单纯对Unity Shader和后处理技术感兴趣这篇内容都将带你从原理到实践完整走通一遍。我会分享我实际开发中采用的方案、遇到的坑以及优化技巧确保你能直接复现一个高性能、可定制的屏幕涟漪效果。2. 核心思路与方案选型为什么是后处理与Shader在动手写代码之前我们需要明确几个关键的设计决策。实现屏幕特效通常有几种路径基于UI系统、基于摄像机渲染纹理Render Texture的后处理或者直接修改场景中物体的材质。对于“覆盖全屏、与场景内容融合”的涟漪效果后处理方案是唯一自然且高效的选择。2.1 为何摒弃UI方案与物体材质方案首先考虑使用UGUI或NGUI的Image组件配合序列帧动画或Mesh变形来模拟涟漪。这种方法乍看简单但存在致命缺陷难以与复杂的3D场景完美融合。UI渲染在Overlay层始终在最上层会遮挡场景也无法根据场景深度产生正确的遮挡关系。其次要实现从屏幕任意点触发并扩散到边缘的效果需要动态生成或移动UI元素性能开销大且效果生硬。其次考虑给场景中一个覆盖全屏的Quad附加特殊材质。这比UI方案稍好因为它可以通过调整Quad的渲染队列与场景混合。但问题在于管理繁琐需要确保这个Quad始终对准摄像机且大小合适在多摄像机、分屏等复杂场景下容易出错。而且其效果仍然是基于一个“物体”而非对最终渲染图像的“处理”。2.2 后处理方案的绝对优势后处理顾名思义是在摄像机完成所有场景渲染之后对最终生成的图像一张纹理再进行一次处理。Unity提供了成熟的后处理堆栈Post Processing Stack, v2来管理这些效果。对于涟漪效果其优势是压倒性的全屏覆盖天然作用于整个渲染画面无需担心对齐或覆盖问题。与场景深度融合处理的是包含所有3D物体、UI如果UI渲染在摄像机下的最终图像视觉效果最统一。性能可控后处理着色器通常只执行一次全屏绘制其性能消耗主要取决于着色器本身的复杂度和屏幕分辨率相比动态生成大量UI元素更加可控和高效。标准化管线支持无论是内置渲染管线、URPUniversal Render Pipeline还是HDRPHigh Definition Render Pipeline都有对应的后处理框架方案迁移性较好。因此我们的技术路线确定为编写一个自定义的后处理着色器Shader来实现涟漪算法然后将其封装成一个后处理效果组件如MonoBehaviour脚本并集成到Unity的后处理框架中。脚本负责逻辑控制如触发涟漪、传递参数着色器负责视觉渲染。2.3 自动生成与点击交互的触发机制设计根据标题要求效果需要支持两种触发模式自动生成通常用于游戏内的周期性事件或环境效果。例如角色周期性释放光环、场景中有节奏的能量脉冲。这可以通过在控制脚本中使用InvokeRepeating或协程Coroutine定时调用触发函数来实现。点击交互生成响应用户输入。这需要我们在脚本中监听鼠标点击或触摸事件将屏幕坐标如Input.mousePosition转换为可用于着色器的规范化坐标通常是0到1的范围然后触发涟漪。两种模式的核心是统一的向着色器传递一个或多个“涟漪中心点”的坐标、涟漪开始的时间以及控制波纹形状的参数。着色器根据当前时间与涟漪开始时间的差值计算波纹的扩散状态。3. 核心细节解析涟漪着色器的数学原理一切炫酷效果的背后都是朴素的数学。屏幕涟漪效果的灵魂在于片段着色器中的一个函数它决定了像素如何根据其到涟漪中心的距离发生“扭曲”。3.1 波动方程与距离计算我们模拟的是水波经典的简化模型是使用正弦波Sine Wave或衰减的正弦波。对于屏幕上的一个像素点其受涟漪影响的强度基本遵循这个公式偏移量 振幅 * sin(频率 * 距离 - 速度 * 时间) * 衰减因子我们来拆解每个参数距离Distance当前像素的UV坐标与涟漪中心点UV坐标的直线距离。这是计算的基础。时间Time从该涟漪产生开始所经过的时间。_Time.y是Unity着色器中自游戏开始的总时间我们需要传入一个涟漪的“开始时间”然后用当前时间减去它得到“经过时间”。振幅Amplitude决定波纹扭曲的强度即像素偏移的最大距离。频率Frequency决定波纹的密度频率越高波纹越密集。速度Speed决定波纹扩散的快慢。衰减因子Attenuation通常是一个关于距离和时间的函数确保波纹在扩散过程中振幅逐渐减小直至消失。例如衰减因子 1.0 / (1.0 衰减系数 * 距离 * 经过时间)。在着色器中我们不会真的移动像素而是通过偏移这个像素采样纹理时使用的UV坐标来模拟扭曲。例如原本应该采样(u, v)点的颜色现在我们采样(u offsetX, v offsetY)点的颜色。offsetX和offsetY可以由上面的公式结合像素点到中心的方向向量计算得出。3.2 多涟漪叠加与性能考量一个更真实、更富表现力的效果往往需要支持多个涟漪同时存在。例如用户快速连续点击或者自动生成与点击涟漪共存。这意味着着色器需要维护一个涟漪参数列表中心、开始时间等。在Shader中我们可以使用数组来存储这些参数。但需要注意Shader中对数组的长度和循环次数有约束尤其在移动平台不宜过长。一个实用的技巧是设定一个最大涟漪数量如4个或8个并使用一个循环来累加所有活跃涟漪对该像素的影响。在C#脚本中我们需要管理这个列表当新涟漪产生时填入一个空闲槽位当涟漪生命周期结束后回收槽位。注意在片段着色器中使用循环是性能敏感操作。务必限制最大数量并考虑在低端设备上减少最大同时存在的涟漪数。另一种更高效的方案是使用Render Texture来存储“涟漪图”但实现更复杂对于少量涟漪数组方案更简单直接。3.3 坐标空间的转换从屏幕到UV这是实现点击交互的关键一步也是最容易出错的地方。用户在屏幕上点击的坐标Input.mousePosition是以像素为单位的屏幕空间坐标原点在左下角。而着色器中的UV坐标范围是[0, 1]原点通常在左下角或左上角取决于API在Unity中通常视为左下角为(0,0)。因此传递坐标给着色器前必须转换Vector3 mousePos Input.mousePosition; // 将屏幕像素坐标转换为视口坐标 (0到1的范围) Vector3 viewportPos Camera.main.ScreenToViewportPoint(mousePos); // 视口坐标的x和y分量就是我们要的UV坐标。注意ScreenToViewportPoint可能会受到摄像机视口矩形Viewport Rect影响对于全屏主摄像机通常没问题。 Vector2 rippleCenterUV new Vector2(viewportPos.x, viewportPos.y);确保你传递给着色器的rippleCenterUV在[0,1]范围内。有时点击屏幕边缘可能得到略微超出此范围的值需要在着色器中进行钳制clamp或是在脚本中处理。4. 实操过程一步步构建屏幕涟漪效果理论说得差不多了我们开始动手。这里我以Unity内置渲染管线Built-in RP配合Post Processing Stack v2为例进行说明。URP的实现思路类似但挂载脚本和设置略有不同。4.1 环境准备与后处理堆栈设置创建项目与导入资源新建一个Unity项目3D或2D均可。通过Package Manager或Asset Store导入Post Processing包Unity 2018及以上版本已集成在Package Manager中。配置后处理图层在Main Camera上添加Post-process Volume组件。创建一个新的Profile或使用默认的并将其赋值给该组件。确保Layer设置正确例如新建一个PostProcessing层并将摄像机所在GameObject的Layer设为该层同时在Volume组件中指定该层。启用摄像机效果同样在Main Camera上添加Post-process Layer组件并设置其Layer为刚才创建的PostProcessing层。4.2 编写自定义后处理着色器与效果脚本创建着色器在Project窗口中右键Create Shader Post Processing。将其命名为RippleEffect.shader。打开该文件我们需要编写核心算法。以下是简化版的核心片段着色器代码展示了单涟漪的计算// 在片段着色器函数中 float4 Frag(VaryingsDefault i) : SV_Target { float2 uv i.texcoordStereo; // 当前像素的UV float2 center _RippleCenter; // 从脚本传入的涟漪中心(UV空间) float elapsedTime _Time.y - _RippleStartTime; // 涟漪已持续时间 float dist distance(uv, center); // 计算波纹影响范围只影响一定距离内的像素 float rippleRange _RippleRadius * elapsedTime * _RippleSpeed; if (dist rippleRange) { return tex2D(_MainTex, uv); // 超出范围返回原颜色 } // 计算衰减和波动 float attenuation 1.0 / (1.0 _Damp * dist * elapsedTime); float wave _Amplitude * sin(_Frequency * dist - _RippleSpeed * elapsedTime) * attenuation; // 计算偏移方向从中心指向当前像素的单位向量 float2 dir normalize(uv - center); // 应用偏移到UV float2 distortedUV uv dir * wave; // 采样主纹理即屏幕原图 float4 color tex2D(_MainTex, distortedUV); return color; }实际应用中你需要将其包装在完整的Shader结构体中并定义对应的属性_RippleCenter,_RippleStartTime,_Amplitude等。创建C#控制脚本新建一个C#脚本命名为RippleEffectController.cs。这个脚本需要做以下几件事继承自MonoBehaviour。定义公共变量来控制涟漪参数振幅、频率、速度、衰减系数、最大涟漪数等。维护一个数据结构如ListRippleData来记录所有活跃的涟漪信息中心、开始时间、是否活跃。在Update方法中检测鼠标点击Input.GetMouseButtonDown(0)将点击位置转换为UV坐标并创建新的涟漪数据。提供一个公共方法如StartAutoRipple用于自动生成涟漪可以由其他脚本调用或自己定时调用。最关键的一步将数据传递给着色器。这通常在后处理效果的Render方法中完成。我们需要创建一个继承自PostProcessEffectSettings和PostProcessEffectRendererT的类。但更简单的方式是在我们的RippleEffectController中通过MaterialPropertyBlock或直接修改后处理材质属性的方式将参数数组传递给屏幕后处理使用的材质。由于涉及与后处理框架的深度集成代码较长。其关键环节在于如何将C#脚本中管理的涟漪列表同步到着色器的数组中。通常我们会在每一帧将活跃涟漪的中心、开始时间等数据打包到Vector4数组并通过Material.SetVectorArray方法传递给着色器。4.3 实现自动生成与点击交互逻辑在控制脚本中我们可以这样实现两种触发模式public class RippleEffectController : MonoBehaviour { // ... 其他变量和引用 ... public float autoRippleInterval 2.0f; // 自动生成间隔 public Vector2[] autoRipplePossibleCenters; // 可随机选择的自动涟漪中心UV坐标 void Start() { // 启动自动生成协程 StartCoroutine(AutoGenerateRipple()); } void Update() { // 点击交互生成 if (Input.GetMouseButtonDown(0)) { Vector2 uv ConvertScreenToUV(Input.mousePosition); GenerateRipple(uv); } // 更新着色器参数... } IEnumerator AutoGenerateRipple() { while (true) { yield return new WaitForSeconds(autoRippleInterval); if (autoRipplePossibleCenters.Length 0) { Vector2 randomCenter autoRipplePossibleCenters[Random.Range(0, autoRipplePossibleCenters.Length)]; GenerateRipple(randomCenter); } } } void GenerateRipple(Vector2 centerUV) { // 在涟漪列表中添加一个新条目记录中心点和当前时间 // 如果列表已满可以覆盖最旧的涟漪或忽略新触发 RippleData newRipple new RippleData(); newRipple.center centerUV; newRipple.startTime Time.time; newRipple.isActive true; // ... 添加到管理列表 ... } Vector2 ConvertScreenToUV(Vector3 screenPos) { // 坐标转换逻辑如前文所述 Vector3 viewportPos Camera.main.ScreenToViewportPoint(screenPos); return new Vector2(viewportPos.x, viewportPos.y); } }4.4 参数调节与视觉打磨实现基础功能后大部分时间会花在调节参数上以获得最理想的视觉效果。以下是一些经验性的参数起点和建议参数建议起始值作用与调节方向振幅 (_Amplitude)0.005 - 0.02控制波纹扭曲强度。值太大会导致图像严重变形失真太小则效果不明显。频率 (_Frequency)30.0 - 80.0控制波纹的波峰密度。频率越高波纹看起来越细密。速度 (_RippleSpeed)1.0 - 3.0控制波纹扩散的快慢。速度越快涟漪消失得也越快。衰减系数 (_Damp)5.0 - 20.0控制波纹能量消散的速度。值越大波纹衰减得越快传播距离越短。最大半径 (_MaxRadius)1.5通常设置为大于1的值如1.5确保波纹能扩散到屏幕边缘之外避免在边缘被截断。实操心得参数调节时最好在Game视图下实时调节。可以为这些参数在脚本中暴露[Range(min, max)]特性这样就能在Inspector面板中直接使用滑块调整并立即看到效果变化。不同的应用场景需要不同的参数集比如一个轻柔的提示性涟漪可能用低振幅、高频率而一个强烈的爆炸冲击波效果则需要高振幅、低频率。5. 常见问题、优化与排查技巧实录在实际开发中我遇到了不少坑。这里把典型问题和解决方案记录下来希望能帮你节省时间。5.1 效果不显示或显示异常问题屏幕上什么变化都没有。检查1后处理是否启用确保摄像机上的Post-process Layer组件已启用并且Post-process Volume的Weight大于0Profile已赋值。检查2着色器编译是否成功在Console窗口查看是否有着色器编译错误。确保Shader代码语法正确尤其是属性名称与脚本中设置的要完全一致大小写敏感。检查3效果材质是否绑定确认你创建的后处理效果材质Material是否正确应用到了Volume的Profile中。问题涟漪扭曲方向反了或者扭曲中心不对。检查1UV坐标原点。确认你在脚本中将屏幕坐标转换为UV坐标时与着色器中预期的UV原点通常是左下角是否一致。可以尝试在着色器中输出uv值到颜色进行调试。检查2偏移方向计算。检查着色器中dir normalize(uv - center)这一行。如果效果是向内收缩而非向外扩散可以尝试将方向反转为dir normalize(center - uv)。问题涟漪边缘有硬边或锯齿。解决方案这通常是因为在着色器中对dist rippleRange进行了硬性裁剪。一个更柔和的方式是使用平滑步进函数smoothstep来混合原始像素和扭曲像素在涟漪边界创建一个平滑过渡。float influence smoothstep(rippleRange, rippleRange - _Softness, dist); // 然后使用 influence 来混合颜色 float4 originalColor tex2D(_MainTex, uv); float4 distortedColor tex2D(_MainTex, distortedUV); return lerp(originalColor, distortedColor, influence);5.2 性能优化要点屏幕后处理是全屏操作对移动端或低端PC需要特别注意性能。降低渲染分辨率Render Scale在后处理层的设置中可以尝试将渲染分辨率比例降低如0.75在高分辨率屏幕上能以较小的画质损失换取显著的性能提升。涟漪效果本身具有一定模糊性对分辨率下降不敏感。限制最大涟漪数量如前所述严格限制着色器中同时计算的涟漪数量。4个通常足以满足大多数场景。在脚本中实现一个优先级队列当新涟漪触发而槽位已满时覆盖生命周期最短或最旧的涟漪。简化着色器计算避免在片段着色器中使用复杂的数学函数如pow,sin等过多。我们的波动方程本身就需要sin这是核心难以避免。但要确保其他计算尽可能简单。考虑使用近似函数或查找表LUT但这会牺牲一些灵活性。基于距离的提前剔除在着色器中先计算像素到所有涟漪中心的距离如果距离任何一个中心都非常远例如大于某个阈值可以直接返回原色跳过后续复杂计算。这需要对着色器进行更精细的分支优化在某些GPU架构上可能收益不明显需要实测。5.3 进阶扩展思路当基础效果稳定后可以考虑以下扩展让效果更出彩纹理扰动不仅仅是偏移UV还可以采样一张噪声纹理Noise Texture让波纹的振幅或频率产生随机扰动模拟更自然的水面。颜色影响让涟漪不仅扭曲图像还能改变颜色。例如在波纹处叠加一层淡蓝色调或根据波纹强度提高亮度。与场景深度交互在后处理中获取深度纹理Depth Texture让涟漪的强度或传播速度受到场景深度的影响。例如在远处深度值大的物体上涟漪效果减弱或消失增强立体感。多摄像机支持如果你的游戏有画中画、双人分屏等需求需要确保涟漪效果能正确作用于指定的摄像机并且坐标转换逻辑能适应不同摄像机的视口。实现这个屏幕涟漪效果的过程是一次对Unity渲染管线、着色器编程和交互逻辑的综合性练习。它不像实现一个复杂的角色控制器那样有众多的状态机但其涉及到的从CPU逻辑到GPU渲染的完整数据流以及对数学公式的直观应用让我对实时图形渲染有了更深的理解。最让我有成就感的时刻是第一次点击屏幕看到涟漪从指尖荡漾开来的瞬间——那种将代码与视觉美感直接连接的感觉正是游戏开发吸引人的地方之一。如果你在复现过程中遇到任何问题不妨回头仔细检查坐标转换和着色器参数传递这两个环节它们往往是问题的根源。 Unity屏幕涟漪效果：基于后处理与Shader的交互视觉实现
1. 项目概述从“水波荡漾”到屏幕交互的魔法最近在做一个需要增强视觉沉浸感的项目琢磨着怎么让静态的界面“活”起来。一个偶然的灵感让我想起了石子投入水面泛起的涟漪——那种由中心扩散开来的动态波纹既有美感又能清晰地指示交互焦点。于是我决定在Unity里实现一个屏幕涟漪效果。这个效果的核心目标很明确不仅要能通过代码自动触发模拟环境中的动态事件比如角色技能释放、能量波动更要能响应用户的点击或触摸让每一次交互都有直观、优雅的视觉反馈。你可能会在不少精致的独立游戏或应用启动动画中见过类似效果它不属于游戏世界内的3D物体而是覆盖在整个屏幕2D空间上的全屏后处理特效。实现它的技术栈并不复杂核心在于片段着色器Fragment Shader与后处理Post-Processing的配合。通过着色器实时计算每个像素点到“涟漪中心”的距离并依据一个随时间变化的波动函数来偏移其UV坐标或颜色就能模拟出波纹扩散的视觉效果。而交互逻辑则通过将屏幕坐标如鼠标点击位置传递给着色器参数来实现。无论你是想为你的游戏菜单增加一点灵动的反馈还是为你的数字孪生可视化项目添加一个数据波动的指示器亦或是单纯对Unity Shader和后处理技术感兴趣这篇内容都将带你从原理到实践完整走通一遍。我会分享我实际开发中采用的方案、遇到的坑以及优化技巧确保你能直接复现一个高性能、可定制的屏幕涟漪效果。2. 核心思路与方案选型为什么是后处理与Shader在动手写代码之前我们需要明确几个关键的设计决策。实现屏幕特效通常有几种路径基于UI系统、基于摄像机渲染纹理Render Texture的后处理或者直接修改场景中物体的材质。对于“覆盖全屏、与场景内容融合”的涟漪效果后处理方案是唯一自然且高效的选择。2.1 为何摒弃UI方案与物体材质方案首先考虑使用UGUI或NGUI的Image组件配合序列帧动画或Mesh变形来模拟涟漪。这种方法乍看简单但存在致命缺陷难以与复杂的3D场景完美融合。UI渲染在Overlay层始终在最上层会遮挡场景也无法根据场景深度产生正确的遮挡关系。其次要实现从屏幕任意点触发并扩散到边缘的效果需要动态生成或移动UI元素性能开销大且效果生硬。其次考虑给场景中一个覆盖全屏的Quad附加特殊材质。这比UI方案稍好因为它可以通过调整Quad的渲染队列与场景混合。但问题在于管理繁琐需要确保这个Quad始终对准摄像机且大小合适在多摄像机、分屏等复杂场景下容易出错。而且其效果仍然是基于一个“物体”而非对最终渲染图像的“处理”。2.2 后处理方案的绝对优势后处理顾名思义是在摄像机完成所有场景渲染之后对最终生成的图像一张纹理再进行一次处理。Unity提供了成熟的后处理堆栈Post Processing Stack, v2来管理这些效果。对于涟漪效果其优势是压倒性的全屏覆盖天然作用于整个渲染画面无需担心对齐或覆盖问题。与场景深度融合处理的是包含所有3D物体、UI如果UI渲染在摄像机下的最终图像视觉效果最统一。性能可控后处理着色器通常只执行一次全屏绘制其性能消耗主要取决于着色器本身的复杂度和屏幕分辨率相比动态生成大量UI元素更加可控和高效。标准化管线支持无论是内置渲染管线、URPUniversal Render Pipeline还是HDRPHigh Definition Render Pipeline都有对应的后处理框架方案迁移性较好。因此我们的技术路线确定为编写一个自定义的后处理着色器Shader来实现涟漪算法然后将其封装成一个后处理效果组件如MonoBehaviour脚本并集成到Unity的后处理框架中。脚本负责逻辑控制如触发涟漪、传递参数着色器负责视觉渲染。2.3 自动生成与点击交互的触发机制设计根据标题要求效果需要支持两种触发模式自动生成通常用于游戏内的周期性事件或环境效果。例如角色周期性释放光环、场景中有节奏的能量脉冲。这可以通过在控制脚本中使用InvokeRepeating或协程Coroutine定时调用触发函数来实现。点击交互生成响应用户输入。这需要我们在脚本中监听鼠标点击或触摸事件将屏幕坐标如Input.mousePosition转换为可用于着色器的规范化坐标通常是0到1的范围然后触发涟漪。两种模式的核心是统一的向着色器传递一个或多个“涟漪中心点”的坐标、涟漪开始的时间以及控制波纹形状的参数。着色器根据当前时间与涟漪开始时间的差值计算波纹的扩散状态。3. 核心细节解析涟漪着色器的数学原理一切炫酷效果的背后都是朴素的数学。屏幕涟漪效果的灵魂在于片段着色器中的一个函数它决定了像素如何根据其到涟漪中心的距离发生“扭曲”。3.1 波动方程与距离计算我们模拟的是水波经典的简化模型是使用正弦波Sine Wave或衰减的正弦波。对于屏幕上的一个像素点其受涟漪影响的强度基本遵循这个公式偏移量 振幅 * sin(频率 * 距离 - 速度 * 时间) * 衰减因子我们来拆解每个参数距离Distance当前像素的UV坐标与涟漪中心点UV坐标的直线距离。这是计算的基础。时间Time从该涟漪产生开始所经过的时间。_Time.y是Unity着色器中自游戏开始的总时间我们需要传入一个涟漪的“开始时间”然后用当前时间减去它得到“经过时间”。振幅Amplitude决定波纹扭曲的强度即像素偏移的最大距离。频率Frequency决定波纹的密度频率越高波纹越密集。速度Speed决定波纹扩散的快慢。衰减因子Attenuation通常是一个关于距离和时间的函数确保波纹在扩散过程中振幅逐渐减小直至消失。例如衰减因子 1.0 / (1.0 衰减系数 * 距离 * 经过时间)。在着色器中我们不会真的移动像素而是通过偏移这个像素采样纹理时使用的UV坐标来模拟扭曲。例如原本应该采样(u, v)点的颜色现在我们采样(u offsetX, v offsetY)点的颜色。offsetX和offsetY可以由上面的公式结合像素点到中心的方向向量计算得出。3.2 多涟漪叠加与性能考量一个更真实、更富表现力的效果往往需要支持多个涟漪同时存在。例如用户快速连续点击或者自动生成与点击涟漪共存。这意味着着色器需要维护一个涟漪参数列表中心、开始时间等。在Shader中我们可以使用数组来存储这些参数。但需要注意Shader中对数组的长度和循环次数有约束尤其在移动平台不宜过长。一个实用的技巧是设定一个最大涟漪数量如4个或8个并使用一个循环来累加所有活跃涟漪对该像素的影响。在C#脚本中我们需要管理这个列表当新涟漪产生时填入一个空闲槽位当涟漪生命周期结束后回收槽位。注意在片段着色器中使用循环是性能敏感操作。务必限制最大数量并考虑在低端设备上减少最大同时存在的涟漪数。另一种更高效的方案是使用Render Texture来存储“涟漪图”但实现更复杂对于少量涟漪数组方案更简单直接。3.3 坐标空间的转换从屏幕到UV这是实现点击交互的关键一步也是最容易出错的地方。用户在屏幕上点击的坐标Input.mousePosition是以像素为单位的屏幕空间坐标原点在左下角。而着色器中的UV坐标范围是[0, 1]原点通常在左下角或左上角取决于API在Unity中通常视为左下角为(0,0)。因此传递坐标给着色器前必须转换Vector3 mousePos Input.mousePosition; // 将屏幕像素坐标转换为视口坐标 (0到1的范围) Vector3 viewportPos Camera.main.ScreenToViewportPoint(mousePos); // 视口坐标的x和y分量就是我们要的UV坐标。注意ScreenToViewportPoint可能会受到摄像机视口矩形Viewport Rect影响对于全屏主摄像机通常没问题。 Vector2 rippleCenterUV new Vector2(viewportPos.x, viewportPos.y);确保你传递给着色器的rippleCenterUV在[0,1]范围内。有时点击屏幕边缘可能得到略微超出此范围的值需要在着色器中进行钳制clamp或是在脚本中处理。4. 实操过程一步步构建屏幕涟漪效果理论说得差不多了我们开始动手。这里我以Unity内置渲染管线Built-in RP配合Post Processing Stack v2为例进行说明。URP的实现思路类似但挂载脚本和设置略有不同。4.1 环境准备与后处理堆栈设置创建项目与导入资源新建一个Unity项目3D或2D均可。通过Package Manager或Asset Store导入Post Processing包Unity 2018及以上版本已集成在Package Manager中。配置后处理图层在Main Camera上添加Post-process Volume组件。创建一个新的Profile或使用默认的并将其赋值给该组件。确保Layer设置正确例如新建一个PostProcessing层并将摄像机所在GameObject的Layer设为该层同时在Volume组件中指定该层。启用摄像机效果同样在Main Camera上添加Post-process Layer组件并设置其Layer为刚才创建的PostProcessing层。4.2 编写自定义后处理着色器与效果脚本创建着色器在Project窗口中右键Create Shader Post Processing。将其命名为RippleEffect.shader。打开该文件我们需要编写核心算法。以下是简化版的核心片段着色器代码展示了单涟漪的计算// 在片段着色器函数中 float4 Frag(VaryingsDefault i) : SV_Target { float2 uv i.texcoordStereo; // 当前像素的UV float2 center _RippleCenter; // 从脚本传入的涟漪中心(UV空间) float elapsedTime _Time.y - _RippleStartTime; // 涟漪已持续时间 float dist distance(uv, center); // 计算波纹影响范围只影响一定距离内的像素 float rippleRange _RippleRadius * elapsedTime * _RippleSpeed; if (dist rippleRange) { return tex2D(_MainTex, uv); // 超出范围返回原颜色 } // 计算衰减和波动 float attenuation 1.0 / (1.0 _Damp * dist * elapsedTime); float wave _Amplitude * sin(_Frequency * dist - _RippleSpeed * elapsedTime) * attenuation; // 计算偏移方向从中心指向当前像素的单位向量 float2 dir normalize(uv - center); // 应用偏移到UV float2 distortedUV uv dir * wave; // 采样主纹理即屏幕原图 float4 color tex2D(_MainTex, distortedUV); return color; }实际应用中你需要将其包装在完整的Shader结构体中并定义对应的属性_RippleCenter,_RippleStartTime,_Amplitude等。创建C#控制脚本新建一个C#脚本命名为RippleEffectController.cs。这个脚本需要做以下几件事继承自MonoBehaviour。定义公共变量来控制涟漪参数振幅、频率、速度、衰减系数、最大涟漪数等。维护一个数据结构如ListRippleData来记录所有活跃的涟漪信息中心、开始时间、是否活跃。在Update方法中检测鼠标点击Input.GetMouseButtonDown(0)将点击位置转换为UV坐标并创建新的涟漪数据。提供一个公共方法如StartAutoRipple用于自动生成涟漪可以由其他脚本调用或自己定时调用。最关键的一步将数据传递给着色器。这通常在后处理效果的Render方法中完成。我们需要创建一个继承自PostProcessEffectSettings和PostProcessEffectRendererT的类。但更简单的方式是在我们的RippleEffectController中通过MaterialPropertyBlock或直接修改后处理材质属性的方式将参数数组传递给屏幕后处理使用的材质。由于涉及与后处理框架的深度集成代码较长。其关键环节在于如何将C#脚本中管理的涟漪列表同步到着色器的数组中。通常我们会在每一帧将活跃涟漪的中心、开始时间等数据打包到Vector4数组并通过Material.SetVectorArray方法传递给着色器。4.3 实现自动生成与点击交互逻辑在控制脚本中我们可以这样实现两种触发模式public class RippleEffectController : MonoBehaviour { // ... 其他变量和引用 ... public float autoRippleInterval 2.0f; // 自动生成间隔 public Vector2[] autoRipplePossibleCenters; // 可随机选择的自动涟漪中心UV坐标 void Start() { // 启动自动生成协程 StartCoroutine(AutoGenerateRipple()); } void Update() { // 点击交互生成 if (Input.GetMouseButtonDown(0)) { Vector2 uv ConvertScreenToUV(Input.mousePosition); GenerateRipple(uv); } // 更新着色器参数... } IEnumerator AutoGenerateRipple() { while (true) { yield return new WaitForSeconds(autoRippleInterval); if (autoRipplePossibleCenters.Length 0) { Vector2 randomCenter autoRipplePossibleCenters[Random.Range(0, autoRipplePossibleCenters.Length)]; GenerateRipple(randomCenter); } } } void GenerateRipple(Vector2 centerUV) { // 在涟漪列表中添加一个新条目记录中心点和当前时间 // 如果列表已满可以覆盖最旧的涟漪或忽略新触发 RippleData newRipple new RippleData(); newRipple.center centerUV; newRipple.startTime Time.time; newRipple.isActive true; // ... 添加到管理列表 ... } Vector2 ConvertScreenToUV(Vector3 screenPos) { // 坐标转换逻辑如前文所述 Vector3 viewportPos Camera.main.ScreenToViewportPoint(screenPos); return new Vector2(viewportPos.x, viewportPos.y); } }4.4 参数调节与视觉打磨实现基础功能后大部分时间会花在调节参数上以获得最理想的视觉效果。以下是一些经验性的参数起点和建议参数建议起始值作用与调节方向振幅 (_Amplitude)0.005 - 0.02控制波纹扭曲强度。值太大会导致图像严重变形失真太小则效果不明显。频率 (_Frequency)30.0 - 80.0控制波纹的波峰密度。频率越高波纹看起来越细密。速度 (_RippleSpeed)1.0 - 3.0控制波纹扩散的快慢。速度越快涟漪消失得也越快。衰减系数 (_Damp)5.0 - 20.0控制波纹能量消散的速度。值越大波纹衰减得越快传播距离越短。最大半径 (_MaxRadius)1.5通常设置为大于1的值如1.5确保波纹能扩散到屏幕边缘之外避免在边缘被截断。实操心得参数调节时最好在Game视图下实时调节。可以为这些参数在脚本中暴露[Range(min, max)]特性这样就能在Inspector面板中直接使用滑块调整并立即看到效果变化。不同的应用场景需要不同的参数集比如一个轻柔的提示性涟漪可能用低振幅、高频率而一个强烈的爆炸冲击波效果则需要高振幅、低频率。5. 常见问题、优化与排查技巧实录在实际开发中我遇到了不少坑。这里把典型问题和解决方案记录下来希望能帮你节省时间。5.1 效果不显示或显示异常问题屏幕上什么变化都没有。检查1后处理是否启用确保摄像机上的Post-process Layer组件已启用并且Post-process Volume的Weight大于0Profile已赋值。检查2着色器编译是否成功在Console窗口查看是否有着色器编译错误。确保Shader代码语法正确尤其是属性名称与脚本中设置的要完全一致大小写敏感。检查3效果材质是否绑定确认你创建的后处理效果材质Material是否正确应用到了Volume的Profile中。问题涟漪扭曲方向反了或者扭曲中心不对。检查1UV坐标原点。确认你在脚本中将屏幕坐标转换为UV坐标时与着色器中预期的UV原点通常是左下角是否一致。可以尝试在着色器中输出uv值到颜色进行调试。检查2偏移方向计算。检查着色器中dir normalize(uv - center)这一行。如果效果是向内收缩而非向外扩散可以尝试将方向反转为dir normalize(center - uv)。问题涟漪边缘有硬边或锯齿。解决方案这通常是因为在着色器中对dist rippleRange进行了硬性裁剪。一个更柔和的方式是使用平滑步进函数smoothstep来混合原始像素和扭曲像素在涟漪边界创建一个平滑过渡。float influence smoothstep(rippleRange, rippleRange - _Softness, dist); // 然后使用 influence 来混合颜色 float4 originalColor tex2D(_MainTex, uv); float4 distortedColor tex2D(_MainTex, distortedUV); return lerp(originalColor, distortedColor, influence);5.2 性能优化要点屏幕后处理是全屏操作对移动端或低端PC需要特别注意性能。降低渲染分辨率Render Scale在后处理层的设置中可以尝试将渲染分辨率比例降低如0.75在高分辨率屏幕上能以较小的画质损失换取显著的性能提升。涟漪效果本身具有一定模糊性对分辨率下降不敏感。限制最大涟漪数量如前所述严格限制着色器中同时计算的涟漪数量。4个通常足以满足大多数场景。在脚本中实现一个优先级队列当新涟漪触发而槽位已满时覆盖生命周期最短或最旧的涟漪。简化着色器计算避免在片段着色器中使用复杂的数学函数如pow,sin等过多。我们的波动方程本身就需要sin这是核心难以避免。但要确保其他计算尽可能简单。考虑使用近似函数或查找表LUT但这会牺牲一些灵活性。基于距离的提前剔除在着色器中先计算像素到所有涟漪中心的距离如果距离任何一个中心都非常远例如大于某个阈值可以直接返回原色跳过后续复杂计算。这需要对着色器进行更精细的分支优化在某些GPU架构上可能收益不明显需要实测。5.3 进阶扩展思路当基础效果稳定后可以考虑以下扩展让效果更出彩纹理扰动不仅仅是偏移UV还可以采样一张噪声纹理Noise Texture让波纹的振幅或频率产生随机扰动模拟更自然的水面。颜色影响让涟漪不仅扭曲图像还能改变颜色。例如在波纹处叠加一层淡蓝色调或根据波纹强度提高亮度。与场景深度交互在后处理中获取深度纹理Depth Texture让涟漪的强度或传播速度受到场景深度的影响。例如在远处深度值大的物体上涟漪效果减弱或消失增强立体感。多摄像机支持如果你的游戏有画中画、双人分屏等需求需要确保涟漪效果能正确作用于指定的摄像机并且坐标转换逻辑能适应不同摄像机的视口。实现这个屏幕涟漪效果的过程是一次对Unity渲染管线、着色器编程和交互逻辑的综合性练习。它不像实现一个复杂的角色控制器那样有众多的状态机但其涉及到的从CPU逻辑到GPU渲染的完整数据流以及对数学公式的直观应用让我对实时图形渲染有了更深的理解。最让我有成就感的时刻是第一次点击屏幕看到涟漪从指尖荡漾开来的瞬间——那种将代码与视觉美感直接连接的感觉正是游戏开发吸引人的地方之一。如果你在复现过程中遇到任何问题不妨回头仔细检查坐标转换和着色器参数传递这两个环节它们往往是问题的根源。