Stylized Water Shader Documentation

Stylized Water Shader

Stylized Water Shader
Author: jonathan
Version: 1.50
Dated: 19 Mar 2017

Stylized Water Shader #

Note: This documentation is currently being updated for version 2.0. Some of the features you may read about are not yet available.

Thank you for purchasing the Stylized Water Shader!

Please consider rating the package through your download list or leave a review at the store page once you’re familiar with it.

Your feedback is instrumental to the future of this package!

Rate     Review

Feedback and suggestions can be made in the forum thread:

http://forum.unity3d.com/threads/stylized-water-shader-desktop-mobile.430118/

This manual is intended to clarify the use of the package and should be consulted for troubleshooting.

Yes No Suggest edit
Last updated on April 15, 2018
0 of 0 users found this section helpful

Version 2.0 #

A new version is under development, which will see a vast amount of improvements and new features:

  • Desktop Beta will become default
  • New Mobile uber shader (up to 37% faster)
  • 3 new demo scenes
  • Orthographic camera support
  • Vertex painting support
  • Color gradient feature (Desktop)
  • 4 water particle effects
  • UX improvements
  • Tiling reduction (Desktop)
  • Improved wave animations (Desktop)
  • Custom heightmap option

 

 

With this version the previously deprecated Desktop shaders have been made obsolete and will be removed from the package. These are then replaced by the Desktop shader currently marked as “Beta”. The current mobile shaders will be removed as well, and replaced by an entirely new version.

Version 1.50 will still available and included as a separate .unity package.

Yes No Suggest edit
Last updated on April 20, 2018
0 of 0 users found this section helpful

Refunds #

Please refer to our refund policy

Yes No Suggest edit
Last updated on April 1, 2017
0 of 0 users found this section helpful

Compatibility #

Mobile
Water, by nature, is a very complex phenomenon, as it can be in a lot of different states. A water shader requires a lot of different operations in order to achieve a believable effect. It’s important to understand this as the water shader will always see some performance impact.

For lower end devices, such as mobiles, two shader variants are included, both of which are designed to minimize a possible performance impact without losing much of the Desktop fidelity.

Consoles
Users have reported to have no issues on Playstation 4 and Nintendo Switch. The shaders are surface shaders, which means they use Unity’s internal lighting system rather than a custom one. This leads to assume the chance of any graphical issues is minimal.

I have no access to any devkits, so if you find yourself having any such issues, please get in touch!

XR
The shaders have been tested using an Oculus Rift where no issues have been encountered. Planar reflections do not work in Single-Pass Stereo Rendering and are automatically disabled.

Version 2.0 adds support for orthographic camera’s, making it compatible with applications like Vuforia.

Unity 2018
Support for will be added in the next update.

Currently, everything works, but the deprecated desktop shaders throw an error, these will be removed in version 2.0

Yes No Suggest edit
Last updated on April 12, 2018
0 of 0 users found this section helpful

Getting started #

  • Drag one of the prefabs found under Assets/StylizedWaterShader/Prefabs/ into your scene.
  • Use the StylizedWater script component to start modifying it to your liking.

Alternatively:

  • Create and assign a material to your water mesh and assign a shader found under /StylizedWater.
  • Add the StylizedWater script component.

When using Forward Rendering, be sure to add the EnableDepthBuffer script to your camera. This ensures the depth and intersection effects work. Since version 2.0, this is automatically handled through the StylizedWater script.

Note: It is advised to create your own materials, so your settings are not accidentally overridden when updating the package.

If you’re uncertain what a parameter is for, click the help icon to toggle descriptions for that section

Yes No Suggest edit
Last updated on April 12, 2018
4 of 4 users found this section helpful

Support #

Should you run into any issues or have questions/feedback, please do not hesitate to reach out! I will do my best to respond as soon as I can.

Unity forums thread: http://forum.unity3d.com/threads/stylized-water-shader-desktop-mobile.430118/

E-mail: contact@staggart.xyz

Twitter: @JonnyIO

Yes No Suggest edit
Last updated on March 21, 2017
1 of 1 users found this section helpful

