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

Can we make the shader 2 sided? I turned of zculling in Amplify shader editor but the underside of the water is black.

 

Do you mean this dropdown? Setting it to Off makes the shader double-sided


Though enabling this makes the underside appear identical on my end, so it being black may be attributed to a specific setting or lighting set up. Does this also occur in any of the demo scenes?

 

Hi! Would waves work with time scale = 0? They currently do not seem to. Also I've replaced _Time.x in the shader with _UnscaledTime param that I set from the script as

Code (CSharp):

1.     void Update()
2.     {
3.         water.SetFloat("_UnscaledTime", Time.unscaledTime);
4.     }

but now water is pitch black...
Also what are the requirements for foam to show up on intersection?
Thanks.

 

Thank you it's because I turned I off my sun when i am underwater to make things darker. I'm leaving my sun on but now my underwater scene is bright. Maybe I can use amplify to make the shader have a minimum amount of lighting so that it's never quite black, for artistic purposes. I'm glad you made it in amplify because that helps with the edits

 

Shader animation are also affected by the time scale, so this should work as expected. _Time.x technically unrolls to the same value as UnityEngine.Time.time. Little caveat: when not in play mode the time value is actually something different, don't know what.

I believe under the hood, if the directional light is disabled, the render pipeline stops passing on any values to shaderland (eg. rotation, color and intensity). So leaving it enabled, but setting the color to black may work better. In terms of performance, it fortunately won't make any difference.

 

It worked though!

Also, any advice regarding missing foam at intersection with a sphere?

 

The intersection foam effect is based on the scene's depth information. So generally for it to work the "Enable Depth Buffer" script needs to be attached to the camera (not needed when using Deferred rendering) and the scene objects need to use a material/shader that writes to the depth texture. This is almost always the case except for unlit and transparent materials.

 

Yay, I use unlit materials indeed. Thanks for pointing this out.

 

Hi again
I'm using the water in a top-down 2d project (unlit, orthographic camera, mobile shader)

But from time to time while running on mobile phones I get areas with transparency after ~0.1 - 1 minute. Yellow color is the camera background color therefore I think water is becoming transparent. It happens only on mobile and never in the PC Player.

Any thoughts on that?

 

If time is a factor, it's usually an indication that the shader is running into floating point errors, due to the limited precision of the device's GPU. Though, this varies per device, it could take minutes or even days. Nevertheless, some measures are already taken in the shader to prevent this, otherwise it turns pixellated over time.

Off the bat, I can't think of any aspect that can cause transparency to be affected. Is the yellow color not from the underlying terrain? Seeing as shadows are being casts onto something.

If you are willing to send me the material you're using (right-click->Export package) I can try to reproduce it on an old device.

 

Attaching the material.
Yellow is from the camera background.

This effect depends on Waves Height parameter. If it is 0, then water gets totally yellow. If it is > 0 then the water has this polygonal effect. I've changed the value and now it looks like:

And I've noticed it happens after the first tap on the water, not over time. Could raycasts interfere with the shader somehow? Like EventSystem.current.RaycastAll?

Please note that I've modified the code to support unscaled time:

Code (CSharp):

