Unable to Draw Triangles Through glDrawElements in OpenGL ES 2.0 - iphone

Question

I'm trying to draw a procedural sphere referenced here.
I modified it a bit so that I can use the glDrawElements method of OpenGL ES 2.0
Here's my version of createSphere:
GLfloat sphereVerticies[10000]={0.0};
GLubyte triangleIndices[15000]={0};
int createSphere (GLfloat spherePoints[], GLubyte triangleIndices[], GLfloat fRadius, GLfloat step)
{
int points = 0;
GLfloat uStep = DEGREES_TO_RADIANS (step);
GLfloat vStep = uStep;
unsigned long index=0;
for (GLfloat u = 0.0f; u <= (2 * M_PI); u += uStep)
{
for (GLfloat v = -M_PI_2; v <= M_PI_2; v += vStep)
{
triangleIndices[index++]=points;
triangleIndices[index++]=points+1;
triangleIndices[index++]=points+2;
triangleIndices[index++]=points+2;
triangleIndices[index++]=points+3;
triangleIndices[index++]=points;
points++;
spherePoints[(points - 1) * 3] = fRadius * cosf(v) * cosf(u); // x
spherePoints[((points - 1) * 3) + 1] = fRadius * cosf(v) * sinf(u); // y
spherePoints[((points - 1) * 3) + 2] = fRadius * sinf(v); // z
points++;
spherePoints[(points - 1) * 3] = fRadius * cosf(v) * cosf(u + uStep); // x
spherePoints[((points - 1) * 3) + 1] = fRadius * cosf(v) * sinf(u + uStep); // y
spherePoints[((points - 1) * 3) + 2] = fRadius * sinf(v); // z
points++;
spherePoints[(points - 1) * 3] = fRadius * cosf(v + vStep) * cosf(u); // x
spherePoints[((points - 1) * 3) + 1] = fRadius * cosf(v + vStep) * sinf(u); // y
spherePoints[((points - 1) * 3) + 2] = fRadius * sinf(v + vStep); // z
points++;
spherePoints[(points - 1) * 3] = fRadius * cosf(v + vStep) * cosf(u + uStep); // x
spherePoints[((points - 1) * 3) + 1] = fRadius * cosf(v + vStep) * sinf(u + uStep); // y
spherePoints[((points - 1) * 3) + 2] = fRadius * sinf(v + vStep); // z
}
}
return points;
}
In SetupGL I have:
..
glEnable(GL_CULL_FACE);
..
..
glGenVertexArraysOES(1, &_vertexArray);
glBindVertexArrayOES(_vertexArray);
numPoints=createSphere(sphereVerticies, triangleIndices, 30.0f, 20.0f);
glGenBuffers(1, &_vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(sphereVerticies), sphereVerticies, GL_STATIC_DRAW);
glGenBuffers(1, &_indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(triangleIndices), triangleIndices, GL_STATIC_DRAW);
// New lines (were previously in draw)
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid *) sphereVerticies);
glBindVertexArrayOES(0);
and finally in drawInRect:
glBindVertexArrayOES(_vertexArray);
glDrawElements(GL_TRIANGLES, (int)(numPoints*1.5), GL_UNSIGNED_BYTE, 0);
Now what am I doing wrong here? I don't see any visual output. Any help will be greatly appreciated. Thanks.

Answer 1

I can see two things:
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid *) sphereVerticies);
the last argument there should be 0, since the vertices are already buffered and bound in the VBO.
OpenGL ES - glVertexAttribPointer documentation
If a non-zero named buffer object is bound to the GL_ARRAY_BUFFER target (see glBindBuffer) while a generic vertex attribute array is specified, pointer is treated as a byte offset into the buffer object's data store...
And,
glDrawElements(GL_TRIANGLES, (int)(numPoints*1.5), GL_UNSIGNED_BYTE, 0);
you should use GL_UNSIGNED_SHORT because you have more than 255 vertices.
As for the indices, this is how you index them:
(0,1,2) (2,3,0)
2 3 2 2 3
o-------o o o-------o
| | | \ | /
| | => | \ | /
| | | \ | /
o-------o o-------o o
0 1 0 1 0
So, from this chart we can see two problems:
1) The triangles do not close up the polygon
2) Notice the winding, the first triangle is CCW, the second CW.
Try this code:
triangleIndices[index++]=points;
triangleIndices[index++]=points+1;
triangleIndices[index++]=points+2;
triangleIndices[index++]=points+3;
triangleIndices[index++]=points+2;
triangleIndices[index++]=points+1;