iOS OpenGL ES to draw a mesh wireframe - ios

I have a human model in an .OBJ file I want to display as a mesh with triangles. No textures. I want also to be able to move, scale, and rotate in 3D.
The first and working option is to project the vertices to 2D using the maths manually and then draw them with Quartz 2D. This works, for I know the underlying math concepts for perspective projection.
However I would like to use OpenGL ES for that method, but I am not sure how to draw the triangles.
For example, the code in - (void)drawRect:(CGRect)rect is:
glClearColor(1,0,0,0);
glClear(GL_COLOR_BUFFER_BIT);
GLKBaseEffect *effect = [[GLKBaseEffect alloc] init];
[effect prepareToDraw];
glEnable(GL_DEPTH_TEST);
glEnable(GL_CULL_FACE);
Now what? I have an array of vertex positions (3 floats per vertex) and an array of triangle indices, so I tried this:
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLOAT, numVertices,pVertices);
glDrawElements(GL_TRIANGLES, numTriangles, GL_UNSIGNED_INT,pTriangles);
but this doesn't show anything. I saw from a sample the usage of glEnableVertexAttribArray(GLKVertexAttribPosition) and glDrawArrays but I 'm not sure how to use them.
I also understand that rendering a wireframe is not possible with ES? So I have to apply color attributes to the vertices. That's ok, but before that the triangles have to be displayed first.

The first thing I'd ask is: where are your vertices? OpenGL (ES) draws in a coordinate space that extends from (-1, -1, -1) to (1, 1, 1), so you probably want to transform your points with a projection matrix to get them into that space. To learn about projection matrices and more of the basics of OpenGL ES 2.0 on iOS, I'd suggest finding a book or a tutorial. This one's not bad, and here's another that's specific to GLKit.
Drawing with OpenGL in drawRect: is probably not something you want to be doing. If you're already using GLKit, why not use GLKView? There's good example code to get you started if you create a new Xcode project with the "OpenGL Game" template.
Once you get up to speed with GL you'll find that the function glPolygonMode typically used for wireframe drawing on desktop OpenGL doesn't exist in OpenGL ES. Depending on how your vertex data is organized, though, you might be able to get a decent wireframe with GL_LINES or GL_LINE_LOOP. Or since you're using GLKit, you can skip wireframe and set up some lights and shading pretty easily with GLKBaseEffect.

Related

VAO + VBOs logic for data visualization (boost graph)

I'm using the Boost Graph Library to organize points linked by edges in a graph, and now I'm working on their display.
I'm a newbie in OpenGL ES 2/GLKit and Vertex Array Objects / Vertex Buffer Objects. I followed this tutorial which is really good, but at the end of what I guess I should do is :
Create vertices only once for a "model "instance of a Shape class (the "sprite" representing my boost point position) ;
Use this model to feed VBOs ;
Bind VBOs to a unique VAO ;
Draw everything in a single draw call, changing the matrix for each "sprite".
I've read that accessing VBOs is really bad for performances, and that I should use swapping VBOs.
My questions are :
is the matrix translation/scaling/rotation possible in a single call ?
then, if it is: is my logic good ?
finally: it would be great to have some code examples :-)
If you just want to draw charts, there are much easier libraries to use besides OpenGL ES. But assuming you have your reasons:
Just take a stab at what you've described and test it. If it's good enough then congratulations: you're done.
You don't mention how many graphs, how many points per graph, how often the points are modified, and the frame rate you desire.
If you're updating a few hundred vertices, and they don't change frequently, you might not even need VBOs. Recent hardware can render a lot of sprites even without them. Depends on how many verts and how often they change.
To start, try this:
// Bind the shader
glUseProgram(defaultShaderProgram);
// Set the projection (camera) matrix.
glUniformMatrix4fv(uProjectionMatrix, 1, GL_FALSE, (GLfloat*)projectionMatrix[0]);
for ( /* each chart */ )
{
// Set the sprite (scale/rotate/translate) matrix.
glUniformMatrix4fv(uModelViewMatrix, 1, GL_FALSE, (GLfloat*)spriteViewMatrix[0]);
// Set the vertices.
glVertexAttribPointer(ATTRIBUTE_VERTEX_POSITION, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), &pVertices->x));
glVertexAttribPointer(ATTRIBUTE_VERTEX_DIFFUSE, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(Vertex), &pVertices->color));
// Render. Assumes your shader does not use a texture,
// since we did not set one.
glDrawArrays(GL_TRIANGLES, 0, numVertices);
}

