How to mix Opengl es and 2d rendering?

Morgan Kaufmann writes about “MIXING OPENGL ES AND 2D RENDERING” in his book Mobile 3D Graphics with OpenGL ES. He has 3 methods for this, “WINDOW SURFACE IS IN CONTROL”,“PBUFFER SURFACES” AND “BITMAPS and PIXMAP SURFACES”. He doesn’t describe exactly how to implement this, so does anyone know to do this?

I need to mix Opengl es and 2d rendering to have an option to read the instructions in my OpenGL ES application.

You question is confusing. Can you explain better what you want to achive?

I assume you want to draw UI over 3d graphics.

On most devices you cant mix OpenGL context with existing UI controls. You can create your own UI control which contains GL context, but you cant put another system UI control on top of GL context.

So… many developers creates their own UI control library, which is fully rendered using OpenGL calls. Depending on your needs you might need only few controls… like panel, button, textbox, scrollbar, checkbox.

Now… imagine you have two overlapping panels with some content in it on top of 3d content. Your game run in loop and render complete screen in each frame. This mean it render 3d content, switch to 2d mode, render your UI.

To switch to 2d mode you need to setup projection matrix in ortho mode. See glOrtho call ( http://www.khronos.org/opengles/documentation/opengles1_0/html/glOrtho.html ).
For example on IPhone you have screen 320x480. If you want to setup "2d drawing"do this:


glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, 320, 0, 480, 0, 1);

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

After this pass vertex coordinates in 0..320 x 0..480.

Assume content in one of your UI panels doesnt change in every frame and second panel have graphics that changes in every frame.
You can cache content of first panel in some offscreen sufrace like FBO once and then just draw textured quad in panel. On second panel you have to render complete content in every frame.

I don’t need to paint any UI panels,because I have already added commands which works like they should when the left options button is pressed. One of these commands it “Instructions.”

It should open up a page with instructions. This page will not have any opengl graphics in it, so there will not be any mixing of opengl and 2d here. The only mixing between opengl and 2d will
be to write simple text messages on the screen,like "your points are ". I am developing for Symbian series 60. Do you think that your suggested approach will be appropriate for what I want to do?

I dont know details about OpenGLES on Symbian.
On Windows and iPhone you cant put any system UI control inside opengl window. Result is undefined.

Check this doc (page 36-38) http://www.khronos.org/developers/library/Intro_to_OpenGL_ES_development_on_series60_and_symbian.pdf

Thanks for the PDF, it was interesting. I read about more about combining 2d and 3d rendering. It seems messy and I only want to have an instructions page, so maybe it is better to write all the instructions on a texture, which I then put on a rectangle which is shown directly in front of the camera? This approach would avoid any mixed rendering.

Yes… that will be easiest way to do.