Log in or register to post comments

Replacing Teapot with custom image

August 31, 2011 - 8:46am #1

Hey,

I've just started to explore AR development so NOOB alert!

I want to replace the teapot 3d model with a map image (a subway network map). How can I do that? Create a plane with the texture? Is it possible to have transparency?

Thanks for any help,

maveryck21

Replacing Teapot with custom image

September 20, 2017 - 10:46am #40

Hi All

i am creating app using vuforiya sdk i want to show 3D custom image .on it please kindly share me some tutorials i am little bit confused .please help me

Replacing Teapot with custom image

April 20, 2016 - 12:01pm #39

I was trying to replace teapot in UserDefinedTargets (Android-Java). I replaced the teapot by a semi-transparent png image. Texture rendering is fine but the transparent background appears black instead of transparent. 

Any help please? I am stuck with my work at this point. 

Replacing Teapot with custom image

March 16, 2016 - 5:20am #38

Hi. Could you plz share your ImageTargets.cpp file.

Replacing Teapot with custom image

March 16, 2016 - 5:18am #37

I have started with Vuforia SDK and working on 2D recognition. I also want to replace the default Teapot image. And read on the above thread that its change in ImageTargets.ccp file. Where could I get the correct native files? I am not able to download the all .cpp files as I couldn't know the exact location. 

Anyone please provide the pointer to download the native files  - .cpp files to customize.

Replacing Teapot with custom image

July 28, 2015 - 9:46pm #36

will you please share your code!!!

Replacing Teapot with custom image

July 26, 2012 - 5:34pm #35

Hello,

You can translate 3D objects in target space using the translatePoseMatrix method.  See the renderFrame method in ImageTargets.cpp . I think that should help. Also try searching in the OpenGL forum for information about rotating the object.

Thank you,

-Peter

 

Replacing Teapot with custom image

July 26, 2012 - 9:53am #34

I had replaced the teapot with a car model but the car stand upright instead of flat to the ground.

Any way to change? 

Replacing Teapot with custom image

July 18, 2012 - 7:26pm #33

It's in ImageTargets.cpp, Find _renderFrame

Replacing Teapot with custom image

July 18, 2012 - 4:09pm #32

hi, where i can find the rederFrame method() im found renderFrame un Imagetargets.cpp 


or in ImageTargetsRenderer.java


 public native void renderFrame();

    /** Called to draw the current frame. */

    public void onDrawFrame(GL10 gl)

    {

        if (!mIsActive)

            return;

 

        // Call our native function to render content

        renderFrame();

    }


Thanks.


Replacing Teapot with custom image

July 18, 2012 - 3:59pm #31

You don't need the indices, use glDrawArrays(GL_TRIANGLES, 0, numVertices); rather than glDrawElement(). IF you search the forum for 'banana' you'll find code samples. The banana is very popular.

Replacing Teapot with custom image

July 18, 2012 - 3:51pm #30

Yes, you'll need to render it to a plane, here are the instructions..

https://ar.qualcomm.at/content/instructions-rendering-image-target

Replacing Teapot with custom image

July 18, 2012 - 3:27pm #29

Hi,

I am trying to replace the teapot in the ImageTarget sample project by a custom object converted from an obj to a .h File using obj2opengl.

For the first try I will use the banana.jpg and banana.h file that comes with the converter script. (https://github.com/HBehrens/obj2opengl and http://heikobehrens.net/2009/08/27/obj2opengl/)

I changed the import so banana.h is loaded and the image as well, but the banana.h has no indices, will that work!?

Complete project is available at: http://dl.dropbox.com/u/595474/AR-App.zip

 

Maybe someone has a working solution of renderFrameQCAR.

 

Replacing Teapot with custom image

July 18, 2012 - 2:29pm #28

Hi,

 

Can i replace de teapot with a simple image? an image like a picture without a texture?

 

Thanks.

Replacing Teapot with custom image

July 17, 2012 - 9:09am #27

You'll need to enable blending - see: http://www.opengl.org/archives/resources/faq/technical/transparency.htm

Basically you'll add the following lines prior to rendering the texture.

glEnable (GL_BLEND);

glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);


