Sample: Flowing Water with Xenko (UPDATED)

Showcase
#1

I’ve recently been enjoying this engine and I am excited with the move to open source. Something that I’ve been working on recently is figuring out how to implement a water shader. Water is one of those things that really stands out and I was not happy with just a simple flat texture and basic displacement effect.

I went into the process without knowledge of shaders. I had also just started really playing with Xenko. It was a bit of a fight to figure this out but I think I have the basics for a larger feature. With the lack of documentation and examples available for this engine, I thought I would share what I’ve got so far even if it’s rough around the edges. So here it is: https://github.com/TomGroner/XenkoFlowingWater

This is by no means an elaborate example and I have a suspicion that how I’ve done things might not be the best strategy. However it shows all of the pieces needed to render flowing water. I will probably keep working on this example as I discover further improvement. Some of the things that I will be playing with:

  • The textures used have a dramatic effect on how it looks. I played with a lot of them, and was starting to spend more on finding textures than I was on the code for the sample. I will keep looking for better ones and hopefully give a really nice effect. The sky in particular I want to replace, it’s too green. The sky is what gives most of the color to the water surface.
  • The sample does not implement varying water height and associated transparency. The example is a simple plane and a depth map sort of setup didn’t make much sense. I might put together a larger scene, perhaps a river or beach, with a shoreline and gradually decreasing transparency on the shore. I think that will look really nice.

A short video of the feature can be see here. I hope this is helpful!

6 Likes
#2

I am in the middle of working on a larger update that will show a river and a beach with dynamic transparency. A smaller updated I’ve just pushed loades up 4 different sky textures to display how much of a variety the water surface can have based on sky texture being reflected.

#3

This is really cool, keep up the effort.

#4

Doesn’t work for me. It shows a flat normal map texture. I’m on Xenko 3.0.0.3.

#5

When you run the game? Or in the editor? Right now in the editor the water does not show up, just the flow map. Once the game is running the water should render. I am still working out how to get the water to show in the editor, but since the way I put it all put together used a script, it’s not possible yet. I am going to work on a custom renderer and see if I can expand the feature into more than a tiny demo and into a water system at some point.

1 Like
#6

I’ve just published an update to this sample that switches from a script to a dedicated render feature. Main advantage of this is that the flowing water is now visible in the editor, not just at run time. Special thanks to @tonfilm for his example of how to create a custom render feature, this was how I wanted to do it originally but I was missing a few things that his example let me correct.

1 Like
#7

very nice, is there a screen recording of the water somewhere?

and thanks for mentioning the render feature, if anyone is interested, the repo is here:

#8

I don’t have one at the moment, but I will make one and post it. I also just noticed that there is an error when you run the project from the Xenko launcher instead of from Visual Studio > Open Studio. I apologize for that if anyone is getting it. If you clear the error 4 times (there are 4 samples) it will stop and work as normal. I am reviewing that right now, will try and make a quick fix.

#9

@tonfilm I’ve added a video of the feature in-game and playing with the editor a bit. https://github.com/TomGroner/XenkoFlowingWater/blob/master/Docs/flowing-water-video.flv?raw=true

1 Like
#10

Wow, excellent… Nice light scattering on the surface.