Draw a sphere using sectors and stack WebGL - webgl

Question

I'm trying to draw a sphere using sectors and stacks algorithm but it output nothing and do not know where is the problem. Any help?
I implemented the algorithm literally as written in: http://www.songho.ca/opengl/gl_sphere.html
Everything is working fine except the coloredShpere function
this is a photo of what appears to me when I run this function:
and you can find the whole code in: https://drive.google.com/open?id=1dnnkk1w7oq4O7hPTMeGRkyELwi4tcl5X
let mesh = createMesh(gl);
const PI = 3.1415926;
const r = 1.0;
const stackCount = 16;
const sectorCount = 16;
let x : number;
let y : number;
let z : number;
let xy : number;
let vertices: number[] = new Array();
let normals : number[] = new Array();
let texCoords : number[] = new Array();
let nx: number;
let ny: number;
let nz: number;
let lengthInv: number;
lengthInv = 1.0 / r;
let s: number;
let t: number;
let sectorStep = 2 * PI / sectorCount;
let stackStep = PI / stackCount;
let sectorAngle : number;
let stackAngle : number;
for(let i = 0; i<=stackCount; i++) {
stackAngle = PI/2 - i*stackStep; //-90 to +90
xy = r*Math.cos(stackAngle);
z = r*Math.sin(stackAngle);
for(let j = 0; j<=sectorCount; j++) {
sectorAngle = j*sectorAngle; //0 to 360
x = xy*Math.cos(sectorAngle);
y = xy*Math.sin(sectorAngle);
vertices.push(x);
vertices.push(y);
vertices.push(z);
nx = x * lengthInv;
ny = y * lengthInv;
nz = z * lengthInv;
normals.push(nx);
normals.push(ny);
normals.push(nz);
// vertex tex coord (s, t) range between [0, 1]
s = j / sectorCount;
t = i / stackCount;
texCoords.push(s);
texCoords.push(t);
}
}
// generate CCW index list of sphere triangles
// indices
// k1--k1+1
// | / |
// | / |
// k2--k2+1
let indices: number[] = new Array();
let k1 : number;
let k2 : number;
for(let i = 0; i<stackCount; i++) {
k1 = i * (sectorCount + 1); //frist stack
k2 = k1 + sectorCount + 1; //second stack
for(let j = 0; j<sectorCount; j++) {
//k1, k2, k1+1
if(i != 0) {
indices.push(k1);
indices.push(k2);
indices.push(k1+1);
}
//k1+1, k2, k2+1
if(i != (stackCount-1)) {
indices.push(k1+1);
indices.push(k2);
indices.push(k2+1);
}
}
}
mesh.setBufferData("positions", new Float32Array(vertices), gl.STATIC_DRAW);
//mesh.setBufferData("colors", new Uint8Array(), gl.STATIC_DRAW);
mesh.setElementsData(new Uint32Array(indices), gl.STATIC_DRAW);
//mesh.setBufferData("colors", new Uint8Array(), gl.STATIC_DRAW);
return mesh;

Answer 1

Suggestion: Learn how to use console.log and your browser's debugger
I didn't check if your code actually works or not but I did add these lines at the bottom of what you posted above
console.log(vertices);
console.log(indices);
and what I saw was
All those NaN values are clearly wrong
Stepping through the code comes to this line
sectorAngle = j*sectorAngle; //0 to 360
which is where the NaN is generated
which doesn't match the article you linked to
sectorAngle = j * sectorStep; // starting from 0 to 2pi
Whether or not that's the only issue I don't know but if there are more then use console.log and the debugger to help find the issue. One way to make the code easier to debug is set stackCount and sectorCount to something small like 4 and 2 respectively and then you should have some idea what all the values should be and you can compare with what values you are getting.

Answer 2

If someone interested to know the solution, this is the code after some improvements:
`
let mesh = createMesh(gl);
const PI = 3.1415926;
const r = 1.0;
let vertices = [];
let colors = [];
for(let i = 0; i<=verticalResolution; ++i) {
let theta = i * Math.PI / verticalResolution; //-90 to 90
let sinTheta = Math.sin(theta);
let cosTheta = Math.cos(theta);
for(let j = 0; j<=horizontalResolution; ++j) {
let phi = j * 2 * Math.PI / horizontalResolution; //0 to 360
let sinPhi = Math.sin(phi);
let cosPhi = Math.cos(phi);
let x = sinTheta*cosPhi;
let y = cosTheta;
let z = sinTheta*sinPhi;
vertices.push(r*x);
vertices.push(r*y);
vertices.push(r*z);
colors.push((x+1)/2*255);
colors.push((y+1)/2*255);
colors.push((z+1)/2*255);
colors.push(255);
}
}
// generate CCW index list of sphere triangles
// indices
// k1--k1+1
// | / |
// | / |
// k2--k2+1
let indices = [];
for(let i = 0; i<verticalResolution; ++i) {
for(let j = 0; j<horizontalResolution; ++j) {
let first = (i * (horizontalResolution + 1)) + j;
let second = first + horizontalResolution + 1;
indices.push(first);
indices.push(second);
indices.push(first+1);
indices.push(second);
indices.push(second+1);
indices.push(first+1);
}
}
mesh.setBufferData("positions", new Float32Array(vertices), gl.STATIC_DRAW);
mesh.setBufferData("colors", new Uint8Array(colors), gl.STATIC_DRAW);
mesh.setElementsData(new Uint32Array(indices), gl.STATIC_DRAW);
return mesh;`
Output of the code