Hello GL ES Example

Files:

• opengl/hellogl_es/bubble.cpp
• opengl/hellogl_es/bubble.h
• opengl/hellogl_es/glwidget.cpp
• opengl/hellogl_es/glwidget.h
• opengl/hellogl_es/mainwindow.cpp
• opengl/hellogl_es/mainwindow.h
• opengl/hellogl_es/main.cpp
• opengl/hellogl_es/hellogl_es.pro
• opengl/hellogl_es/texture.qrc

The Hello GL ES example is the Hello GL Example ported to OpenGL ES. It also included some effects from the OpenGL Overpainting Example.

A complete introduction to OpenGL ES and a description of all differences between OpenGL and OpenGL ES is out of the scope of this document; but we will describe some of the major issues and differences.

Since Hello GL ES is a direct port of standard OpenGL code, it is a fairly good example for porting OpenGL code to OpenGL ES.

Using QGLWidget

QGLWidget can be used for OpenGL ES similar to the way it is used with standard OpenGL; but there are some differences. We use EGL 1.0 to embedd the OpenGL ES window within the native window manager. In QGLWidget::initializeGL() we initialize OpenGL ES.

Porting OpenGL to OpenGL ES

Since OpenGL ES is missing the immediate mode and does not support quads, we have to create triangle arrays.

We create a quad by adding vertices to a QList of vertices. We create both sides of the quad and hardcode a distance of 0.05f. We also compute the correct normal for each face and store them in another QList.

 void GLWidget::quad(qreal x1, qreal y1, qreal x2, qreal y2, qreal x3, qreal y3, qreal x4, qreal y4)
 {
     qreal nx, ny, nz;

     vertices << x1 << y1 << -0.05f;
     vertices << x2 << y2 << -0.05f;
     vertices << x4 << y4 << -0.05f;

     vertices << x3 << y3 << -0.05f;
     vertices << x4 << y4 << -0.05f;
     vertices << x2 << y2 << -0.05f;

     CrossProduct(nx, ny, nz, x2 - x1, y2 - y1, 0, x4 - x1, y4 - y1, 0);
     Normalize(nx, ny, nz);

     normals << nx << ny << nz;
     normals << nx << ny << nz;
     normals << nx << ny << nz;

     normals << nx << ny << nz;
     normals << nx << ny << nz;
     normals << nx << ny << nz;

     vertices << x4 << y4 << 0.05f;
     vertices << x2 << y2 << 0.05f;
     vertices << x1 << y1 << 0.05f;

     vertices << x2 << y2 << 0.05f;
     vertices << x4 << y4 << 0.05f;
     vertices << x3 << y3 << 0.05f;

     CrossProduct(nx, ny, nz, x2 - x4, y2 - y4, 0, x1 - x4, y1 - y4, 0);
     Normalize(nx, ny, nz);

     normals << nx << ny << nz;
     normals << nx << ny << nz;
     normals << nx << ny << nz;

     normals << nx << ny << nz;
     normals << nx << ny << nz;
     normals << nx << ny << nz;
 }

And then we convert the complete list of vertexes and the list of normals into the native OpenGL ES format that we can use with the OpenGL ES API.

     m_vertexNumber = vertices.size();
     createdVertices = new GLfloat[m_vertexNumber];
     createdNormals = new GLfloat[m_vertexNumber];
     for (int i = 0;i < m_vertexNumber;i++) {
       createdVertices[i] = vertices.at(i) * 2;
       createdNormals[i] = normals.at(i);
     }
     vertices.clear();
     normals.clear();
 }

In paintQtLogo() we draw the triangle array using OpenGL ES. We use q_vertexTypeEnum to abstract the fact that our vertex and normal arrays are either in float or in fixed point format.

 void GLWidget::paintQtLogo()
 {
     glDisable(GL_TEXTURE_2D);
     glEnableClientState(GL_VERTEX_ARRAY);
     glVertexPointer(3,GL_FLOAT,0, createdVertices);
     glEnableClientState(GL_NORMAL_ARRAY);
     glNormalPointer(GL_FLOAT,0,createdNormals);
     glDrawArrays(GL_TRIANGLES, 0, m_vertexNumber / 3);
 }

Using QGLPainter

