🔒 Locked

2d Seams

Started by Critical_Impact Apr 27, 2010 at 10:58 PM 5 replies 1.3k views

Original Post

Apr 27, 2010 at 10:58 PM

I have set my game to have a viewport based on the current Window Width and Height. I have also set Ortho to be set to one value that never changes. Basically this means that when I make the window smaller it stretches, and expands when I make it bigger. When I originally rendered my textured quads, each texture was split up from the original tileset and then bound to it's own texture ID. In the new system I'm using Vertex Arrays, I have used texture coordinates so that I only use the one 512x512 texture sheet instead of binding each single tile texture. Now the problem is that if I dont use ClampToEdge I get seams, but if I do, I get almost like shimmering all over the screen. I guess my new question is, is this a limitation of using a big texture instead of splitting them up? Here's a picture of the seams, I would show you a picture of the 2nd one but it is hard to screenshot. It's almost like there are lines going through all my tiles but they are coloured the same as the textures. http://img21.imageshack.us/img21/2045/seamsx.jpg I've been scouring the internet for a while and some people say that you need to put a 1 pixel border around your tiles but this seems a bit annoying to have to do.

szecs

Apr 28, 2010 at 1:11 AM

1 pixel border (simplest to program, works very nicely) or

nearest neighbor texture filter (if you know your tiles will always be the same 1:1 size) or

use shaders

For the first one: that doesn't mean you have to redraw your whole texture atlas. It means that you have to adjust your texture coordinates. Something like this:

Current code:

u1 = tile_text_x / TILE_TEXTIMAGE_WIDTH;u2 = (tile_text_x+tile_text_w) / TILE_TEXTIMAGE_WIDTH;v1 = tile_text_y / TILE_TEXTIMAGE_HEIGHT;v2 = (tile_text_y+tile_text_h) / TILE_TEXTIMAGE_HEIGHT;

Code with border:

u1 = (tile_text_x+1) / TILE_TEXTIMAGE_WIDTH;u2 = (tile_text_x+tile_text_w-2) / TILE_TEXTIMAGE_WIDTH;v1 = (tile_text_y+1) / TILE_TEXTIMAGE_HEIGHT;v2 = (tile_text_y+tile_text_h-2) / TILE_TEXTIMAGE_HEIGHT;

TILE_TEXTIMAGE_... are the sizes of the whole texture image
tile_text_x, tile_text_y are the offsets in the texture image
tile_text_h, tile_text_w are the sizes of the tile in the texture image

I hope it's clear.

Critical_Impact

Apr 29, 2010 at 2:27 AM

Quote:
Original post by szecs
1 pixel border (simplest to program, works very nicely) or
nearest neighbor texture filter (if you know your tiles will always be the same 1:1 size) or
use shaders

For the first one: that doesn't mean you have to redraw your whole texture atlas. It means that you have to adjust your texture coordinates. Something like this:

Current code:
u1 = tile_text_x / TILE_TEXTIMAGE_WIDTH;u2 = (tile_text_x+tile_text_w) / TILE_TEXTIMAGE_WIDTH;v1 = tile_text_y / TILE_TEXTIMAGE_HEIGHT;v2 = (tile_text_y+tile_text_h) / TILE_TEXTIMAGE_HEIGHT;
Code with border:
u1 = (tile_text_x+1) / TILE_TEXTIMAGE_WIDTH;u2 = (tile_text_x+tile_text_w-2) / TILE_TEXTIMAGE_WIDTH;v1 = (tile_text_y+1) / TILE_TEXTIMAGE_HEIGHT;v2 = (tile_text_y+tile_text_h-2) / TILE_TEXTIMAGE_HEIGHT;
TILE_TEXTIMAGE_... are the sizes of the whole texture image
tile_text_x, tile_text_y are the offsets in the texture image
tile_text_h, tile_text_w are the sizes of the tile in the texture image

I hope it's clear.

Wouldnt that mean you cut off the edge of each texture by 1? In the case of the textures im using it means they wont tile properly unless I'm mistaken?

szecs

Apr 29, 2010 at 2:29 AM

How about trying it?

If it's not okay, than redraw your tile texture.
Or the other two possibilities.

Lord_Evil

Apr 29, 2010 at 5:49 AM

Note that if your textures aren't tileable (I mean between two different tiles) you'd get those seams anyways.

In order to use the border method you'd have to shrink each tile by 2 pixels and fill the border with the colors of the opposite edge, i.e. if your left edge is all green and your right edge is all red, you'd set the right border to green and the left one to red. Otherwise you'd still get those seams due to wrong filtering.

If I understand you correctly, you're always displaying the same portion of your map independent of window size. Thus you're likely not to get the results you want using a nearest neighbor filter.

The third option szecs mentioned was to use shaders: I gues he meant "do the filtering yourself", i.e. for bilinear filtering you'd have to look up the 4 texels which are nearest to your texture coordinate and blend them according to your texture coordinates.

szecs

Apr 29, 2010 at 6:11 AM

Quote:
Original post by Lord_Evil
The third option szecs mentioned was to use shaders: I gues he meant "do the filtering yourself", i.e. for bilinear filtering you'd have to look up the 4 texels which are nearest to your texture coordinate and blend them according to your texture coordinates.

Yup. Warping/clamping in the region from left_side_of_tile to right_side_of_tile, instead of 0...texture_size-1

Critical_Impact

May 3, 2010 at 7:51 PM

At some points I was getting seams when scrolling and also weird texture issues when scaling. In the end I was able to render the scene at one resolution using a VBO, then render the VBO render texture to a single quad and all the issues went away.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.