Stylized Water Shader
Stylized Water Shader
Thank you for purchasing the Stylized Water Shader!
Your feedback is instrumental to the future of this package!
Feedback and suggestions can be made in the forum thread:
This manual is intended to clarify the use of the package and should be consulted for troubleshooting.
- Import the Unity package through the Asset Store download manager (Found under Window->Asset Store)
- Drag one of the prefabs found under Assets/StylizedWaterShader/Prefabs into your scene.
- Add the “EnableDepthBuffer” script to your main camera, this ensures that the depth and intersection effects work.
- Use the StylizedWater script component to start modifying it to your liking.
- Create and assign a material to your water mesh and assign a shader found under /StylizedWater.
- Add the StylizedWater script component.
- Add the “EnableDepthBuffer” script to your main camera.
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
The Beta shader is an effort to move the visual fidelity of this shader forward. A separate .unity package is included which contains the files.
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 eventually be removed from this package.
The minimum supported version is Unity 5.4
– 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
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/
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.
- Create and assign a new material to your water mesh and assign a shader found under /StylizedWater.
- Add the StylizedWater script component.
- Hit the ‘Apply all changes’ button once.
If you own Shader Forge you are free to modify the shaders at your will. However, please do so at your own risk. The custom inspector relies on certain shader keywords to be known, and will likely break should these be removed from a shader. It should be noted that the inspector is not required for the shader to function, it is merely a front-end for the various parameters.
Please note that the shaders are currently being rewritten, so Shader Forge editing will not be possible in a later update.
Note: not every parameter is available in all shaders versions.
|Feature||Desktop||Mobile Advanced||Mobile Basic|
|7 different styles||V||V||V|
|Advanced surface highlights||V||X||X|
|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|
|Normal strength:||Increases or decreases the normal map intensity
Note: this does not work when using custom normal maps
|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.|
|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.|
|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.|
|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.|
|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.|
Add polygons to the mesh to create a more detailed wave animation effect
The mobile shader is of stripped refraction, for performance. While it is optimized for mobile devices, the features that provide the water effects are still quite taxing. Please keep this in mind when developing.
By default, the camera doesn’t render the depth map on mobile platforms, which is required for the shader to work. To fix this, attach the included “EnableDepthBuffer” script to your camera and you’re good to go!
Two shader variants are provided:
Advanced: Same features as desktop variant expect for refraction. With added support for OpenGL 3.0 and iOS Metal.
Basic: Bare minimum, no cross-panning of textures, directional light only.
Both require a minimum Shader Model of 3.0.
- If you’re using Unity’s Ambient Occlusion image effect, make sure the EnableDepthBuffer script is executed after it.
Waves aren’t high enough, even with the highest “Wave strength” 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.
Much like a pin-art toy; the more pins it has, the more detailed the cast becomes.
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. This also occurs when using an orthographic or 2D camera, which is not supported at this time.
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. And 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.
The new waves/intersection styles added in the update aren’t visible in the dropdown
Please remove and re-add the Stylized Water script component to force a refresh of the list
Objects show a pixelated white outline
This occurs when using Unity’s built-in MSAA and be remedied by using an Anti-Aliasing image effect instead.
Surfaces looks jagged on mobile
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.
In order to make the shaders compatible with the Playstation 4, a few modifications have to be made to the shader files, namely:
- Replace all instances of the word “COLOR” with “SV_Target”
- Remove any lines that say “#pragma exclude_renderers gles3 metal d3d11_9x xbox360 xboxone ps3 ps4 psp2“
After these modifications the shaders will compile correctly on the console.
Please refer to our refund policy
The assets included with the demo scene are from a student project called “The Torch”, however you are free to use these under the same license.
Credits go to:
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. 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.
This package is found to be incompatible with VR and AR for various reasons. At this time, no support can be added.
Currently, this asset is not compatible with 2018.1, since native support for Substance materials has been deprecated.
Once 2018 is out of beta, and the plugin is available, compatibility can be researched.