View Full Version : Rendering UI Elements

12-27-2011, 04:29 PM
Have a quick question about UIs.

What is the common practice for rendering UI elements, there are two ways I can think of doing them in my head. First of which is rendering them as normal polygons at the clip space minimum with textures rendered on top of them. It seems to me as though this might be an over complication, but having never implemented it, I can't say for certain. The second way of doing things that I can think of is after the 3D rendering is done, switch to a 2D rendering method for the UI elements.

Any help with this would be much appreciated!



12-27-2011, 06:04 PM
Switch to 2d mode as you say and render. However, either method will work.

12-28-2011, 10:23 AM
There is no clear distinction in OpenGL between 2D and 3D rendering, and as such, 2D rendering is similar to 3D. There are some direct frame buffer operations you can do (particularly glDrawPixels), but most real world software uses the same 3D techniques to render GUIs because it is just as easy, more flexible and often computationally faster.

Just set up a 2D projection matrix with glOrtho, disable GL_DEPTH_TEST and render primitives similar to 3D rendering (e.g. glVertex2f instead of glVertex3f). For rendering text, use a textured mapped GL_QUADS in combination with alpha blending (the texture containing the glyphs or icons). You can probably find many code samples and a few libraries on the web that can help with this.

If you need to render 3D UI elements such as trackballs or 3D text, you can simply clear the depth buffer after rendering your 3d scene, and draw the 3D UI elements on top without having them intersect with the 3D scene.

Finally, it is also possible to render 2D elements into a 3D scene (e.g. player name tags over game avatars). You can do this by projecting the 3D world position to the 2D UI screen coordinates. Look at gluProject and gluUnproject for this.
This is essentially the same as your first suggestion in your post, which as you guessed is overcomplicated for typical UI rendering. It may also suffer from floating point numerical instability, and therefor isn't recommended unless you know what you are doing.

Hope that helps.