Webgl - 纹理坐标是偏移的

Question

我正在学习webGL，但我遇到了这个问题，我无法解决这个问题：

我正在为练习制作一个简单的平铺游戏，我正在使用一个图像来处理所有纹理。当我为某个顶点指定一个纹理坐标时，它有时会有一点偏移，这样你就可以看到其他纹理的一部分。

你可以看到这个here的例子（我倾斜了结果，以便更容易看到纹理偏移）

纹理图像为64x64，每个图块为8x8。我计算每个顶点纹理坐标的方法是：

y0=1-(textp%8)/8;
y1=1-(textp%8+1)/8;
x0=Math.floor(textp/8)/8;
x1=Math.floor(textp/8+1)/8;

提前致谢。

编辑：这是问题的截图

Answer 1

我不确定完美的解决方案。

一种是始终使用像素坐标。我猜测问题是你试图显示的瓷砖不在完美的像素边界上（就像你将地图向下滚动1.5像素一样）？

I solved it by not using texture coordinates for my tiles and doing all my tiling in the fragment shader

我想我必须在SO上发布代码，这里有一些代码

顶点着色器

attribute vec4 position;
attribute vec4 texcoord;

uniform mat4 u_matrix;
uniform mat4 u_texMatrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = u_matrix * position;
  v_texcoord = (u_texMatrix * texcoord).xy;
}

片段着色器

precision mediump float;

uniform sampler2D u_tilemap;
uniform sampler2D u_tiles;
uniform vec2 u_tilemapSize;
uniform vec2 u_tilesetSize;

varying vec2 v_texcoord;

void main() {
  vec2 tilemapCoord = floor(v_texcoord);
  vec2 texcoord = fract(v_texcoord);
  vec2 tileFoo = fract((tilemapCoord + vec2(0.5, 0.5)) / u_tilemapSize);
  vec4 tile = floor(texture2D(u_tilemap, tileFoo) * 256.0);

  float flags = tile.w;
  float xflip = step(128.0, flags);
  flags = flags - xflip * 128.0;
  float yflip = step(64.0, flags);
  flags = flags - yflip * 64.0;
  float xySwap = step(32.0, flags);
  if (xflip > 0.0) {
    texcoord = vec2(1.0 - texcoord.x, texcoord.y);
  }
  if (yflip > 0.0) {
    texcoord = vec2(texcoord.x, 1.0 - texcoord.y);
  }
  if (xySwap > 0.0) {
    texcoord = texcoord.yx;
  }

  vec2 tileCoord = (tile.xy + texcoord) / u_tilesetSize;
  vec4 color = texture2D(u_tiles, tileCoord);
  if (color.a <= 0.1) {
    discard;
  }
  gl_FragColor = color;
}

该技术的详细信息are here，但它的简短版本是它在着色器中查看一个瓦片地图，以确定要显示的切片。

That code is here并且在同一个回购中是加载Tiled maps的代码，该代码主要用于this project。

注意：我遇到了同样的问题trying to do with vertex texture coords。因为在没有它们的情况下为我工作，我没有调查它为什么不起作用。所以我想这不是你问题的直接答案。我想我希望这是一个解决方案。