Since the QGLPainter is slower for OpenGL ES we paint the bubbles with the rasterizer and cache them in a QImage. This happends only once during the initialiazation.

 void Bubble::updateCache()
 {
     if (cache)
         delete cache;
     cache = new QImage(qRound(radius * 2 + 2), qRound(radius * 2 + 2), QImage::Format_ARGB32);
     cache->fill(0x00000000);
     QPainter p(cache);
     p.setRenderHint(QPainter::HighQualityAntialiasing);
     QPen pen(Qt::white);
     pen.setWidth(2);
     p.setPen(pen);
     p.setBrush(brush);
     p.drawEllipse(0, 0, int(2*radius), int(2*radius));
 }

For each bubble this QImage is then drawn to the QGLWidget by using the according QPainter with transparency enabled.

 void Bubble::drawBubble(QPainter *painter)
 {
     painter->save();
     painter->translate(position.x() - radius, position.y() - radius);
     painter->setOpacity(0.8);
     painter->drawImage(0, 0, *cache);
     painter->restore();
 }

Another difference beetwen OpenGL and OpenGL ES is that OpenGL ES does not support glPushAttrib(GL_ALL_ATTRIB_BITS). So we have to restore all the OpenGL states ourselves, after we created the QPainter in GLWidget::paintGL().

     QPainter painter;
     painter.begin(this);

     glMatrixMode(GL_PROJECTION);
     glPushMatrix();
     glLoadIdentity();

Setting up up the model view matrix and setting the right OpenGL states is done in the same way as for standard OpenGL.

     glMatrixMode(GL_MODELVIEW);
     glPushMatrix();
     glMatrixMode(GL_TEXTURE);
     glPushMatrix();

     //Since OpenGL ES does not support glPush/PopAttrib(GL_ALL_ATTRIB_BITS)
     //we have to take care of the states ourselves

     glClearColor(0.1f, 0.1f, 0.2f, 1.0f);
     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
     glEnable(GL_TEXTURE_2D);

     glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
     glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
     glEnable(GL_LIGHTING);
     glEnable(GL_LIGHT0);

     glShadeModel(GL_FLAT);
     glFrontFace(GL_CW);
     glCullFace(GL_FRONT);
     glEnable(GL_CULL_FACE);
     glEnable(GL_DEPTH_TEST);

     glMatrixMode(GL_MODELVIEW);
     glLoadIdentity();

     glRotatef(m_fAngle, 0.0f, 1.0f, 0.0f);
     glRotatef(m_fAngle, 1.0f, 0.0f, 0.0f);
     glRotatef(m_fAngle, 0.0f, 0.0f, 1.0f);
     glScalef(m_fScale, m_fScale,m_fScale);
     glTranslatef(0.0f,-0.2f,0.0f);

     GLfloat matDiff[] = {0.40f, 1.0f, 0.0f, 1.0f};
     glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, matDiff);

     if (qtLogo)
         paintQtLogo();
     else
         paintTexturedCube();

Now we have to restore the OpenGL state for the QPainter. This is not done automatically for OpenGL ES.

     glMatrixMode(GL_MODELVIEW);
     glPopMatrix();
     glMatrixMode(GL_PROJECTION);
     glPopMatrix();
     glMatrixMode(GL_TEXTURE);
     glPopMatrix();

     glDisable(GL_LIGHTING);
     glDisable(GL_LIGHT0);

     glDisable(GL_DEPTH_TEST);
     glDisable(GL_CULL_FACE);

Now we use the QPainter to draw the transparent bubbles.

     if (m_showBubbles)
         foreach (Bubble *bubble, bubbles) {
             bubble->drawBubble(&painter);
     }

In the end, we calculate the framerate and display it using the QPainter again.

     QString framesPerSecond;
     framesPerSecond.setNum(frames /(time.elapsed() / 1000.0), 'f', 2);

     painter.setPen(Qt::white);

     painter.drawText(20, 40, framesPerSecond + " fps");

     painter.end();

After we finished all the drawing operations we swap the screen buffer.

     swapBuffers();

Summary

Similar to the Hello GL Example, we subclass QGLWidget to render a 3D scene using OpenGL ES calls. QGLWidget is a subclass of QWidget. Hence, its QGLWidget's subclasses can be placed in layouts and provided with interactive features just like normal custom widgets.

QGLWidget allows pure OpenGL ES rendering to be mixed with QPainter calls, but care must be taken to maintain the state of the OpenGL ES implementation.