[Unity3D] water surface effects

1 Introduction

In the water wave effect , the circular water wave effect is realized through screen post-processing. This article realizes the simulated water surface special effect through Shader Graph, including the following special effect details.

Color difference between deep water area and shallow water area;
The surface of the water is rippling and moving;
water undulations;
Bubbles at the edge of the water surface;
Objects in water twist due to refraction.

For the complete resources of this article, see → Unity3D water surface effects .

2 Realization of water surface effects

Since this article needs to use the color buffer information of the Scene Color node to simulate the water surface refraction phenomenon, and the Scene Color node can only work normally under the URP or HDRP pipeline (see → Shader Graph node for details), so this article chooses to implement the simulation under the URP pipeline Water effects.

2.1 Scene construction and environment configuration

1) Scene construction

Build the scene in the URP project as follows.

Explanation: The water surface model is a rectangle, and the grid should not be too sparse, otherwise the up and down fluctuations of the vertices will be unnatural.

2) Deployment Universal Render Pipeline Asset

Since the Scene Depth and Scene Color nodes are used in the experiment to obtain depth buffer and color buffer information, it is necessary to check Depth Texture and Opaque Texture in Universal Render Pipeline Asset, as follows.

3) Main image configuration

Since the water surface is transparent, you need to set the Surface Type property to Transparent in the Graph Settings of the main image, and uncheck Cast Shadows (cast shadows) and Receive Shadows (accept shadows) as follows.

2.2 Surface Shader Graph

1) Main image

Water.shadergraph

WaterDepth, FinalWaterColor, WaterNormal, and WaterPosition are all custom nodes. The definitions are as follows. Smoothness is used to adjust the smoothness of the water surface.

WaterDepth node: calculate the depth from the water surface to the bottom;
FinalWaterColor node: the final color of the water surface (mixed deep and shallow water color, foam color, background refraction color);
WaterNormal node: water surface normal;
WaterPosition node: water surface coordinates.

2) WaterDepth subgraph

WaterDepth.shadersubgraph

Description: The WaterDepth subgraph is used to calculate the depth of the water surface; the Scene Depth node is used to obtain the depth value of the opaque object (bottom depth), and the w component output by the Screen Position node is the depth of the water surface, and the subtraction of the two is the depth value from the water surface to the bottom . The definitions of SubtractDepth and DepthStrength are as follows.

SubtractDepth: The parameter of depth subtraction, the larger the value, the larger the shallow water area;
DepthStrength: The parameter of depth enhancement, the larger the value, the smaller the shallow water area.

If the output of the Water Depth submap is directly connected to the Base Color of the main image element shader, the display effect is as follows. As can be seen from the figure, the Water Depth node can better identify the edge of the object.

3) FinalWaterColor subplot

FinalWaterColor.shadersubgraph

Description: The FinalWarterColor subgraph is used to calculate the final color of the water surface (mixed deep and shallow water color, foam color, background refraction color), the WaterColor node is used to calculate the water surface color (mixed dark and shallow water color, foam color), and the WaterRefraction node is used to calculate the background refraction color.

4) WaterColor subplot

WaterColor.shadersubgraph

Explanation: The WaterColor subgraph is used to calculate the water surface color (mixing deep and shallow water colors, foam colors), and the BubbleColor node is used to calculate the bubble color. The definitions of ShallowColor, DeepColor, and WaterDepth are as follows.

ShallowColor: the color of the shallow water area;
DeepColor: the color of the deep water area;
WaterDepth: The depth from the water surface to the bottom of the water, used to mix the color of the deep water area and the shallow water area.

5) BubbleColor subplot

BubbleColor.shadersubgraph

Explanation: The BubbleColor submap is used to calculate the bubble color, and the definitions of BubbleSpeed, BubbleDensity, BubbleFilter1, BubbleFilter2, BubbleBrightness, and WaterDepth are as follows.

BubbleSpeed: the speed at which the bubble moves;
BubbleDensity: The density of the bubbles, the larger the value, the smaller and denser the bubbles;
BubbleFilter1: Bubble filter parameter, the larger the value, the sparser the bubbles;
BubbleFilter2: Bubble filter parameter, the larger the value, the sparser the bubbles;
BubbleBrightness: Bubble brightness;
WaterDepth: The depth from the water surface to the bottom, used to filter bubbles, only shallow water has bubbles.

6) WaterNormal subgraph

WaterNormal.shadersubgraph

Description: The WaterNormal submap is used to calculate the water surface normal, and the definitions of NormalStrength and WaterDepth are as follows.

NormalStrength: normal maximum strength;
WaterDepth: The depth from the water surface to the bottom, used to adjust the normal strength, the ripples in deep water areas are deeper, and the ripples in shallow water areas are shallower.

7) WaterPosition subgraph

WaterPosition.shadersubgraph

Explanation: The WaterPosition subgraph is used to simulate the effect of water surface undulation, which is realized by adjusting the y component of the vertex coordinates, and WaveHeight is used to adjust the maximum height of the water surface undulation. Since the output of the WaterPosition subgraph is connected to the vertex shader, and WaterDepth is calculated in the fragment shader, it is not possible to use WaterDepth to mix WaveHeight (that is, the water surface in deep water has large fluctuations, and the water surface in shallow water has small fluctuations).

8) WaterRefraction subgraph

WaterRefraction.shadersubgraph

Description: The WaterRefraction subgraph is used to calculate the background refraction color, RefractionStrength is used to adjust the refraction offset strength, the Screen Position node is used to obtain the uv coordinates of the screen vertices, and the Scene Color node is used to obtain the color buffer texture (only in URP or HDRP pipeline can work normally), see → Shader Graph node for details .