This is the last part of the breakdown of my shaders based on work by Owakita. This will probably be the biggest one of all as we tackle the gersner wave ocean material.
I’ve written a number of posts breaking this down, and these can be found here:
Part 1 – Initial Plans
Part 2 – Sky Material
Part 3 – Post Processing Material
Part 4 – Gradient Fresnel Material
Gersner Wave Function
The gersner wave function was made based on this video from the Dreams team. Its a fantastic watch, so I’m just going to pop this here in lieu of going through the graph.
The main change that I had to do to get this into unreal was to replace the loop with repeating the wave function over and over, which causes node spaghetti and makes the system far less flexible.
The bitshifting for the psudo random number had to be done in a custom hlsl node, as there is no other way to convert to int and to bitshift.
I also did the final calculation in a custom node, as it was simpler to read than trying to drag the pins from each variable in. Honestly, its still a mess. I was really missing just writing hlsl at this stage.
Normals and Light Stylisation
I had some issues with normals appearing incorrect, which was eventually was down to some dodgy order of operations and some calculations being done in meters when they should have been in centimeters. Caught out by a couple things when trying to move between code and nodes.
I rounded the normal in order to give a hard edged, toon look to the shader.
Texturing
To create the smooth line pattern seen in the concept, I created a tiling texture in photoshop with outline on R and color variation on G.
I used the same smoothstep trick as with the gradient to have a color assigned to black, white and midgrey.
To add the outline, I took the black outline on the R channel of the texture and added the outline color to it. I then multiplied this with the lerped color.
Foam
In order to make the foam appear on top of the waves, I got the dot product of the surface normal and a vector parameter. This vector was used to control the angle of the foam. This was them multiplied with a noise texture to provide the breakup effect and rounded to keep the toon feel.
The outline on the foam was created by taking the above and creating an inverted version of it, with a slightly smaller wave. This multiplied by the original created an outline. This then hooked into the texture outline to receive the same color.
All together, we get a nice breakup wave effect.
Final Shader
Combine all of this and you get the ocean shader from the original gif!
Ames' Archive 