Water & fin colors

August 2024

After studying some real koi, I noticed that patterns usually extend on to the fins to some degree, although they seem to fade out where the fins get thin. I've made the pattern towards the tail a little bit longer, so the tail fin now has colors too. The smaller fins also take the color of the body area they are attached to. I'm not sure whether the small fins will get actual spots and shapes, I'll have to see how that looks. The fin colors will eventually fade out as the fins get thinner.

The water will of course be very important for the game. Since koi are usually underwater, the water renderer will determine how the most important elements of the game look. Water rendering will have a pretty large number of components:

  • The underwater buffer. Everything that's underwater will be rendered on this buffer.
  • The waves. Waves are animated and bounce against the shores. Fast movement of koi will create waves, as well as wind and rain. Waves should elevate and lower the water plane in 3D.
  • Reflections. The environments should be reflected (and distorted) by the water plane.
  • Special rendering near the shores. I solved this in koi farm 1 by rendering an opaque light blue border to clearly mark the difference between land and water, and I want to do something like that again.
  • Particles, like fallen leaves, should be able to float and move on the water surface.
Water grid
The water grid

The water surface is essentially a plane that's constantly being deformed by the shape of the waves. For distortion, it's important to have enough detail. The mesh also needs to look good while deformed. A square grid mesh has awkward diagonals which cause visual artifacts, so I opted for a hexagonal grid instead. Every vertex on a hexagonal grid has exactly six edges with equal angles between them, so the amount of visual glitches is reduced.

To ensure the grid has enough precision, I use a level of detail system. Rendering a fine grid the size of the entire playing field is too wasteful, since small details aren't visible when zoomed out, so I instead scale the grid as you zoom in to ensure the surface area of water triangles in pixels is always roughly the same.

Shore
The water plane with smooth shore waves

The first water rendering property I've implemented are shore waves, shown on the right. These are waves that slowly bounce against the shore where the water is shallow. They adapt to the koi garden in real time, so if more objects are added to the pond (lilies, rocks, new ponds), the shore wave renderer immediately adapts to that. The distance to the shore is calculated as a distance field; this will come in handy later when adding particles to the water surface, which will need to avoid the shore as they move.

I've also created a system that can change various rendering settings, like shadow quality, anti-aliasing settings, and geometry detail settings. This will mostly help me during development, but of course some of these will be exposed to the user in the final game. As a bonus, the game never needs to restart when graphics settings change, it all happens on the fly, because I love it when games support that.