# WATER RENDERING

The water effect is achieved through a custom shader combined with a Renderer Feature. Below is a breakdown of the rendering process.

The water shader `ASE Top Down Pixel Water` is made using [Amplify Shader Editor](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570). If you own this asset, you can open the shader as a graph to see how it is made.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FX51eqEGP8Jg6MeB3DITp%2Ftop%20down%20pixel%20water%20renderer%20feature.png?alt=media&#x26;token=42ccb9b5-50a8-4ee4-bdf4-2cf1b5584e36" alt=""><figcaption></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2F9dDF9VtGTTBhYC3EkqLj%2Famplify%20shader%20editor.png?alt=media&#x26;token=160c2e5a-44c4-419b-994f-3773078868b5" alt=""><figcaption></figcaption></figure></div>

### Water Color

Render terrain and water-touching objects defined in `Terrain Layer Mask` into a texture named `Terrain Tex`.

Apply a gaussian blur to the alpha channel of `Terrain Tex` using parameters from `Water Color Blur Setting`, creating `Terrain Blurred Tex`.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FjQytFmRbALpGw0ykrygn%2Fwater%20rendering%20terrainTex.png?alt=media&#x26;token=9eaba1f9-7525-42dc-ad34-ddc9ee32bf47" alt=""><figcaption><p>Terrain Tex</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FXnoxzbsTuyW2MQb9HGRB%2Fwater%20rendering%20terrainBlurredTex.png?alt=media&#x26;token=9a21a47a-6f6c-4320-a4f9-c7cfda79ba81" alt=""><figcaption><p>Terrain Blurred Tex Overlayed by Terrain Tex</p></figcaption></figure></div>

Then we can use the grayscale of `Terrain Blurred Tex` to lerp between `Shallow Color` and `Deep Color` to create a gradient from shallow water near the shore to deep water far from the shore.

<figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FYHrDvRkvrsYWNoXxQVJP%2Fwater%20rendering%20waterColor.png?alt=media&#x26;token=5193f0eb-1dd9-420f-9979-e50beacace33" alt="" width="375"><figcaption><p>Water Color</p></figcaption></figure>

### Shore Line

Shift the alpha of `Terrain Texture` down by one pixel size (1/32 in world space as this asset is 32x32 per unit), color it with `Foam Color` and blend it with the base water color.

<figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FcMsCPc6NHOk7QpTWGKP0%2Fwater%20rendering%20shore%20line.png?alt=media&#x26;token=04d0a20f-b3a8-4133-b58d-a4488eb91fb8" alt="" width="375"><figcaption><p>Water Color with Shore Line</p></figcaption></figure>

### Refraction

First we need to create a mask texture  `Under Water Mask Tex` in the same way as we create the `Terrain Blurred Tex` in the Water Color step, but with parameters from `Under Water Mask Blur Setting`.

For the content to be refracted, we use the `Terrain Tex` and move it down twice, each by `0.4` tile size, mix them together and color it with `Under Water Color`.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FK0r1sISXr0ToPB4tgjbd%2Fwater%20rendering%20raw%20under%20water%20mask%20tex.png?alt=media&#x26;token=5f62f108-249e-45cd-a084-da2f1a302a30" alt=""><figcaption><p>Under Water Mask Tex</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FhtDUy7fHMrnBtMjcqW0T%2Fwater%20rendering%20raw%20under%20water%20color.png?alt=media&#x26;token=c678fed1-bedc-4f85-a4bd-1f8167d6d112" alt=""><figcaption><p>Under Water Content</p></figcaption></figure></div>

For the distortion effect, apply time-animated Voronoi noise to UV coordinates when sampling from `Terrain Tex`.

Then we can mask the result with `Under Water Mask Tex` to create a fading effect and blend it to the base water color.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FesGT99tjdvQOx1gqxdZS%2FImage%20Sequence_009_0000.png?alt=media&#x26;token=0d318770-b9f7-419c-b7ab-5b3625ffac4c" alt=""><figcaption><p>Under Water Content with Noice Distortion </p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FmvFwBXMGhmwzhskow5tj%2FImage%20Sequence_010_0000.png?alt=media&#x26;token=24d4409e-4c52-4562-93ee-1f43fcdb39cd" alt=""><figcaption><p>Masked by Under Water Mask Tex</p></figcaption></figure></div>

<figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FArjvu7rJnvov2s5FFPsc%2Fwater%20rendering%20refraction%20final.png?alt=media&#x26;token=e5a085f8-1570-439a-a907-f10ef2101335" alt="" width="375"><figcaption><p>Blended with Water Color and Shore line</p></figcaption></figure>

### Foam

We use a foam texure `TX FX Water Foam` from this asset, sample it with the UV multiplied by `2.0` in the vertical direction to match the perspective of the top down scene, and disturb it with a time-animated noise.

For the mask, we use the maske value from `Under Water Mask Tex`, but move it down by `0.5` tile size and power the value by `2.5` (make the white part wider).

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FW3SZ0s4fic5Ej1CELdlO%2FImage%20Sequence_023_0000.png?alt=media&#x26;token=9f303f43-b595-4437-9072-7f31c98f487d" alt=""><figcaption><p>Foam Texture with Modified UV</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2Ft26JYNxvpVqgibrGvlOp%2FImage%20Sequence_025_0000.png?alt=media&#x26;token=22f8b0b8-06fc-4237-8204-7893121b7102" alt=""><figcaption><p>Disturb Noise</p></figcaption></figure></div>

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FO5ant8HJwWjm7L8Hcl2B%2FImage%20Sequence_016_0000.png?alt=media&#x26;token=5c53a03a-307b-47aa-a4ff-e9fc0c961b5e" alt=""><figcaption><p>Mask for the Foam</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2Fjs1HPXnK2PwOe13kvMAz%2FImage%20Sequence_015_0000.png?alt=media&#x26;token=0d8272af-2650-47a8-b0b6-3039a577ef66" alt=""><figcaption><p>Final Result</p></figcaption></figure></div>

### Highlight

The highlight pattern is made by multiplying two noise with different size and moving direction, then powered with `6.5` to extract the most light color, and stepped by `0.3` to make it flat.

The UV of the noise is multiplied by `20` in the vertical direction to make it much wider horizontally.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FFXorCJeLpmc2nSKsEIoi%2Fwater%20rendering%20noise%201.png?alt=media&#x26;token=358479be-d738-4d38-8b2e-74062bfe1da2" alt=""><figcaption><p>Noise 1</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FS0A7njAoIl0oSTIxOfZa%2Fwater%20rendering%20noise%202.png?alt=media&#x26;token=cb521262-a853-41c9-94dc-34cf5af62683" alt=""><figcaption><p>Noise 2</p></figcaption></figure></div>

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FGrTJsYnzaWzi7hD2q7Zi%2Fwater%20rendering%20%20highlight%2003.png?alt=media&#x26;token=984c1fe2-14b7-4aa1-89a2-9c7bd7abf2a1" alt=""><figcaption><p>Two Noise Multiplied Together and Powered by 6.5</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FHSVcvjvVK4mBzBIFkXT5%2Fwater%20rendering%20%20highlight%2004.png?alt=media&#x26;token=aae08a57-9ec5-4c15-bb60-d7fea5a29eaf" alt=""><figcaption><p>Stepped by 0.3</p></figcaption></figure></div>

Then we can use this as a mask to add `Highlight Color` to the water to create the final water effect.

<div><figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FqPx5Pl7EtDfxrKw22S6O%2Fwater%20rendering%20final%2001.png?alt=media&#x26;token=0ea22187-603b-4fcb-baea-533e0196aac3" alt=""><figcaption><p>Final Water Effect</p></figcaption></figure> <figure><img src="https://1143501299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIPBJbsBHfwnXGNm0L3kh%2Fuploads%2FVb5PrJaZoiQU0wxyn2ff%2Fwater%20rendering%20final%2002.png?alt=media&#x26;token=e46b08cd-574b-44d1-ac40-79334715d207" alt=""><figcaption><p>With Other Scene Objects</p></figcaption></figure></div>
