Teapot – 記下來

Qualcomm Vuforia 教學 (5) – 替換茶壺 – Android JNI 版本

黃小蛙 — Tue, 09 Dec 2014 09:54:17 +0000

前面的文章提到為什麼要用 Android NDK 來開發，既然已經有了 Android 版本替換茶壺的文章，這邊記錄 Android NDK 版本的替換茶壺。

2016-07-07 更新：本篇為 3.x 版本，目前 Vuforia 以更新到 5.5.9，新版本使用方式請參考

Android Vuforia 系列：

使用 Android NDK 來做的好處在上一篇文章已提過，C++ 在處理複雜模型上有不錯的表現，也不會出現 Java 宣告大小上限的問題，直接進入步驟。

1. 下載範例檔案 – cube.h、cube.png (這個跟前面範例使用的是一樣的)

2. 將範例檔案 cube.h 放到 ImageTargetsNative 專案下的 jni 目錄

3. 將範例檔案 cube.png 放到 ImageTargetsNative 專案下的 assets 目錄

4. 開啟 ImageTargetsNative 專案下 jni 下的 ImageTargets.cpp

// 在上方加入
#include "cube.h"
// static const float kObjectScale = 3.f;
// 改成
static const float kObjectScale = 120.f;
// glVertexAttribPointer(vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotVertices[0]);
// 改成
glVertexAttribPointer(vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &cubeVerts[0]);
// glVertexAttribPointer(normalHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotNormals[0]);
// 改成
glVertexAttribPointer(normalHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &cubeNormals[0]);
// glVertexAttribPointer(textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotTexCoords[0]);
// 改成
glVertexAttribPointer(textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &cubeTexCoords[0]);
// glDrawElements(GL_TRIANGLES, NUM_TEAPOT_OBJECT_INDEX, GL_UNSIGNED_SHORT, (const GLvoid*) &teapotIndices[0]);
// 改成
glDrawArrays(GL_TRIANGLES, 0, cubeNumVerts);

5. 開啟 ImageTargetsNative 專案下 jni 下的 ImageTargets.java

private void loadTextures()
{
        //mTextures.add(Texture.loadTextureFromApk("TextureTeapotBrass.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("TextureTeapotBlue.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("cube.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("TextureTeapotRed.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("Buildings.jpeg", getAssets()));
}

6. 執行 ndk-build (如果忘記可查看上一篇文章)，重新整理 Eclipse 專案後執行。下圖是 cube.h 透過 OpenGL 畫出來的模型，上方是 cube.png 當材質繪製出來的，下方是原本範例中茶壺的貼圖。

Qualcomm Vuforia 系列：

這篇文章 Qualcomm Vuforia 教學 (5) – 替換茶壺 – Android JNI 版本最早出現於記下來。

Qualcomm Vuforia 教學 (3) – 替換茶壺 – Android 版本

黃小蛙 — Tue, 09 Dec 2014 07:38:17 +0000

接續上一篇 Qualcomm Vuforia 教學 (2) – Create Image Target，這篇要來記錄怎麼把預設的茶壺 (Teapot) 換成簡單的正方形 (Cube)。

2016-07-07 更新：本篇為 3.x 版本，目前 Vuforia 以更新到 5.5.9，新版本使用方式請參考

Android Vuforia 系列：

小蛙先提供兩個檔案下載，一個是 cube.png 用來當作等等要替換的材質貼圖，另一個是繼承 Vuforia SDK MeshObject 的 3D 模型物件 CubeTest2.java。點選下載 – cube.png、CubeTest2.java。

在之後的文章會說明要怎麼產生出像 CubeTest2.java 這種檔案或裡面的一些模型資訊，這個範例就先直接套用下載下來的檔案。接著需要對 ImageTargetRender.java、ImageTarget.java 作一些修改。CubeTest2.java 內容可以大概看一下，重點只有在之後的修改會讓 mIndBuff 都是空白 (小蛙找到的教學產生出來的檔案都沒有 Indices 資訊，這邊把 setIndices() 做了些修改，避免出現 NullPointerException 錯誤)。

正式開始。

1. 把下載來的 cube.png 放到 VuforiaSample 專案下的 assets 目錄中 (在目錄中看到 TextureTeapotBlue.png 這些就表示位置對了)

2. 把下載來的 CubeTest2.java 放在 com.qualcomm.vuforia.samples.SampleApplication.utils package 下，同目錄可以看到 Teapot.java

3. 修改 com.qualcomm.vuforia.samples.VuforiaSamples.app.ImageTargets\ImageTarget.java
找到 loadTextures() 載入材質時，一併載入 cube.png

private void loadTextures()
{
        //mTextures.add(Texture.loadTextureFromApk("TextureTeapotBrass.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("TextureTeapotBlue.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("cube.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("TextureTeapotRed.png", getAssets()));
        mTextures.add(Texture.loadTextureFromApk("ImageTargets/Buildings.jpeg", getAssets()));
}

4. 修改 com.qualcomm.vuforia.samples.VuforiaSamples.app.ImageTargets\ImageTargetRenderer.java ，這邊採用註解掉的方式，到時要復原比較方便

// 註解掉 private Teapot mTeapot; 並加入
private CubeTest2 mTeapot;
// 注解掉 private static final float OBJECT_SCALE_FLOAT = 3.0f; 並加入
private static final float OBJECT_SCALE_FLOAT = 120.0f;
// 註解掉 mTeapot = new Teapot(); 並加入
mTeapot = new CubeTest2();
// 註解掉以下幾行
//GLES20.glDrawElements(GLES20.GL_TRIANGLES,
//                    mTeapot.getNumObjectIndex(), GLES20.GL_UNSIGNED_SHORT,
//                    mTeapot.getIndices());
// 並加入
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, mTeapot.getNumObjectVertex());

5. 執行專案，就可以看到茶壺被取代掉了，變成一個方形，並且貼上了 cube.png 這張圖的表面，至於上下為什麼黑黑的，這跟 3D 塑模時的打光以及環境光源有關，這裡就不討論了。

也許有更好的做法，但網路上大多找到的教學都是以 Unity Extension 為主，以 Android 為主的較少，所以如果有更好的方法，也歡迎提供給小蛙！感恩！

Qualcomm Vuforia 系列：

這篇文章 Qualcomm Vuforia 教學 (3) – 替換茶壺 – Android 版本最早出現於記下來。