Нарисуйте сферу с использованием секторов и стека WebGL

Question

Я пытаюсь нарисовать сферу с использованием секторов и алгоритмов стеков, но она ничего не выводит и не знает, в чем проблема. Любая помощь?

Я реализовал алгоритм буквально, как написано:Мне кажется, когда я запускаю эту функцию:

, и вы можете найти весь код в: 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

Если кому-то интересно узнать решение, это код после некоторых улучшений: `

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;`

Вывод кода

Answer 2

Предложение: Узнайте, как использовать console.log и отладчик вашего браузера

Я не проверял, работает ли ваш код на самом деле или нет, но я добавилэти строки внизу того, что вы разместили выше

console.log(vertices);
console.log(indices);

, и то, что я увидел, было

Все эти NaNзначения явно неверны

К этой строке приходит пошаговое выполнение кода

sectorAngle = j*sectorAngle; //0 to 360

, где генерируется NaN

, что не соответствует статье, на которую вы ссылались

sectorAngle = j * sectorStep;           // starting from 0 to 2pi

Является ли это единственной проблемой, которую я не знаю, но если их больше, используйте console.log иотладчик, чтобы помочь найти проблему. Один из способов облегчить отладку кода - установить для stackCount и sectorCount что-то маленькое, например 4 и 2, соответственно, и тогда вы должны иметь некоторое представление о том, какими должны быть все значения, и сравнивать их с полученными значениями.