Shader: simple cartoon water based on camera depth

When I was painting YouTube, I accidentally saw the implementation of a cartoon water. The original Shader was made by hand, but I used Unity ShaderGraph to reproduce it.

principle

• The scene depth of the opaque queue is obtained through the Camera depth map, and the difference between the scene depth and the depth of the water surface element is used as the basis for water depth
• Render waves through noise map, and realize wave animation through UV perturbation

realization

1. Obtain the "depth" of water

It should be noted that the "depth" here should be quoted in quotation marks, because this is the depth difference of the camera perspective, which will change with the perspective, not the real depth.

Now you can output Depth to Color to view the numerical status:

2. Water color interpolation

According to the "Depth" above, interpolate and color the water, and use the maximum depth threshold as the color limit:

effect:

3. Spray spots

The spray spots are formed by noise mapping, and the "area" of the spray is limited by the threshold value.

The built-in noise map generated here is only for debugging, and it will be replaced by an external fixed noise map in the subsequent animation steps.

Through reasonable numerical adjustment, the following effects can be achieved:

4. Edge spray

Judge whether it is the shore edge or the boundary edge of objects through the "depth" threshold, and display the spray as appropriate:

Reasonably set relevant parameters, such as:

effect:

5. Spray animation

To perform UV disturbance sampling, first replace the noise map with an external fixed noise map:

Then, the time perturbation UV is superimposed on the wave noise image to realize the spray animation:

Effects (GIF):

6. Large edge difference

Due to different depth values, the edge spray of suspended objects in water is quite different from the shore spray. Control the width by dot multiplying the scene normal and the water sheet element normal to make the spray as consistent as possible.

First, you need to ensure whether the scene normal camera texture rendering is enabled in the URP rendering process (for example, when the RenderFeature declares that it needs normals, it will render normals). If it is not enabled, you can customize a RenderFeature that needs Normal (or use a lazy method to open AO, because it is a RenderFeature that needs Normal).

To ensure that CameraNormalTexture is OK, you can use ScreenPos to sample and output to the chip as a color:

Normal is OK, continue to check:

effect:

7. Others

The original author also made translucent alpha blend, wave edge smoothing and other processing. Because the related content is too simple, it is omitted.

Advantages and disadvantages

1. advantage
   1. There is no need to change the rendering queue and camera. Left and right eye switching is automatically handled by the URP pipeline, which is suitable for VR;
   2. If the depth map and normal map have been generated, the water surface will only be sampled twice on this basis, which is relatively light
2. shortcoming
   1. Using the depth map and normal map of the main camera of URP pipeline, the depth will change with the camera position, which will lead to the change of water color
   2. In some extreme cases, the spray of floating objects in the water is incorrect

Disadvantages 2.2 Analysis

The following figure is an example. When the camera is completely perpendicular to the floating object, the depth value here is Water surface terrain instead of Water surface - object Therefore, there is no spray around the object:

For a simple shader, this phenomenon is harmless.

References

• [Roystan] Toon Water Shader