3
\$\begingroup\$

I am quite new at using OpenGL/GLSL. Basically, the project I am working on is my first 'real' experience with it. I do not know whether this is relevant, but I use for my project.

Currently, I am trying to use the GL_LINEAR filters to draw tile of my (tile) map (before I was using GL_NEAREST without problems).

My map contains diagonal roads (just simple lines in this example). A partial overview/example of my map (using the nearest filter without corrections):

partial map

With the GL_NEAREST filter, initially I added a 1 pixel border, so the tiles were slightly overlapping and the diagonal roads were draw without the small gaps at the edges of the tiles.

This does not work with the GL_LINEAR filter, because I suppose that the overlapping parts are drawn twice, resulting in a darker 'blob':

blobs

I tried to get rid of the blobs, by making the horizontal lines shorter, but there is always an irregularity, either a blob or an 'decrease of line width' (as seen in the diagonal part of the line).

So I removed the 1 pixel additional border and have this as a result:

ugly diagonal road

Now I am trying to fill in the 'gaps' by drawing the two triangular fillers like this:

2 triangular fillers

but I can't get it completely right (this is the best I managed to get):

somewhat better diagonal road

I suppose it is virtually impossible to get this perfectly right by 'manually' drawing these triangles. Also, when looking at the third image, the lines at the 'edges' (that need to be filled) are very sharp. I suppose this is problematic..?

So, my question is: how does one solve this problem? Do I need to prepare/modify my textures for this? Can I use a shader to fill the gaps automatically? Is manually filling the gaps with the triangles the way to go? Or is there some entirely different technique to have smooth diagonal lines that span multiple tiles?

\$\endgroup\$
  • \$\begingroup\$ can you show us how the map looks like with a zoomed out screen shot? and not close one like this. \$\endgroup\$ – concept3d Dec 30 '13 at 13:28
  • \$\begingroup\$ Can you not just draw the lines a little longer than they actually are so that the pixel snapping overlaps the other line? \$\endgroup\$ – RandyGaul Dec 30 '13 at 20:50
  • 1
    \$\begingroup\$ As mentioned in the question: I tried that (adding a 1 pixel border around my tile, so I could draw the lines a little longer), but I got 'blobs'. I think because of the blended/aliased parts. I'll update my question with an image of these 'blobs'. \$\endgroup\$ – Veger Dec 30 '13 at 21:57
  • \$\begingroup\$ When you say lines in this question, are you literally talking about GL_LINES primitives? They follow a different rasterization rule (diamond-exit) from triangles (top-left) for pixel coverage, which can make trying to get the two different types of primitives to cooperate difficult at times. But honestly, I suspect your texture wrap mode is to blame here. Can you post a little bit more setup details for your texture state? \$\endgroup\$ – Andon M. Coleman Jan 4 '14 at 8:57
  • \$\begingroup\$ @AndonM.Coleman Sorry I respond so late (I did not get notified for you comment...) I use 'lines' in this question as a simplicifaction of roads (symbolized the line parts on my tiles). So no OpenGL lines... Furthermore, I just paint sprites (from a texture atlas). What kind of additional details for my 'texture state' are you referencing to (which I need to provide)? \$\endgroup\$ – Veger Jan 19 '14 at 15:42
2
\$\begingroup\$

Unfortunately, the problem is hopeless as it stands. You cannot get acceptable filtering at boundaries without each tile being somehow more aware of its neighbours. I recommend changing the way you draw tiles.

Here is what you should do. First, render your tiles to an offscreen framebuffer at ratio 1:1 (using GL_NEAREST, which already works for you). Then, render the resulting texture to screen at the desired scale ratio (using GL_LINEAR for proper filtering).

\$\endgroup\$
  • \$\begingroup\$ So simple yet so elegant... Should have thought about this myself, I really need more experience with these kinds of things. The buffer is even usable as a cached image with some proper 'invalidating scheme/detection', resulting in about 15-20% increase of my FPS! Thanks a lot. \$\endgroup\$ – Veger Jan 21 '14 at 22:34

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.