前端设计除了做网站还能做什么佛山 顺德营销型网站设计

1 前言

        水波特效 中通过屏幕后处理实现了环形水波效果，本文通过 Shader Graph 实现了模拟水面特效，包含以下特效细节。

• 深水区和浅水区颜色差异；
• 水面有波纹，并且在移动；
• 水面起伏波动；
• 水面边缘有水泡；
• 水中物体因折射而扭动。

        本文完整资源详见→Unity3D水面特效。

2 水面特效实现

        由于本文需要使用 Scene Color 节点的颜色缓冲区信息模拟水面折射现象，而 Scene Color 节点只能在 URP 或 HDRP 管线下才能正常工作（详见→Shader Graph节点），因此本文选择在 URP 管线下实现模拟水面特效。

2.1 场景搭建及环境配置

        1）场景搭建

        在 URP 项目中搭建场景如下。

        说明：水面模型是一个长方形，并且网格不能太稀疏，否则对顶点的上下波动将不太自然。

        2）配置 Universal Render Pipeline Asset

        由于实验中使用了 Scene Depth 和 Scene Color 节点获取深度缓冲区和颜色缓冲区信息，需要在 Universal Render Pipeline Asset 中勾选 Depth Texture 和 Opaque Texture，如下。

        3）主图配置

        由于水面是透明的，需要在主图的 Graph Settings 中将 Surface Type 属性设置 Transparent，并且取消勾选 Cast Shadows（投射阴影）和 Receive Shadows（接受阴影）如下。

2.2  水面 Shader Graph

        1）主图

        Water.shadergraph

        WaterDepth、FinalWaterColor、WaterNormal、WaterPosition 都是自定义节点，释义如下，Smoothness 用于调整水面光滑度。

• WaterDepth 节点：水面到水底的深度计算；
• FinalWaterColor 节点：水面最终的颜色（混合深浅水颜色、泡沫颜色、背景折射颜色）；
• WaterNormal 节点：水面法线；
• WaterPosition 节点：水面坐标。

        2）WaterDepth 子图

        WaterDepth.shadersubgraph

        说明：WaterDepth 子图用于计算水面深度；Scene Depth 节点用于获取不透明物体的深度值（水底深度），Screen Position 节点输出的 w 分量是水面的深度，两者相减就是水面到水底的深度值。SubtractDepth、DepthStrength 释义如下。

• SubtractDepth：深度减去的参数，其值越大浅水区越大；
• DepthStrength：深度加强的参数，其值越大浅水区越小。

        如果将 Water Depth 子图的输出直接连到主图片元着色器的 Base Color 上，显示效果如下。从图中可以看到，Water Depth 节点能够较好得识别物体的边缘。

        3）FinalWaterColor 子图

        FinalWaterColor.shadersubgraph

        说明：FinalWarterColor 子图用于计算水面最终的颜色（混合深浅水颜色、泡沫颜色、背景折射颜色），WaterColor 节点用于计算水面颜色（混合深浅水颜色、泡沫颜色），WaterRefraction 节点用于计算背景折射颜色。

        4）WaterColor 子图

        WaterColor.shadersubgraph

        说明：WaterColor 子图用于计算水面颜色（混合深浅水颜色、泡沫颜色），BubbleColor 节点用于计算泡沫颜色，ShallowColor、DeepColor、WaterDepth 的释义如下。

• ShallowColor：浅水区的颜色；
• DeepColor：深水区的颜色；
• WaterDepth：水面到水底的深度，用于混合深水区和浅水区的颜色。

        5）BubbleColor 子图

        BubbleColor.shadersubgraph

        说明：BubbleColor 子图用于计算泡沫颜色，BubbleSpeed、BubbleDensity、BubbleFilter1、BubbleFilter2、BubbleBrightness、WaterDepth 的释义如下。

• BubbleSpeed：水泡移动的速度；
• BubbleDensity：水泡的密度，其值越大水泡越小且越密集；
• BubbleFilter1：水泡过滤参数，其值越大，水泡越稀疏；
• BubbleFilter2：水泡过滤参数，其值越大，水泡越稀疏；
• BubbleBrightness：水泡亮度；
• WaterDepth：水面到水底的深度，用于过滤气泡，只有浅水区才有气泡。

        6）WaterNormal 子图

        WaterNormal.shadersubgraph

        说明：WaterNormal 子图用于计算水面法线，NormalStrength、WaterDepth 的释义如下。

• NormalStrength：法线最大强度；
• WaterDepth：水面到水底的深度，用于调整法线强度，深水区波纹较深，浅水区波纹较浅。

        7）WaterPosition 子图

        WaterPosition.shadersubgraph

        说明：WaterPosition 子图用于模拟水面起伏效果，通过调整顶点坐标的 y 分量实现，WaveHeight 用于调整水面起伏的最大高度。由于 WaterPosition 子图的输出连在顶点着色器上，而 WaterDepth 是在片元着色器中计算的，因此不能使用 WaterDepth 对 WaveHeight 进行混合（即深水区水面起伏大，浅水区水面起伏小）。

        8）WaterRefraction 子图

        WaterRefraction.shadersubgraph

        说明：WaterRefraction 子图用于计算背景折射颜色，RefractionStrength 用于调整折射偏移强度，Screen Position 节点用于获取屏幕顶点的 uv 坐标，Scene Color 节点用于获取颜色缓冲区纹理（仅在 URP 或 HDRP 管线下才能正常工作），详见→Shader Graph节点。

2.3 运行效果