WebGL并排图像导致图像轮廓

Question

我正在使用WebGL创建地图。 我有地图图块，因此地图高2格，宽5格。 我已经绘制了地图，并且在瓷砖周围看到一条细线。 更令人困惑的是，我怀疑轮廓颜色是通过调整图像大小而创建的，它与图像的颜色完全不同。 在此屏幕截图中：

您可以看到每个图像边缘的颜色是深蓝色，但轮廓线是较浅的颜色，例如某些区域为绿色和白色。

这是我的设置的一部分：

gl = canvas.getContext("webgl", {antialias: true, alpha: true})
  || canvas.getContext("experimental-webgl", {antialias: true, alpha: true});

...

gl.clearColor(0, 0, 0, 0);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, canvas.width, canvas.height);

是什么导致这些多色线条出现，以及如何摆脱它们？

Answer 1

这是由于对象上的纹理平铺。 由于调整了纹理的大小，它使用双线性过滤使图像显得清晰。 但是，由于图像重复出现，因此正在与图像的另一面融合。 因此，由于纹理重复，因此您看到的轮廓实际上只是纹理的另一面。 要解决此问题，请在“纹理加载”处理函数中添加以下代码（在我的情况下为handleTextureLoaded() ）：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

这将产生以下结果：