ImageTarget – 記下來

Qualcomm Vuforia 教學 (4) – 使用 Android NDK 版本並開啟多重偵測

黃小蛙 — Tue, 09 Dec 2014 09:10:57 +0000

接續前幾篇教學，我們已經建置好 Vuforia 開發及執行環境、建立屬於自己的 Image Target、以及把茶壺更換成方塊 ，這邊繼續記錄怎麼使用 Android NDK 來開發，內文有說明為什麼好好的 Android 版本不用卻要用到麻煩的 Android NDK 開發。

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

Android Vuforia 系列：

馬上解除大家疑問，使用 Android NDK 開發絕對不是自找麻煩，而是小蛙搜遍的各式各樣的教學後得到的答案。

如果你的 APP 希望可以在一個畫面偵測到 1 個以上 Image Target 的話，Android 版本無法做到這項需求
如果你的 3D 模型不是只有正方形、長方形這樣簡單

在 Android 版本無法解決上述兩個問題，因此才需要使用 Android NDK 的方式來開發。Android 版本中如果 3D 模型太複雜，在定義像 Teapot.java 這種檔案的時候會出現「The code of method xxx is exceeding the 65535 bytes limit」錯誤，使用網路上的一些免費模型來測試都沒辦法。

Android NDK 的安裝方式在 Qualcomm Vuforia 教學 (1) – 安裝 Vuforia 有提到 (只是下載以及設定 Eclipse Android NDK 目錄)，如果安裝 NDK 有遇到什麼問題，請自行 Google …

先說明 Android NDK 的使用方法，也許有更好的方法，但小蛙找到這種可用的方法就直接用囉！

1. 到參1 下載 NDK 版本的範例 – ImageTargetsNative-3-0-5.zip

2. 解壓縮檔案，並且依照 Qualcomm Vuforia 教學 (1) – 安裝 Vuforia 提到的方法將專案匯入到 Eclipse，要這邊要注意路徑的問題，如果你的工作目錄有空白一定要避開，像小蛙本來在 Program Files 下，但執行 NDK 時會發生錯誤，因此改成放在 D:\vuforia-sdk-android-3-0-9\samples\ 下。

3. 先執行一次專案看看，發現點了 Start 就出現「java.lang.UnsatisfiedLinkError: Native method not found: com.qualcomm.QCARSamples.ImageTargets.ImageTargets.setActivityPortraitMode:(Z)V」錯誤 …

4. 我們先執行 NDK 編譯出新的 .so 檔案才能繼續使用，開啟「cmd」->以小蛙為例，進到「D:\vuforia-sdk-android-3-0-9\samples\ImageTargetsNative\jni>」，注意 Android.mk 檔案中已經設定了路徑，所以一定要放在 sample 目錄下，或如果對 NDK 熟悉的網友可直接修改

Android.mk D:\vuforia-sdk-android-3-0-9\samples\ImageTargetsNative\jni> ndk-build 
[armeabi-v7a] Compile++ arm  : ImageTargetsNative <= ImageTargets.cpp …  
[armeabi-v7a] Install        : libVuforia.so => libs/armeabi-v7a/libVuforia.so

5. 整個過程如果沒有出現 Error 就表示編譯成功，回到 Eclipse 的 ImageTargetsNative 專案，重新整理專案後執行

6. 開啟被封印的能力，多重偵測！開啟 ImageTargetsNative > jni > ImageTargets.cpp，找到

JNIEXPORT void JNICALL Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_onQCARInitializedNative(JNIEnv *, jobject)
 {
     …
 }

把上述「…」部分改成以下內容

// Comment in to enable tracking of up to 2 targets simultaneously and
 // split the work over multiple frames:
 QCAR::setHint(QCAR::HINT_MAX_SIMULTANEOUS_IMAGE_TARGETS, 2);
 // Register the update callback where we handle the data set swap:
 QCAR::registerCallback(&updateCallback);

7. 重複執行第 4 步驟，與第 5 步驟，多重偵測功能正式被開啟！

Qualcomm Vuforia 系列：

參考資料

這篇文章 Qualcomm Vuforia 教學 (4) – 使用 Android NDK 版本並開啟多重偵測最早出現於記下來。

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 版本最早出現於記下來。