Stylized Water Shader - Desktop/Mobile/VR [Built-in RP]

Thanks for the anwser i was thinking it would be about the waves.

Wonder another thing. I have copied my top mesh stylizedwater GO and flipped it to get the underwater. But the top and the bottom meshes dont sync up when i have some small waves. So when looking horizontal from the water line/border the top and the bottom mesh overlap back and forth and loooks strange.

 

The waves push the mesh's vertices in the direction of their normal. So for a plane, that would be straight up. This means, if you were to rotate a plane 180 degrees, the waves will appear to push down.

There is a small modification you can make in the desktop shader (assuming you're using that), to make the waves always push up in world-space, rather than using the mesh's normals

Replace line 191

Code (CSharp):

1. float3 Displacement100 = ( ase_vertexNormal * temp_output_95_0 );

with

Code (CSharp):

1. float3 Displacement100 = (mul(unity_ObjectToWorld, float3(0,1,0)) * temp_output_95_0 );

This will make your two planes have the same wave displacement (granted the settings are identical). The waves will appear much higher after this modification, but you simply have to decrease the height.

 

Awesome thank you.

 

Hey there,
I want to know if it is possible to achieve something like this water block side by your shader ?

 

I can't say the shader would be ideal for that sort of set up, specifically. Namely due to the sides of the cubes, the normal map will be of the same strength on both the top and bottom, which may look a little odd. The waves would have to be flat, otherwise the mesh will appear to split at the corners (on the edges where the side meets the top).

The intersection effect can be controlled through vertex painting, so it can also be added on the edge. Here is my attempt:


I have attached the mesh and material if you'd like to take a look.

 

Hey @StaggartCreations,
Thanks for the reply.
Can I have just that intersection without any water texture for the sides ?

 

Short answer would be no, this would require to modify the shader in several places so that certain effects (normals, refraction, foam, etc) are only visible on the top faces of a mesh.

 

What is your suggestion to solve this problem which water blocks don't look like this ? (Look at sides)
https://gyazo.com/13f4334c44564cf02373c5f790d57e0d

 

Hey @StaggartCreations
Any idea ?

 

Sorry, completely forgot to respond!

The water is single-sided in any case, so looking through the water onto a side without any walls it will appear invisible. There is unfortunately no straight forward way to circumvent that other than creating a shader that render backfaces in a specific way (eg. a plain color). The other point would be the waves. Setting the tiling mode to "World-Space" will avoid the edges splitting up, but will also stretch the normal map and intersection at the sides. Sadly, it can't be both ways.

I'm afraid this all peers more into the direction of a custom shader, that's set up specifically to work on cubes as a volume, which this shader is not.

 

Is there any way to modify your shader to work with cubes ? Like sides go up and down exactly same as surface wave.

 

You can make the same change as I outlined in this post. For something like a cube it wouldn't be desirable for the waves to use the mesh normals, this would mean waves on the sides would push sideways, rather than up.

 

That link is your profile.

 

Whoops, I needed the one right next to it

https://forum.unity.com/threads/stylized-water-shader-desktop-mobile-vr.430118/page-9#post-4539751

 

I have been looking for a water shader solution that works with Deferred Rendering and Unity's Post Processing Fog (Unity 2018.4). Will this water shader render properly with fog? Every shader I've looked at can't render transparent water with fog, so distant water looks out of place in the game scene with the surrounding terrain / trees cloaked in fog.

 

Unfortunately this shader would succumb to the same common issue due to being transparent, rendering it "invisible" to any screen-space fog effects. The default Unity fog is neatly integrated into Unity's shader library, so it's easy to implement in any shader through ~3 lines of code.

For any other fog effect (namely the one from Post Processing Stack) this is usually not the case, where the fog shader code sits in one shader, with its own settings. Rather than in a library, using global settings (like the default fog), making it impossible to reuse and mirror it in another shader.

 

Hi. Are you planing to add any extra details functions to this shader in future?

 

Hi StaggartCreation. I've been using your water shader for quite some time for our game. It's awesome!! And working great on our PC VR version of the game. I'm porting the game to the Oculus Quest (runs on Android). Switched to the mobile shader, set the lighting to Unlit. Some adjustments, awesome result!

But in the Android Build of the game, the water doesn't seem to show up in the Oculus Quest. No errors and no warnings.

So i made an empty project. Imported the Stylized water shader (latest version), Added the Oculus Integration (Asset Store). Added the StylizedWater_Mobile prefab to an empty scene. Added the Enable Depth Buffer script to the camera. Still no water in the build.

Unity version: 2019.1.8f1
Graphics API: OpenGLES3

Any idea how i can get the water to render? Or do you have any tips? I have included the ProjectSettings i'm using. They are mostly default settings.

 

I recommend making sure the main camera has EnableDepthBuffer script.

 

I don't have an Oculus quest, but I will see if I can reproduce any issues using your ProjectSettings on Android

 

Hiii there

I am getting this error

Assets/UI textures/StylizedWater/Scripts/StylizedWater.cs(108,12): error CS0619: 'ProceduralMaterial' is obsolete: 'Built-in support for Substance Designer materials has been removed from Unity. To continue using Substance Designer materials, you will need to install Allegorithmic's external importer from the Asset Store.'

how do I solve this

I have imported this asset
https://assetstore.unity.com/packages/tools/utilities/substance-in-unity-110555

I was using 2017.4.15f and it was working fine in that
and I have upgraded to 2018.1.9f1 and I am getting this error

I imported the above mentioned plugin and restarted the unity but still the error was there.

 

The version you're using is over 2 years old if you're seeing that error. Updating the package is necessary to use it in 2018.1+

 

Which version should I use?

I was using 2018.1.9f1 which is 2018.1+ right?

 

You can get the latest version by updating through the store page

 

Thanks!

 

Hi Staggart, bought your plugin and it is great. Everything works fine in Editor, but when I build for device and run it on an Oneplus 6, the water shows up only very close to the camera. Water which is further away from the camera does not get rendered.

Any help with this would be greatly appreciated.

 

Already replied to your email

EDIT: Solution was to decrease the camera's far clipping plane from the default 1000 units, which will yield higher precision in the depth buffer, particularly important for mobile devices.

 

thanks! I was not sure which medium was faster to reach you, will reply in the e-mail and then later update this thread for other people to be able to refer in the future.

 

I cannot seem to get intersections working with an Orthographic camera. I have attached the depth buffer script and am using forward rendering.

 

Is this in the editor, or only in a build? If so, on which platform? Note that when changing from projection to orthographic you'll need to tweak the intersection size and falloff parameters, since the depth values are wildly different between the two camera modes.

 

Yup, that did it! Amazing asset.

 

Submitted version 2.0.9

Unity 2019.3 compatibility verified

Added:
- Desktop shader using Advanced lighting now receives color from up to 3 point lights

Changed:
- Improved code for UI sections, expanding/collapsing sections no longer marks the object/material as changed
- Delete obsolete and legacy code

Fixed:
- Horizon color covering entire mesh when water is viewed from below
- Null reference error when destroying the water object in a build

 

Hi

Just purchased and trying to find some documentation but the link for docs isn't working?

Khush

 

Also - is there anyway to set and underwater environment at all?

 

Does this run on oculus quest and unity 2019.2?

 

Can I ask where you found a dead link? All links should point to http://staggart.xyz/unity/stylized-water-shader/documentation/

For underwater effects you could use the Post Processing Stack v2, and create a local volume with an "underwater" profile underneath the water. When the camera moves below the water surface, this profile will take effect. This profile could override the color grading to add a blue tint, for example. There are a bunch of effects in my SC Post Effects package which are useful for underwater effects, namely blurring and screen waving.

I haven't specifically tested this, but recently some one told me they go it to work by adding the EnableDepthBuffer script to the Center Eye Anchor camera object. Without this, the water will turn invisible in a build.

 

Hey! Love the work! Was going to purchase it but noticed that it does not support URP, LWRP or HWRP at this time? Is this coming?

 

Thank you This is unfortunately not in the cards. The render pipelines works so differently that porting the shader and rendering over is as much work as starting from scratch. At which point it would no longer work in the built-in render pipeline.

I'm conceptualizing a URP version, which will be an entirely new asset. I don't want to make any promises, as this may very well still be a year away, but at some point I'm going start on development (at least after other new assets are finished)

 

Will this water shader support lwrp or urp?

 

See my post above

 

Hi - curious if I can get transparency with the mobile shader as I can with the standard one? Need to see object under water if looking down into the water. Cheers.

 

Transparency between the mobile and desktop shaders works differently under the hood. But both shaders share the depth and transparency parameters. Note that the alpha channel of the "Shallow water" color also affects the transparency in shallow water, this is in turn affected by the "depth" parameter. Hope that clarifies it!

 

Thanks - still confused how I can achieve the same result though between desktop and mobile.
On the mobile shader, all objects underneath only appear in silhouette, tinted by color 0 - I can't see, for example, the octopus face, whereas on the desktop I can have pretty much have clear water if I want to I can see the detail of underwater objects from above.

e.g. Mobile shader
[

 

Also, do you know why my reflections in my test scene are 'upside down?? Example test scene:

 

That's very unusual, never seen that happen before. Are you using any special set ups like VR or AR? Does this happen with every thing in the scene?

 

Nohing special - just one camera, ios mode. I only had two objects on the water in the scene that were bobbing under and above the water.

 

Does this occur in any of the demo scenes as well? If that is the case, there must be a project settings that's conflicting, though I can't think of one. If you could send a zip of the ProjectSettings folder I can try to reproduce the effect. Should the reflection would fine in a demo scene, then it's likely something in the scene setup, any more information you can offer about it would be most helpful in that case.

 

I'm having a strange issue, where the water has this odd effect (see the attached picture). I'm using Unity version 2018.4.18f1 (must use this version for this particular game), and I'm also using (not the best computer) for Unity: a Macbook Air (details in the screenshot).

Does anyone know how I could fix this???

 

Very strange indeed. It seems like the depth information Unity is rendering somehow comes out corrupted. This never occurred between 2013 and 2019 Macbook using Metal. Normally, updating drivers may fix something like this, but that is of course not the case for macOS. So I'm puzzled

 

I might be wrong but it could have something to do with platform-specific differences?

https://docs.unity3d.com/Manual/SL-PlatformDifferences.html

They mention rendertexture + flipped rendering in the first section 'Render Texture Coordinates'.