If you'll post the transparent image that you want to use, I'll see if I can get you an example.


Replacing Teapot with custom image

July 16, 2012 - 7:20pm #26

Did anyone manage to complete this task?

Replacing teapot with a transparent plane.

If you did, please post the renterFrame function.

Best Regards!

Replacing Teapot with custom image

July 6, 2012 - 2:00am #25

You need to set the alpha value to say 0.5

Replacing Teapot with custom image

July 6, 2012 - 12:21am #24

the plane's color is black, how to change it to Transparent?

Replacing Teapot with custom image

June 29, 2012 - 7:39am #23

It does not have to be, but it is in this case.

 

It's just that in this example it shows how to work out the four corners of an image target such that one can draw a plane/rectangle that covers all corners.

 

N

Replacing Teapot with custom image

June 28, 2012 - 8:55pm #22

The 2d picture must be shown on the 3d plane ?

Re: Replacing Teapot with custom image

June 18, 2012 - 3:00am #21

The existing coordinates and vertices etc. are in teapot.h so the simplest thing to do is make a copy for backup and set them up there.

N

Re: Replacing Teapot with custom image

June 17, 2012 - 5:17am #20
Tyro wrote:

Yes. If you do a search on this forum, you'll find some examples.

Basically..

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

where should i put that code? plane.h? sorry i'm newbie :(

Re: Replacing Teapot with custom image

June 16, 2012 - 7:32am #19

@robertross

Thanks for the pointers. The code I meant was that posted by Tyro, though I think I have found where to put it now and have actually managed to squash the teapot!

Thanks!

Re: Replacing Teapot with custom image

June 11, 2012 - 2:01am #18

@Taylrl2
I think you might be a little confused.
The code the ksiva linked to is actually native code, not java code.
If you navigate to ImageTargets/jni/ImageTargets.cpp you'll see a whole bunch of code in there. The actual rendering is done in this file.

You might want to look at this and make yourself familiar with the code in here. Some of it can be quite confusing. Make sure you understand how the java code calls this native code.

In this file you will see similar code to the code ksiva linked to and you may quickly recognise which parts have to be changed.

Rob.

Re: Replacing Teapot with custom image

June 7, 2012 - 1:00am #17

Hey,

Thanks for the amazing help so far! I too am very new to this and am learning as I go. I'am basically looking to do a similar thing, I want to be able to put an image over the image target. I included the first snippet that you posted, but am not sure as to where I should post the second piece. Where exactly do you mean by "in _renderFrame" :-). I think I might need a hand pin-pointing exactly where I should paste it. I am currently thinking I should paste it in the /ImageTargetsRenderer.java/ImageTargetsRenderer/renderFrame():void file (or part of file). If this is right should I just post it where it currently says

 /**The native render function. */
public native void renderFrame();

??

Cheers!

Re: Replacing Teapot with custom image

April 9, 2012 - 8:03am #16

When you make changes to the native (.cpp) code make sure you run "ndk-build" again. Then you need to either refresh or clean the Eclipse project.

I'm not sure what you mean by "auto update", but we can't really help with such application-specific logic.

- Kim

Re: Replacing Teapot with custom image

April 8, 2012 - 8:08am #15

Kim. I did like you said. But my project only shows the texture images and the normal images not. I don't know why.
I want my project shows the image with some information on the image and it can auto update.
Please help me.
Thank you.

Re: Replacing Teapot with custom image

March 27, 2012 - 6:46pm #14

You probably need to set the texture unit using glActiveTexture:

[CODE]
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, thisTexture->http://ar.qualcomm.at/node/2000357https://ar.qualcomm.at/arforums/showthread.php?p=1596

- Kim

Re: Replacing Teapot with custom image

March 27, 2012 - 10:29am #13
Tyro wrote:

