我正在 WebGL 1.0(基于 OpenGL ES 2.0)中设计一个圆柱体。

它开始时是一个有 m 个堆叠的 n 边多边形(n 片)。它的法线指定如下:

即使正确绘制多边形/圆柱体，它的面也不是从每个 Angular 都可见。它们只能从内部看到，如下图所示:

我的目标是拥有一个完全可见的圆柱体，如下图所示(不需要顶面/底面):

有人知道如何解决这个问题吗？代码如下:

//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
             }
         }
     }

1 Câu trả lời

无论面法线如何，WebGL 都会根据您定义三 Angular 形的顺序来定义正面和背面。

有这个三 Angular 形:

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

如果您按 A、B、C(顺时针)的顺序将顶点添加到索引中，但您没有看到它们，则需要切换 A、C、B(逆时针)的顺序。

这是因为:https://www.opengl.org/wiki/Face_Culling

关于javascript - 圆柱体部分可见 WebGL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29802400/