OpenGL ES - How to draw two separate items?

SDyer · 03-06-2009, 03:31 PM

Hi - this is a noob OpenGL ES question. I'm starting with the Open GL ES app that XCode gives you, the one with the rotating gradient square. I would like to display a background behind that rotating square. I am able to display a background, but it rotates too! I've not found a way to "decouple" them. How do I apply rotation to only one of them? My draw source code is below. Thanks!
PS - I've googled all I can for simple Open GL ES examples, to no avail. If anyone has a "simple" example of how to draw a few things together in one scene, that would be great!

- (void)drawView {

// Replace the implementation of this method to do your own custom drawing

const GLfloat squareVertices[] = {
-0.5f, -0.5f,
0.5f, -0.5f,
-0.5f, 0.5f,
0.5f, 0.5f,
};
const GLfloat squareVertices2[] = {
-1.0f, -1.0f,
1.0f, -1.0f,
-1.0f, 1.0f,
1.0f, 1.0f,
};
const GLubyte squareColors[] = {
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
};
const GLubyte squareColors2[] = {
255, 255, 0, 255,
255, 255, 0, 255,
255, 0, 0, 255,
255, 0, 0, 255,
};

[EAGLContext setCurrentContext:context];

glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
glViewport(0, 0, backingWidth, backingHeight);

// Set up the projection
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);

// Draw background image.
glMatrixMode(GL_MODELVIEW);
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices2);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors2);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

// Draw rotating box.
// glMatrixMode(GL_MODELVIEW);
glRotatef(3.0f, 0.0f, 0.0f, 1.0f);
// glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
// glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

**Kalimba** · 03-06-2009, 04:23 PM

Quote:

Originally Posted by SDyer

Hi - this is a noob OpenGL ES question. I'm starting with the Open GL ES app that XCode gives you, the one with the rotating gradient square. I would like to display a background behind that rotating square. I am able to display a background, but it rotates too! I've not found a way to "decouple" them. How do I apply rotation to only one of them? My draw source code is below. Thanks!

The "flaw" in the default OpenGL project is that they don't reset the modelview matrix to the identity matrix for each new draw call. They apply a rotation of 3 degrees every frame, but that rotation is multiplied to the existing modelview matrix, which is how they achieve the constant rotation effect. If you want independent control of your scene objects (and who doesn't), you'll probably want to set the modelview matrix to the identity on every new draw call, then apply the individual transformations for each of your scene objects.

SDyer · 03-06-2009, 06:57 PM

Thanks, Kalimba. Would you have sample code that would do that? I have hunted so much OpenGL today and there are very few examples out there. If I have a good code sample to go from, I can get a lot done.

**Kalimba** · 03-06-2009, 07:12 PM

Quote:

Originally Posted by SDyer

Thanks, Kalimba. Would you have sample code that would do that? I have hunted so much OpenGL today and there are very few examples out there. If I have a good code sample to go from, I can get a lot done.

You could start by modifying the code you've got in this manner (make the changes in red):

Code:

...
// Set up the projection
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);

// Draw background image.
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices2);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors2);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

static float rotAngle = 0.0f;  // not the way I'd normally do this, but it's just for demonstration
rotAngle += 3.0f;

// Draw rotating box.
glRotatef(rotAngle, 0.0f, 0.0f, 1.0f);
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
...

Hopefully this makes some sense. If not, it must make sense if you're to have any hope of getting something done in OpenGL. To further help you, I'd highly recommend that you find a good OpenGL reference. The OpenGL SuperBible is a massive 1200 pages, but it is a very good reference, as is the OpenGL Programming Guide (aka "Red Book").

SDyer · 03-06-2009, 07:20 PM

Thanks Kalimba. The code you gave me didn't work quite as it was, but this did. The square I draw first doesn't rotate, but the second one does. Hopefully I'm on the right track now.

// Set up the projection
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);

// Draw stationary square.
glMatrixMode(GL_MODELVIEW);
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices2);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors2);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

// Draw rotating box.
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
// glMatrixMode(GL_MODELVIEW);
glRotatef(angle, 0.0f, 0.0f, 1.0f);
// glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
// glClear(GL_COLOR_BUFFER_BIT);
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

angle += 3.0f;

Note: "angle" is a float member variable.

**Kalimba** · 03-06-2009, 08:21 PM

Quote:

Originally Posted by SDyer

Thanks Kalimba. The code you gave me didn't work quite as it was, but this did. The square I draw first doesn't rotate, but the second one does. Hopefully I'm on the right track now.

I'm curious what didn't work as expected with the code I posted. Looking at your current code, it seems odd that you're modifying the projection matrix to get your second object to display correctly. I'm not an expert, but it seems counterintuitive. In my current drawing pipeline, I first set up my projection matrix with the identity matrix and a call to glOrthof() and I never touch it after that. Any and all further transformations are performed on the modelview matrix stack.

SDyer · 03-06-2009, 08:32 PM

OK. I must have copied it in wrong. Your code does indeed work. But now I'm curious - what does the glRotatef command affect? The angle is set to 3.0f every frame, but the gradient square rotates, so it is going an *additional* 3.0f every frame. What makes this rotation accumulate?

Thanks for your help. I'm new to OpenGL, and I don't have a good reference book either. I've done some DirectX years ago so I'm familiar with the basics of a render pipeline, matrices, etc. but I'm rusty.

SDyer · 03-06-2009, 08:39 PM

BTW, what I'm trying to create is a simple grid-based game. I want to draw a background image, then overlay that with images for each square in the grid. From there I'll manipulate the images based on which square the user touches and such. I figure once I can get this accomplished, I can delve into animating changes and stuff with a loop. If you know of a good, simple code example for something like this, I would appreciate a link or something. The examples I've found are either way too simple (GLPaint, GLSprite) or very complex (touch fighter). Thanks again.