3d 圆柱体中的顶点不正确

Question

现在，我正在尝试在 webgl 中绘制一个 3d 圆柱形状，其中顶部比底部薄。气缸也没有盖上盖子。圆柱体是用三角形绘制的，圆形是十二边形（12 条边）。但是，我的一侧似乎有三角形指向错误的方向。

我把它作为一个超链接留给了 imgur，因为我有很多关于这种情况的图片。

这些是我的硬编码顶点和索引。有一堆没用，因为那些是顶盖和底盖的，后来我发现我不需要了，我决定把它们注释掉比删除它们更容易。

var vertices = new Float32Array([ // Vertex coordinates                                                                         indicies
        0.0,   1.0,   0.5,     -0.25,   1.0, 0.433,   -0.433,   1.0,  0.25,     -0.5,   1.0,   0.0, // u0- u1- u2- u3  up       0, 1, 2, 3,
     -0.433,   1.0, -0.25,     -0.25,   1.0,-0.433,      0.0,   1.0,  -0.5,     0.25,   1.0,-0.433, // u4- u5- u6- u7  up       4, 5, 6, 7,
      0.433,   1.0, -0.25,       0.5,   1.0,   0.0,    0.433,   1.0,  0.25,     0.25,   1.0, 0.433, // u8- u9- u10-u11 up       8, 9,10,11,

        0.0,   1.0,   0.5,                                                                          // u12 up middle           12,

        0.0,   1.0,   0.5,     -0.25,  -1.0, 0.433,     -0.5,  -1.0, 0.866,      0.0,  -1.0,   1.0, // u0- u1- d1- d0          13,14,15,16, 
      -0.25,   1.0, 0.433,    -0.433,   1.0,  0.25,   -0.866,  -1.0,   0.5,     -0.5,  -1.0, 0.866, // u1- u2- d2- d1          17,18,19,20,
     -0.433,   1.0,  0.25,      -0.5,   1.0,   0.0,     -1.0,  -1.0,   0.0,   -0.866,  -1.0,   0.5, // u2- u3- d3- d2          21,22,23,24,
       -0.5,   1.0,   0.0,    -0.433,   1.0, -0.25,   -0.866,  -1.0,  -0.5,     -1.0,  -1.0,   0.0, // u3- u4- d4- d3          25,26,27,28,
     -0.433,   1.0, -0.25,     -0.25,   1.0,-0.433,     -0.5,  -1.0,-0.866,   -0.866,  -1.0,  -0.5, // u4- u5- d5- d4          29,30,31,32,
      -0.25,   1.0,-0.433,       0.0,   1.0,  -0.5,      0.0,  -1.0,  -1.0,     -0.5,  -1.0,-0.866, // u5- u6- d6- d5          33,34,35,36,
        0.0,   1.0,  -0.5,      0.25,   1.0,-0.433,      0.5,  -1.0,-0.866,      0.0,  -1.0,  -1.0, // u6- u7- d7- d6          37,38,39,40,
       0.25,   1.0,-0.433,     0.433,   1.0, -0.25,    0.866,  -1.0,  -0.5,      0.5,  -1.0,-0.866, // u7- u8- d8- d7          41,42,43,44,
      0.433,  1.0,  -0.25,       0.5,   1.0,   0.0,      1.0,  -1.0,   0.0,    0.866,  -1.0,  -0.5, // u8- u9- d9- d8          45,46,47,48,
        0.5,  1.0,    0.0,     0.433,   1.0,  0.25,    0.866,  -1.0,   0.5,      1.0,  -1.0,   0.0, // u9- u10-d10-d9          49,50,51,52,
      0.433,  1.0,   0.25,      0.25,   1.0, 0.433,      0.5,  -1.0, 0.866,    0.866,  -1.0,   0.5, // u10-u11-d11-d10         53,54,55,56,
       0.25,  1.0,  0.433,       0.0,   1.0,   0.5,      0.0,  -1.0,   1.0,      0.5,  -1.0, 0.866, // u11-u0- d0- d11         57,58,59,60,

        0.0, -1.0,    1.0,      -0.5,  -1.0, 0.866,   -0.866,  -1.0,   0.5,     -1.0,  -1.0,   0.0, // d0- d1- d2- d3  down    61,62,63,64,
     -0.866, -1.0,   -0.5,      -0.5,  -1.0,-0.866,      0.0,  -1.0,  -1.0,      0.5,  -1.0,-0.866, // d4- d5- d6- d7  down    65,66,67,68,
      0.866, -1.0,   -0.5,       1.0,  -1.0,   0.0,    0.866,  -1.0,   0.5,      0.5,  -1.0, 0.866, // d8- d9- d10-d11 down    69,70,71,72,

        0.0,  1.0,    0.5,                                                                          // d12 down middle         73,
  ]);

  var indices = new Uint8Array([       // Indices of the vertices
     //0, 1,12,   1, 2,12,   2, 3,12,   3, 4,12,   4, 5,12,   5, 6,12,   6, 7,12,   7, 8,12,   8, 9,12,   9,10,12,  10,11,12,  11, 0,12, //top cap

    13,14,15,  13,15,16,  
    17,18,19,  17,19,20,  
    21,22,23,  21,23,24,  
    25,26,27,  25,27,28,
    29,30,31,  29,31,32,
    33,34,35,  33,35,36,
    37,38,39,  37,39,40,
    41,42,43,  41,43,44,
    45,46,47,  45,47,48,
    49,50,51,  49,51,52,
    53,54,55,  53,55,56,
    57,58,59,  57,59,60,

    //61,62,73,  62,63,73,  63,64,73,  64,65,73,  65,66,73,  66,67,73,  67,68,73,  68,69,73,  69,70,73,  70,71,73,  71,72,73,  72,61,73, //bottom cap
  ]);

