I’m trying to make a shader which can do texture edge wrapping for arbitrary texture regions within an atlas. Generally it works quite well, although there is a strange jittering artifact which I cant figure out how to correct.
These 4 triangles are each drawn with a different sized region of the same texture.
Looking closely, the pixels are misplaced, it is easiest to see on the yellow lines, which should be straight lines.
(there are also some artifacts from edge bleeding, and nearest-neighbour filtering, which dont seem relevant to the problem)
*The problem seems to be only visible when using nearest texture filtering, linear filtering probably hides it enough to be invisible.
*The problem appears and dissappears depending on camera zoom. Specially noticeable when zoom = 1.
*If I offset the texture coords, some values make the problem dissappear. eg: + 0.01 or, + 100.0
*Avoiding using negative texture coord values doesnt help.
*changing precision qualifiers in the shader doesnt seem to make any difference.
Im assuming it is some sort of floating point precision error, which the vertex shaders interpolation naturally accounts for, but my fragment shader code cant account for?
The issue might not be a problem for linear filtered textures, but the intention is to use it for low resolution pixel art with nearest texture filtering, and currently it is ugly.
fragment shader code:
uniform sampler2D u_texture;
varying vec4 v_atlasRegion; // {u1, v1, u2, v2}
varying vec2 v_texCoord;
const float TILE_SIZE = 2048.0 / 32.0; //this should be called howManySingleWorldUnitTilesFitOnTheTexture!
void main(){
vec2 start = v_atlasRegion.xy;
vec2 end = v_atlasRegion.zw;
vec2 size = end - start;
vec2 sampleCoord = mod(v_texCoord , size * TILE_SIZE) / TILE_SIZE + start;
gl_FragColor = texture2D(u_texture, sampleCoord);
}
The texCoord attribute values in the mesh have the same values as the position attribute, so they should line up nicely.
