0
\$\begingroup\$

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:

enter image description here

And no walls from back:

enter image description here

(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!

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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).

\$\endgroup\$
3
  • \$\begingroup\$ I'm already rendering all of my opaque objects before all of my transparent objects. However I'm not doing any sorting. Is there anything else I might be missing? You gave me the idea maybe I need to disable depth testing during drawing of transparent images but that didn't seem to help. \$\endgroup\$
    – Ben Wiley
    Dec 13, 2017 at 1:44
  • 2
    \$\begingroup\$ You must render all the opaque objects from all the chunks, and THEN render all the chunks again but just the transparent objects. \$\endgroup\$ Dec 13, 2017 at 2:01
  • \$\begingroup\$ Wow, I didn't even realize I WASN'T doing that, but that was it! Thanks so much. I got it to work now. \$\endgroup\$
    – Ben Wiley
    Dec 13, 2017 at 3:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .