Tiling Artifacts

Apprentice
Posts: 8
Joined: 2009.02
Post: #1
I am developing a 2D game for the iPhone using OpenGL ES. I have developed an engine which will display sprites in a scrolling background. In order to make my levels arbitrarily large, I've had to overcome the 1024x1024 maximum texture size issue. To do this, I have created some code which takes as input an image of arbitrary size, and splits it up into square (power of 2) tiles, and then displays those tiles as textures to the appropriate parts of the screen.

Now, my problem -- after some work, I've got everything working correctly, except for one small issue: at the seams of the tiles, I get little artifacts which come and go as the background scrolls. Is this a common result of tiling or am I doing something wrong in terms of alignment? If this is a common issue, what are the workarounds?

Thanks in advance!

<Edit>
To be a bit more explicit about what the artifacts look like: Assume we have some tile T. On the extreme left edge of T, as I scroll, I see (flashing in and out) a single column of pixels that isn't correct. It turns out that this extra column of pixels corresponds to the column of pixels near the seam on the extreme *right* edge of T. (The incorrect pixels also correspond to the column of pixels on the extreme left edge of T+1, where T+1 represents the tile to the right of T -- I'm not sure where they're coming from as the right edge of T is very similar to the left edge of T+1)
<End Edit>
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #2
What's happening
This is bilinear filtering working correctly.

When you draw two quads next to each other, pixels are produced according to GL's rasterization rules (i.e. if the two quads share vertices along their adjacent edge, then only one of them will rasterize the pixels on that edge.) The texture coordinates used during rasterization are computed with subpixel precision, and this is where you will see artifacts come in.

If you scroll your tiles in exact pixel increments, and you have all of your texture coordinates set up to map texels exactly 1:1 to pixels, then you should see no artifacts. But as soon as you scale or rotate or move the quads by fractional amounts, bilinear filtering will sample across the edge of the texture at the edge of the quad. It will use the texture's wrap parameters to sample the texels outside of the texture, i.e. REPEAT or CLAMP_TO_EDGE.

How to fix it
First, decide if you care about subpixel precision. Most simple 2D scrolling game don't need it. In that case: don't use bilinear filtering, and ensure that your vertex positions are always projected (orthographically) to integer screen pixels, and your texture coordinates are always mapping 1:1 to screen pixels.

If you do want subpixel precision (i.e. a more interesting game might rotate the background) then you need to filter correctly across texture edges. The easiest way to do this is to fix the texture data. For example, if you have a 512x256 texture and you are only scrolling horizontally, spit up your image data into 510x256 chunks. Duplicate the edge of one tile into the adjacent tile to pad out to 512. Then, adjust your vertex positions and texture coordinates to behave as if the texture is really 510x256. Filtering will sample the texels copied from the adjacent tile and everything will look correct.

On the desktop, this is why texture borders exist, but they were removed from ES so you can't use that solution.
Quote this message in a reply
Apprentice
Posts: 8
Joined: 2009.02
Post: #3
Thanks!
The first thing I tried after reading your reply was to change my textures' wrap parameters. I added the lines:

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

in application to my background tiles. This solved the problem.
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #4
Well, that will just make it less obvious, but it's still there if you've got subpixel alignment.
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  2d dynamic tiling texturing jjslay 1 2,447 Jul 3, 2009 06:49 PM
Last Post: smasher