Water reflections!

Hi people. It’s me, I am back. Now I have a question. How to make water reflect?


I would like to achieve the same reflection. And I have no idea, how to do it. I’ll be glad if you guys help me. I tried searching online, but since my english sucks, I couldn’t find the correct tutorials about it.

1 Like

The developer posted a commentary on the forum themselves.
https://forums.tigsource.com/index.php?topic=40539.20

And I have also posted on the defold forum about reflections on the water surface.

I too have a great interest in beautiful water surface effects. I hope you find the above links helpful.

2 Likes

It seems you need to clone stuff, flip them by vertical and apply water effect on them :grinning_face_with_smiling_eyes:

thank you. I will check it and try to find an answer out of it

Hello @BlackHole , I was inspired by your question to try it out for myself and put together a sample project that others can learn from. I know there are many ways to pull off water effects in games and I wanted to stick to your example of the game Kindom classic.

So what is needed to create this effect in defold? First thing I though about is the area that will to be reflected. We can call this the “play area”, this will need to be captured and then flipped and inverted to get that mirrored angle and then we need to display it somehow. So how we do that in defold would be to create a render target, capturing a defined area of the screen and writing the color bits to the RT buffer then use a predicate and material to draw and bind to for use in the shader. In the rendertarget pass we set a view which we calculate and send to the renderscript beforehand. The view is positioned at the bottom left of where we want to capture the play area, we define the width and height of the rendertarget to cature what we want and nothing more.

When it comes to displaying the play area render target in the game we can use a custom quad. We can use a model component to display to this quad assigning the material with the bound rendertarget. To get a mirror effect instead of flipping and inverting the rendertarget we instead can adjust the UV’s of our quad say in blender’s uv editor by rotating 180 then flipping the uv’s in the x axis and export as glTF(.glb) format. This will give the mirrored effect by default in defold without any extra work in a shader or otherwise. You might wonder about the size of the quad and how to get it exact. In blender by default a unit is 1 meter and we can think of the transform properties (“n” panel) dimensions to be 1 meter unit = 1 pixel in defold so we can set the quad to be what ever we need the (x, y) size to be in the x and z dimensions property.

Now the water distortion effect we can pull off in the shader and the tigsource forum post that slotet posted is a great source as the dev goes over how it was done. In the sample I kept it simple. I also use a distortion texture to offset the uv’s and make the rendertarget texture slightly darker. A vertex constant is set in the material and in the shader its used to seamlessly scroll the distortion texture. The effect can be improved like in Kingdom I believe they have another pass of the distortion texture scrolling at a different speed giving a more rolling water effect and ofcourse the water gleem or foaming effect would also be a nice addition to the effect.

You can play the sample project here:

download the project here on github:

cheers

9 Likes