Question

我创建了一个球体，并使用主要来自＆＃34;学习WebGL＆＃34;的第11课的代码添加了一个纹理。（http://learningwebgl.com/blog/?p=1253）。

一切正常，但是当我围绕x轴或y轴旋转球体时，部分出现纬线和经度带的细线 - 就像它们通过纹理，原因 - 应该不是这样。

这不是最好的镜头，但是你可以看到图片中球体赤道周围的一些细线：

http://fs1.directupload.net/images/150313/n62liv5i.jpg

我是否在场景中添加灯光没有区别，效果会出现在Firefox和Internet Explorer中。

我对WebGL /图形编程比较陌生，不知道如何防止这种不受欢迎的效果！

球体创建和纹理处理的代码与上面链接的网站提供的代码几乎相同，因此，为了处理加载的纹理，我使用以下函数

function handleLoadedTexture (texture) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
                gl.UNSIGNED_BYTE, texture.image);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,
                   gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
                   gl.LINEAR_MIPMAP_NEAREST);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.bindTexture(gl.TEXTURE_2D, null);
}

并且球体由这个创建：

function sphere (rad) {
  var latitudeBands = 50,
      longitudeBands = 50;
  var radius = rad;
  var vertexPositionData = [ ],
      normalData = [ ],
      textureCoordData = [ ];
  var latNum,
      longNum;
  for (latNum = 0; latNum <= latitudeBands; latNum++) {
    var theta = latNum * Math.PI / latitudeBands;
    var sinTheta = Math.sin(theta),
        cosTheta = Math.cos(theta);
    for (longNum = 0; longNum <= longitudeBands; longNum++) {
      var phi = longNum * 2 * Math.PI / longitudeBands;
      var sinPhi = Math.sin(phi),
          cosPhi = Math.cos(phi);
      var x = cosPhi * sinTheta,
          y = cosTheta;
          z = sinPhi * sinTheta;
      var u = 1 - (longNum / longitudeBands),
          v = 1 - (latNum / latitudeBands);
      normalData.push(x);
      normalData.push(y);
      normalData.push(z);
      textureCoordData.push(u);
      textureCoordData.push(v);
      vertexPositionData.push(radius * x);
      vertexPositionData.push(radius * y);
      vertexPositionData.push(radius * z);
    }
  }
  var indexData = [ ];
  for (latNum = 0; latNum < latitudeBands; latNum++) {
    for (longNum = 0; longNum < longitudeBands; longNum++) {
      var first = (latNum * (longitudeBands + 1)) + longNum;
      var second = first + longitudeBands + 1;
      indexData.push(first);
      indexData.push(second);
      indexData.push(first + 1);
      indexData.push(second);
      indexData.push(second + 1);
      indexData.push(first + 1);
    }
  }
  this.normalData = normalData;
  this.textureCoordData = textureCoordData;
  this.vertexPositionData = vertexPositionData;
  this.indexData = indexData;
}

我认为这些应该是代码的相关部分，但如果您认为它们不是，我可以根据需要添加更多内容。

我感谢任何帮助我解决问题的暗示！

PS：请原谅我的英语不好！ - 这不是我的第一语言。

如何从球体上的纹理中删除瑕疵？

0 个答案: