OpenGL ES not working as desired

Question

I have a GLKView which pretty much displays the shape I want but there are a few things that still do not work as desired.

      3_______________________2
      |\                     /|
      | \_ _ _ _ _ _ _ _ _ _/ |
      | /4                 5\ |
      |/_____________________\|
      0                       1

• texture mapping is working on the front-face, the other two faces do not really work, there are triangles lacking.

• When I use colours, the faces seem to appear as desired, however the back faces do not join at the edge formed by the points 4 and 5 (look at the drawing I provided above).
  I want (if you look at it from the side) the three faces to shape an equilateral triangle.

I have temporarily commented out the texture mapping sections of the code so that you can test it If you like.

Here I set up my view (note my view's dimensions. The coordinate system works fine without fiddling around with low values. The faces look good, they just do not, as I said join at the back):

    EAGLContext * context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    OpenGLShape *view = [[OpenGLShape alloc] initWithFrame:CGRectMake(0, 200, 320, 80) context:context];
    view.delegate = view;
    [view setupGL];
    [self.view addSubview:view];

- (void)setupGL {

    [EAGLContext setCurrentContext:self.myContext];

    //glEnable(GL_CULL_FACE);


    self.effect = [[GLKBaseEffect alloc] init];

    BOOL useTexture = NO;

    // Create default framebuffer object.
    glGenFramebuffers(1, &defaultFrameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, defaultFrameBuffer);

    if(useTexture){
        NSDictionary * options = [NSDictionary dictionaryWithObjectsAndKeys:
                              [NSNumber numberWithBool:YES],
                              GLKTextureLoaderOriginBottomLeft,
                              nil];

        NSError * error;
        NSString *path = [[NSBundle mainBundle] pathForResource:@"blogcell@2x" ofType:@"png"];
        GLKTextureInfo * info = [GLKTextureLoader textureWithContentsOfFile:path options:options error:&error];
        if (info == nil) {
            NSLog(@"Error loading file: %@", [error localizedDescription]);
        }
        self.effect.texture2d0.name = info.name;
        self.effect.texture2d0.enabled = true;

        glGenBuffers(1, &texArray);
        glBindBuffer(GL_ARRAY_BUFFER, texArray);
        glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
        glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 0,0);
        glBufferData(GL_ARRAY_BUFFER, sizeof(TexCoords), TexCoords, GL_STATIC_DRAW);


    }else{

        glGenBuffers(1, &colArray);
        glBindBuffer(GL_ARRAY_BUFFER, colArray);
        glEnableVertexAttribArray(GLKVertexAttribColor);
        glVertexAttribPointer(GLKVertexAttribColor, 4, GL_FLOAT, GL_FALSE, 0, 0);
        glBufferData(GL_ARRAY_BUFFER, sizeof(Color), Color, GL_STATIC_DRAW);
    }

    glGenRenderbuffers(1, &depthBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, depthBuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, 320.0f, 80.0f);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, depthBuffer);

    glEnable(GL_DEPTH_TEST);

    glGenBuffers(1, &vertexArray);
    glBindBuffer(GL_ARRAY_BUFFER, vertexArray);
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition,3,GL_FLOAT,GL_FALSE,0,0);
    glBufferData(GL_ARRAY_BUFFER, sizeof(Vertices), Vertices, GL_STATIC_DRAW);




    self.effect.transform.projectionMatrix = GLKMatrix4MakePerspective(51.4f,4.0f, 0.1f, 10.75f);
   rotMatrix = GLKMatrix4Translate(self.effect.transform.modelviewMatrix,0, 0, -3);


}




- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {

    self.opaque = NO;
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    [self.effect prepareToDraw];

    glDrawArrays(GL_TRIANGLES, 0, sizeof(Vertices));
}

red = front face (made up by points 0123)

blue = back face (top - made up by points 4523)

green = back face (bottom - made up by points 0154)

white = background

I have also made the faces semi-transparent (alpha = 0.5) for the sake of seeing whether they blend/cull etc.

Answer 1

In OpenGL the camera is always at {0,0,0}, what changes position is the 3D world.

For an orthogonal projection the projection matrix is given by:

self.effect.transform.projectionMatrix = GLKMatrix4MakeOrtho(left, right, bottom, top, front, back);

Objects in an orthogonal projection look the same size when they move near or far the camera.

Objects in a perspective projection look smaller when they move far the camera.

For a perspective projection the projection matrix is given by:

self.effect.transform.projectionMatrix = GLKMatrix4 GLKMatrix4MakePerspective (fov, aspect, front, back);
);

For a perspective projection the field of view (fov) works like the one on a real camera, for small values the perspective is almost unnoticeable, for big values the distortion due to the perspective projection is big.

The fov angle is in radians, and can be tweaked until the scene looks right for your application

aspect is the screen aspect ratio between the horizontal and the vertical viewing area.

For practical reasons the fov is specified in degrees, so it can be used like follows

GLKMatrix4MakePerspective(fov * M_PI / 180.0f,
                                          screenWidth / screenHeight,
                                          front, back);

The near clipping plane needs to be greater than zero in a perspective projection, so you need to add a translation to the modelview matrix, that separates the world from the camara a little bit.

This translation is specified in the model view matrix

self.effect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0, 0, -frontClippingPlane);

Update

The clipping volume needs to include all vertices to avoid z-fighting with the front clipping plane, in which case the final translation in a perspective projection needs to be a little bit further

self.effect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0, 0, -frontClippingPlane - 0.1f);

For rotate the model and translate it to its final position you need to combine the two transformations as follows:

GLKMatrix4 rotation = GLKMatrix4MakeRotation(angle*M_PI/180, 1, 0, 0); // angle in degrees and x,y, and z coordinates for the rotation axis
GLKMatrix4 translation = GLKMatrix4MakeTranslation( 0, 0, -front - 0.1f);
self.effect.transform.modelviewMatrix = GLKMatrix4Multiply(rotation, translation); // the order matters

The following are the rotation axis and directions for OpenGL, which is right-handed

This is the final effect