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奇怪的渲染与简单的纹理

回答

相关问题