WebGL并排图像导致图像轮廓答案

【问题标题】：WebGL Side-by-Side images causes image outlineWebGL并排图像导致图像轮廓
【发布时间】：2014-09-01 22:42:48
【问题描述】：

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

是什么导致这些彩色线条出现，我该如何消除它们？

【问题讨论】：

标签： javascript html textures webgl

【解决方案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);

这将产生以下结果：

【讨论】：