I haven't done that specifically for VB's, but you can place an image on the target by defining a plane and then binding a texture to it. You should be able to position this appropriately using your VB locations. Kim has contributed some code for this, which I've borrowed from - this was implemented in the ImageTargets sample code.

Place this below your #includes..

// Define a plane to bind an image to..
static const float planeVertices[] =
{
    -0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.5, 0.5, 0.0, -0.5, 0.5, 0.0,
};

static const float planeTexcoords[] =
{
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0
};

static const float planeNormals[] =
{
    0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0
};

static const unsigned short planeIndices[] =
{
    0, 1, 2, 0, 2, 3
};

Place this code in the trackables loop of _renderFrame.

//get target dimensions
        const QCAR::ImageTarget* target =   static_cast<const QCAR::ImageTarget*>(trackable);

        // the target_size is used for scaling the image - you could use the VB area.
        QCAR::Vec2F target_size = target->getSize();

 
        // Place an image on the target using a 3D plane

        QCAR::Matrix44F modelViewProjection;

        // kImageScale is a scale factor, see kObjectScale for an example
        SampleUtils::translatePoseMatrix(0.0f, 0.0f, kImageScale,
                                         &modelViewMatrix.data[0]);
        SampleUtils::scalePoseMatrix(target_size.data[0], target_size.data[1], 1.0f,
                                     &modelViewMatrix.data[0]);
        SampleUtils::multiplyMatrix(&projectionMatrix.data[0],
                                    &modelViewMatrix.data[0] ,
                                    &modelViewProjection.data[0]);

        glUseProgram(shaderProgramID);

        glVertexAttribPointer(vertexHandle, 3, GL_FLOAT, GL_FALSE, 0,
                              (const GLvoid*) &planeVertices[0]);
        glVertexAttribPointer(normalHandle, 3, GL_FLOAT, GL_FALSE, 0,
                              (const GLvoid*) &planeNormals[0]);
        glVertexAttribPointer(textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0,
                              (const GLvoid*) &planeTexcoords[0]);

        glEnableVertexAttribArray(vertexHandle);
        glEnableVertexAttribArray(normalHandle);
        glEnableVertexAttribArray(textureCoordHandle);

        // the image texture is held in Texture** textures
        const Texture* const imgTexture = textures[2];

        glBindTexture(GL_TEXTURE_2D, imgTexture->mTextureID);
        glUniformMatrix4fv(mvpMatrixHandle, 1, GL_FALSE,
                           (GLfloat*)&modelViewProjection.data[0] );
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT,
                       (const GLvoid*) &planeIndices[0]);

        ...


        glDisableVertexAttribArray(vertexHandle);
        glDisableVertexAttribArray(normalHandle);
        glDisableVertexAttribArray(textureCoordHandle);

To use the image, you need to add it to the project's assets folder, and add the following to loadTextures() in ImageTargets.java, or in your case VirtualButtons.java. The add() order determines the index value in textures[].

        mTextures.add(Texture.loadTextureFromApk("MyImageName.png",
                getAssets()));

I've been looking at the areas in the code you told me to look at tyro and I can see what the program is doing however I'm still wondering how i would go about putting another image on top of the rectangle.

Lets say, for example, I wanted to put a bitmap image of a smiley face on top of the virtual button. How could I do this?

If it isn't obvious already, I'm fairly new to GL but didn't think this would involve a lot of code.

Thanks for your time.

Danny

You can do both. Check out the renderFrame method in VirtualButtons.cpp in the VirtualButtons sample project for an example of how to obtain the VB area, transform to a Rectangle and then map this to a vertices array for rendering.