Javascript WebGL并排图像导致图像轮廓

我正在使用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);

---

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

这是由于对象上的纹理平铺造成的。由于纹理已调整大小，因此它使用双线性过滤使图像看起来清晰。但是，由于图像重复，因此它与图像的另一侧混合。因此，您看到的轮廓实际上只是纹理的另一面，因为纹理重复。要解决此问题，请在“texture loaded”处理程序函数中添加以下代码（在我的示例中，它是

HandleteTextureLoaded（）

）：

这将产生以下结果：

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);