How to render a sphere with triangle strips

Question

I'm currently going through this tutorial on rendering shapes WebGL (specifically a sphere in this case) and I understand the math behind the generation of each point on the sphere. In the tutorial though, the author defines one method to find all of the vertices and another to generate all of the squares that will comprise the sphere.

A couple of things are unclear from what is done in the tutorial. First, how exactly are the vertices generated by the parametric equation being connected to the squares (triangle strips) being generated? I've made a bare bones program in plain javascript and HTML5 before doing the same thing just using the vertices generated so I'm not seeing how and why they have to be used in conjunction with the triangle strips. The other point of confusion is specifically regarding the function that generates the squares:

 var indexData = [];
    for (var latNumber = 0; latNumber < latitudeBands; latNumber++) {
      for (var longNumber = 0; longNumber < longitudeBands; longNumber++) {
        var first = (latNumber * (longitudeBands + 1)) + longNumber;
        var second = first + longitudeBands + 1;
        indexData.push(first);
        indexData.push(second);
        indexData.push(first + 1);

        indexData.push(second);
        indexData.push(second + 1);
        indexData.push(first + 1);
      }
    }

To generate the first point of each square (point on the top left corner) the following is done: var first = (latNumber * (longitudeBands + 1)) + longNumber;

I'm not sure why the number of the lattitude line needs to be multiplied by the total number of longitude lines (plus 1 to fully wrap around) at each step.

The code for both functions is toward the bottom of the tutorial. A general explanation of the use of triangle strips in a case like this could also be helpful, thanks.

score 2 · Accepted Answer · answered Nov 18 '15 at 22:08

how exactly are the vertices generated by the parametric equation being connected to the squares (triangle strips) being generated?

A: Vertices are basically points. So its basically generating points using math. Quote from tutorial :

"for a sphere of radius r, with m latitude bands and n longitude bands, we can generate values for x, y, and z by taking a range of values for θ by splitting the range 0 to π up into m parts, and taking a range of values for φ by splitting the range 0 to 2π into n parts, and then just calculating:

x = r sinθ cosφ y = r cosθ z = r sinθ sinφ"

how and why they have to be used in conjunction with the triangle strips

A: they are not triangle STRIPS as in the primitive type gl.TRIANGLE_STRIP, but merely regular triangles defined with 3 points.

regarding the function that generates the squares

A: They are not generation squares per se, but using the points generated from the parametric equation to create triangles for the GPU to render. The code you shown in the OP basically divides a square into 2 triangles.

Thanks for the answer! Just one follow up question. So it seems like you're saying that the GPU is going to be rendering the six points stored in the index data buffer as a triangle (as that is the type used in the ```gl.drawelements()``` function. But if I wanted to use triangle strips instead to render the shape, which points would I have to push into the indexData array and how many for each iteration. — loremIpsum1771, Nov 21 '15 at 06:55
Six points makes two triangles. I don't recommand using TRIANGLE_STRIPS because they are CONNECTED triangles and you need to do work when you need to break the connection. — WacławJasper, Nov 21 '15 at 18:27

How to render a sphere with triangle strips

1 Answers1