Wikitude SDK (Android Native) show overlay image after target image is recognized

Question

I want to show one image on top of target image after successful image recognition from wikitude sdk for Android.

By default it is showing StrokedRectangle. I couldn't find any clear idea in the docs about showing image. So some suggestions will be appreciated.

Answer 1

The Wikitude Native SDK does only render the camera and the trial watermark. The StrokedRectangle is part of the example app.

You will have to use OpenGL to draw your image. Maybe this tutorial will help you.

public static int loadTexture(final Context context, final int resourceId)
{
    final int[] textureHandle = new int[1];

    GLES20.glGenTextures(1, textureHandle, 0);

    if (textureHandle[0] != 0)
    {
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false;   // No pre-scaling

        // Read in the resource
        final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

        // Bind to the texture in OpenGL
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]);

        // Set filtering
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);

        // Load the bitmap into the bound texture.
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

        // Recycle the bitmap, since its data has been loaded into OpenGL.
        bitmap.recycle();
    }

    if (textureHandle[0] == 0)
    {
        throw new RuntimeException("Error loading texture.");
    }

    return textureHandle[0];
}

This is the vertex shader from the Wikitude example app to show how the texture can then be placed:

attribute vec4 v_position;
uniform mat4 Projection; // from ImageTarget
uniform mat4 ModelView;  // from ImageTarget
uniform mat4 Scale;      // create scale matrix based on ImageTarget.getTargetScale
void main()
{
  gl_Position = Projection * ModelView * Scale * v_position;
};

If you do not feel comfortable with OpenGL you could try the Wikitude JS SDK or the Unity Plugin.