Yes. If you do a search on this forum, you'll find some examples.

Basically..

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

then in _renderFrame

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

        QCAR::Matrix44F modelViewProjection;

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

        // get the image as a texture, which is index 2


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

Was this cod written for QCAR V1.0?
It does not work on 1.5.

I need help overlaying an image on the tracker plane.
Thanks in advance!

Re: Replacing Teapot with custom image

March 6, 2012 - 11:25am #12

Hi, how you get this code of Plane model, do u have used any tool like Unity to make Plane and than export its code, Please help. I want to add my custom model in Imagetarget.

Thanks

Re: Replacing Teapot with custom image

March 2, 2012 - 12:35pm #11

Try OpenGL blending:

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

// render content

glDisable(GL_BLEND);

Note this depends on a texture with transparency. Save your image as a .png instead of a .jpg.

- Kim

Re: Replacing Teapot with custom image

March 2, 2012 - 3:27am #10

The default color of the plane is black...how do i change the plane to a transparent plane?

Re: Replacing Teapot with custom image

February 14, 2012 - 7:04pm #9

Did you go with power-of-two textures? It is possible the older OS version doesn't support non-power-of-two (I'm not sure though).

- Kim

Re: Replacing Teapot with custom image

February 14, 2012 - 2:44pm #8

So I've been able to get my application going thanks to this thread. I have 2D textures being bound to geometric planes and it works just fine on my Nexus S. However, when I run the same exact code on other devices. (myTouch, an HTC evo) Where the textures would normally be I see their black outlines and a smaller version of the target i'm looking at. (almost looks like you are looking at the trackable through my texture...) Now my Nexus S has gingerbread and these other devices run Android 2.2. Is there something I'm missing here? Do i need to have different rituals for the different distributions of Android?

Re: Replacing Teapot with custom image

February 2, 2012 - 8:37pm #7

Try using power-of-two images. You can stretch your image to a power-of-two (e.g. 512x512) and then fit it to a plane with the original aspect ratio.

- Kim

Re: Replacing Teapot with custom image

February 2, 2012 - 2:45pm #6

I read this thread and originally was able to bind an image to a square plane and see it in the environment. It seems that glBindTexture only works for me when the texture.png file is a square in dimension and my plane is a square. I am trying to create a rectangular plane and bind an image to that rectangular plane but all i see is the rectangular plane i created and no image. Is there a particular way to use glBindTexture.

Re: Replacing Teapot with custom image

September 5, 2011 - 10:23am #5
maveryck21 wrote:

I have the plane showing on the screen over the target. But I'm having problems with the texture. It is all black. Do you know what could it be?

Be sure that you're using the correct textures[] index.

const Texture* const imgTexture = textures[2];

references the 3rd texture object that was loaded and registered in _initApplicationNative.

@fart

First thing is to hook up the ADB so that you can debug that crash. Use the DDMS view in Eclipse.

You should be able to present the selectable images in a view and associate each with its texture index value, which is passed to the C++ layer using the JNI bridge. This index value would then be used in _renderFrame to bind the image to the plane you've defined.

Re: Replacing Teapot with custom image

September 5, 2011 - 1:47am #4

OK, I am just a beginner at this stuff but I want to do a similar thing. I can't seem to find the other threads on this either. Could someone please explain how to use the stones target to place a transparent plane over it, and then allow me to choose in the menu from a view different images and place one on the plane?

I have tested the code above although, every time my app detects the target it crashes.

Re: Replacing Teapot with custom image

September 2, 2011 - 4:37pm #3

Thanks for your help.

I have the plane showing on the screen over the target. But I'm having problems with the texture. It is all black. Do you know what could it be?

Thanks

Re: Replacing Teapot with custom image

August 31, 2011 - 9:04am #2

Yes. If you do a search on this forum, you'll find some examples.

Basically..

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

then in _renderFrame

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

        QCAR::Matrix44F modelViewProjection;

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

        // get the image as a texture, which is index 2


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

Log in or register to post comments