# Shader Properties

This asset comes with a useful custom material editor. The material properties are divided into sections so you can easily change the look of the water. To use the custom material editor, be sure to add the StylizedWaterForURP component to your water.

## Colors and Transparency

{% tabs %}
{% tab title="Depth" %}
Control a color gradient based on the water's depth. The depth slider controls how deep the water should be.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-M3GRVc1FlwzrQeK10Mc%2F-M3GVnBUCKXm2BnzE5-N%2Fcolor_depth.png?alt=media&#x26;token=edeb25f4-eb20-43bc-b1cc-779a7c9e17a0" alt=""></div>

Instead of using a shallow and a deep water color, you can also use a color gradient which supports up to 8 colors.&#x20;

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-M3GRVc1FlwzrQeK10Mc%2F-M3GVrvFbo_9ddngyYhc%2Fcolor_gradient.png?alt=media&#x26;token=36c82381-6bd7-4368-8644-6eb7315377fb" alt=""></div>

{% hint style="info" %}
The transparency of the water is set through the alpha value of the color fields.
{% endhint %}
{% endtab %}

{% tab title="Horizon" %}
Set a color which will be seen in the distance on the horizon of the water. The distance variable controls from what distance this color becomes visible.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-M3GRVc1FlwzrQeK10Mc%2F-M3GW56Sv1j_mU4acsF1%2Fcolor_horizon.png?alt=media&#x26;token=29753526-e6f2-4e63-8ce3-d168e8c761fd" alt=""></div>
{% endtab %}

{% tab title="Shore" %}
Set a shore color. This color will be shown at the intersection between the water and objects in the water. You can set the color, depth and strength of the effect.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2dBSunNwrzt6_6N-o%2Fimage.png?alt=media&#x26;token=b6206a0d-19f7-434b-a374-3bc7c0e8d412" alt=""></div>

The water fade slider controls how smooth the transition is between the shore color and the water color. The shore blend slider controls how much of the color is shown right next to the shore.
{% endtab %}

{% tab title="Waves" %}
Set a color that will be shown on the top of the waves.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2d_Z4EU21NTbLrS8Q%2Fimage.png?alt=media&#x26;token=c8dd0f6d-36e0-4009-99c0-7997286adccf" alt=""></div>
{% endtab %}
{% endtabs %}

## Surface Foam

{% tabs %}
{% tab title="General" %}
Set a texture for the surface foam. You can use the cutoff value to control how much foam will be shown. The distortion slider will distort the foam. The color blend slider will control how the surface foam color blends with the water color. I usually leave this at 1 because it looks nicer.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2eUpfqZh42eIER9zs%2Fimage.png?alt=media&#x26;token=f0251894-01ee-417a-94a2-ffeb2cb6d24c" alt=""></div>
{% endtab %}

{% tab title="Wave Mask" %}
You can set a wave mask so surface foam will only appear on the top of the waves.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2eEUyka_pD_K9mlX6%2Fimage.png?alt=media&#x26;token=5e3deeb2-1859-44f8-b02f-616d348ab1d0" alt=""></div>

When the steepness of your waves is 0, the wave mask will not work and you should leave it disabled.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2ePTWgAtgvZWfTp-m%2Fimage.png?alt=media&#x26;token=3ba03407-3045-4e53-a035-616bcde22c65" alt=""></div>
{% endtab %}

{% tab title="Primary (R)" %}
Control the color, scale, direction and speed of the primary surface foam. The primary foam will be chosen from the (R)ed channel of the foam texture. This allows you to pack different foam textures into a single texture. You can use the following tool for this.&#x20;

<https://github.com/andydbc/unity-texture-packer>

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2f-xhey02iLsjv_Sa%2Fimage.png?alt=media&#x26;token=6bde2682-5561-47ae-ae5e-92480b120b49" alt=""></div>

The direction slider is a slider from 0 to 1 and controls a rotation between 0° and 360°.
{% endtab %}

{% tab title="Secondary (G)" %}
Control the color, scale, direction and speed of the secondary surface foam. The secondary foam will be determined from the (G)reen channel of the foam texture. This allows you to pack different foam textures into a single texture. You can use the following tool for this.

{% embed url="<https://github.com/andydbc/unity-texture-packer>" %}

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2ewFPi8FFVuKHBcMO%2Fimage.png?alt=media&#x26;token=06bef438-bb38-4638-8761-31c0ea6d6a44" alt=""></div>

The direction slider is a slider from 0 to 1 and controls a rotation between 0° and 360°. You can also set an offset so the secondary foam is shifted relative to the primary foam.
{% endtab %}
{% endtabs %}

## Intersection Effects

{% tabs %}
{% tab title="Movement" %}
You can switch between directional or shore movement. Please not that the shore movement feature is experimental.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2fH-pChX5V71GyeB5%2Fimage.png?alt=media&#x26;token=c631814b-a769-45ee-994a-80d0153d70cb" alt=""></div>

With directional movement, the intersection foam will just move in a single direction. With shore movement, the intersection foam will move towards or away from the shore.
{% endtab %}

{% tab title="General" %}
You can set the depth and color of the intersection effects.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2fRZz-zIqTZzuVB_G%2Fimage.png?alt=media&#x26;token=c56e343e-1979-42f7-8c50-6ea0d6de1952" alt=""></div>

