在 spritesheet 中计算准确的 UV 坐标答案

【问题标题】：Calculating accurate UV coordinates in a spritesheet在 spritesheet 中计算准确的 UV 坐标
【发布时间】：2015-09-09 10:44:32
【问题描述】：

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

【问题讨论】：

标签： javascript google-chrome html5-canvas webgl shader

【解决方案1】：

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

另外，如果上述方法都失败了，请尝试使用尺寸等于图像（spritesheet 的一部分）的四边形，而不是 1x1 的四边形。

【讨论】：