Creating a custom sea in Spatial

Although everyone has access to the same Water Shader in Spatial, there are so many little details and factors that make a huge difference in the final result, and those are often overlooked by most people. In this guide we will make sure that you take your sea aesthetics to the next level!

‍

In this guide we will 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.

‍

We will also talk about 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.

‍

Resources

• Unity 2021.3.21f1
• Spatial’s SDK package

Squeezing the possibilities to make the perfect sea

Although everyone has access to the same Water Shader in Spatial, there are so many little details and factors that make a huge difference in the final result, and those are typically overlooked by most people.

‍

In this guide we will make sure that you take your sea aesthetics to the next level!

‍

‍

‍

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: make sure 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 be able to 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 will affect the part of the sea bordering the shore of the beach. This will take 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 tend to 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 impact directly 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 makes reference to how “glossy/reflective” a material is, so the more we increase it, the more reflective it is. 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 moves. So basically, if you want a 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”.

‍

‍

• 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 in 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. A calmer water will have less 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 will 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 whole scene, such as:

‍

• Lighting: the Directional Light of the scene, with its color and intensity, will alter how the entire scene looks, this will be different 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 edit the duplicated version to preserve the original one. Take into account 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. Creating a surrounding foam effect that give 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’d imagine, depending on the needs of your project.

‍

Your customized sea in Spatial to the next level

When creating a custom Water Material, you have to take the time to adjust each parameter according to your final goal. On top of this, take into account 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!