Beta shader #

The Beta shader is an effort to move the visual fidelity of this shader forward.

It has been recreated in Amplify Shader Editor which outputs a surface shader, making it compatible with all of Unity’s rendering features, as well as offering other benefits. The shader is targeted at Desktop platforms, the mobile shaders will follow suit later, once the core features have been defined.

Users are encouraged to use this shader in their project, as the current (Shader Forge) shaders will be removed in version 2.0.

It features:
– Recreated in Amplify Shader Editor entirely
– Realtime reflections
– Skybox lighting
– Reflection Probe support
– Mask surface highlight by heightmap (wave foam)
– Wave direction configuration
– Improved texture cross-panning
– Improved glossiness
– Improved depth, with shallow water color parameter
– UV Distortion
– Unlit mode

Yes No Suggest edit
Last updated on April 5, 2018
0 of 0 users found this section helpful

Material instances #

If you’d like to have separate water bodies in your scene, each with a (slightly) different appearance, you will need to create a unique material instance for these meshes.

  1. Create and assign a new material to your water mesh and assign a shader found under /StylizedWater.
  2. Add the StylizedWater script component.
  3. Hit the ‘Apply all changes’ button once.

Make sure only one object has Planar Reflections enabled, otherwise this will incur a huge performance hit.

Yes No Suggest edit
Last updated on April 20, 2018
0 of 0 users found this section helpful

Underwater effects #

All the shaders in the package are one-sided. Meaning, if you move the camera beneath the water surface, it will appear invisible.

If this is an issue for you, duplicate your water object and flip it 180 degrees. It’s recommended to create a separate material for this object, so you can fine-tune it’s visual appearance.

Triggering post processing effects, such as screen waving and blurring, is possible through SC Post Effects, which includes an “Underwater” example profile.

Yes No Suggest edit
Last updated on April 20, 2018
0 of 0 users found this section helpful

Parameter glossary #

Note: not every parameter is available in all shaders versions.

Feature Desktop Mobile Advanced Mobile Basic
Normal map V V V
Transparency V V V
Glossiness V V V
Intersection effect V V V
7 different styles V V V
World-Space tiling V V V
Fresnel V V X
Depth V V X
Surface highlights V V X
Wave animation V V X
Multi-light support V X X
Advanced surface highlights V X X
Refraction V X X
Wave heightmap V X X
Tessellation V X X
Cubemap reflection V X X

 

Yes No Suggest edit
Last updated on May 1, 2017
0 of 0 users found this section helpful

Colors #

Water color: The most self-explanatory parameter.
Fresnel color: Controls the color for the glancing reflection, the Alpha channel controls the intensity of the Fresnel effect.
Rim color: Color of the foam intersection. Alpha controls its transparency
Wave tint: Controls how bright or dark high waves should be tinted based on the heightmap
Yes No Suggest edit
Last updated on May 3, 2017
1 of 1 users found this section helpful

Surface #

Normal strength: Increases or decreases the normal map intensity
Tiling: The amount of tiling
Transparency: Controls the opacity of the surface.
Glossiness: Defines how reflective the water looks. Fully reflective water shows the sun reflecting in the waves and the cubemap reflection.
Fresnel: Exponentiate the Fresnel effect, essentially moving it closer or further away from the horizon.
Refraction: Simulates light bending as it moves through the waves.
Reflection cubemap: Assign a cubemap to be reflected in the water, depending on the glossiness amount. Real-time reflection is not supported.
Yes No Suggest edit
Last updated on April 5, 2018
0 of 0 users found this section helpful

Intersection #

Custom texture: Assign a grayscale texture to be used for the intersection effect.
Style: Dropdown menu to choose one of the pre-built styles from.
Size: Controls how wide or deep the intersection effect should be.
Falloff: Adds a linear transition to the intersection.
Distance: Add a smooth offset for the effect
Tiling: The amount of tiling for the intersection texture. The buttons here can be used to increase or decrease the tiling.
Yes No Suggest edit
Last updated on April 30, 2017
0 of 0 users found this section helpful

