top of page
Stylized Pool Water Shader

Unity Shaderlab/HLSL/CG

Overview

This is the practice of a water shader trying to achieve the variety of water flowing in different directions within a pool. The shader should be art-directable. Artists using this shader should be able to adjust color, water flowing speed, opacity, noise tilling/offset, and noise intensity. 

Texture Source: Stylized Water Texture

Packing Texture Maps

The idea is to pack the normal map and noise map together. Where the R and G have the u and v of the normal, and the noise texture goes to the B channel.

Properties Panel & Tags

the panel is divided into two parts: texture and water settings. The texture part allows the artist to have 1 water texture and 2 different noise textures. Here I use two identical noise texture maps while making different tilling sizes to achieve noise variety.  The water settings allow adjustments on opacity, warp intensity, noise intensity, and two different flow speed (both negative and positive). Since I am working with transparency, I switch the render queue and render type to transparent, and turn on No Shadow Casting and Ignore Projector. Also, I use the One One Minus Source Alpha as my blending option.

bandicam 2022-05-24 21-04-55-889.jpg
bandicam 2022-05-24 21-07-34-711.jpg
bandicam 2022-05-24 21-34-40-950.jpg
UV Distortion and Pannering

One of the key things is to let the UV distort up and down and also move along with time. In order to make the UV move, here I use fraction, using the lowest value of the Unity time sampling vector, and multiply it with the flow speed 1and flow speed 2 given in the properties panel. 

bandicam 2022-05-24 21-10-41-669.jpg
bandicam 2022-05-24 21-14-48-817.jpg

Another important step, in order to make the UV move up and down, is to remap the UV. In the fragment shader part, I do the remapping and also linear interpolation, making the noise map affecting the opacity and UV distortion.

Art Directable Result

These videos showcase how the shader allows adjustments on color, opacity, noise, flow speed/directions, and texture tilling/offsets

bottom of page