Calculating accurate UV coordinates in a spritesheet

Question

I am working with a WebGL website.

I have a canvas with a texture at 256x256 that I use to render to WebGL.

On this canvas I have rendered several images packed together with 1px spacing between, using regular canvas rendering.

I use a 1x1 rectangle (scaled with the world matrix) to render the images in batches. I.e.: I set up the entire render state, then change the UV as a uniform to the shader. It's a spritesheet of icons.

The shader I use to render it is

precision highp float;
attribute vec3 vertexPosition;
attribute vec2 textureCoordinate;
uniform mat4 worldMatrix;
uniform mat4 projectionMatrix;
uniform vec4 actualUV;
uniform float cacheSize;
varying vec2 fragCoord;
vec2 scaleVec;
void main(void) {
    scaleVec = vec2(cacheSize,cacheSize);
    gl_Position = projectionMatrix * worldMatrix * vec4(vertexPosition, 1.0);
    fragCoord = textureCoordinate * actualUV.zw;
    fragCoord = fragCoord + actualUV.xy;
    fragCoord = fragCoord * scaleVec;
}

The values I use are

actualUV={x:50, y:50, z:19:, w:19}; // for example
cacheSize = 256;

Which should render 19x19 pixels at 50,50 on the texture into a rectangle on the screen 19x19 size. And it does, almost.

The image is slightly off. It's blurry and when I set the MAG_FILTER to NEAREST I get a sharper image, but it is sometimes off by one pixel, or worse, a half pixel causing some (very minor but noticable) stretching. If I add a slight offset to correct this other images rendered in the same way are off in the other direction. I cannot seem to figure it out. It seems like it's a issue with the floating point calculation not being exact, but I cannot figure out where.

Answer 1

Try re-adjusting your coordinate system so that the UVs passed are within [0-1] range and get rid of your scaling factor. This can also be a pre multiplied alpha problem, try use gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); with gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); instead. If you are using this for tiles, then you need to pad the borders with actual pixels. Need to pad more if you need anisotropic filtering.

Also, try to use a quad with dimensions equal to the image (portion of spritesheet) instead of a 1x1 quad if all above fails.