Webgl - 纹理坐标偏移答案

【问题标题】：Webgl - texture coordinates are offsetWebgl - 纹理坐标偏移
【发布时间】：2015-01-08 10:42:23
【问题描述】：

我正在学习 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;

提前致谢。

编辑：这是问题的截图。

【问题讨论】：

可以加个截图吗？我不确定我是否看到了您所看到的。我看到了一场精彩的比赛。
我添加了一个截图链接（我没有足够的声誉来发布图片......）。您可以在河流中最清楚地看到问题。（谢谢）
好吧，我在 Firefox 或 chrome 中没有看到任何这些内容。您的浏览器是否放大了？
没有，我也在 Chrome 和 Firefox 中测试过。
好吧，我不知道它可能是什么，因为它看起来对我来说很好。你说它有时没有这些行，有时就像屏幕截图一样，对吧？你就不能想想当它起作用时你做了什么不同的事情吗？

标签： javascript webgl

【解决方案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 和在同一个 repo 中是加载 Tiled maps 的代码，该代码主要用于 this project。

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

【讨论】：