The color blend slider controls how the intersection foam color blends with the water color. The color fade slider controls how much the intersection foam fades in opacity towards the water.
{% endtab %}

{% tab title="Directional" %}
Set a texture for the intersection foam. You can use the cutoff value to control how much foam will be shown. The distortion slider will distort the foam. The primary foam will be determined from the (R)ed channel of the foam texture. This allows you to pack different foam textures into a single texture.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2g1DMSeItL1WMi_Fo%2Fimage.png?alt=media&#x26;token=98e8b6fa-8fbc-49c9-bbb1-e317db2554a6" alt=""></div>

For directional foam you can set the scale, direction and speed of the effect.
{% endtab %}

{% tab title="Shore" %}
For shore movement you can set the speed, width and frequency of the effect. The speed can be positive or negative and determines if the foam should move away from or towards the shore.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2bcxUCsZDBeAX9dIx%2F-MG2gjH4nBHGVTG-tmIm%2Fimage.png?alt=media&#x26;token=7e5eda66-5806-48dd-853f-3876c01eaa16" alt=""></div>

The breakup settings will add regions to the foam where the foam is not present. You can control the scale and strength of this effect.

Please not that the shore foam movement effect is still experimental.
{% endtab %}
{% endtabs %}

## Foam Shadows

In order to have foam shadows, either surface foam or intersection effects need to be enabled.

{% tabs %}
{% tab title="General" %}
You can set the strength of the shadows as well of the depth. The depth slider will control how deep shadows should be rendered.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2h9Y5MGVLxzNYvT8F%2F-MG2heDSgeD5Pyte_Q0C%2Fimage.png?alt=media&#x26;token=09321ce0-e0cc-4e30-af67-8d9aca5695b5" alt=""></div>
{% endtab %}

{% tab title="Projection" %}
There are two sliders that will determine the parallax projection of the surface foam and intersection foam.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2h9Y5MGVLxzNYvT8F%2F-MG2hjivmx9SaRgPhSC9%2Fimage.png?alt=media&#x26;token=23d89987-e6e3-4ebb-82d3-542cc95447c7" alt=""></div>
{% endtab %}
{% endtabs %}

## Caustics

Please see the separate [caustics page](https://alexander-ameye.gitbook.io/stylized-water/features/caustics) for more information.

## Planar Reflections

You can control the strength and the fresnel effect of the planar reflections.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2ndX6TP3onAskcUov%2Fimage.png?alt=media&#x26;token=8a490260-b398-4769-8150-363de0380aaf" alt=""></div>

For more information, look at the[ planar reflections page](https://alexander-ameye.gitbook.io/stylized-water/features/planar-reflections).

## Surface and Lighting

{% tabs %}
{% tab title="Lighting" %}
You can enable or disable lighting. You can control the specular and diffuse colors and the smoothness of the surface.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2nyJyl8fGOzVInW90%2Fimage.png?alt=media&#x26;token=06c8ca91-5b9d-4e0a-8110-3051648b619a" alt=""></div>

The hardness slider will make the lighting hard to make it appear more cartoon-like.
{% endtab %}

{% tab title="Normals" %}
Control the normals of the surface.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2oFBLduIFNwug0_Lo%2Fimage.png?alt=media&#x26;token=8efbe551-b1e2-4c01-9fee-ef65a6e62a45" alt=""></div>
{% endtab %}

{% tab title="Refraction" %}
You can add refraction to the water surface. This refraction will be synced with the normal map and so the scale and speed of the refraction can be set in the normals section.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2oRbov55m7Emb1YKT%2Fimage.png?alt=media&#x26;token=780d5a04-8d4c-4fcb-9681-ee7ad6614e64" alt=""></div>
{% endtab %}

{% tab title="Fog" %}
The shader will work correctly with fog.
{% endtab %}
{% endtabs %}

## Waves

{% tabs %}
{% tab title="Visuals" %}
Control the visual characteristics of the waves.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2oqDQkSuV8EXqMKaB%2Fimage.png?alt=media&#x26;token=8f70e3d9-b8d9-47ef-98b7-ef34be2d5543" alt=""></div>
{% endtab %}

{% tab title="Directions" %}
Control the directions of the 4 waves that are used.

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2ouaTSU8tnt8D2Nc8%2Fimage.png?alt=media&#x26;token=156faa05-f0e7-4a44-b094-d2e4a6f22409" alt=""></div>

The direction slider is a slider from 0 to 1 and controls a rotation between 0° and 360°.
{% endtab %}
{% endtabs %}

## Underwater

You can set the color, transparency and refraction of the water surface when looked at from below (underwater).

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2p0R0kdgw6UnpIa6c%2Fimage.png?alt=media&#x26;token=828d2749-d762-4ad0-aea9-342e6a19b449" alt=""></div>

## Additional Settings

Set the UV space to world or local. You can also choose to hide inspector components like the *Mesh Renderer* and *Mesh Filter*

<div align="left"><img src="https://869580074-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzInl6-QAxSvemyRKBI%2F-MG2kvObIgwM-YeJ5WVW%2F-MG2p9nPH41E_SewKi40%2Fimage.png?alt=media&#x26;token=cceca9f9-1783-4da0-b2e2-e75018457648" alt=""></div>
