Webgl具有简单纹理的怪异渲染

Question

I'm having trouble rendering textures on my custom 3D shape.

With the following parameters:

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

It gives me this result:

Changing the following parameters:

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

It gives me this :

And with these parameters:

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

I tried changing the texture coordinates but without success the one used for each face here was: 0.0, 0.0, 0.0, 10.0, 10.0, 10.0, 10.0, 0.0

Any idea why one triangle(actually 2 the one on the parallel face) behaves weirdly?

Answer 1

The issue is that you're using faces with varying amount of points - but still using a fixed number (4) of texture coords for a face. As some faces have 5 points, at some point the texture coords are "shifted".

Instead, you should add them just like the vertices:

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/