# OpenGL 2D Rasterization Sub-Pixel Translations

I have a tile based 2D engine where the projection matrix is an orthographic view of the world without any scaling applied. Thus: one pixel texture is drawn on the screen in the same size.

That all works well and looks nice but if the camera makes a sub-pixel movement small lines appear between the tiles. I can tell you in advance what does not fix the problem:

• GL_NEAREST texture interpolation
• GL_CLAMP_TO_EDGE

What does “fix” the problem is anchoring the camera to the nearest pixel instead of doing a sub-pixel translation. I can live with that, but the camera movement becomes jerky. Any ideas how to fix that problem without resorting to the rounding trick I do currently?

• Are you by any chance storing multiple tile textures in one big texture? I remember having a similar problem, and it was caused by OpenGL rendering pixels from adjacent tile texture. How I solved it in the end was move each tile to their own texture. It's been a while though, I'm not sure if the problem happened with GL_NEAREST, or only with GL_LINEAR. Apr 13 '11 at 8:31
• I do, but none of the proposed solutions for this particular problem (GL_NEAREST) help the slightest. Also the rounding errors for textures would mean I see neighboring pixels but what I see is the background of the sprite which leads me to the idea that this might be a general rasterization problem. Apr 13 '11 at 9:30

To avoid the camera jerkiness, you should keep the floating-point coordinates camera, but clamp the OpenGL projection to the nearest pixel.

• How does that work? The projection matrix is just set up once as an orthographic project, no changes in the frames are applied to it. Apr 13 '11 at 14:18
• Ah sorry, I realise I'm not being clear at all. I meant to say you should try to adjust the view and projection matrices so that they are clamped to the nearest pixel, but not save these clamped values into the camera parameters, or you will accumulate error and cause jitter. If this is already what you are doing and the camera still jitters, then we'll need to know more about your graphics: is it pixel art or shaded drawings? How large are your models? Apr 13 '11 at 14:44
• It's a 2d platformer. I am right now clamping the rendering to pixels which works well. If I take the final image and use photoshop to move the image any sub pixel amount to the top of bottom I get exactly what I want -> smooth movement. I can do that in OGL if rendering to an FB and then translating that. If I do it with the modelview matrix, gaps between tiles appear. Apr 13 '11 at 14:59
• Are you also rounding your world object coordinates before sending them to OGL, too? I do exactly that for an isometric game and it works fine. Apr 13 '11 at 15:07

You can see this blog post about using double instead of float for OpenGL matrices. I've had similar issues on PC using OpenGL, so it's not iPhone/OpenGL ES-specific, although the blog post mention OpenGL ES on the iPhone.

• Could the down-voter at least explain his down-voting? My answer is informative and suggest a solution to OP's problem.
– jv42
Apr 14 '11 at 8:43

It may be that when calculating the coordinates of each tile's corners, you are losing some precision. So, for example, you think the bottom right vertex of tile 0 is in exactly the same place as the bottom left vertex of tile 1, but actually it is not. One idea to fix it would be to calculate a temporary grid of coordinates at the beginning, and then copy the appropriate position when constructing the tile geometry. Does that make sense?