WebGL Side-by-Side图像导致图像轮廓

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

这是由于对象上的纹理平铺。由于纹理调整大小，它使用双线性过滤使图像看起来清晰。但是，由于图像重复，因此它与图像的另一侧混合。所以你看到的轮廓实际上只是纹理的另一面，因为纹理重复。要解决此问题，请在＆＃34;纹理加载＆＃34;中添加以下代码。处理函数（在我的例子中是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);

这将产生以下结果：