在spritesheet

Question

我正在使用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_FILTER设置为NEAREST时，我得到一个更清晰的图像，但它有时偏离一个像素，或者更糟的是，半像素导致一些（非常小但是明显的）拉伸。如果我添加一个轻微的偏移来纠正这个，以相同方式渲染的其他图像在另一个方向上关闭。我似乎无法弄明白。看起来浮点计算不准确是一个问题，但我无法弄清楚在哪里。

Answer 1

尝试重新调整坐标系，以便传递的UV在[0-1]范围内并消除缩放系数。这也可能是预乘的alpha问题，请尝试使用gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);代替gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);。如果您将此用于图块，则需要使用实际像素填充边框。如果需要各向异性过滤，需要填充更多。

此外，尝试使用尺寸等于图像的四边形（spritesheet的一部分），而不是1x1四边形，如果以上所有都失败。