1. #region Reflection/Refraction render functions
2.         public void OnWillRenderObject()
3.         {
4.             if (!enabled || !material)
5.             {
6.                 return;
7.             }
8.  
9.             Camera cam = Camera.current;
10.             if (!cam)
11.             {
12. #if UNITY_EDITOR
13.                 currentCam = null;
14. #endif
15.                 return;
16.             }
17.  
18. #if UNITY_EDITOR
19.             currentCam = cam;
20. #endif
21.             Shader.SetGlobalFloat("_Unscaled", Time.unscaledTime);

to pass it to the shader

Code (CSharp):

1. uniform float _Unscaled;
2.  
3.         void vertexDataFunc( inout appdata_full v, out Input o )
4.         {
5.             UNITY_INITIALIZE_OUTPUT( Input, o );
6.             float3 ase_vertexNormal = v.normal.xyz;
7.             float4 VertexColors729 = lerp(float4( 0,0,0,0 ),v.color,_ENABLE_VC);
8.             float3 ase_worldPos = mul( unity_ObjectToWorld, v.vertex );
9.             float2 Tiling21 = lerp(( -20.0 * v.texcoord.xy ),( (ase_worldPos).xz * float2( 0.1,0.1 ) ),_Worldspacetiling);
10.             float2 appendResult500 = (float2(_WaveDirection.x , _WaveDirection.z));
11.             float2 WaveSpeed40 = ( ( _Wavesspeed * _Time.x + _Wavesspeed * _Unscaled ) * appendResult500 );
12.             float2 HeightmapUV581 = ( ( ( Tiling21 * _WaveSize ) * float2( 0.1,0.1 ) ) + ( WaveSpeed40 * float2( 0.5,0.5 ) ) );
13.             float4 tex2DNode94 = tex2Dlod( _Shadermap, float4( HeightmapUV581, 0, 1.0) );
14.             float temp_output_95_0 = ( saturate( ( _WaveHeight - (VertexColors729).b ) ) * tex2DNode94.g );
15.             float3 Displacement100 = ( ase_vertexNormal * temp_output_95_0 );
16.             v.vertex.xyz += Displacement100;
17.             o.vertexToFrag713 = lerp(( -20.0 * v.texcoord.xy ),( (ase_worldPos).xz * float2( 0.1,0.1 ) ),_Worldspacetiling);
18.             o.vertexToFrag714 = ( ( _Wavesspeed * _Time.x + _Wavesspeed * _Unscaled) * appendResult500 );
19.             #if defined(LIGHTMAP_ON) && ( UNITY_VERSION < 560 || ( defined(LIGHTMAP_SHADOW_MIXING) && !defined(SHADOWS_SHADOWMASK) && defined(SHADOWS_SCREEN) ) )//aselc
20.             float4 ase_lightColor = 0;
21.             #else //aselc
22.             float4 ase_lightColor = _LightColor0;
23.             #endif //aselc
24.             o.vertexToFrag746 = ase_lightColor.rgb;
25.         }

 

Ah right, that makes sense. Both _Time and _Unscaled are values that keep adding up, which amounts to a very large number when combined, beyond the capabilities of the hardware. If I'm not mistaken, you could simply replace _Time.x with _Unscaled instead. If the goal is to have the wave animation ignore the time-scale, that should do the trick.

Physics should not interfere with any rendering, since there is no communication between the two aspects. Though one thing to check is if the camera's far clipping plane value is as low as possible, which is particularly important on mobile, to increase the accuracy of depth rendering:


In your package, you've inadvertently included the water shader file, if you could edit your post and remove it, that'd be appreciated!

 

Thanks for the help! It was camera clipping indeed, but it was far plane somehow, not near plane. Still not sure how is this specific to mobile and input systems but increasing far plane worked!

 

Is it possible to create a round wave effect at a specific point?

 

The short answer would be, no, that's not possible. Possibly in the future for Stylized Water 2 through the means of injection normal map stamps/decal into the water surface.

 

Oke, thanks for your response. I have one more question. I'm writing a post-processing underwater effect, Is there any way I can retrieve the water height at a specific point? I know I can just use the transform.y but it's not precise enough, especially when I'm using y-scale for big waves

 

This won't be very straightforward I'm afraid. The vertex animation for the waves is part of the water's vertex shader (
vertexDataFunc function in the shader code). It's not very readable since it's generated code by ASE, which makes it a bit challenging to reproduce 1:1 in another shader

 

Hello

TY for an awesome product. I was wondering my man, I use this for a bubble - so I use it on a sphere, and I was wondering if there was anyway to get rid of the EDGES ?

I tired making normal textures seamless in photo editor, but I still get edges. I know your product is not meant for a sphere but I thought maybe you could help me ?

Thank you again, great product

 

I actually have a similar use case and would like to know if there's a way to do this.

 

I don't think there's a way to UV wrap a sphere without at least one seam, so seamless tiling wouldn't be possible.

 

Hi! I'm using your splash prefabs with Particles/Mobile shader from your pack. They are often/partially rendered on top of almost any 2D sprites and other particles no matter what Layer and order I set. Although I like your dissolve part and would like to keep it. Is there a simpler way than I go and learn shaders?)

 

This is likely because the particle shader is off a "cutout" type. You can edit the shader file and replace
"RenderType" = "TransparentCutout" with "RenderType" = "Transparent" so it renders in the same way as other particles. After which, you can control the sorting through the layer order (on the renderer) or render queue (on the material).

 

Thanks for the guess! Somehow Z-order of the objects matters, but Sorting Groups do not. Shader change did not help either unless I change Z. So this seems to be something with my misunderstanding of particles sorting and not the asset. Sorry for churn!

 

So I noticed that another Particle system that conflicts with the Splash is using Billboards while splash uses Mesh. I tried switching to Billboard and noticed dissolve scale is more sparse now.
- What is the reason for using Meshes for the splash? Is there some trick with UVs?
- Any advice on how to switch to Billboards?
Thanks!

 

That's correct! Some meshes have a 2nd UV channel which controls the size of the dissolve noise. Whereas the 1st UV channel aligns with the texture atlas.

If you have Stylized Water 2, the included particle effects can also be used in the Built-In RP by switching the shader to Particles/Standard Unlit. These are comprised out of flipbooks and uses billboards.

 

I decided to go ahead and purchase v2 also. With the proposed change billboards are plain white. Am I missing something?

 

Ah yes, the texture field is probably blank on the material. Built-in RP and URP both use a different property name for it, so it tends to not carry over when changing a shader. But you can reassign it (perhaps change it back to see which one is supposed to be assigned).

 

Hi @StaggartCreations,

Is there any way to mask a certain area so that the water shader does not apply? e.g. here I do not want my tunnel to be flooded:



Thank you!

 

