Creating a custom sea in Spatial
How to create a tropical sea for Spatial using the base water shader and customize it to add levels of detail
Premise
In this guide, we'll explain how to create a tropical sea for Spatial, using the base water shader from the Spatial’s Unity SDK, and how to customize the shader graph to add extra levels of detail.
Additionally, we'll discuss other external elements that can affect the final visual result of the sea, such as light maps, the amount of separation between the sea and the shore, reflection textures, etc.
The mission
Although everyone has access to the same water shader in Spatial, there are so many little details and factors that can make a huge difference in the final result, often overlooked by most people.
In this guide, we'll ensure that you take your sea aesthetics to the next level!
Resources
- Unity 2021.3.21f1
- Spatial’s SDK package
Getting started
Our first step is to understand and adjust the basic parameters of our water shader, to do so, let’s apply the water material to a plane. You can find the material under the following folder:
Note: ensure you have imported Spatial’s starter package into Unity, otherwise, you won’t have access to this shader!
Basic parameters
Now, we will briefly explain each of the parameters that you can customize in the standard water shader. To access them, click on the water material and go to the inspector tab in the viewport. You will find all the parameters under the "Surface Inputs" toggle.
- Deep color: this parameter will modify the main color of the sea. Since we are aiming for a more tropical-looking sea, we will use a lighter blue.
- Shallow color: this color affects the part of the sea bordering the shore of the beach. It takes into account the distance of the water to the sand, making the closest parts to the sand appear more influenced by this parameter. Again, to achieve that tropical look, we will lean towards a lighter blue/cyan color.
For now, we won’t notice a big difference until we play with the next parameters that directly influence this color.
Note: you can also adjust the alpha channel of this color to change how transparent it looks, depending on the needs of your project.
- Depth: we will adjust this parameter to directly impact how the border of the sea looks. What it does is to calculate the distance between the water’s mesh and the sand’s mesh and adjust how much of that distance is needed to apply the shallow color to your water.
- Strength: the strength increases or decreases the intensity of the deep color parameter, giving it more or less priority over the shallow color. In this case we will decrease it, so the lighter blue color of the shore is a lot more noticeable, getting closer to the final result that we are looking for.
- Smoothness: the smoothness parameter refers to how “glossy/reflective” a material is, so the more we increase it, the more reflective it becomes. By default, the smoothness is set to 1, which in our case is ideal for the final result. Feel free to decrease it if you are trying to achieve a more “dirty” feel, or if you are working with a liquid other than water.
- Displacement: this parameter will affect the tide of the waves. The more displacement, the more the waves will overlap with the sand as it move. So, if you want calmer water, you will decrease this parameter. It’s important to note that the tide will behave differently based on the distance between the water and the sand.
If you have a flat surface for the sand, the tides will be more affected by this parameter. The key is to balance both the displacement and the surface below the water to achieve the desired result. In our case, we will increase the displacement to “0.1”.
- Normals: this parameter modifies the surface details of the water. By default, it already uses a texture map for both the main normal and second normal, which determine how the surface detail will move, creating an illusion of wind affecting the water. We will leave the default maps since they work perfectly fine for our project.
The normal strengh changes the intensity of these details, and the normal tiling is related to the size of the details. Let's adjust these to normal strengh "0.3" and normal tiling "10,10" to fit the size of our sea.
- Reflection: the reflection parameter allows us to add a texture that will reflect on the shallow color, adding an extra level of realism. Usually, the ideal way to use this parameter is to add the same texture used in the Skybox. The reflection power adjusts the intensity at which this texture is applied to the reflection, and the distortion power will add “noise” to the reflection to match the amount of “wind” that is affecting our water. Calmer water will have a lower amount of distortion. By using this you will lose a bit of control over the color of the Shallow Color which in our case is not worth the extra level of detail, but feel free to use it in your projects.
External factors
If you have followed our guide and copied our parameters step by step, you may notice that your water looks different from ours. Why? Because there are a handful of other settings outside the water shader that affect the final look of the water and the entire scene. These include:
- Lighting: the directional light of the scene, with its color and intensity, will alter how the entire scene looks. This will vary for each project depending on the final goal. We added a warm light to simulate a sunset, emphasizing the charming and relaxing mood of a tropical island.
- Light maps and reflection probes: an advanced technique to add improved lighting and details is to bake the lighting and reflections into the light maps and reflection probes. The results of these bakes will be greatly influenced by the Skybox of your scene, which we highly recommend customizing and replacing Unity’s default Skybox.
- Post-processing: Spatial allows us to add a post-processing layer to our camera, affecting the outputs of the general visuals of our scene.
Customizing the shader graph
As previously mentioned, you can add extra levels of detail to your water shader, which we did by adding a stylized foam effect. To do so, you can open the default water shader and edit the shader graph. We recommend duplicating the water shader that comes with the Spatial’s template package and editing the duplicated version to preserve the original one.
Keep in mind that this is a very advanced technique and can cause compile errors which could break the shader completely.
Inside the shader graph, you can find the nodes that compose each of the previously mentioned parameters, meaning you can freely change and adjust their functionality.
This is a very advanced technique that would require its own guide, so this will be a very brief overview.
As you add new nodes and parameters, you will be able to find those under the surface inputs where the basic parameters are. In this case, we created a custom foam effect, which calculates the distance of the shore to the colliding meshes, such as the sand, rocks, bridge, etc. This creates a surrounding foam effect that adds an extra level of detail.
Right below the reflection parameter, we can find the extra custom parameters we made to adjust the foam effect, each of them working similarly to the rest of the basic parameters.
With enough knowledge, editing the shader graph allows you to create anything you can imagine, depending on the needs of your project.
Conclusion
When creating a custom water material, you have to take the time to adjust each parameter according to your final goal. Additionally, consider all the external factors that can affect the final visuals of your water (and the entire scene). And if you want to take it to the next level, you can always delve deep into the shader graph and demonstrate your shader design skills.
All of this combined will ensure that your visuals will stand out over other projects out there!
