drawing HUD in opengl es

Discussion in 'Public Game Developers Forum' started by cool mr croc, Sep 12, 2009.

  1. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    pleez halp. im trying to make this 3d crossword app for my dad, my mac is working again after a week of being broken, and i may have an interview at ubisoft coming up with nothing but an old 2d bat and ball game as a demo.

    im trying to switch from perspective to ortho after drawing what i need to so i can set up a 2d hud to deal with touches, but as soon as i make the switch everything goes black. can you see what im doing wrong or leaving out? this code is just a test to see if i can draw a floor in 3d then 1 square as a HUD.

    Code:
    - (void)drawView {
    
    /////
    //this bit has vertices delcared
    /////
    
    glBindTexture(GL_TEXTURE_2D, textures[1]);
    glVertexPointer(3, GL_FLOAT, 0, elementVerticies);
    glEnableClientState(GL_VERTEX_ARRAY);
    glEnable(GL_TEXTURE_2D);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glTexCoordPointer(2, GL_FLOAT, 0, &fontTexCoords[208]);
    
    for (int i = 0; i < 5; i++) {
    glPushMatrix();
    {
      glTranslatef(-1.0, -1.0, -2.0+(i*-2.0));
      glRotatef(-90.0, 1.0, 0.0, 0.0);
      glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();
    glPushMatrix();
    {
      glTranslatef(1.0, -1.0, -2.0+(i*-2.0));
      glRotatef(-90.0, 1.0, 0.0, 0.0);
      glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();
    }
    
    [self setupOrtho];
    
    glPushMatrix();
    {
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }
    glPopMatrix();
    
    [self setupView]
    
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
    [self checkGLError:NO];
    }
    
    -(void)setupOrtho {
    glDisable(GL_DEPTH_TEST);
    glOrthof(0, 320, 0, 480, -1, 1);
    }
    
    - (void)setupView {
        const GLfloat zNear = 0.1, zFar = 1000.0, fieldOfView = 60.0;
        GLfloat size;
        glEnable(GL_DEPTH_TEST);
        glMatrixMode(GL_PROJECTION);
        size = zNear * tanf(DEGREES_TO_RADIANS(fieldOfView) / 2.0);
    // This give us the size of the iPhone display
        CGRect rect = self.bounds;
        glFrustumf(-size, size, -size / (rect.size.width / rect.size.height), size / (rect.size.width / rect.size.height), zNear, zFar);
        glViewport(0, 0, rect.size.width, rect.size.height);
        glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    }
    
    it displays the floor for a split second then nothing but blackness.
     
  2. Anders

    Anders Well-Known Member

    Feb 3, 2009
    1,634
    0
    0
    Co-owner and CTO at Color Monkey
    Sweden
    Just looked at it briefly, and one thing that could be the problem is that when you go ortho, you set z min and max to [-1, 1] and then you translate -2.0+(i*-2.0) in z.
     
  3. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    #3 epatel, Sep 15, 2009
    Last edited: Sep 15, 2009
    I belive you are missing setting the correct matrix mode in your setupOrtho

    glMatrixMode(GL_PROJECTION);
    :
    :
    glMatrixMode(GL_MODEL);


    You maybe need to check your draw and setupView methods that you are setting matrix mode correctly there too. ie are your glTranslate really working on the model stack or the projection stack in your draw method?
     
  4. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    it errors around GL_MODEL, it doesnt recognise the word.

    and ive changed the -1.5 z translation to 0.0, its still doing the same thing.
     
  5. Anders

    Anders Well-Known Member

    Feb 3, 2009
    1,634
    0
    0
    Co-owner and CTO at Color Monkey
    Sweden
    Ah yeah, you probably need to be in model/view space, thought you did that somewhere else. And don't forget to push/pop your matrices as well. The matrix is defined as GL_MODELVIEW and not GL_MODEL.

    Use http://www.khronos.org/opengles/sdk/1.1/docs/man/ extensively.
     
  6. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    k this is what i hav in setupOrtho() now but it still isnt working

    Code:
    -(void)setupOrtho {
    glMatrixMode(GL_PROJECTION);
    glDisable(GL_DEPTH_TEST);
    glLoadIdentity();
    glOrthof(0, 320, 0, 480, -1, 1);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    }
    
    also added those last 2 function calls to setupView

    :(
     
  7. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    Ah...sorry for the miss-spelling...
     
  8. Anders

    Anders Well-Known Member

    Feb 3, 2009
    1,634
    0
    0
    Co-owner and CTO at Color Monkey
    Sweden
    Try disabling stuff you don't need, for instance textures and lighting, and set the color to 1111.
     
  9. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    What is the size and position of the square you want to draw? is it like a unit in size and positioned at origo it will be like one pixel big in the lower left corner.

    Maybe you should set glOrtho() to something like

    glOrthof(-2, 2, -2, 2, -2, 2);
     
  10. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    the problem is nothing gets drawn after orthof() is called for the first time. and the reason im calling glOrthof(0, 320, 0, 480, -1, 1); is to match vertices to pixels on screen. my vertices at the moment are -1 to 1 for x and y with z always at 0. what should be happening is the floor should be drawing with a tiny square being drawn right in front of the screen.
     
  11. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    Ah, then I definitly think you should use glOrthof(-2, 2, -2, 2, -2, 2);

    Then back to some basics. The draw method often starts with some correct setup. You seem to have placed the [self setupView] last in the draw method.

    then some standards things to do first in the draw method are

    [EAGLContext setCurrentContext:context];
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    [self setupView];
    glClearColor(0, 0, 0, 1); // black
    glClear(GL_DEPTH_BUFFER_BIT); // no GL_COLOR_BUFFER_BIT because surfacemask is a box


    // More or less from the template
     
  12. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    ok ive simplified the program, its now a spinning square with no texture, just colour

    Code:
    - (void)drawView {
    	
    	
    	// Our new object definition code goes here
    	
    	const GLfloat elementVerticies[] = {
            -1.0, 1.0, 0.0,     // Top left
            -1.0, -1.0, 0.0,    // Bottom left
            1.0, -1.0, 0.0,     // Bottom right
            1.0, 1.0, 0.0       // Top right
        };
    	
    	
        const GLfloat cubeVertices[] = {   
    		
            // Define the front face
            -1.0, 1.0, 1.0,             // top left
            -1.0, -1.0, 1.0,            // bottom left
            1.0, -1.0, 1.0,             // bottom right
            1.0, 1.0, 1.0,              // top right
    		
    		// Top face
            -1.0, 1.0, -1.0,            // top left (at rear)
            -1.0, 1.0, 1.0,             // bottom left (at front)
            1.0, 1.0, 1.0,              // bottom right (at front)
            1.0, 1.0, -1.0,             // top right (at rear)
    		
    		// Rear face
            1.0, 1.0, -1.0,             // top right (when viewed from front)
            1.0, -1.0, -1.0,            // bottom right
            -1.0, -1.0, -1.0,           // bottom left
            -1.0, 1.0, -1.0,            // top left
    		
    		// bottom face
            -1.0, -1.0, 1.0,
            -1.0, -1.0, -1.0,
            1.0, -1.0, -1.0,
            1.0, -1.0, 1.0,
    		
    		// left face
            -1.0, 1.0, -1.0,
            -1.0, 1.0, 1.0,
            -1.0, -1.0, 1.0,
            -1.0, -1.0, -1.0,
    		
    		// right face
            1.0, 1.0, 1.0,
            1.0, 1.0, -1.0,
            1.0, -1.0, -1.0,
            1.0, -1.0, 1.0
        };
    	
    	
    	[EAGLContext setCurrentContext:context];   
    	glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    	glViewport(0, 0, backingWidth, backingHeight);
    	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    	glMatrixMode(GL_MODELVIEW);
    	
    	// Our new drawing code goes here
    	
    	rota += 0.5;
    	glLoadIdentity();
    	glTranslatef(0.0, 0.0, -6.0);
    	glRotatef(rota, 1.0, 1.0, 1.0);
    	glVertexPointer(3, GL_FLOAT, 0, cubeVertices);
    	glEnableClientState(GL_VERTEX_ARRAY);
    	
    	// Draw the front face in Red
    	glColor4f(1.0, 0.0, 0.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    	// Draw the top face in green
    	glColor4f(0.0, 1.0, 0.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 4, 4);
    	// Draw the rear face in Blue
    	glColor4f(0.0, 0.0, 1.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 8, 4);
    	// Draw the bottom face
    	glColor4f(1.0, 1.0, 0.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 12, 4);
    	// Draw the left face
    	glColor4f(0.0, 1.0, 1.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 16, 4);
    	// Draw the right face
    	glColor4f(1.0, 0.0, 1.0, 1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 20, 4);
    	
    	glLoadIdentity();
    	
    	glMatrixMode(GL_PROJECTION);
    	glDisable(GL_DEPTH_TEST);
    	glLoadIdentity();
    	glOrthof(0, 320, 0, 480, -1, 1);
    	glMatrixMode(GL_MODELVIEW);
    	glLoadIdentity();
    	
    	glVertexPointer(3, GL_FLOAT, 0, elementVerticies);
    	glEnableClientState(GL_VERTEX_ARRAY);
    	glColor4f(1.0, 0.0, 0.0, 1.0);
    	glTranslatef(0.0, 0.0, -1.0);
    	glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    	
    	
    	glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    	[context presentRenderbuffer:GL_RENDERBUFFER_OES];
    	[self checkGLError:NO];
    	
    }
    same problem as before
     
  13. Anders

    Anders Well-Known Member

    Feb 3, 2009
    1,634
    0
    0
    Co-owner and CTO at Color Monkey
    Sweden
    Add glMatrixMode(GL_PROJECTION); to the beginning of the loop before glViewport, otherwise the next loop will have the wrong matrix selected.

    Also, perhaps add a glScale(100, 100, 1) before drawing as it would otherwise just be a tiny tiny square.
     
  14. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    Try this

    - (void)drawView {
    static float rota = 0;

    // Our new object definition code goes here

    const GLfloat elementVerticies[] = {
    -1.0, 1.0, 0.0, // Top left
    -1.0, -1.0, 0.0, // Bottom left
    1.0, -1.0, 0.0, // Bottom right
    1.0, 1.0, 0.0 // Top right
    };


    const GLfloat cubeVertices[] = {

    // Define the front face
    -1.0, 1.0, 1.0, // top left
    -1.0, -1.0, 1.0, // bottom left
    1.0, -1.0, 1.0, // bottom right
    1.0, 1.0, 1.0, // top right

    // Top face
    -1.0, 1.0, -1.0, // top left (at rear)
    -1.0, 1.0, 1.0, // bottom left (at front)
    1.0, 1.0, 1.0, // bottom right (at front)
    1.0, 1.0, -1.0, // top right (at rear)

    // Rear face
    1.0, 1.0, -1.0, // top right (when viewed from front)
    1.0, -1.0, -1.0, // bottom right
    -1.0, -1.0, -1.0, // bottom left
    -1.0, 1.0, -1.0, // top left

    // bottom face
    -1.0, -1.0, 1.0,
    -1.0, -1.0, -1.0,
    1.0, -1.0, -1.0,
    1.0, -1.0, 1.0,

    // left face
    -1.0, 1.0, -1.0,
    -1.0, 1.0, 1.0,
    -1.0, -1.0, 1.0,
    -1.0, -1.0, -1.0,

    // right face
    1.0, 1.0, 1.0,
    1.0, 1.0, -1.0,
    1.0, -1.0, -1.0,
    1.0, -1.0, 1.0
    };


    [EAGLContext setCurrentContext:context];
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glMatrixMode(GL_MODELVIEW);

    // Our new drawing code goes here
    glMatrixMode(GL_PROJECTION);
    glEnable(GL_DEPTH_TEST);
    glLoadIdentity();
    glFrustumf(-0.1, 0.1, -0.15, 0.15, 1, 100);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();

    glDisable(GL_CULL_FACE);

    rota += 0.5;
    glLoadIdentity();
    glTranslatef(0.0, 0.0, -15.0);
    glRotatef(rota, 1.0, 1.0, 1.0);
    glVertexPointer(3, GL_FLOAT, 0, cubeVertices);
    glEnableClientState(GL_VERTEX_ARRAY);

    // Draw the front face in Red
    glColor4f(1.0, 0.0, 0.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    // Draw the top face in green
    glColor4f(0.0, 1.0, 0.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 4, 4);
    // Draw the rear face in Blue
    glColor4f(0.0, 0.0, 1.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 8, 4);
    // Draw the bottom face
    glColor4f(1.0, 1.0, 0.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 12, 4);
    // Draw the left face
    glColor4f(0.0, 1.0, 1.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 16, 4);
    // Draw the right face
    glColor4f(1.0, 0.0, 1.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 20, 4);

    glLoadIdentity();

    glMatrixMode(GL_PROJECTION);
    glDisable(GL_DEPTH_TEST);
    glLoadIdentity();
    glOrthof(-40, 40, -60, 60, -2, 2);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();

    glVertexPointer(3, GL_FLOAT, 0, elementVerticies);
    glEnableClientState(GL_VERTEX_ARRAY);
    glColor4f(1.0, 0.0, 0.0, 1.0);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);


    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
    //[self checkGLError:NO];

    }
     
  15. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    ...and...remember to change the

    #define USE_DEPTH_BUFFER 0

    to

    #define USE_DEPTH_BUFFER 1

    in the beginning of the EAGLView.m file
     
  16. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    woo hoo, its working :)

    using glOrthof(-2, 2, -2, 2, -2, 2); in the first program makes my little square take up 2/3 of the screen, using glOrthof(-40, 40, -60, 60, -2, 2); keeps it more realistic. do you know what settings i need to match pixels on the screen to my vertices? say im displaying a square which i want to user to be able to touch and have the program respond, i need to know exactly what area the user is touching. i thought glOrthof(0, 320, 0, 480, -1, 1); would do it.
     
  17. cool mr croc

    cool mr croc Active Member

    May 27, 2009
    41
    0
    0
    i just tried glOrthof(0, 320, 0, 480, -1, 1); again and changed my vertices to 40 wide, now i can see a square which looks about 40px wide at the bottom left of the screen. maybe it is the right setting to go for.

    anyway i have enough to get on with things, cant thank you emough mate :)
     
  18. epatel

    epatel Member

    Apr 17, 2009
    19
    0
    0
    Senior Software Engineer
    Stockholm, Sweden
    if you define the vertices a little bigger

    const GLfloat elementVerticies[] = {
    100.0, 200.0, 0.0, // Top left
    100.0, 100.0, 0.0, // Bottom left
    200.0, 100.0, 0.0, // Bottom right
    200.0, 200.0, 0.0 // Top right
    };

    and now use

    glOrthof(0, 320, 0, 480, -2, 2);


    before I think they was draw into a single pixel in the lower left.
     

Share This Page