5
\$\begingroup\$

I am making a minecraft-like world, with some differences. For instance, the camera will be facing always in the same direction.

I am having trouble with the visuals. Here is an example:

enter image description here

enter image description here

As you can see, when looking at a "step", as long as you can see the wall between the 2 levels, kinda like looking from it upwards, it is easy to identify. But when the wall disappear, kinda like when you are looking at it downwards, the step seems to blend, to a point where it is hard to tell where the step begins.

I thought of adding outlines, but due to the heavy palette of tiles that I am going to have, it would require to re-think a lot the logic to choose the correct tile, and I was hoping to find an easier solution.

What could I do to solve this problem?

\$\endgroup\$
12
\$\begingroup\$

There are two easy ways to solve this.

What minecraft does is use a pseudo ambient occlusion. This essentially creates a shadow around ledges, making them visible from any angle. It can even highlight the edges with the plainest blocks in the game: enter image description here

If you want to implement this, there's a nice tutorial about it here. You can basically make any corner darker, if two blocks touch there. It's best to send this information as vertex colors to the shaders.

The other solution is to use outlines. This needs a bit more work, including doing edge-detection on the depth buffer and can drastically change the feel of your game. It would look something like this:

enter image description here

To do this, you need to somehow get the depth-buffer of the image. This is a black-and white representation of the distance of the pixel from the camera. This is what it would look like:

enter image description here

Now do an edge-detection on it (basically the difference of the color of a pixel and its neighbours, more here):

enter image description here

The amount of white in this image represents the intensity of the egde, so in this case, the more distance there is between the two positions. You can do a smoothstep on this to only draw edges above a minimum distance and invert to colors at the same time:

enter image description here

Now just reapply this image to the main color buffer and you'll have outlines around ledges.

Example result:

enter image description here

(It doesn't work well with minecraft due to the large amount of non-block foliage everywhere)

\$\endgroup\$
4
  • \$\begingroup\$ Great ideas, the ambient occlusion seems like the best solution. \$\endgroup\$ Jun 1 '19 at 18:35
  • \$\begingroup\$ @EnriqueMorenoTent note that you'll probably really want to go with pseudo ambient occlusion, since real one is not only very hard to implement, but also doesn't solve your problem as well \$\endgroup\$
    – Hobbamok
    Jun 5 '19 at 10:46
  • \$\begingroup\$ Couldnt the post-processing stack do that for me? \$\endgroup\$ Jun 5 '19 at 15:14
  • \$\begingroup\$ @EnriqueMorenoTent Postprocessed ambient occlusion is called "screen-space ambient occlusion" (SSAO) and it works essentially like the edge detection except drawing shadow-like gradients instead of lines. However, it is prone to flickering artifacts and can't really draw the shadows with the right width (as you look closer they get smaller). The block-vertex-based solution as used in Minecraft is, I would say, superior to SSAO. (Though personally I would turn down the intensity and add exceptions so that it doesn't darken corners when a light source is right in them.) \$\endgroup\$
    – Kevin Reid
    Jun 7 '19 at 0:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.