Instructions for Rendering an Image onto a Target

The following instructions demonstrate how to render a 2D image onto an ImageTarget using OpenGL. This example utilizes the ImageTargets sample.

Start with the ImageTargets sample project. Open ImageTargets.cpp, located in the jni folder.

Add the following just after the includes at the top:

#include <QCAR/ImageTarget.h>

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 };

Now replace the OpenGL ES 2.0 rendering code in the renderFrame method with the following:

// assuming this is an image target

QCAR::Vec2F targetSize = ((QCAR::ImageTarget *) trackable)->getSize();

QCAR::Matrix44F modelViewProjection;

SampleUtils::translatePoseMatrix(0.0f, 0.0f, kObjectScale, &modelViewMatrix.data[0]);

SampleUtils::scalePoseMatrix(targetSize.data[0], targetSize.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);

glActiveTexture(GL_TEXTURE0);

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

Build the native code, using ndk-build for Android, then refresh the Eclipse or XCode project and run the app. You should see the teapot texture stretched over the image target.

You can swap the texture by adding your image to the project's assets folder (png or jpg format). Then open ImageTargets.java and look for the loadTextures() method. Replace the teapot texture filenames with your own. Note that the order the textures are added set the order they are stored in the native textures array (the first texture is at position 0).