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並排圖像導致圖像輪廓

回答

相關問題