I am using my OpenGL custom engine to render a tilemap made with Tiled, using a well spread tileset from the web. There is nothing fancy going on. I load the TMX file from Tiled and generate vertex arrays and index arrays to render the tilemap. I am rendering this tilemap as a wall in my 3D world, meaning that I move around with a fly camera in my 3D world and at Z=0 there is a plane showing me my tiles. Everything is working correctly but I get ugly seems between the tiles.

I've tried orthographic and perspective cameras and with either I found particular sets of parameters for the projection and view matrices where the artifacts did not show, but otherwise they are there 99% of the time in multiple patterns, depending on the zoom and camera parameters like field of view.

Here's a screenshot of the artifact being shown: http://i.imgur.com/HNV1g4M.png Here's the tileset I am using (which Tiled also uses and renders correctly): http://i.imgur.com/SjjHK4q.png

My tileset has no mipmaps and is set to GL_NEAREST and GL_CLAMP_TO_EDGE values. I've looked around many articles in the internet and nothing helped.

I tried uv correction so the uv fall at half of the texel, rather than the end of the texel to prevent interpolating with the neighbour value(which is transparency). I tried debugging with my geometry and I verified that with no texture and a random color in each tile, I don't seem to see any seams. All vertices have integer coordinates, i.e, the first tile is a quad from (0,0) to (1,1) and so on. Tried adding a little offset both to the UV and to the vertices to see if the gaps cease to exist. Disabled multisampling too. Nothing fixed it so far.



I'm sorry but I solved it myself. I was dumb enough to perform the texel correction wrong the first time, and now I came back to it and did it properly, everything started working properly with no visible artifacts.

Feel free to delete my question; Either way, here's the solution for the correct UV's:

vec2 texel_correction(1.f / tilesetWidth , 1.f / tilesetHeight);

topLeftU = float(tileLeft) / tilesetWidth + texel_correction.x; 
topLeftV = float(tileTop) / tilesetHeight + texel_correction.y;
bottomRightU = float(tileLeft + tileWidth) / tilesetWidth - texel_correction.x;
bottomRightV = float(tileTop  + tileHeight) / tilesetHeight - texel_correction.y;
  • \$\begingroup\$ Please select your own answer as the accepted one, it will mark your question as answered and it won't be pulled up to the front page repeatedly. It won't normally be deleted because someone searching for a problem like yours might need the answer you provided. \$\endgroup\$ – Daniel Carlsson Jun 6 '14 at 16:35
  • \$\begingroup\$ Two days left for accepting it :D \$\endgroup\$ – Grimshaw Jun 6 '14 at 17:00

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.