Surface highlights #

Use intersection texture Use the intersection texture for the surface highlight effect.
Cross-panning textures When using the intersection texture, this toggle adds a secondary cross-panning texture.
Opacity: Controls the overall opacity of the highlight effect. This effect is derived from the normal map.
Size: Dynamically shrink the size of the effect.
Tiling: Amount of tiling.
Yes No Suggest edit
Last updated on April 30, 2017
1 of 1 users found this section helpful

Depth #

Depth: Adds murky water the deeper the water is.
Note: This effect depends on the amount of transparency.
Darkness: The depth color is derived from the water color and can be brightened or darkened here.
Yes No Suggest edit
Last updated on April 2, 2017
0 of 0 users found this section helpful

Waves #

Custom normal map: Assign a custom normal map to be used for the waves.
Style: Dropdown menu to choose one of the pre-built normal maps from.
Heightmap Dropdown menu to choose one of the pre-built heightmaps from.
Strength: Controls the height of the waves. If you need higher waves, you can scale your water plane up on the Y axis.
Size: Controls the size of the waves.
Yes No Suggest edit
Last updated on May 3, 2017
1 of 1 users found this section helpful

Other #

Tessellation:

Add polygons to the mesh to create a more detailed wave animation effect

Yes No Suggest edit
Last updated on March 20, 2017
0 of 0 users found this section helpful

Troubleshooting #

Waves aren’t high enough, even with the highest “Wave height” value

In this case, your water mesh must be very big. If you need higher waves than the shader value allows for, increase the scale of your mesh on the Y-axis to the same effect

Waves look very pointy, triangular

This is an indication that the vertex-density/polycount of your water mesh is too low. Add subdivisions to your mesh to increase the wave fidelity. When using the Desktop shader, the “Tesselation” parameter has the same effect.

Much like a pin-art toy; the more pins it has, the more detailed the cast becomes.

Transparency is set to 0, but water still has a faint bright color

This only applies to the Desktop shader. The transparency parameter doesn’t actually control the shader’s opacity, but rather controls the amount of visibility of the objects rendered underneath the water. This is known as a GrabPass. The water shader is built on the PBR model, so it inherits some shading properties such as fresnel, which explains the faint brightness.

This behaviour is by design, so it’s still possible to have crystal clear water, while retaining the refraction a capabilities. Otherwise the water would simply turn invisible. When the “Unlit” toggle is checked, this is not an issue, since all lighting is overridden.

(Mobile) After a few minutes, the water animation becomes stepped and the textures pixellated

Since mobile devices don’t support high precision values, artifacts may occur the longer the shader runs. This greatly varies between devices. Disabling “World-space tiling” uses overal lower values, and will prevent this issue.

This issue is resolved completely in version 2.0.

Water surface flickers white and the intersection effects disappears

This is usually caused if there is no light source in the scene, or your scene-view has lighting switched off.

Water shows banding artifacts

Some of the shader features rely on the rendered depth buffer. If your device does not render this accurately banding artifacts will show. This appears to happen on some devices using a Mali-450MP4 GPU.

It has been fixed in version 1.24. Should it still occur, a potentially solution is to set the display buffer to 32-bit as some users reported this fixed the issue.

Objects show a pixelated white outline

This occurs when using Unity’s built-in MSAA and can be remedied by using an Anti-Aliasing image effect instead.

Surfaces looks jagged

This is due to compression of the shader textures. You can override this compression in the inspector under the “Advanced” tab.

This will impair a slightly larger memory cost as the two textures will be larger in size.

(iOS) Black dots appear on the water

You can elevate this issue by doing taking the following steps:

  • Unset the Sun object in the Lighting tab, if set
  • Raise the Shadow Bias value on your Directional Light

`System.IO.File’ does not contain a definition for `WriteAllBytes’ error

The “WebPlayer” target platform does not support writing files to disk and is thus not supported. The WebPlayer functionality was officially deprecated since Unity 5.4.

Yes No Suggest edit
Last updated on April 20, 2018
3 of 3 users found this section helpful
Suggest Edit