Webgl简单纹理的奇怪渲染问题

Question

我是你的助手，很高兴为你提供服务。

我在自定义的3D形状上渲染纹理时遇到了麻烦。

以下是参数:

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

它给了我这个结果：

更改以下参数：

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

这是给我的结果：

并且使用以下参数：

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

我尝试更改纹理坐标，但是使用每个面的坐标如下却没有成功: 0.0, 0.0, 0.0, 10.0, 10.0, 10.0, 10.0, 0.0

有什么想法为什么一个三角形（实际上是平行面上的两个三角形）表现得很奇怪吗？

- calude

---

如果您有完整代码的链接，那将会很有帮助。 - Anton

这是链接：http://jsfiddle.net/bNTkK/6/ - calude

你想让它看起来怎样？很可能你需要重复顶点，因为你需要在每个三角形上使用不同的纹理坐标来获得你想要的外观。 - gman

如果您看第一张图片，红色的三角形应该与其他三角形具有相同的纹理，为什么我的棋盘纹理在那里没有正确应用？ 假设这个面有点1、2、3、4、5，我创建的三角形是这样的：1-2-3、1-3-4、1-4-5。 显然，最后一个创建的三角形是具有奇怪纹理的三角形。 - calude

Answer 1

问题在于您正在使用具有不同点数的面，但仍然使用固定数量（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/

- i47