STYLISED WATER SHADER
Due to our project being pirate themed we knew we wanted water in it. As the VFX/Technical Artist I took it up to create a complex water shader
Water Shader Preview
This water shader is one of the main sections of our level. Due to the playable area is an island, I must insure that no matter in what direction you look the water looks good and outstanding to keep players immersion. This shader features things like Gerstner Waves, Distance Fields Foam, Foam on waves peaks, Buoyancy, Single Layer Water Node and micro detail Normals.
Gerstner Function
Gerstner Function
Implementing Gerstner Function
Random Seed Generator
Starting off the most important part of the shader is creating the Gerstner function. To create this I used NVidias breakdown of Gerstner function, it was extremely helpful and informative because I was going in blind and had no idea what to do. To implement the Gerstner function I have duplicated the function 6 times and plugged in the required parameters like Wave length, Wave Amplitude, Wave Steepness, Direction of Waves and Wave Speed. 6 waves helped me to break up repetition and make it less predictable and more cohesive. Also I have created a function for a random seed generator which I used to quickly randomise numbers to get a completely randomised ocean system, this also helped me speed up the testing process. I also had access to individual wave controls incase I wanted to fine tune anything.
Foam and Distance Fields
Foam Shader Setup
Using distance fields I was able to get a mask around every asset touch the water. Using that mask I then used a noise texture to break up repetitive straight lines and make the effect more dynamic. To top it off I created a custom texture which I made distort over time with a distortion function I created for other shaders and it made it look water like.
Foam and Distance Fields
Gerstner Height Sample
Gerstner Height Setup
For foam on top of waves I had a few solutions in mind, either I sample height through a blueprint or directly from a shader. I chose the shader approach. To sample the height I took all the waves combined and took only the Z axis information this game me a mask, by tweaking a few parameters like contrast of the mask and brightness I was able to give my self controls over the height mask, finally to break up the shapes and make it look interesting I used noise and custom textures to give it a real foam feel.
Foam and Distance Fields
Buoyancy Blueprint
Boat Cap Mask out Water
For Buoyancy I was considering properly simulating buoyancy effect by either using blueprints or Niagara system, unfortunately due to harsh deadlines and us running out of production time I opted in to faking the buoyancy effect. To create this effect I took the (Z) axis and was changing it using a (sine) wave over time every tick, I used all rotation axis to create a more convincing effect, after a little bit of playing around with values I was able to get a convincing effect. Also due to the boat being shallow and half way submerged in to water this meant that I needed to mask out water from the inside of the boat. Originally my solution was to use CustomDepth Pass to mask it out however after switching to Single Layer Water Node, I could no longer use this approach which lead me to creating an empty SLWN shader which was simple empty and putting this material on to a boat cap which removed the water from the inside.
Single Layer Water Node
Water Shading
For the shading part I originally wanted to do it manually and even made a shader using pixel and scene depth however it did not give me the right look that is when I switched to using SLWN. I used the mask for foam to Lerp two water scattering coefficient one for wave peaks and one for general water.
Micro Detail
Water Normals Micro Detail
For micro normal map detail I just used a water normal map and panned it in any direction the waves are going, exposed the normal map strength for better control.