NDK – 記下來

Qualcomm Vuforia 教學 (6) – 3D model -> .obj -> .h

黃小蛙 — Wed, 10 Dec 2014 03:25:50 +0000

終於來到 Vuforia 記錄的最後一篇了，這篇參考到網路上神人的做法，怎麼把一個 3D model 轉換成 Vuforia 可以使用的 .h 檔，這邊之後都直接使用 Android NDK (JNI) 版本來實作，原因在這篇文章。

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

Android Vuforia 系列：

之前小蛙卡了很久，不知道怎麼把 3D model 轉換成 OpenGL 可以繪圖的座標，找到參1 的資料後，卻因為一開始使用 Qualcomm Vuforia 教學 (3) – 替換茶壺 – Android 版本，在編譯上出現「The code of method xxx is exceeding the 65535 bytes limit」一直無法解決，直到 … 改成用 Qualcomm Vuforia 教學 (4) – 使用 Android NDK 版本並開啟多重偵測才能正常運作。
花了一個下午的時間，看看 Blender 是怎麼進行 3D 塑模的動作，發現這似乎需要非常強大的天分才能夠駕馭 … 不過至少知道透過 Blender 可以把其他檔案格式匯入後，再轉出我們需要的 .obj 格式，雖然可能有些資訊會無法正常呈現，或者一些奇奇怪怪的問題，不過小蛙對這種軟體不是很了解，在這邊遇到問題的捧由只能自己 Google 了。
講一下大概的運作方式，首先必須先有 3D model (廢話)，這個 3D model 格式只要是一般常見的 blender, unity, 3dmax … 等格式，或是你使用的塑模軟體有辦法吃進去並且轉出 .obj 格式都可以，有一點要特別特別特別注意，Vuforia 繪圖只能使用一張材質，也就是說如果一個房子有屋頂、牆壁、門、窗戶、地板、煙囪 … 等等材質，這些材質必須最後轉出成一個檔案，這部份可能要專業的 3D 塑模師才能做到 (小蛙摸了半天，結果令人失望)，如果網路上下載來的專案檔包含了很多不同圖檔，就會發現 Vuforia 只會貼一張圖檔，其他的會變成殘缺樣，解套方案除了上面提到的將多材質轉製成一個影像檔，另一個比較麻煩，實作上也比較困難，就是把模型裡的每個不同貼圖的部份拆出來 (光聽就覺得超麻煩 …)
整個運作流程為：
1. 從網路上找免費的 3D 模型測試 (google free 3d model 有很多，不過大多是要註冊會員)，如果自己會建模就可以省掉這麻煩，小蛙用的是 Blender，根據參3 支援匯入的檔案格式有

Collada (.dae)
Motion Capture (.bvh)
Scalable Vector Graphics (.svg)
Stanford (.ply)
Stl (.stl)
Autodesk 3ds Max (.3ds)
Autodesk FBX (.fbx)
Wavefront (.obj)
X3D Extensible 3D (.x3d)

2. 匯出 (Export) 成 Object (.obj) 格式，以 Blender 為例，匯出時必須勾選以下選項

apply Modifiers
Include Edges
Write Normals
Include UVs
Write Materials
Object as OBJ Objects

3. 下載參1 中的轉換程式與範例：OBJ2OPENGL.ZIP，並解壓縮到 obj2opengl 資料夾，裡面主程式是 obj2opengl.pl 以及，banana 跟 cube 兩種範例。
4. 由於 obj2opengl 是以 perl 執行，點選參4 下載並安裝，安裝過程一直下一步即可，安裝完成後開啟 cmd 輸入 perl -v 如果成功安裝可以在這邊看到 perl 的版本細節
5. 使用 cmd 進入 obj2opengl 資料夾後，輸入「perl obj2opengl.pl banana.obj」(如果是用 Qualcomm Vuforia 教學 (3) – 替換茶壺 – Android 版本的話，產出的 .h 檔會因為資料量太大無法把資訊放入 MeshObject.java 中，所以要使用 Qualcomm Vuforia 教學 (4) – 使用 Android NDK 版本並開啟多重偵測才可以進行)，如果訊息如下並且沒看到任何 error 會產生出一個新的 banana.h 並把原本的覆蓋掉

