WebGL并排图像导致图像轮廓

我正在使用WebGL创建地图。我有地图瓦片，因此地图有2个瓦片高和5个瓦片宽。我已经渲染了地图，并且看到了地砖周围的细线。更令人困惑的是，我怀疑是通过调整图像大小来创建的轮廓颜色，与图像颜色完全不同。在这个截图：WebGL并排图像导致图像轮廓

map showing lines

你可以看到，在每个图像的边缘颜色为深蓝色，但外形是较浅的颜色，如绿色和白色在某些领域。

blown up image

这是我设置的一部分：

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

是什么原因造成这些多彩色线条出现，以及我如何摆脱他们？

来源

2014-08-30 vcapra1

这是由于对象上的纹理平铺造成的。由于纹理被调整大小，它使用双线性过滤来使图像显得清晰。但是，由于图像重复，它会与图像的另一侧混合。所以你看到的轮廓实际上只是纹理的另一面，因为纹理重复。为了解决这个问题，在您的“纹理加载”处理函数中添加以下代码（在我的情况下，它是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);

这将产生如下结果：

enter image description here

来源

2014-09-01 14:42:48 vcapra1

WebGL并排图像导致图像轮廓

回答

相关问题