Цилиндр частично виден WebGL

Question

Я проектирую цилиндр в WebGL 1.0 (который основан на OpenGL ES 2.0).

Это началось как односторонний многоугольник (n срезов) с m стеками. Его нормали определены следующим образом:

Даже если многоугольник/цилиндр втягивается правильно, его лица не видны со всех сторон. Их можно увидеть только изнутри, как показывают следующие изображения:

Моя цель состоит в том, чтобы иметь полностью видимую цилиндр, как следующие одна (без верхних/нижних граней требуется):

кто-нибудь есть какие-либо идеи о том, как это исправить? Код ниже:

//End if stacks = 0 
if (this.stacks <= 0) return; 

this.vertices = []; 
this.indices = []; 
this.normals = []; 

//--- Vertices & Normals --- 

var angle; 
var alpha = 360/this.slices; 
var zCoord = 0; 

// (N) stacks -> (N + 1) faces -> (faces * this.slices) vertex 
for (var stackIndex = 0; stackIndex < this.stacks + 1; stackIndex++) { 

    //Reset angle for each face of the stack 
    angle = 0; 

    for (var sliceIndex = 0; sliceIndex < this.slices; sliceIndex++) { 

     this.vertices.push(Math.cos(angle * degToRad)); //X 
     this.vertices.push(Math.sin(angle * degToRad)); //Y 
     this.vertices.push(zCoord); //Z 

     this.normals.push(Math.cos(angle * degToRad)); //X 
     this.normals.push(Math.sin(angle * degToRad)); //Y 
     this.normals.push(zCoord); //Z 

     //Updating angle 
     angle = angle + alpha; 
     } 
    //Updating z coordinate 
    zCoord = zCoord + (1/this.stacks); 
} 

//--- Indices --- 

var stackInc; stackIndex = 0; sliceIndex = 0; 

for (stackIndex = 0; stackIndex < this.stacks; stackIndex++) { 

    stackInc = stackIndex * this.slices; 

    for (sliceIndex = 0; sliceIndex < this.slices; sliceIndex++) { 

     if (sliceIndex != this.slices - 1) { 
      //T1 
      this.indices.push(sliceIndex + stackInc); 
      this.indices.push(sliceIndex + stackInc + this.slices); 
      this.indices.push(sliceIndex + stackInc + this.slices + 1); 

      //T2 
      this.indices.push(sliceIndex + stackInc + this.slices + 1); //this.slices 
      this.indices.push(sliceIndex + stackInc + 1); //0 
      this.indices.push(sliceIndex + stackInc); //int4 
      } 
     //Handling last face which uses repeated vertices 
     else { 
      this.indices.push(sliceIndex + stackInc); 
      this.indices.push(sliceIndex + stackInc + this.slices); 
      this.indices.push(stackInc + this.slices); 

      this.indices.push(stackInc + this.slices); 
      this.indices.push(stackInc); 
      this.indices.push(sliceIndex + stackInc); //int4 
      } 
     } 
    } 

Answer 1

Независимо от лица нормалей, WebGL определяет фронт- и бэк-лица на основании порядка, в котором вы определяете треугольник.

Наличие этого треугольника:

A-------B 
\ /
    \ /
    \/
    C 

Если добавить вершины к индексу в порядке А, В, С (по часовой стрелке), и вы не видите их, вы должны изменить порядок в A, C, B (против часовой стрелки).

Это из-за этого: https://www.opengl.org/wiki/Face_Culling