Input file : .\banana.obj
Output file : .\banana.h
Object name : banana
Center : <2289.89534195908, 599.62239347371, -8421.71066976487>
Scale by : 0.000175074008952644
----------------
Vertices : 4032
Faces : 8056
Texture Coords : 4420
Normals : 4032

6. 接著參考 Qualcomm Vuforia 教學 (5) – 替換茶壺 – Android JNI 版本中的步驟，banana.h 放到 jni 目錄下，banana.jpg 放在 assets 目錄下。
7. 修改 ImageTargets.java

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

8. 修改 jni 下的 ImageTargets.cpp

// 在上方加入
#include "banana.h"
// glVertexAttribPointer(vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotVertices[0]);
// 改成
glVertexAttribPointer(vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &bananaVerts[0]);
// glVertexAttribPointer(normalHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotNormals[0]);
// 改成
glVertexAttribPointer(normalHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &bananaNormals[0]);
// glVertexAttribPointer(textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &teapotTexCoords[0]);
// 改成
glVertexAttribPointer(textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*) &bananaTexCoords[0]);
// glDrawElements(GL_TRIANGLES, NUM_TEAPOT_OBJECT_INDEX, GL_UNSIGNED_SHORT, (const GLvoid*) &teapotIndices[0]);
// 改成
glDrawArrays(GL_TRIANGLES, 0, cubeNumVerts);

9. 開啟 cmd 到 jni 目錄下執行 ndk-build，沒有任何錯誤的話，重新整理專案後執行即可，上個範例我們把茶壺換成方塊，現在可以換成香蕉了。

經過這系列的文章，應該都可以把 Qualcomm Vuforia 運行起來，並且支援多重偵測，也有辦法自行把茶壺更換掉、更換貼圖、產出必須的 .h 檔案，下面貼幾張有趣的例子，這是網路上找到的免費 3D model，左上為模型的樣子-一間木屋，看到門開開的，走進去看看，右上為站在門口往裡看的樣子，左下是走進房子往天花板看的樣子，右下是從房子裡面往窗戶外面看的樣子，讓人不禁覺得 Qualcomm Vuforia 好強大啊！

Qualcomm Vuforia 系列：

參考資料

obj2opengl: convert obj 3D models to arrays compatible with iPhone OpenGL ES @ Heiko Behrens
http://heikobehrens.net/2009/08/27/obj2opengl/ (連結已失效)
blender.org
Blender @ 維基百科
ActivePerl Downloads

這篇文章 Qualcomm Vuforia 教學 (6) – 3D model -> .obj -> .h 最早出現於記下來。

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 教學 (1) – 安裝 Vuforia

黃小蛙 — Mon, 08 Dec 2014 10:08:50 +0000

工作上有使用 AR: Augmented Reality 的需求，上網找找看有沒有什麼不錯的套件，在 SocialCompare 這網站條列了現有 AR 套件的功能說明與比較 (參1)，經過一番比較挑中了 Qualcomm Vuforia 來實作，原因在於 ImageTarget 小於 100 的情況並且不使用特殊功能的情況下是免費的 (參2)，這篇記錄一下安裝的過程。

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

Android Vuforia 系列：

AR 的介紹小蛙就不多說了，這裡主要以記錄安裝過程為主，有興趣的朋友可以連結到參考資料或維基百科去看看更多說明。

