Stylized Water Shader

The Defoldmine
1

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.

sunset
sunset2560×1440 292 KB

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:

25 Likes
2

Yay! Thank you for sharing! :heart_eyes:

4 Likes
3

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

6 Likes
4

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 )

7 Likes
5

The missing wave functionality is coming with special ducks :face_with_tongue:

13 Likes
6

Also simple boat control.

Thanks to @jhonny.goransson, we now have marvelous billboarding support for particles, and for sprites as well :slightly_smiling_face:

(I know video is jittering but it is because the recording)

15 Likes
7

My initial idea was to share this wave functionality in Lua. Then I thought it might be better to move it to a separate extension as a general-purpose C++ native extension. That is why this is taking longer than I mentioned before.

Now it is possible to use it with a water shader or in any project that needs wave-driven, kind of floating objects.

Consider this a fun project. I highly recommend that you test it for your needs before using it in production. You may also want to use a fixed update, which is also possible with a small change to the C++ update, or pass the timing from Lua to C or vice versa for more solid synchronization. You may also run into floating point precision issues after hours or days, depending on the speed. There are different ways to address this, and how you choose to handle it is entirely up to you.

There are two simple examples to test it. It may take some time to load since texture compression causes this issue with cubemaps, so I had to disable it:
Boat: https://selimanac.github.io/defold-wave/boat/
Ducks: https://selimanac.github.io/defold-wave/ducks/

12 Likes
8

This looks amazing! Thank you for sharing! :heart:

2 Likes