In this blog, I will go over how I created my stylized ocean shader and share my texture maps and snapshots of my process. Through this walkthrough, I’ll be using Substance Designer, Unity HDRP, and Procreate.
In-Depth Look: Creating An Ocean Shader!
Find References!
The first step is to find references for the type of ocean you want to create. These were the references I collected, when choosing these I specifically wanted bodies of water that had a yellowish tan within the water that blended into the ocean’s blues, while also having similar foam textures as Sword’s Rest. With that being said when choosing your reference photos look for visual touchstones like direction, color, weight, and texture.
Graph Inspector Settings
Before getting into building the shader this is what the settings for the graph inspector looks like.
UVs/ Time
The first step is to establish the world space and then split it into the X and Z directions. After that place the X and Z directions into a vector 2 node, to tile everything together. Lastly adding a Time node. Once that is done include the following properties.
Gerstner Wave Function
To imitate an effective ocean wave this is how I implemented the Gerstner Wave equation since the goal is to create steep waves as opposed to rounded-off peaks that have been produced if I used sine waves. Gerstner waves have a property that generates sharper crests by moving vertices toward each crest. Sharper waves could give the ocean more character and give it the ability to produce rough waves. Below I annotated how I implemented the Gerstner wave function with the world UVs established in the previous step.
Here is a great article on different types of equations that simulate water movements! Chapter 1. Effective Water Simulation from Physical Models. It also has an article that gives a deeper explanation of the Gerstner wave function.
Normals +Texture Maps
Typically with ocean shaders, you want two normal textures scrolling past each other! For this step, you’ll need two normal textures that can be made in Substance Designer. I found that focusing on big shapes to get a clear concise movement on the waters surface. Below you’ll see the type of texture I was going for the shader graph in Substance Designer then the result!
Crest + Edge Foam
Having foam on your ocean shader is a great way to give the waves a unique style! In my scene, I use the foam to accent the waves and to lean into a cartoony stylized aesthetic. An interesting way to manipulate the wave crests is to add foam dispersion. For that, I just multiply the Crest Size property then add it to the Smoothness and Base Color after combing it with your edge foam!
even though the grayscale texture seems off from the reference photo, once you manipulate the texture with the properties in the inspector you can start sculpting the foam the way you envisioned.
If you want to read further on how to manipulate foam this is a great video to watch. Ocean Shader Unity HDRP Walkthrough. This dev does a great job of explaining multiple ways to add foam and even refraction on the edge of ocean shaders. He even explains great ways to optimize nodes at the end of his process.
Sky Box
I painted the clouds in Procreate then exported the illustration as a panorama and converted the image to a cube map. Painting clouds may seem simple however, it is essential to avoid colors like black or white that are hard to blend in the soft features. What makes clouds great is effective movement and an interesting palette. A great starting point is like I mentioned before, finding a reference and working from there. CiandieArt has a great video on how to break down shapes of clouds where you can create powerful silhouettes while still maintaining soft edges.