title: Drawing parametric shapes in webGL (without three.js)
body: <p>I've written a program that draws some parametric shapes (spheres, toruses, and cylinders) just using HTML5 and regular Javascript. I'm trying to convert this code so that it uses WebGL, implementing the shapes with triangle strips as is done in <a href="http://learningwebgl.com/blog/?p=1253" rel="nofollow noreferrer">this tutorial</a>. My point of confusion is how triangle strips are even being used to create spheres at all. The way I was doing it before just featured the calculation of where to draw each horizontal slice or circle based on the latitude lines in a for loop and nested inside of that loop was the calculation of each point on that circle. After all of those points were generated, I passed them to a function which adds all of the vertices to an array which is returned and passed to a curve plotting function that used <code>moveTo()</code> and <code>lineTo()</code> in order to draw lines between each point. The problem is that I don't know what the equivalent of <code>moveTo()</code> and <code>lineTo()</code> is in webGL when using triangle shapes. How can I translate my implementation to WebGL?</p>
  
  <p>Here is some of the code from my original implementation: </p>
  
  <pre><code>//Calculates point on sphere
     function spherePoint(uv) {
        var u = uv[0];
        var v = uv[1];
        var phi = -Math.PI/2 + Math.PI * v;
        var theta = 2 * Math.PI * u;
        return [ Math.cos(phi) * Math.cos(theta),
                 Math.cos(phi) * Math.sin(theta),
                 Math.sin(phi)];
     }
  
  // Takes the parametric function as an argument and constructs 3D shape
  
     function makeShape(num_u, num_v, eq, possRad) {
        var shell = [];
        for (var j = 0 ; j &lt;= num_v ; j++) {
            var v = j / num_v;
            shell.push([]);
           for (var i = 0 ; i &lt;= num_u ; i++) {
               var u = i / num_u;
               var p = eq([u, v], possRad);
              shell[j].push(p);
           }
        }
        return shell;
     }
  // Used to create shapes to render parametric surface
  
     function renderShape(shape) {
         var num_j = shape.length;
         var num_i = shape[0].length;
         for (var j = 0 ; j &lt; num_j - 1 ; j++)
             for (var i = 0 ; i &lt; num_i - 1 ; i++) {
  
                plotCurve([shape[j][i],
                            shape[j + 1][i],
                            shape[j + 1][i + 1],
                            shape[j][i + 1]]);
            }
     }
   //plot curve on canvas
     function plotCurve(C) {
        g.beginPath();
        for (var i = 0 ; i &lt; C.length ; i++)
           if (i == 0)
              moveTo(C[i]);
           else
              lineTo(C[i]);
        g.stroke();
     }
  
    function moveTo(p) {
        var q = m.transform(p);  // APPLY 3D MATRIX TRANFORMATION
        var xy = viewport(q);    // APPLY VIEWPORT TRANSFORM
        g.moveTo(xy[0], xy[1]);
     }
  
     function lineTo(p) {
        var q = m.transform(p);  // APPLY 3D MATRIX TRANFORMATION
        var xy = viewport(q);    // APPLY VIEWPORT TRANSFORM
        g.lineTo(xy[0], xy[1]);
     }
  </code></pre>
  
  <p>The webGL version should look something like this I would think:<a href="https://i.stack.imgur.com/bMQ9I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bMQ9I.png" alt="enter image description here"></a></p>
  
  <p>The plain Javascript version looks like this: 
  <a href="https://i.stack.imgur.com/UPr2P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UPr2P.png" alt="enter image description here"></a></p>