White Shining Rock Logo
White Shining Rock Logo


June 28, 2013 | Dukus | 60 Comments

I've been working on adding terrain variety to the game - I wanted nice wide valleys for easy game play, mountainous regions with less usable area for harder game play, and more water features, such as lakes and ponds. When I started on the lakes and ponds, the material I had built for river water just wasn't looking right for larger bodies of water.

After a few hours of messing about with the pixel shader for the water and not liking any of my results, I decided to examine some pictures of real lakes and ponds, and thinking about how I'd make water work if I was coding a realistic global illumination renderer. It's very easy for me to get distracted by visuals that don't fit in, and I really like graphics programming, so I went on a bit of a graphics binge.

So what happens when light enters water? There's a chance that the light scatters off the water just like it does on the ground. There's a chance that it will be reflected over the surface normal of the water, and there's a chance that it will refract into the water and continue into it. There are changes in the amount of refraction vs reflection based on surface normal. Once light enters the water, depending on how far it travels it will probably hit something and scatter.

So I decided to try to do all these things, albeit gross approximations to what actually occurs in nature, since I needed the entire water pixel shader to fit in ~50 assembly instructions so that I could maintain using a mininum of shader model 2.0 and still have instructions left for computing shadows on the water. Here's what I ended up doing.

TerrainThis is the terrain I'm starting with. The landscape has had a few lakes carved out of it, and it's been eroded to give it a slightly more realistic shape. The first thing I decided to deal with is depth scattering. The effect I was going for here is that while water is clear, the deeper it is, the less you can see. There are a few ways to approach this in an accurate way, but I chose a simple fake rather than more GPU work.

Depth ColoringI color the terrain to a dark color based upon how deep it is. While not physically accurate, it's fast and it does the job. Shallow water stays visible, deep water is dark, and there aren't too many places where it breaks down visually. When the water renders on top of the colored terrain, it will blend with the edges, showing transparency just at the edges of lakes and in shallow streams.

Normal MapFor refraction, reflection, and cubemap reflection sampling, I'm going to be distorting things using a normal map. This texture is generated from several textures that move over time to give the impression of slight waves. Different textures are used for the rivers to simulate ripples moving downstream.

RefrationNext I want refraction. Where you can see through the water, there should be an offset and distorted view of what's below. I copy the entire frame, and by using the normal map as an offset for sampling, the frame is distorted. This effect is hard to see when not in motion and when reduced to a small image, so I've increased the effect dramatically for this image.

ReflectionNow I need reflection. I had a few choices here, and my first was to only reflect the sky. This is easily doable with a cubemap but it lacked a certain realism. So I took a few hours and made changes to my graphics engine to actually render a proper reflection. I then took a few more hours and added an actual sky to the game, because it needs to be there to be properly reflected. This certainly takes a bit more CPU and GPU time, but I think the visual results are worth it. For those with slower GPU's, players can always cut the reflection back to just the sky and terrain, or just the sky.

Distorted Reflection Once the reflection is generated it's distorting using the same normal map as the refraction. You'll note there are no shadows on the reflected trees in the non-distorted version. This is for performance and once distorted it's hard to tell there's anything missing. The renderer can handle this situation, but the visual payoff isn't worth the extra GPU time.

BloomNow if I had a high dynamic range renderer, the sky would encode lighting values from zero to infinity and you'd get nice effects like over-brightening where the sun is reflected on the water. Since the renderer only works in eight-bit color values, this sort of effect has to be faked. I have a simple cubemap with the sun and bloom in it. The view direction is reflected over the surface normal and the cubemap is sampled. This gives a very nice highlight where the sun is brightest.

DiffuseThe final thing I need is diffuse scattering. This gives the water a bit of an emerald color in some viewing conditions and allows shadows on the water to be visible. Not much of this color is generally visible, but it's lack of contribution would be noticed if it wasn't there.

Final Image

CubePutting it all together, results in a nice scene with fairly decent looking water.
But unfortunately my work wasn't yet done. When it rains, or when there is snow on the ground, a bright blue reflection in the water doesn't look right.
So I needed another sky for when it rains. I encoded the cloudy sky in the same cube map as the main sky, but flipped into the lower half of the cube. When the sky renders, it samples both the upper half and lower half of the sky, and blends between them based on seasons and weather.

RainHere's the same scene while raining.

So now the river water in the game looks much better, and larger bodies of fit into the scene nicely. Now I'm back to adding more interesting terrain features. While I'm at that, enjoy these other images of the new water.

Water Screenshot 5

Water Screenshot 4

Water Screenshot 3

Water Screenshot 2

Water Screenshot 1

Leave a Reply

Your email address will not be published.

