Log in or register to post comments

Instructions for Rendering an Image onto a Target

June 29, 2012 - 10:21am #1

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

Instructions for Rendering an Image onto a Target

May 25, 2016 - 2:22pm #9

hi 

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

 

Instructions for Rendering an Image onto a Target

October 23, 2014 - 7:44am #8

Texture coordinates (0,0) will map to the lower left corner of the rectangle, while (1,1) wil map to the top right corner. Any coordinates between 0 and 1 follow a classic bilinear interpolation scheme.

You may want to familiarize yourself with OpenGL texture mapping (as this is nothing to do with Vuforia):

http://www.glprogramming.com/red/chapter09.html

 

Instructions for Rendering an Image onto a Target

October 23, 2014 - 5:22am #7

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.

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

when I am changing these values, then rendering texture image is display not properly.
For which value, the image will show different scale ratio or with relative coordinates?
Thanks for your help.
 

Instructions for Rendering an Image onto a Target

April 18, 2014 - 1:12am #6

See this:

https://developer.vuforia.com/resources/dev-guide/textured-plane-target

and put the OpenGL code snippet inside the existing code of the function:

JNIEXPORT void JNICALL
Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRenderer_renderFrame(JNIEnv *, jobject)
{
 
}
 
 

Instructions for Rendering an Image onto a Target

April 14, 2014 - 1:22pm #5

Mr.DavidBeard, can I ask you how to replace the render Frame method with the following?

JNIEXPORT void JNICALL
Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRenderer_renderFrame(JNIEnv *, jobject)
{
}
 
this one ?
just copy on it?
 
sorry for my question, I still can't figure out.
 

 

 

Instructions for Rendering an Image onto a Target

July 27, 2012 - 9:59am #4

Yes that is to show a plane. Are you attempting to add a new model? - https://ar.qualcomm.at/content/replace-3d-model-different-3d-model

Instructions for Rendering an Image onto a Target

July 27, 2012 - 9:41am #3

can u help me? the plane can't show

Instructions for Rendering an Image onto a Target

July 26, 2012 - 7:34pm #2

thnks david.. i try it but the teapot can't show in 2d...the code is only to show plane or?

Log in or register to post comments