How to define order when drawing 2D triangles in OpenGL ES 1.1?

I'm drawing triangles with only x and y coordinates per vertex:
glVertexPointer(2, GL_FLOAT, 0, vertices);
Sometimes when I draw a triangle over another triangle they seem to be coplanar and the surface jerks because they share the exact same surface in space.
Is there a way of saying "OpenGL, I want that you draw this triangle on top of whatever is below it" without using 3D coordinates, or do I have to enable depth test and use 3D coordinates to control a Z-index?
If you want to render the triangle just on top of whatever was in the framebuffer before, you can just disable the depth test entirely. But if you need some custom ordering different from draw order, then you won't get around adding additional depth information (in the form of a 3rd z-coordinate). There is no way to say to OpenGL "render the following stuff but with the z-coordinate collectively set to some value". You can either say "render the follwing stuff on top of whatever is there" or "render the following stuff on whatever depth results from its transformed vertices".

Semi-transparency in OpenGL ES 2.0

I'm running into a problem with semi-transparency with OpenGL ES 2.0 on iOS. My scene is rather simple. It consists of a grid of cubes, some of them should appear solid whereas the others should be rendered semi-transparent. I started out with the code below for setting up OpenGL.
glEnable(GL_CULL_FACE);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
glEnable (GL_BLEND);
glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
This renders incorrect transparency for some angles because of the depth-testing and culling. See the two images below
I tried to disable curling and depth-testing and enabled alpha-testing. The result is correct transparency but no textures (see image below).
//glEnable(GL_CULL_FACE);
//glEnable(GL_DEPTH_TEST);
//glDepthFunc(GL_LEQUAL);
glAlphaFunc(GL_GREATER, 0.5);
glEnable(GL_ALPHA_TEST);
glEnable (GL_BLEND);
glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
I'm using GLKit to load textures and a GLKBaseEffect to render the scene. Does someone has a hint how to achieve the same result as in the first image with correct transparency for all perspectives? Thank you :)
Your main two options are:
Sort all the polygons in your scene, and make sure no polygon intersects any other (because then you can't order them)
Use a sort-independent blending mode instead, such as an additive or subtractive blend.
If you really do just want a grid of cubes, changing the rendering order to be suitable for any viewpoint shouldn't be too tricky, as you just need to traverse the cubes in a different order rather than actually sort anything.

Automatically calculate normals in GLKit/OpenGL-ES

I'm making some fairly basic shapes in OpenGL-ES based on sample code from Apple. They've used an array of points, with an array of indices into the first array and each set of three indices creates a polygon. That's all great, I can make the shapes I want. To shade the shapes correctly I believe I need to calculate normals for each vertex on each polygon. At first the shapes were cuboidal so it was very easy, but now I'm making (slightly) more advanced shapes I want to create those normals automatically. It seems easy enough if I get vectors for two edges of a polygon (all polys are triangles here) and use their cross product for every vertex on that polygon. After that I use code like below to draw the shape.
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, triangleVertices);
glEnableVertexAttribArray(GLKVertexAttribColor);
glVertexAttribPointer(GLKVertexAttribColor, 4, GL_FLOAT, GL_FALSE, 0, triangleColours);
glEnableVertexAttribArray(GLKVertexAttribNormal);
glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, 0, triangleNormals);
glDrawArrays(GL_TRIANGLES, 0, 48);
glDisableVertexAttribArray(GLKVertexAttribPosition);
glDisableVertexAttribArray(GLKVertexAttribColor);
glDisableVertexAttribArray(GLKVertexAttribNormal);
What I'm having trouble understanding is why I have to do this manually. I'm sure there are cases when you'd want something other than just a vector perpendicular to the surface, but I'm also sure that this is the most popular use case by far, so shouldn't there be an easier way? Have I missed something obvious? glCalculateNormals() would be great.
//And here is an answer
Pass in a GLKVector3[] that you wish to be filled with your normals, another with the vertices (each three are grouped into polygons) and then the count of the vertices.
- (void) calculateSurfaceNormals: (GLKVector3 *) normals forVertices: (GLKVector3 *)incomingVertices count:(int) numOfVertices
{
for(int i = 0; i < numOfVertices; i+=3)
{
GLKVector3 vector1 = GLKVector3Subtract(incomingVertices[i+1],incomingVertices[i]);
GLKVector3 vector2 = GLKVector3Subtract(incomingVertices[i+2],incomingVertices[i]);
GLKVector3 normal = GLKVector3Normalize(GLKVector3CrossProduct(vector1, vector2));
normals[i] = normal;
normals[i+1] = normal;
normals[i+2] = normal;
}
}
And again the answer is: OpenGL is neither a scene managment library nor a geometry library, but just a drawing API that draws nice pictures to the screen. For lighting it needs normals and you give it the normals. That's all. Why should it compute normals if this can just be done by the user and has nothing to do with the actual drawing?
Often you don't compute them at runtime anyway, but load them from a file. And there are many many ways to compute normals. Do you want per-face normals or per-vertex normals? Do you need any specific hard edges or any specific smooth patches? If you want to average face normals to get vertex normals, how do you want to average these?
And with the advent of shaders and the removing of the builtin normal attribute and lighting computations in newer OpenGL versions, this whole question becomes obsolete anyway as you can do lighting any way you want and don't neccessarily need traditional normals anymore.
By the way, it sounds like at the moment you are using per-face normals, which means every vertex of a face has the same normal. This creates a very faceted model with hard edges and also doesn't work very well together with indices. If you want a smooth model (I don't know, maybe you really want a faceted look), you should average the face normals of the adjacent faces for each vertex to compute per-vertex normals. That would actually be the more usual use-case and not per-face normals.
So you can do something like this pseudo-code:
for each vertex normal:
intialize to zero vector
for each face:
compute face normal using cross product
add face normal to each vertex normal of this face
for each vertex normal:
normalize
to generate smooth per-vertex normals. Even in actual code this should result in something between 10 and 20 lines of code, which isn't really complex.

