|  | Home · Overviews · Examples

# Hello GL ES Example

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
- Using OpenGL ES rendering commands
- Porting OpenGL to OpenGL ES
- Using QGLPainter
- Summary

## 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.

## Using OpenGL ES rendering commands

To update the scene, we reimplment QGLWidget::paintGL(). We use OpenGL ES rendering commands just like we do with standard OpenGL. Since the OpenGL ES common light profile only supports fixed point functions, we need to abstract it somehow. Hence, we define an abstraction layer in `cl_helper.h`.

    #define FLOAT2X(f)      ((int) ( (f) * (65536)))
    #define X2FLOAT(x)      ((float)(x) / 65536.0f)

    #define f2vt(f)     FLOAT2X(f)
    #define vt2f(x)     X2FLOAT(x)

    #define q_vertexType GLfixed
    #define q_vertexTypeEnum GL_FIXED

    #define q_glFog             glFogx
    #define q_glFogv            glFogxv

Instead of `glFogxv()` or `glFogfv()` we use `q_glFogv()` and to convert the coordinates of a vertice we use the macro `f2vt()`. That way, if QT_OPENGL_ES_CL is defined we use the fixed point functions and every float is converted to fixed point.

If QT_OPENGL_ES_CL is not defined we use the floating point functions.

    #else

    #define f2vt(f)     (f)
    #define vt2f(x)     (x)

    #define q_vertexType GLfloat
    #define q_vertexTypeEnum GL_FLOAT

    #define q_glFog             glFogf
    #define q_glFogv            glFogfv

This way we support OpenGL ES Common and Common Light with the same code and abstract the fact that we use either the floating point functions or otherwise the fixed point functions.

## 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.
The following code example is written in c++.

    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.
The following code example is written in c++.

        m_vertexNumber = vertices.size();
        createdVertices = new q_vertexType[m_vertexNumber];
        createdNormals = new q_vertexType[m_vertexNumber];
        for (int i = 0;i < m_vertexNumber;i++) {
          createdVertices[i] = f2vt(vertices.at(i) * 2);
          createdNormals[i] = f2vt(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.
The following code example is written in c++.

    void GLWidget::paintQtLogo()
    {
        glDisable(GL_TEXTURE_2D);
        glEnableClientState(GL_VERTEX_ARRAY);
        glVertexPointer(3,q_vertexTypeEnum,0, createdVertices);
        glEnableClientState(GL_NORMAL_ARRAY);
        glNormalPointer(q_vertexTypeEnum,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.
The following code example is written in c++.

    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.
The following code example is written in c++.

    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().
The following code example is written in c++.

        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.
The following code example is written in c++.

        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

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

        q_glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
        q_glTexParameter(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();

        q_glRotate(f2vt(m_fAngle), f2vt(0.0), f2vt(1.0), f2vt(0.0));
        q_glRotate(f2vt(m_fAngle), f2vt(1.0), f2vt(0.0), f2vt(0.0));
        q_glRotate(f2vt(m_fAngle), f2vt(0.0), f2vt(0.0), f2vt(1.0));
        q_glScale(f2vt(m_fScale), f2vt(m_fScale),f2vt(m_fScale));
        q_glTranslate(f2vt(0),f2vt(-0.2),f2vt(0));

        q_vertexType matDiff[] = {f2vt(0.40), f2vt(1.0), f2vt(0.0), f2vt(1.0)};
        q_glMaterialv(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.
The following code example is written in c++.

        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.
The following code example is written in c++.

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

In the end, we calculate the framerate and display it using the QPainter again.
The following code example is written in c++.

        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.
The following code example is written in c++.

        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.