Webgl奇怪的渲染與簡單的紋理

以下參數：

gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 
gl.generateMipmap(gl.TEXTURE_2D); 
gl.bindTexture(gl.TEXTURE_2D, null);

它給了我這樣的結果：

result

更改以下參數：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

它給了我這樣的：

result2

並用這些參數：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

result3

我試圖改變紋理座標，但沒有成功用於每一個在這裏面對的是： 0.0, 0.0, 0.0, 10.0, 10.0, 10.0, 10.0, 0.0

任何想法爲什麼一個三角形（實際上是平行面上的那個）表現得很奇怪？

來源

2013-02-28 calude

如果你有一個鏈接到完整的代碼，這將有助於。 – Anton 2013-02-28 23:13:10

它是這樣的：http://jsfiddle.net/bNTkK/6/ – calude 2013-03-01 07:40:24

你想讓它看起來像什麼？很可能您需要重複頂點，因爲您需要在每個三角形上使用不同的紋理座標以獲得所需的外觀。 – gman 2013-03-02 02:24:41

問題是，您使用的面的點數有所不同 - 但仍然使用固定數量（4個）的紋理座標作爲面部。由於有些面孔有5個點，紋理座標有時會「移位」。

相反，你應該添加它們就像頂點：

for (var j=0; j < face.length; j++){ 
    vertices... 

    //generate texture coords, they could also be stored like the points 
    textureCoords.push(points[face[j]][0]/4); 
    textureCoords.push((points[face[j]][1]+points[face[j]][2])/4);

http://jsfiddle.net/bNTkK/9/

來源

2013-04-25 17:57:48 i47

Webgl奇怪的渲染與簡單的紋理

回答

相關問題