OpenGL Bleeding Satin Texture

Question

I'm trying to draw a basic 2 meter grid consisting of smaller tiles from a texture satin (note the transparent frame with 1 pixel):

I draw fragments as texture squares using the following code:

glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, m_texture); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glEnableClientState(GL_VERTEX_ARRAY); glEnableClientState(GL_TEXTURE_COORD_ARRAY); glVertexPointer(2, GL_SHORT, 0, &m_coords[0]); glTexCoordPointer(2, GL_FLOAT, 0, &m_uvs[0]); glDrawArrays(GL_TRIANGLES, 0, m_coords.size() / 2); glBindTexture(GL_TEXTURE_2D, 0); glDisableClientState(GL_VERTEX_ARRAY); glDisableClientState(GL_TEXTURE_COORD_ARRAY); glDisable(GL_TEXTURE_2D); 

The positions are obviously integer coordinates. The UV coordinates for the angles are calculated as follows:

 u0 = float(x) / float(texWidth); v0 = float(y) / float(texHeight); u1 = float(x+w) / float(texWidth); v1 = float(y+h) / float(texHeight); 

Where w and h are the tile size without laying.

It looks great when the model view transformation is tied to an integer position (on the right), but when it starts to move, I get black objects between the plates (on the left):

From what I understand, I had to compensate for the UV coordinates with half texel in order to make it work, but if I changed the UV calculations to:

 u0 = float(x+0.5f) / float(texWidth); v0 = float(y+0.5f) / float(texHeight); u1 = float(x+w-0.5f) / float(texWidth); v1 = float(y+h-0.5f) / float(texHeight); 

It still does not work. Is this the right way to do this? Do I need a mix for this? If I compensate for the tiles to make sure they are tied to a pixel grid, this works, but it makes it move quickly. How do people usually solve this?

EDIT

I should have said that it was on the iphone.

Answer 1

Your border should not be transparent, but pixels on the opposite side of each subtext. For example, the border on the right side of each sub-texture should be a copy of the leftmost row of pixels, that is, the pixels that it wraps.

Here's how you trick a wrapper for a texture sampler on borders.

Answer 2

I had a similar problem with a texture atlas. I fixed it by inserting the image in 1.0 / TEXTURE_ATLAS_PIXELS_PER_SIDE * 1 / 128.0. Number 128, which you need to find out by experimenting. Potential for me - no one is going to perceive the 128th pixel that is missing. I made this modification for texture coordinates sent to the graphics card, and not to the shader. I haven’t tried to do this with texels in the shader, just like yours. I read various information on how to handle the bleeding texture, but for a texture atlas this was the easiest solution for me. Adding borders to my textures, which are tightly packed and follow the strength of the two rules, will cause me many gaps.

This is what worked for me on iphone.

Answer 3

You can always switch your GL_TEXTURE_MIN/MAG_FILTER to GL_NEAREST :)

Answer 4

Try using GL_NEAREST for GL_TEXURE_MIN / MAX_FILTER and translate to 0.375f before drawing:

 glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.375f, 0.375f, 0.0f); 

Answer 5

I had the same problem. I fixed it with.

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