Stylized Water Shader

This is a direct port of danielshervheim/unity-stylized-water from Unity to Defold, but I have made some additions, such as basic LOD for sparkles and foam, and added textured edge foam.

Even though this is a port, not all functions are the same. Unity has some built-in helper functions for shaders, which I tried to replicate as closely as possible, but the end result may still differ. The Unity version also includes shadows, while the Defold version does not. I left shadows and horizon blending to the user, since every game may require a different approach.

This is mostly suited for desktop games. It may suffer on mobile browsers, especially on budget phones. It might work on native mobile builds, but unfortunately I am not able to test it on a device, since I have a problematic phone with a Mali-G52 GPU, and it crashes as soon as I set flags = render.TEXTURE_BIT. for depth buffer. This is probably due to a driver issue, so I am not entirely sure :slightly_smiling_face:. You may try turning sparkles, reflections, and similar features on or off. Most importantly, I am not a shader expert, I am still learning, so please keep that in mind as well.

Reflections and refractions are not perfect. Reflections are not screen-space, they are only for cubemaps. Refractions are based on screen-space, but pushing them too far may cause artifacts, which is a generic problem.

This repo contains a few different kinds of caustics, foam, and wave textures and normals. Of course, you can also use your own or other textures. I highly recommend experimenting with different textures.

Test it

Day: defold-stylized-water-shader 1.0
Sunset: defold-stylized-water-shader 1.0

Also, I am working on a fake floating simulation ( this sounds like a big claim :slightly_smiling_face:). It is just a simple wave sampling, and it works well so far. I think I will be able to share it next week.

It should be tested using duck :slight_smile:

19 Likes

Yay! Thank you for sharing! :heart_eyes:

4 Likes

This is so cool thank you! I am learning shaders too, and trying to do water! Your project will greatly help me to try things.

I am currently learning through this playlist:

https://youtube.com/playlist?list=PL78XDi0TS4lGqHdLQGR2GHne85i9PebbN&si=F2OkFPRjnmWe8GkS

It is really great stuff, but you have to understand things in the visual editor to replicate it in GLSL code.

At video 36 and folowing there is a start for water shaders:

If I succeed to do It I will share.

I highly recommend reading this too:

And this

5 Likes

I forgot to share the demo links.

Day: defold-stylized-water-shader 1.0
Sunset: defold-stylized-water-shader 1.0

(Cubemap related issue: Cubemap textures render incorrectly when texture compression is applied · Issue #11566 · defold/defold · GitHub )

6 Likes