Partially transparent surface over opaque surface causes strange artifacts

Question

I have a world with many unit square tiles, each made up of a 3d terrain chunk and a 2d water chunk (a square). Each chunk stretches from [0, 0] to [1, 1] (inclusive) in its tile space. This means each pair of adjacent chunks shares an edge of vertices (although for sharing the visual I've curbed in the edges of the water chunks to make it obvious where the tile edges are).

I'm having a weird issue when I make water somewhat transparent (85% in my case). It looks like "walls" form between the water surface and the terrain surface below, along the edges of the tile. The walls reflect the water color, but with 100% opacity instead of 85%.

This side has a problem:

This side looks fine:

The weirdest part to me is that I can only see these walls from one side, as shown in the screenshots. I suspected maybe this had something to do with backface culling, so I turned it off, but that didn't change anything.

I did notice that the walls disappear if I stop rendering the terrain, and maintain the same level of water transparency.

No walls from front:

And no walls from back:

(The light blue in the second set of images is the sky color.)

Does anyone recognize this issue, know a name for it, or have an idea what I could change to fix it? Thanks!

Answer 1

The "walls" are not walls, they're missing grass pixels due to the depth test.

This problem is Transparency Sorting

From one angle the water plane is drawn before the next chunk behind it preventing the grass geometry from rendering over that little bit of screen-space overlap due to the depth test.

From a different angle the water plane in front is drawn after which does not cause the issue since the grass behind it has already been drawn.

To fix this easily you can render all your grass (all the opaque stuff) from all the chunks first then and all your water (all the transparent stuff) in all the chunks last.

Ideally for quality you want to render all transparent triangles sorted back-to-front or use other techniques such as Order-independent transparency but this can be a huge performance hit when sorting all those triangles or fragments at once so most games take various shortcuts (such as mentionned above: render opaque first, transparent last, unsorted, works well enough most of the time).