"We offer new support options and therefor the forums are now in read-only mode! Please check out our Support Center for more information." - Vuforia Engine Team

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]);





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


Thu, 10/23/2014 - 12:22

Dear moderators
I follow the code this code and able to render texture on imagetarget.
can you please explain the parameter list these array and how to change the texture render frame or coordinates from opengl.


Wed, 05/25/2016 - 21:22


i am new to vuforia, need help on Vuforia: How to change Rendering an Image onto a Target using java....