OpenGL ES Fill Effect

How to create a fill effect? I have an irregular closed shape created using:
glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
(.......)
glVertexPointer(2, GL_FLOAT, 0, vertexBuffer);
glDrawArrays(GL_POINTS, 0, vertexCount);
(.......)
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
Now I would like to have an "fill/paint bucket" effect like in photoshop. The background inside the shape is white (for example) and by clicking inside the shape I want to change the color to red or green.
Can somebody give me some hints, please.
So you render a set of points and want OpenGL to "magically" fill the enclosed region. That's not possible. OpenGL doesn't realize that these points enclose some region. You don't even draw a line strip, it's just a set of points. Even a human has to put in a reasonable effort of thinking to see that the points "enclose" a region, let aside a computer, or just a simple interface for drawing points, lines and triangles onto the screen.
Instead of drawing points, just draw a polygon (use GL_POLYGON or GL_TRIANGLE_FAN instead of GL_POINTS). But if the enclosed region is non-convex that won't work in all cases. What you always have to realize is, that OpenGL is nothing more than a drawing API. It just draws points, lines and triangles to screen. Yes, with fancy effects, but all in all it just draws simple primitives. It doesn't manage any underlying graphics scene or something. The moment a primitive (like a single point, line or triangle) has been drawn, OpenGL doesn't remember it anymore.
What you want to achieve (given you at least change the point set to a line loop that really encloses a region), is not to be achieved by simple means. In the simplest case you need some kind of flood fill algorithm that fills the region you enclosed by the lines. But for this you don't profit from OpenGL in any way, as this requires you to analyse the image on the CPU and set individual pixels. And neither can shaders do this in a simple (or any?) way.

Resources