Answer 1

这一行

var vertices = new Float32Array([ // Vertex coordinates                                                                         indicies
        0.0,   1.0,   0.5,     -0.25,   1.0, 0.433,   -0.433,   1.0,  0.25,     -0.5,   1.0,   0.0, // u0- u1- u2- u3  up       0, 1, 2, 3,
     -0.433,   1.0, -0.25,     -0.25,   1.0,-0.433,      0.0,   1.0,  -0.5,     0.25,   1.0,-0.433, // u4- u5- u6- u7  up       4, 5, 6, 7,
      0.433,   1.0, -0.25,       0.5,   1.0,   0.0,    0.433,   1.0,  0.25,     0.25,   1.0, 0.433, // u8- u9- u10-u11 up       8, 9,10,11,

        0.0,   1.0,   0.5,                                                                          // u12 up middle           12,

-->     0.0,   1.0,   0.5,     -0.25,  -1.0, 0.433,     -0.5,  -1.0, 0.866,      0.0,  -1.0,   1.0, // u0- u1- d1- d0          13,14,15,16, 

有一个-1.0，它应该有一个1.0

        0.0,   1.0,   0.5,     -0.25,   1.0, 0.433,     -0.5,  -1.0, 0.866,      0.0,  -1.0,   1.0, // u0- u1- d1- d0          13,14,15,16, 

我是通过二分找到的，先注释掉8个顶点的第二半，问题还在，所以我注释掉剩下4个的第二半，问题还在，所以我注释掉了第二个剩下的 2 的一半，问题仍然存在，所以我查看了前 2 个三角形并看到了问题。

在你的格式中很清楚没有遵循一个模式

其中一个与另一个不同

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
twgl.addExtensionsToContext(gl);
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec3 v_position;
void main() {
  gl_Position = matrix * position;
  v_position = position.xyz;
}
`;
const fs = `
#extension GL_OES_standard_derivatives : enable
precision highp float;
varying vec3 v_position;
void main() {
  vec3 X = dFdx(v_position);
  vec3 Y = dFdy(v_position);
  vec3 normal = normalize(cross(X,Y));

  gl_FragColor = vec4(normal * 0.5 + 0.5, 1);
}
`;
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

var vertices = new Float32Array([ // Vertex coordinates                                                                         indicies
        0.0,   1.0,   0.5,     -0.25,   1.0, 0.433,   -0.433,   1.0,  0.25,     -0.5,   1.0,   0.0, // u0- u1- u2- u3  up       0, 1, 2, 3,
     -0.433,   1.0, -0.25,     -0.25,   1.0,-0.433,      0.0,   1.0,  -0.5,     0.25,   1.0,-0.433, // u4- u5- u6- u7  up       4, 5, 6, 7,
      0.433,   1.0, -0.25,       0.5,   1.0,   0.0,    0.433,   1.0,  0.25,     0.25,   1.0, 0.433, // u8- u9- u10-u11 up       8, 9,10,11,

        0.0,   1.0,   0.5,                                                                          // u12 up middle           12,

        0.0,   1.0,   0.5,     -0.25,   1.0, 0.433,     -0.5,  -1.0, 0.866,      0.0,  -1.0,   1.0, // u0- u1- d1- d0          13,14,15,16, 
      -0.25,   1.0, 0.433,    -0.433,   1.0,  0.25,   -0.866,  -1.0,   0.5,     -0.5,  -1.0, 0.866, // u1- u2- d2- d1          17,18,19,20,
     -0.433,   1.0,  0.25,      -0.5,   1.0,   0.0,     -1.0,  -1.0,   0.0,   -0.866,  -1.0,   0.5, // u2- u3- d3- d2          21,22,23,24,
       -0.5,   1.0,   0.0,    -0.433,   1.0, -0.25,   -0.866,  -1.0,  -0.5,     -1.0,  -1.0,   0.0, // u3- u4- d4- d3          25,26,27,28,
     -0.433,   1.0, -0.25,     -0.25,   1.0,-0.433,     -0.5,  -1.0,-0.866,   -0.866,  -1.0,  -0.5, // u4- u5- d5- d4          29,30,31,32,
      -0.25,   1.0,-0.433,       0.0,   1.0,  -0.5,      0.0,  -1.0,  -1.0,     -0.5,  -1.0,-0.866, // u5- u6- d6- d5          33,34,35,36,
        0.0,   1.0,  -0.5,      0.25,   1.0,-0.433,      0.5,  -1.0,-0.866,      0.0,  -1.0,  -1.0, // u6- u7- d7- d6          37,38,39,40,
       0.25,   1.0,-0.433,     0.433,   1.0, -0.25,    0.866,  -1.0,  -0.5,      0.5,  -1.0,-0.866, // u7- u8- d8- d7          41,42,43,44,
      0.433,  1.0,  -0.25,       0.5,   1.0,   0.0,      1.0,  -1.0,   0.0,    0.866,  -1.0,  -0.5, // u8- u9- d9- d8          45,46,47,48,
        0.5,  1.0,    0.0,     0.433,   1.0,  0.25,    0.866,  -1.0,   0.5,      1.0,  -1.0,   0.0, // u9- u10-d10-d9          49,50,51,52,
      0.433,  1.0,   0.25,      0.25,   1.0, 0.433,      0.5,  -1.0, 0.866,    0.866,  -1.0,   0.5, // u10-u11-d11-d10         53,54,55,56,
       0.25,  1.0,  0.433,       0.0,   1.0,   0.5,      0.0,  -1.0,   1.0,      0.5,  -1.0, 0.866, // u11-u0- d0- d11         57,58,59,60,

        0.0, -1.0,    1.0,      -0.5,  -1.0, 0.866,   -0.866,  -1.0,   0.5,     -1.0,  -1.0,   0.0, // d0- d1- d2- d3  down    61,62,63,64,
     -0.866, -1.0,   -0.5,      -0.5,  -1.0,-0.866,      0.0,  -1.0,  -1.0,      0.5,  -1.0,-0.866, // d4- d5- d6- d7  down    65,66,67,68,
      0.866, -1.0,   -0.5,       1.0,  -1.0,   0.0,    0.866,  -1.0,   0.5,      0.5,  -1.0, 0.866, // d8- d9- d10-d11 down    69,70,71,72,

        0.0,  1.0,    0.5,                                                                          // d12 down middle         73,
  ]);

  var indices = new Uint8Array([       // Indices of the vertices
     //0, 1,12,   1, 2,12,   2, 3,12,   3, 4,12,   4, 5,12,   5, 6,12,   6, 7,12,   7, 8,12,   8, 9,12,   9,10,12,  10,11,12,  11, 0,12, //top cap

    13,14,15,  13,15,16,  
    17,18,19,  17,19,20,  
    21,22,23,  21,23,24,  
    25,26,27,  25,27,28,
    29,30,31,  29,31,32,
    33,34,35,  33,35,36,
    37,38,39,  37,39,40,
    41,42,43,  41,43,44,
    45,46,47,  45,47,48,
    49,50,51,  49,51,52,
    53,54,55,  53,55,56,
    57,58,59,  57,59,60,

    //61,62,73,  62,63,73,  63,64,73,  64,65,73,  65,66,73,  66,67,73,  67,68,73,  68,69,73,  69,70,73,  70,71,73,  71,72,73,  72,61,73, //bottom cap
  ]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: vertices,
  indices,
});

function render(time) {
  time *= 0.001;
  
  gl.enable(gl.DEPTH_TEST);
  gl.useProgram(programInfo.program);

  let mat = m4.perspective(
    60 * Math.PI / 180,
    gl.canvas.clientWidth / gl.canvas.clientHeight,
    0.1,
    10);
  mat = m4.translate(mat, [0, 0, -3]);
  mat = m4.rotateX(mat, time);
  mat = m4.rotateZ(mat, time);

  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, {
    matrix: mat,
  });
  twgl.drawBufferInfo(gl, bufferInfo);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>