title: WebGL try draw sphere
body: <p>I try to draw sphere using triangles and 2 buffers(gl.ARRAY_BUFFER and gl.ELEMENT_ARRAY_BUFFER), but something wrong.I see just empty display...I use some of this code <a href="http://learningwebgl.com/blog/?p=1253" rel="nofollow noreferrer">http://learningwebgl.com/blog/?p=1253</a> and this <a href="https://github.com/davidwparker/programmingtil-webgl/blob/master/0078-3d-sphere/index.js" rel="nofollow noreferrer">https://github.com/davidwparker/programmingtil-webgl/blob/master/0078-3d-sphere/index.js</a> .</p>
  
  <pre><code>  var VSHADER_SOURCE =
      'attribute vec4 a_Position;\n' +
      'void main() {\n' +
      '  gl_Position = a_Position;\n' +
      '  gl_PointSize = 10.0;\n' +
      '}\n';
  
  var FSHADER_SOURCE =
      'void main() {\n' +
      '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
      '}\n';
  
  function resize(canvas) 
  {
    var displayWidth  = canvas.clientWidth;
    var displayHeight = canvas.clientHeight;
    if (canvas.width  != displayWidth || canvas.height != displayHeight) 
    {
      canvas.width  = displayWidth;
      canvas.height = displayHeight;
    }
  }
  
  function initArrayBuffers(gl)
  {
    var SPHERE_DIV = 6;
    var i, ai, si, ci;
    var j, aj, sj, cj;
    var p1, p2;
    var vertices = [],indices = [];
    for (j = 0; j &lt;= SPHERE_DIV; j++) 
    {
      aj = j * Math.PI / SPHERE_DIV;
      sj = Math.sin(aj);
      cj = Math.cos(aj);
      for (i = 0; i &lt;= SPHERE_DIV; i++) 
      {
        ai = i * 2 * Math.PI / SPHERE_DIV;
        si = Math.sin(ai);
        ci = Math.cos(ai);
        vertices.push(si * sj);  // X
        vertices.push(cj);       // Y
        vertices.push(ci * sj);  // Z
      }
  
      for (j = 0; j &lt; SPHERE_DIV; j++)
      {
        for (i = 0; i &lt; SPHERE_DIV; i++)
        {
          p1 = j * (SPHERE_DIV+1) + i;
          p2 = p1 + (SPHERE_DIV+1);
          indices.push(p1);
          indices.push(p2);
          indices.push(p1 + 1);
          indices.push(p1 + 1);
          indices.push(p2);
          indices.push(p2 + 1);
        }
      }
      var vertexBuffer = gl.createBuffer();
      if (!vertexBuffer) 
      {
        console.log('Failed to create the buffer object');
        return -1;
      }
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
      var indexBuffer = gl.createBuffer(); 
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
    }
    return indices.length;
  }
  
  function main() 
  {  
    var canvas = document.getElementById('webgl');  
    var gl = getWebGLContext(canvas);
    resize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    var n=initArrayBuffers(gl);
    if (!gl) 
    { 
      console.log('Failed to retrieve the &lt;canvas&gt; element');
      return; 
    } 
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) 
    {
      console.log('Failed to intialize shaders.');
      return;
    }
    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    gl.clear(gl.COLOR_BUFFER_BIT );
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      if (a_Position &lt; 0) 
        {
          console.log('Failed to get the storage location of a_Position');
          return -1;
        }
     gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
  }
  </code></pre>