1. 上 Vuforia Vuforia Portal (https://developer.vuforia.com/)

2. 點選 Download 後進入以下畫面，再點選「Download Download SDK 3.0.9 for Windows/Mac/Linux」

3. 下載 SDK 需要登入，如果沒有帳號密碼點選「Create account now」，登入後即可開始下載 SDK。

4. 安裝 Android SDK + 安裝/更新 ADT 到新版
如果版本不符合 Eclipse 會跳出提示，這邊小蛙偷懶跳過不做了，可參考到 [教學] 如何使用 Eclipse、Android SDK、ADT 配置 Android 開發環境？ @ 海芋小站 (參4)

5. 安裝 Vuforia SDK
解壓縮下載來的壓縮檔 vuforia-sdk-android-3-0-9.zip，解壓縮後把所有的工具放在目錄下，之後都會稱這個目錄為，例如：放在 C:\Program Files\Android 的話，就代表 C:\Program Files\Android。這邊要注意的是，小蛙發現如果放的路徑中間有空白，可能在做 ndk-build 或其他動作的時候會發生錯誤，如果可以盡可能選擇沒有空白的路徑。

6. 安裝 Android NDK
到 (參5) 下載 NDK，小蛙的環境是 Windows 8.1 64 bit 選擇自己對應的版本下載，解壓縮到剛剛第 5 點提到的，因此整個結構會變成：

  C:\Program Files\Android\
                           android-ndk\
                           android-sdk\
                           vuforia-sdk\

7. 設定 NDK
在 Eclipse -> Window -> Android -> NDK -> NDK Location 設定成上述路徑，例如：小蛙的是: C:\Program Files (x86)\Android\android-ndk-r10c (好孩子不要學，參考上面第 5 點，改成中間沒有空白的，不然後面會出問題)。

8. 設定 vuforia QCAR 環境變數
Eclipse -> Window -> Preferences -> Java -> Build Path -> Classpath Variables -> New…
Name : QCAR_SDK_ROOT
Path : C:/Program Files (x86)/Android/vuforia-sdk-android-3-0-9 (換成自己的路徑)

9. 設定在 Eclipse 專案中使用 QCAR 變數
在要使用 Vuforia 的專案中 -> 滑鼠右鍵 -> Properties -> Java Build Path -> Libraries -> Add Variable… -> QCAR_SDK_ROOT -> Extend… -> build / java / vuforia / Vuforia.jar -> OK
接著到 Order and Export 把剛剛新增的 QCAR_SDK_ROOT… 打勾

10. 下載測試範例
下載 (https://developer.vuforia.com/resources/sample-apps/features) 並解壓縮到 \vuforia-sdk-android-3-0-9\samples

11. 匯入範例檔
Eclipse -> File -> Import… -> General -> Existing Android Code Into Workspace…
Root Directory : C:\Program Files (x86)\Android\vuforia-sdk-android-3-0-9\samples
Projects : VuforiaSamples-3-0-5_0
怕把原始檔改壞，複製一分到自己的工作區域，把 Copy projects into workspace 打勾

12. 執行 VuforiaSample
Run As -> Android Application
專案可以跑起來，但會得到以下錯誤

BUILD FAILED
 D:\Workspace\PureProjectNew\VuforiaSamples\CopyVuforiaFiles.xml:4: D:\Workspace\build\lib\armeabi-v7a does not exist.

13. 修改設定檔 CopyVuforiaFile.xml


存檔後，Project -> Clean... -> Clean projects selected below VuforiaSamples
Clean 完之後按照上個步驟執行就可以了！

14. 使用範例圖片測試
https://developer.vuforia.com/resources/sample-apps/features，每個 sample 點進去會有 PDF 的範例圖片可以測試，依照每個範例的名稱開啟對應的圖片。

經過一番折騰，Qualcomm Vuforia 已經順利安裝起來了，這系列文章預估會有以下內容：

Qualcomm Vuforia 系列：

敬請期待 (希望不會又偷懶不記錄 …)

參考資料

這篇文章 Qualcomm Vuforia 教學 (1) – 安裝 Vuforia 最早出現於記下來。