Javascript 计算精灵表中的精确UV坐标

我正在与一个WebGL网站合作

我有一个纹理为256x256的画布，用于渲染到WebGL

在这个画布上，我使用常规画布渲染，以1px的间距渲染了几个打包在一起的图像

我使用1x1矩形（用世界矩阵缩放）成批渲染图像。例如：我设置了整个渲染状态，然后将UV更改为着色器的一致性。这是一个图标的精灵

我用来渲染它的着色器是

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;
}

我使用的值是

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

它应该将纹理上50,50的19x19像素渲染为屏幕上19x19大小的矩形。几乎是这样

---

图像有点模糊。它是模糊的，当我将MAG_过滤器设置为最近时，我会得到一个更清晰的图像，但有时它会偏离一个像素，或者更糟，半个像素会导致一些（非常小但可以注意到的）拉伸。如果我添加一个轻微的偏移来纠正这个错误，那么以相同方式渲染的其他图像将在另一个方向上关闭。我似乎想不出来。这似乎是一个浮点计算不精确的问题，但我不知道在哪里

尝试重新调整坐标系，使通过的UV在[0-1]范围内，并去除比例因子。这也可能是一个预乘alpha问题，请尝试使用

gl.blendFunc（gl.ONE，gl.ONE减去SRC\u alpha）使用
gl.pixelStorei（gl.UNPACK\u PREMULTIPLY\u ALPHA\u WEBGL，true）取而代之。如果要将其用于平铺，则需要用实际像素填充边框。如果需要各向异性过滤，则需要添加更多

此外，如果上述所有操作都失败，请尝试使用尺寸等于图像（精灵表的一部分）的四边形，而不是1x1四边形