javascript - Cylinder partially visible WebGL -
i designing cylinder in webgl 1.0 (which based on opengl es 2.0).
it started off n-sided polygon (n slices) m stacks. normals specified follows:
even though polygon/cylinder being drawn correctly, faces aren't visible every angle. can seen inside following images show:
my goal have visible cylinder following 1 (no top/bottom faces required):
does have idea on how fix this? code below:
//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 ( var stackindex = 0; stackindex < this.stacks + 1; stackindex++) { //reset angle each face of stack angle = 0; ( 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; (stackindex = 0; stackindex < this.stacks; stackindex++) { stackinc = stackindex * this.slices; (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 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 } } }
regardless of face normals, webgl defines front- , back-face based on order in define triangle.
having triangle:
a-------b \ / \ / \ / c
if add vertices index in order a, b, c (clock wise), , don't see them, need switch order in a, c, b (counter clock wise).
this because of this: https://www.opengl.org/wiki/face_culling
Comments
Post a Comment