To answer my own question: I don't know if it's possible to mask certain areas, but it's no problem to combine different water objects. No matter whether they overlap or just are adjacent to each other, as long as they have the same settings it results in one seamless area.

 

A "depth mask" shader will be able to cut out a shape in the water surface. I've attached a package with one. You can assign the included material to a plane mesh and position it where the hole should go.


A small caveat is this'll hide any and all transparent materials behind it, not just the water. But adjusting the render queue on the material offers some control over this.

 

Awesome stuff, I'll give that a go, thank you.

 

I'm getting a weird affect where the water is a lighter color in the distance. Any idea what's causing this, and how I could fix it? I thought it might have to do with the camera's "clipping planes," but making the "Far" number higher didn't fix this issue.

 

A fix for this is queued for next update, it affects only Android/iOS and becomes prominent when dealing with large distances.

I'll DM you the modified file in question shortly.

 

Hello. Is any way to switch on reflection on mobile ?

 

The rendering of planar reflections would be not be supported. If you're targeting a mobile platform, the option is not present in the UI.

 

I have a big problem: I don't understand, when I move my camera (not moving, only rotating), why I have intersections appearing on the edges of the camera. It also makes my Points Lights appear and disappear depending on the angle of view of my camera.

I use a lot of point light and they are in realtime with Built-in Pipeline. Help me plz ='(

Update : I tried it with spotlights and it's a thinking problem. With the sptotlight, it reacts like a spotlight when it is close to the water and there is the same problem depending on the camera angle.

 

The water will only supports 3 point/spot lights at a time. Unity will determine which ones those are based on: proximity to the mesh's position (pivot point), visibility to the camera and brightness of the lights. So all of these factors can cause a light to stop/start being visible on the water surface.

 

Thanks for awnser, have you a solution for resolve that ?

 

What I described is more a limitation of how lights work in Unity. However the shader can be modified to support more than 3 lights (depending on the max pixel lights set in your quality settings). This does require using Amplify Shader Editor, since the shader is authored there. I'll outline the steps:

- Change the Light Model to "Standard (under General)
- Check the "Add Pass" checkbox (under Rendering Options)
- Reroute the input for the Standard Surface Light node to the master node inputs:


After which the water will support >3 point/spot lights


The reason why this isn't default is because this set up breaks the Basic/Unlit lighting modes.

If you don't own ASE, feel free to send me a private message and I can send you the modified shader instead.

 

Hello, I shot you an email about this too, but I wanted to use the mobile version of the asset, but it appears the package is missing the required script, the one the documentation refers to as EnableCameraDepthInForward.cs. The mobile example scene's water is just a white square and the camera has a missing script where EnableCameraDepthInForward.cs is supposed to be. Could I get a replacement for that script?

 

In your email you mention "Definitive Stylized Water" which is a different asset altogether, so I can't be of any help there!

 

Hello Staggart, I'm having an issue where my build shows the water a bit darker and no reflection. unlike the editor. any advice? i have another scene where everything translates fine into the build. same project, cloned water (just a different color). what gives?

 

The two water body instances (one being the clone) likely need their own material instances as well, at the very least to ensure they each have their own color.

 

They DO have their own materials. but in the editor, it looks like the color i want. but on the build is a lot darker. and its only THIS water that it happens too...

 

Version 2.1.6 is now available to address a bug fix.

Fixed:
- Lighting mode option changing value when changing the scene and the water object is a prefab (In Unity 2021.3.15+, or versions released after December 15th 2022)

Changed:
- The 'StylizedWaterShadowCaster' and 'StylizedWaterBlur' components are now hidden from the Add Component menu, as these are automatically added when needed.

Deleted:
- StylizedWaterRenderer class, obsolete since v2.0.8

Please see if the updated version makes a difference. It involves a fix to the lighting mode which can account for slight color differences.

 

this doesn't seem to fix anything. same results. Also some reflections are not showing on the build/game mode either

but here is the weird part. the reflections that do show in the "game" tab can be "moved" around by moving around the scene view in the scene edit window. this DOESN'T happen in my other scene where the reflections are working perfcectly btw.

I don't know why THIS scene in particular is having this issue when the water materials is identical to the other scene (that works fine) except for the color tone.

 

I having issue with the splash. For some reason it disappears on different angles. And it’s bluer than before. I want it to be white. Changing the color on shader doesn’t help. Any advice? I’ve attached a gif.

 

I suspect you're using the Particles/Standard Surface shader for the particles, since the included particles shader doesn't have a color property. This shader also does directional/ambient lighting.

You'd want to change this parameter on the particle system, so that the normals aren't completely pointing towards the camera:

This is currently the case (default=1), which is why the camera angle makes the particle linearly blend between ambient/direct lighting.

Why the particles clip against the skybox is a different story, and could be attributed to a few different things, but that warrants more investigation.

 

Hi, its nice water, but i cant make shadow from my object to water. How can i make it?

 

Receiving shadows on transparent surfaces is generally not supported in the built-in RP unfortunately!