60 comments on “Reflections....”

  1. I've followed this game for a while, but despite how wonderful it looks I never felt the need to comment. This post changed all that. The water looks absolutely stunning, and I loved reading about how it was created. Absolutely beautiful.

  2. Way to take that poopy looking water and turn it into heavenly bliss. I keep throwing money at the screen but I'm not seeing the game...

  3. Interesting read, and the results look fantastic! With those beautiful bodies of water in the game, perhaps there's room for some additional game-play integration? Waterborne trade routes, deep water fishing, ferries, etc.

  4. Excellent work as usual! Being an aspiring developer myself, I love the fact that you share the workflow and "how's" instead of simply posting pictures of when everything is done.

    Question: As for the coloring/saturation of the water, I can see that you're aiming for the "gaming-version" of it - but have you tried experimenting with a much deeper/dark look? The picture where you mention HDR is the one that, for me, comes closest to reality in the biome you're showcasing. (Crystalline water is something us northern scandinavians consider exotic 😉 )

  5. That water is amazing, going to enjoy every second playing with visuals like that. Glad you are taking your time with the game its really paying off.

  6. This game is a visual feast! Thank you so much for doing this!

    Looking forward to release!

  7. Absolutely stunning. Thank you for taking the time to keep us updated on what you are working on. Every time you post, it just makes me more and more excited for the game.

  8. Lakes! Now I can only hope for coastal map generations. Perhaps seaside cliffs and/or gently sloping beaches may hold our settlements in the future?

  9. the amount of time you put in to just make one thing work like it is meant to is amazing and it truely shows thats some of the best water ive seen 😀

  10. Looking nice, keep going like this and people shall be willing to play it just for the graphics

  11. As others have already said, this water is beautiful, so I won't repeat them.

    However, I'm wondering about the reflection of the sun on the lake during the rain weather-set. It looks kinda strange because most likely there wouldn't be any noticeable sun out with the clouds covering the sky.

  12. Looking fantastic as usual. I'm consistently amazed how many big-budget games fail to put this level of work into their water rendering.

    I specialize in CGI water simulation and rendering, and while there are some major differences which probably limit the usefulness of my input, there's one subtle tweak I wonder about and I'd love to see the effect of.

    Your water, as beautiful as it looks already, to my eye shares a common problem with a lot of game-water I see. The blend at the edge is too smooth, there's no defined edge to the water. To me, it gives it a bit of a floaty, ethereal look.

    I'm not certain exactly what's causing it. My suspicions are:

    - It may be that you're fading off the reflection pass with depth at the edges, in the same way that you're fading in the refraction pass. This wouldn't happen - reflections would be full right up to the edge, as they're not depth-dependant.

    - It may be a fresnel issue with the refraction, at any camera pitch angle other than looking straight down, the refraction shouldn't be transmitted 100%, there should be a noticable darkening of the refracted light.

    I'm a million miles away from an expert when it comes to real-time graphics engines though, so it may be that you've already covered all that, and this is the best trade-off. I wonder if it could be because having any kind of sharp edge will give away the normal-mapped-flat-plane nature of the water, and destroy the illusion of physical waves.

    Anyway, as I said before, it looks fantastic already 🙂

  13. Some really awesome work here.
    We really appreciate these blog posts as they would really take time to do.

    The effort you have put into this game in phenomenal

  14. Yeah, i want this now. He should do a beta which is cheaper than the full game and then notch it up as time moves along. Like Minecraft.

  15. ...take...money...NOW....NOW!!! 🙂 Again, fantastic update...i'm learning so much about how the games I am barely smart enough to play are made 😛 ! Thanks!

  16. @Ofczy: If I ever do something where the ocean meets the land I'll think about foam and surf.

    @Bonius: Yeah, the water could be more turbulent and darker, but as you said, going for something that fits in with the existing artwork.

    @Augwich: Yeah - the sun bloom fades out when it's cloudy. I took the screenshots before I made that change.

    @Dan: You're right - when the water butts right up to the land it looks a little strange - a very hard flat edge. So I soften the edge a bit so you don't see the hard seam. I briefly thought about better and more realistic ways of taking care of it - reconstructing position from the depth buffer and computing the actual depth from the surface to what is underneath for use in the underwater scatter, also using a more realistic Fresnel term for reflection vs refraction. But it's definitely a trade off for performance vs realism.

  17. Great explanation of the water rending process. The visuals are looking better and better. I have shared this with some fellow artists here at work, to help explain to those who are new to 3D and rendering, how it works.

  18. @Dukus: The water is amazing. I don't think the edge is a problem with the water, rather the terrain. Most rock and dirt noticeably change colour when wet, giving a very distinct edge to a body of water.

  19. That's beautiful! By the way, with mountains, will there be a way to build on the side of one, just requiring more materials for stilts and stuff? And, also, will there be beach towns? I'd be interested in both. Keep it up! So excited!

  20. This water looks better than water in most other games, and from the sound of it, it'll run smoother than anything out there.

    Judging by all the efficiency you're putting into the code, it sounds like an older computer will still be able to run on highest settings.

    Do you have a way of determining which direction the rivers flow? Do they actually flow down some slope? Do rivers slope downwards as the cross terrain?

    Will there be some sort of Dam structure? Could it affect the terrain and water levels?

    Just keep it up. The end is in sight, and I bet the whole community can't wait to hand over wads of their cash. 🙂

  21. Your work is amazing and this entry is absolutely stunning. Just like everybody else around here, I simply can't wait for a release.

    I have just one question. You may have answered it some time ago, but as the topic of water has come up, I was wondering if bodies of water, or at least still lakes and marshes, will freeze over in winter ? And if so, enough to be crossable by villagers and animals.

  22. Some more observations.

    As Dan said, the edge is hardly visible. The reflections are physically correct, at least approximated. When looking at lakes and rivers in nature, other things are different:
    – Vegetation often touches the water boundary, below water there is often no vegetation (rivers), i.e. rock or earth, or algae. This creates a sharp edge. If you redirect a creek so it flows over grass, the boundaries are hardly visible, the colour difference from the tilted vegetation (other colours on the bottom of the leaves) is sometimes the strongest indicator.
    – Wet rock has different colour. Except when it rains, this creates a sharp edge too.

    I also think that the waves look a bit too flat. Isn't it so that the flatter the incident angle, the more light is reflected? So wavecrests would look darker than flat water. Perhaps making the reflections weaker the steeper the normal map is there would make waves look a bit more realistic!

  23. @Granjow: Water rendering can get insanely heavy when you're aiming for near-photorealism. I can certainly understand the tradeoffs Dukus has made. As a CGI effects artist, I tend to take a physically correct fresnel term for granted, but it wasn't so long ago that it was a pretty heavy calculation to run even in movie effects work.
    It would be interesting to see if the edge could be given more definition using foliage as you suggested, but I suspect it would need to be so dense to be effective that it wouldn't be viable either.

    It's still up there with the best of them when it comes to game engines anyway 🙂

  24. Looking gorgeous. I just hope my rig can handle it all when the settlers start running around chopping, building and farming.

  25. @Dukus

    Are you going to make different options for reflections? Even if some of them would make my game lag, I would still like to try them out atleast. 🙂

  26. My god, it's beautiful! I say, you rally know how to do nice things! I can't wait to play it!

  27. Finally a city building game that looks the part.
    I hope Banished keeps it real, unlike other games in this sphere that make no economic sense.
    I also hope the game is kept within the pocket of the player if the advancements are dependent on spending money on the game. (eg: Lord of Ultime has a very good affordable player fund option that works extremely well).

    Can't wait 😉

  28. Great work on water graphics!

    Also guite genius idea of using blue painted botom to fake water depth.
    Now why not use this idea for making water edge to stand out more.
    Based on the pictures you I asume you use some kind of logarithmic function for smothening transition between normal terain color and blue color used to paint water body bottom.
    So why not simply increase the result of this function by 2 (transition function + 2). This would make visible darker edge on the terrain similar to the one left by water.

    Another note:
    While river banks usually do have steped sploped edges, lakes baks usually have quite smoth slpoed banks.

  29. The water looks really awesome, and I loved reading about the creating process. Awesome work, thank you!

  30. so Awesome I could cry.

    It saddens me to say that all the hard work you'd done in improving graphics will be wasted as I wont be turning the resolution and effects up to Highest level. :<

  31. Awesome. I love the effects on the water. And are you the only person working on this game?

  32. Keep up the good work man! by the way any chance that you can share any information about the system requirements ?

    I hope i will be able to run it with my Core i7 2600k Hd7870 rig 🙂

    And i only hope there will be a pre-sale soon! Maybe with a beta gameplay included 😉 For sure this game gonna worth every euro it's gonna cost for me.

  33. Fantastic job and thanks for sharing the workflow, makes for a very interesting read. I would also like to know if you have any idea on specs needed for the game and if you have any planned release date/Beta access? if you want someone to test for you let me know 😉

    Keep up the good work...

  34. you are so insanely talented! I often get frustrated and impatient waiting for games I'm looking forward to to come out, but I am so happy to wait for this and for you to take your time. It's clear how much time, effort and love you are putting into this, and it's going to be so worth the wait. Much respect and gratitude!! Keeping us updated and informed like this is such a bonus too. You put the big developers to shame!!

  35. I am so hyped for this game, it looks amazing and i can't wait to be able to pre-order. Keep up the good work!

  36. Mate, I think I speak for many people when I say, thank you for all your effort on building this game!

    Can't wait for it to come out!

  37. I really take pleasure in enhanced comfort along with the superior of rs gold, cervice is great, thank you actually significantly for ones significance

More Posts

Code Rot

April 17, 2022
1 2 3 47
Back to devlog
Back to devlog
© Copyright 2021 Shining Rock Software
Website Design & Branding by Carrboro Creative
menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram