Vuforia – 記下來

Android Vuforia with jPCT-AE (5) – 多重模型載入，以 obj 為例

黃小蛙 — Wed, 06 Jul 2016 03:24:19 +0000

要進到這系列最後一篇文章了，這篇文章拖了很久，一直沒有時間整理，結果到最後 … 程式碼留下來了，記憶卻有些模糊了，這邊小蛙配著程式碼盡可能的把還記得的東西寫下來。

圖片來源：http://tw.freeimages.com/photo/blank-e-box-for-software-etc-4-1238246

設計自己的物件

因為這邊要載入多個模型，而每個模型搭配的參數都不同，例如：刀鋒戰士要放大 10 倍並且往 y 軸位移 50、茶壺要 blablabla …，這邊可以根據自己的需求去做設計，小蛙隨意列了幾個可能會隨著不同模型調整的屬性

class MyObjs {
    private String symbol;
    private String obj;
    private String mtl;
    private List textures;
    private float scale = 1;
    private float postScale = 1;
    // 0 度躺著正面朝上
    private float rotateX = 0;
    private float rotateY = 0;
    private float rotateZ = 0;
    private float traslateX = 0;
    private float traslateY = 0;
    private float traslateZ = 0;
    private Object3D target;
}

有看不懂的可以往前翻，屬性也不一一介紹了。

初始化物件

初始化這些物件，將每個要載入的物件及他的參數一一創建出來，

// 要觸發的圖片(ImageTarget)
private static List SYMBOL = new ArrayList<>();
// 要呈現出來的 3D 模型
private List objs = new ArrayList();
private void initObjs(){
    SYMBOL = Arrays.asList("stones", "chips", "tarmac");
    // 木頭櫃子
    MyObjs m = new MyObjs();
    m.symbol = SYMBOL.get(0);
    m.mtl = "Bedside_Table_D.mtl";
    m.obj = "Bedside Table D.obj";
    m.textures = Arrays.asList("Bedside_Table_D_default_1_1.png");
    m.scale = 5;
    m.rotateX = -1.5f;
    m.traslateX = -110;
    m.traslateY = -160;
    objs.add(m);
    // 灰色櫃子
    MyObjs w = new MyObjs();
    w.symbol = SYMBOL.get(2);
    w.mtl = "Bedside_Table_B.mtl";
    w.obj = "Bedside Table B.obj";
    w.textures = Arrays.asList("Bedside_Table_B_default_1_1.png");
    w.scale = 5;
    w.rotateX = -1.5f;
    w.traslateX = -110;
    w.traslateY = -160;
    objs.add(w);
    // 木桶
    MyObjs n = new MyObjs();
    n.symbol = SYMBOL.get(1);
    n.mtl = "MedievalBarrel_OBJ.mtl";
    n.obj = "MedievalBarrel_OBJ.obj";
    n.textures = Arrays.asList("MedBarrelDiffuse.jpg", "MedBarrelNormal.jpg");
    n.scale = 20;
    n.rotateX = -1.5f;
    n.traslateX = 0;
    n.traslateY = 0;
    objs.add(n);
}

在載入 obj 的範例中我們知道需要同時載入 mtl 搭配 textures，不然載進來的模型沒有材質貼圖。上面的例子中將屬性一一設定好，並且加入 objs 中，我們透過 m.symbol 來得知當出現哪張影像的時候，載入這個模型 (m.mtl, m.obj, m.textures)，並可設定縮放(scale)、翻轉(rotate)以及位移(traslate)，這邊可以自己把自己要設定的屬性加上去。

載入物件

當把所有的物件都設定好之後，在 ImageTargetRenderer 建構子中載入這些物件們

... 以上省略 ...
initObjs();
try{
    for(int i = 0; i < objs.size(); i++){
        MyObjs m = objs.get(i);
        for(int j = 0; j < m.textures.size(); j++){
            TextureManager.getInstance().addTexture(
                m.textures.get(j),
                new Texture(mActivity.getAssets().open(TXT_PATH + m.textures.get(j)))
                );
        }
        Object3D[] tmp = Loader.loadOBJ(
            mActivity.getAssets().open(OBJ_PATH + m.obj),
            "".equals(m.mtl) ? null : mActivity.getAssets().open(MTL_PATH + m.mtl),
            m.scale
        );
        if(tmp != null && tmp.length >= 1){
            m.target = tmp[0];
        }
        m.target.strip();
        m.target.build();
        if(m.rotateX != 0)
            m.target.rotateX(m.rotateX);
        if(m.rotateY != 0)
            m.target.rotateY(m.rotateY);
        if(m.rotateZ != 0)
            m.target.rotateY(m.rotateZ);
        if(m.traslateX != 0 || m.traslateY != 0 || m.traslateZ != 0)
            m.target.translate(m.traslateX, m.traslateY, m.traslateZ);
        if(m.postScale != 1)
            m.target.scale(m.postScale);
        if("".equals(m.mtl)) {
            for(int z = 0; z < m.textures.size(); z++)
                m.target.setTexture(m.textures.get(z));
        }
        world.addObject(m.target);
        cam = world.getCamera();
        SimpleVector sv = new SimpleVector();
        sv.set(m.target.getTransformedCenter());
        sv.y -= 100;
        sv.z -= 100;
        sun.setPosition(sv);
    }
}catch(Exception e){
    e.printStackTrace();
}

將 objs 中的 MyObj 一一取出，並設定該物件之屬性，到這個階段，就可以依照不同影像載入不同模型，但，這還不夠。

移除模型

剩最後一個步驟，到上一個步驟會發現每個 render 出來的模型，他不會消失 … 不會消失 … 不會消失 … 加上這個步驟讓他消失吧！

// The render function.
private void renderFrame() {
    // clear color and depth buffer
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
    // get the state, and mark the beginning of a rendering section
    State state = mRenderer.begin();
    // explicitly render the video background
    mRenderer.drawVideoBackground();
    float[] modelviewArray = new float[16];
    // did we find any trackables this frame?
    for (int tIdx = 0; tIdx < state.getNumTrackableResults(); tIdx++) {
        // get the trackable
        TrackableResult result = state.getTrackableResult(tIdx);
        Trackable trackable = result.getTrackable();
        printUserData(trackable);
        Matrix44F modelViewMatrix = Tool.convertPose2GLMatrix(result.getPose());
        Matrix44F inverseMV = SampleMath.Matrix44FInverse(modelViewMatrix);
        Matrix44F invTranspMV = SampleMath.Matrix44FTranspose(inverseMV);
        try{world.removeAllObjects();}catch (Exception e){}
        for(int i = 0; i < objs.size(); i++){
            MyObjs m = objs.get(i);
            if(m.symbol.equals(trackable.getName())){
                world.addObject(m.target);
                SimpleVector sv = new SimpleVector();
                sv.set(m.target.getTransformedCenter());
                sv.y -= 100;
                sv.z -= 100;
                sun.setPosition(sv);
            }
        }
        modelviewArray = invTranspMV.getData();
        updateModelviewMatrix(modelviewArray);
    }
    // hide the objects when the targets are not detected
    if (state.getNumTrackableResults() == 0) {
        float m [] = {
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            0,0,-10000,1
        };
        modelviewArray = m;
        updateModelviewMatrix(modelviewArray);
    }
    mRenderer.end();
}

這個 function 小蛙已經忘記哪些是小蛙自己加的，哪些是原本的 code 了，就整個附上來試試看吧！
小蛙之前也遇過有網友詢問動畫的部份，經過這一段時間的研究發現 … 如果真的要用到會動的 3D model，就直接使用 Unity 吧！畢竟在 native code 中要讓做到動畫真的太麻煩了 >< 之前 survey 了好久，因為變數太大、複雜度也太高，直接放棄轉向 render 動畫原本就是強項的 Unity。祝各位好運囉！

Android Vuforia 系列：

這篇文章 Android Vuforia with jPCT-AE (5) – 多重模型載入，以 obj 為例最早出現於記下來。

Android Vuforia with jPCT-AE (4) – 載入 3DS 測試

黃小蛙 — Wed, 06 Jul 2016 02:24:33 +0000

延續 jPCT-AE Loader 載入模型的部份，這篇要記錄載入 3ds 檔案格式的方法，基本上跟前面幾個 obj, md2 的方法差不多，只有一些小小的變化而已。

圖片來源：http://tw.freeimages.com/photo/3d-glasses-1424688

下載需要的檔案

到這裡下載需要的檔案，要注意的是找有 3ds 格式的以及下載下來之後，texture 的圖片大小一定要是 2 的次方，否則載入 texture 的時候會出現錯誤。選桶子的原因是 texture 較為簡單，先試成功一個之後，再去載入複雜一點的模型。

載入 3DS 模型

附上載入程式碼，基本上沒有什麼不同，差別只有在於需不需要設定 texture，例如：載入 obj 跟 mtl 的時候，由於 mtl 已經有 texture 資訊，因此不需要呼叫 setTexture 方法，而 3DS 需要加入此方法，否則會看到赤裸裸的模型。另外有些模型太小，不放大會看不到 (就小小的)，但是放大之後偏差跟位移也會明顯放大，各位可以試試看 …

public ImageTargetRenderer(ImageTargets activity, SampleApplicationSession session) {
    mActivity = activity;
    vuforiaAppSession = session;
    world = new World();
    world.setAmbientLight(150, 150, 150);
    // set the following value according to your need, so the object won't be disappeared.
    world.setClippingPlanes(2.0f, 3000.0f);
    sun = new Light(world);
    sun.setIntensity(250, 250, 250);
    try{
        // 載入 texture 並且取名為 ton2.jpg，之後可以直接用 setTexture(name) 來設定 texture
        TextureManager.getInstance().addTexture("ton2.jpg",
                new Texture(mActivity.getAssets().open("ton2.jpg"))
        );
        try{
            // 載入 3ds 模型，放大 100 倍
            Object3D[] tmp = Loader.load3DS(mActivity.getAssets().open("ton3_low.3ds"), 100);
            if(tmp != null && tmp.length >= 1){
                cylinder = tmp[0];
            }
        }catch (Exception e) {
            e.printStackTrace();
        }
        cylinder.strip();
        cylinder.build();
        // 讓桶子躺下
        cylinder.rotateX(1.5f);
        // 設定 texture，讓桶子有衣服穿 XD
        cylinder.setTexture("ton2.jpg");
        cylinder.translate(0, 0, 0);
        world.addObject(cylinder);
        cam = world.getCamera();
        SimpleVector sv = new SimpleVector();
        sv.set(cylinder.getTransformedCenter());
        sv.y -= 100;
        sv.z -= 100;
        sun.setPosition(sv);
    }catch(Exception e){
        e.printStackTrace();
    }
    MemoryHelper.compact();
}

結果

載入 3ds 測試

Loader 部份文章就到這邊，下一篇將記錄如何遇到不同 image target 的時候可以動態載入不同的模型。

Android Vuforia 系列：

參考資料

TF3DM

這篇文章 Android Vuforia with jPCT-AE (4) – 載入 3DS 測試最早出現於記下來。

Android Vuforia with jPCT-AE (3) – 載入 md2 測試

黃小蛙 — Wed, 06 Jul 2016 01:24:43 +0000

前兩篇介紹如何直接透過 jPCT-AE 直接繪圖以及載入 .obj 檔案，這邊繼續介紹 jPCT-AE 載入 md2 的方法，載入動作大致上類似，唯一不同的只有 texture 設定部份。

圖片來源：http://tw.freeimages.com/photo/3d-maze-2-1208096

囉哩巴唆

這次沒有什麼好囉哩巴唆了，小蛙對於這些 3D model 的檔案類型是一知半解，只是看到 jPCT-AE 有這幾種 loader，一個一個測試過後把程式碼留下來。

下載需要的檔案

找了半天，要找到 md2 檔案真是有點困難，後來終於在這裡找到可以下載的 md2 模型。

載入 md2 模型

附上以下程式碼

public ImageTargetRenderer(ImageTargets activity, SampleApplicationSession session) {
    mActivity = activity;
    vuforiaAppSession = session;
    world = new World();
    world.setAmbientLight(150, 150, 150);
    // set the following value according to your need, so the object won't be disappeared.
    world.setClippingPlanes(2.0f, 3000.0f);
    sun = new Light(world);
    sun.setIntensity(250, 250, 250);
    try{
        // loadMD2(檔案, 縮放);
        cylinder = Loader.loadMD2(mActivity.getAssets().open("Blade.md2"), 10);
        // 載入材質，材質名稱直接設定為檔案名稱，也可以修改
        TextureManager.getInstance().addTexture("Blade.jpg",
                new Texture(mActivity.getAssets().open("Blade.jpg")));
        // 設定使用名為 Blade.jpg 的材質 (就是上面設定的名字)
        cylinder.setTexture("Blade.jpg");
        cylinder.strip();
        cylinder.build();
        // X 軸方向翻轉
        cylinder.rotateX(1.5f);
        // 位移 x, y, z
        cylinder.translate(-100, 0, -200);
        world.addObject(cylinder);
        cam = world.getCamera();
        SimpleVector sv = new SimpleVector();
        sv.set(cylinder.getTransformedCenter());
        sv.y -= 100;
        sv.z -= 100;
        sun.setPosition(sv);
    }catch(Exception e){
        e.printStackTrace();
    }
    MemoryHelper.compact();
}

快點試試看，是不是能如下圖載入刀鋒戰士呢？

載入 md2 測試

Android Vuforia 系列：

參考資料

Enseignement C++ avancé en Master Informatique

這篇文章 Android Vuforia with jPCT-AE (3) – 載入 md2 測試最早出現於記下來。

Android Vuforia with jPCT-AE (2) – 載入 obj 測試

黃小蛙 — Wed, 06 Jul 2016 00:24:55 +0000

上一篇 Android Vuforia with jPCT-AE (1) – 基本範例我們已經把 Vuforia 與 jPCT-AE 的環境建立出來，也可以正常顯示 Vuforia + jPCT-AE 的範例─一個顏色有點昏暗的桶子，這篇繼續記錄怎麼直接載入一般常見的 .obj 檔案。

囉哩巴唆

透過 Android Vuforia with jPCT-AE (1) – 基本範例是直接在 ImageTargetRenderer.java 的建構式中，將要畫出物件的座標以及一些參數設定好之後，透過 jPCT-AE 畫出來，聽起來不怎麼有彈性，加上一些複雜的模型要透過自己訂定座標點的方式畫出來，貌似非常不科學啊！因此，這篇要記錄如何透過 Loader 類別來載入 .obj 的檔案，而不是在程式中，自己把座標一一描繪出來。

到 TD3M 下載需要的檔案

這篇小蛙使用 Bedside Table (4 skins) @ TF3DM 當作範例，因為這個範例非常符合 jPCT-AE 載入的規則，後面會再提到這是什麼意思，總之先把這個範例下載下來，下載完解壓縮之後會看到如下圖

Bedside table 3d model

將這三個檔案通通複製到 Android Studio 專案中的 assets 目錄下

將模型放入 assets 目錄下

小蛙測試的時候用了很多模型，造成 assets 目錄下面亂七八糟，因此又在 assets 下新增了 obj、mtl、texture 等目錄，分別把上述「Bedside Table D.obj」、「Bedside_Table_D.mtl」、「Bedside_Table_D_default_1_1.png」依類別放入。

讓 jPCT-AE 載入 obj, mtl, texture

建議可以先把 jPCT-AE 的 ImageTargetRenderer.java 的建構式注解起來，到時候如果改壞了，還可以還原回去，然後把以下建構式的程式碼貼上

public ImageTargetRenderer(ImageTargets activity, SampleApplicationSession session) {
     mActivity = activity;
     vuforiaAppSession = session;
     world = new World();
     // 如果亮度太暗或是亮度怪怪的，可以調整這裡
     world.setAmbientLight(150, 150, 150);
     world.setClippingPlanes(2.0f, 3000.0f);
     sun = new Light(world);
     // 如果亮度太暗或是亮度怪怪的，可以調整這裡
     sun.setIntensity(250, 250, 250);
     try{
         // 載入材質，第一個參數是 texture 名稱，這邊使用原始檔名
         // 因為當載入 mtl 時，mtl 的檔名會自動對應到該 texture
         TextureManager.getInstance().addTexture(
                 "Bedside_Table_D_default_1_1.png",
                 new Texture(mActivity.getAssets().open("texture/Bedside_Table_D_default_1_1.png"))
         );
         // loadOBJ 參數分別是：.obj, .mtl, 縮放大小
         Object3D[] tmp = Loader.loadOBJ(
                 mActivity.getAssets().open("obj/Bedside Table D.obj"),
                 mActivity.getAssets().open("mtl/Bedside_Table_D.mtl"),
                 5
         );
         if(tmp != null && tmp.length >= 1){
             cylinder = tmp[0];
         }
         cylinder.strip();
         cylinder.build();
         // 位移
         cylinder.translate(-110, -160, 0);
         // x 軸旋轉，不然載入的櫃子可能是趴著或是躺著的
         cylinder.rotateX(-1.5f);
         // 如果有 mtl 就可以不用 setTexture，mtl 內有 texture 名稱會自動載入
         //cylinder.setTexture("Bedside_Table_D_default_1_1.png");
         world.addObject(cylinder);
         cam = world.getCamera();
         SimpleVector sv = new SimpleVector();
         sv.set(cylinder.getTransformedCenter());
         sv.y -= 100;
         sv.z -= 100;
         sun.setPosition(sv);
     }catch(Exception e){
         e.printStackTrace();
     }
     MemoryHelper.compact();
 }

執行看看是不是可以正常載入一個櫃子了呢？

載入 .obj 測試

遭遇問題

小蛙之前弄了半天，遇到一拖拉庫的錯誤，有些事情後來才釐清到底為什麼會發生錯誤，在 texture 的部份，圖片大小必須要是 2 的次方，像是：128, 256, 512, 1024, 2048 … 等，只要邊長不是 2 的次方，就會得到圖片大小錯誤的訊息，外加因為載不到圖片隨之而來的 javaNullPointer Exception。

render 出來沒有東西，這個要仔細看，有時候是模型太小，小蛙有一次 render 出來的東西，必須要放大 30000 倍，才符合使用大小 … 有時候是座標軸不對導致 redner 在 image target 下面 (被紙張遮住了)，有時候是沒有 mtl 也沒有材質，就會 render 出空的東西 (沒有東西) … 等，有時候是 mtl 裡面的 texture 有問題，像是根本沒有 texture 資訊，或是 texture 資訊還是錯誤的檔案路徑(如：C:\xxx\rrr\ccc\xx.png 但是實際上根本沒有這種路徑，此時就要手動修正他)，有時候其實根本也不知道為什麼就是沒有東西。

到 TD3M 多下載幾個範例檔試試看，再慢慢釐清為什麼不能載入的原因，這個範例應該是不需要做什麼調整就可以直接載入，因此使用這個當作範例。

Android Vuforia 系列：

參考資料

Bedside Table (4 skins) @ TF3DM

這篇文章 Android Vuforia with jPCT-AE (2) – 載入 obj 測試最早出現於記下來。

Android Vuforia with jPCT-AE (1) – 基本範例

黃小蛙 — Tue, 05 Jul 2016 23:57:58 +0000

說來慚愧，從 Google Adsense 被 ban 之後，就好久沒有發文了，站上 Vuforia 的文章也已經是好久以前的事情了 (遠目)，最近有專案要用到 Vuforia，爬以前的文回來看，蛙哩咧 … 現在已經更新到 Vuforia 5 了 … 真的是好遙遠啊！這篇記錄怎麼讓 Vuforia 可以透過 jPCT-AE 這套工具把 3D 模型 render 出來，而不是透過之前 Qualcomm Vuforia 教學 (6) – 3D model -> .obj -> .h 這種轉換方式，系列文內會大概講解遭遇到的問題。

圖片來源：https://developer.vuforia.com/library/articles/FAQ/Watermark

囉哩巴唆

在 Zachary Marv 的這篇留言中提到用這種方式產生出來的模型雖然是正確的，但是貼圖會變的怪怪的，沒有辦法像 Vuforia 的茶壺那樣好看，小蛙對 3D model 不怎麼了解 … 無法解答發生的原因以及要怎麼改善，但這的確是一個非常 OX 的問題 …

這次專案又要用到 AR 相關的技術，想說之前使用過 Vuforia，那就繼續用用看吧！對 Vuforia 的記憶根本就消失殆盡，還好之前有留系列文章下來：

Qualcomm Vuforia 系列：

but … 人生最大條的就是這個 but … 版本也差太多了吧！連套件名稱都不一樣了 … 上述紀錄文只能當作找回記憶碎片的”參考文”了，不過這六篇還是有一點參考價值啦！進主題　～

Vuforia Android Sample

簡單敘述一下整個流程：

必須要有一個 Vuforia 的帳號，註冊這檔事應該沒什麼難的地方，就填填資料就好了。
註冊完之後，建立一個 License Key (以前 3 版的時候沒有的)，官網教學。
複製下來自己的 License Key (就是那一長串看不懂的東西)。
到這邊下載 Vuforia SDK，解壓縮好放在一個容易找到的地方，例如：c:\vuforia\。
到這邊下載 Vuforia Sample (Core Features 這一組)，隨便解壓縮到一個地方，然後用 Android Studio 匯入。
打開之後看看缺少那些 jar，然後去上面的 SDK 裡面找，把缺少的 jar include 進來。
打開 com.vuforia.samples.SampleApplication.SampleApplicationSession.java，搜尋「Vuforia.setInitParameters」，把剛剛建立的 License Key 貼在這邊。
檢查看看還有沒有紅字，沒有的話應該就可以正常執行了 (不行別罵小蛙，感覺應該是這樣)。

Vuforia Android JNI Sample

到這裡應該是不會有什麼問題才對，因為比較麻煩的是 Vuforia Sample Advanced Topics 這組，如果要使用 obj 轉 .h 的方法可以下載 Vuforia Sample Advanced Topics 這組，經過小蛙測試以及上面 Zachary Marv 提到的，texture 透過 JNI 的方式 render 出來會怪怪的，剛接觸的網友可以試試看上面教學的 (4) (5) (6)，也可以順便熟悉一下 JNI 的運作 (如果是使用 JNI 的朋友會比較麻煩，簡單一點的方法是把 Vuforia SDK 中的 build 目錄複製下來，丟進 ImageTargetsNative-5-5-9\app\src\main\ 下，接著修改 app/build.gradle

def VUFORIA_SDK_DIR = 'C:\\vuforia'   // 改成你的 Vuforia SDK 位置
def JAR_DIR = 'build/java/vuforia'    // 如果照著上面做的話，直接寫這樣
sourceSets.main {
    jni.srcDirs = []
    jniLibs.srcDir "src/main/libs/"
    // 檢查裡面要有 armeabi-v7a 資料夾，如果沒有就去 Vuforia SDK 下複製
}

第二個要修改的部份是 ImageTargetsNative-5-5-9\app\src\main\jni\Android.mk

// 如果是照著上面步驟的話，改成這樣，不然就自己 trace 路徑看看
LOCAL_SRC_FILES = ../build/lib/$(TARGET_ARCH_ABI)/libVuforia.so
// 如果是照著上面步驟的話，改成這樣，不然就自己 trace 路徑看看
LOCAL_EXPORT_C_INCLUDES := ../build/include

完成之後點擊選單列 Build -> Make Project，如果沒有錯誤，直接執行就可以了！

Vuforia Android Sample With jPCT-AE

要使用 jPCT-AE 把 3D 模型呈現出來很簡單，只要幾個步驟就可以了：

到這裡下載整個 project。
直接匯入 Android Studio，跟上面一樣搜尋「Vuforia.setInitParameters」，把 Vuforia License Key 貼進去。
這時候應該很多紅字，到 Vuforia SDK 中 (如小蛙的位置在 C:\vuforia\build\java\vuforia) 把 Vuforia.jar 複製到 Vuforia559_jPCT-AE-master\app\libs 中。
找到 build.gradle 新增 Vuforia.jar

1

2

3

4

dependencies {

compile files('libs/jpct_ae.jar')

compile files('libs/Vuforia.jar') // 新增這行

}
直接 run 專案，就可以看到結果了！

啥？那麼簡單？沒錯，就是這麼簡單 … 如果直接運行這個範例的話，會看到一個桶子，然後桶子看起來還有點昏暗，不過可以看到桶子表示已經成功了，下一篇將介紹怎麼載入其他 jPCT-AE 支援的 3D 模型。

Android Vuforia 系列：

參考資料

這篇文章 Android Vuforia with jPCT-AE (1) – 基本範例最早出現於記下來。

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

Qualcomm Vuforia 教學 (2) – Create Image Target

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

接續上篇 Qualcomm Vuforia 教學 (1) – 安裝 Vuforia 建置好 Vuforia 環境後，這邊繼續記錄怎麼建立一個 Image Target (目標影像)，來取代原本的石頭跟木屑的 Image Target。

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

Android Vuforia 系列：

Qualcomm Vuforia 使用 Image Target 的方式有三種：

透過 device database (100 個影像內)
使用 cloud recognition database (1000 個影像與成功辨識內免費)
執行期間透過選取相機畫面，動態新增至 device database

這篇小蛙要記錄透過 Target Manager 建立 Image Target 後，使用上述第一種 device database 的方式測試。
Vuforia 官網上有非常多關於怎樣讓影像特徵 (features) 更顯著的方法，不過小蛙很懶沒有認真看，以下隨意列出之前的筆記

1. 使用者可以上傳 RGB 以及灰階的 JPG 或 PNG，同時大小小於 2MB
2. 程式執行期間， Vuforia SDK 最高可以同時偵測到五個 target，效能部分取決於 CPU loading 以及 GPU
3. 提高對比度可以增強 feature 被擷取
4. 避免重複出現的圖案
5. sharp, spiked, chiseled(輪廓分明) 能被取出 feature，
   例如：正方形有 4 個 feature、圓形沒有 ... 等

上面是小蛙隨意記錄，也許可能認知上有些問題，有興趣可以直接去查看官網，或是當一張圖的辨識度太低時，再來回頭找解決方法。現在開始建立 Image Target 步驟。

1. 到 https://developer.vuforia.com/target-manager ，登入後點選 Create Database

2. 輸入資料庫的名字，這邊小蛙用 wazai 當測試

3. 建立完成後可以看到下圖，接著點選右上角的 Add Target 開始建立目標影像

4. 分別輸入 Target Name (目標名稱)、Target Type (目標類型)、Target Dimension (目標維度)、Target Image File (目標影像檔)，如下圖依照自己的需求輸入或建立 (這邊小蛙還不太清楚 Target Dimension 要怎麼設定，先隨便設定 500，這跟你的 3D model 大小有關)

5. 建立完成後可以看到剛剛建立的資訊

6. 下載剛剛建立的資料庫，這邊有一個限制是最大目標下載只能 100 個，點選「Download Selected Targets」

7. 依照需求選擇，小蛙使用 Eclipse 做測試，因此選擇 SDK (Eclipse, Ant, Xcode, ect.) 這個

8. 解壓縮 wazai.zip 可以得到 wazai.dat 與 wazai.xml 兩個檔案，把這兩個檔案放在 Eclipse VuforiaSample 專案下的 assets 目錄，在這個資料夾下，還會看到 StonesAndChips.dat, StonesAndChips.xml, Tarmac.dat, Tarmac.xml (有看到他們擺一起就對了)

9. 接著從 Eclipse 編輯 com.qualcomm.vuforia.samples.VuforiaSamples.app.ImageTargets/ImageTargets.java，搜尋 .xml (大約在 105 與 106 行左右)。小蛙把 mDatasetStrings.add(“StonesAndChips.xml”); 註解掉，並且加入剛剛的設定檔

    //mDatasetStrings.add("StonesAndChips.xml");
    mDatasetStrings.add("wazai.xml");
    mDatasetStrings.add("Tarmac.xml");

10. 這時候 238 行左右 ((Switch) mFlashOptionView).setChecked(false); 會報錯誤，加上 @SuppressLint 就可以了

11. 執行專案，可以發現剛剛的石頭跟木屑的 ImageTarget 已經不會出現茶壺了，試看看剛剛建立的 dog 的 ImageTarget，茶壺是不是在上面呢? 這個茶壺的大小跟剛剛設定的 Target Dimension 有關。

12. 附帶一提，如果是要更換不同顏色的茶壺，可以在 ImageTarget.java 中的 loadTextures() 中，加入或修改自己需要的材質，並搭配 ImageTargetRender.java 來做設定的動作，這邊不細說明了，試著把 loadTextures() 中的 TextureTeapotBrass.png, TextureTeapotBlue.png, TextureTeapotRed.png 調換順序，就可以看到原本的茶壺顏色交換了。

到這邊我們已經可以把 Vuforia 的範例跑起來，並且建立一個屬於自己的 Image Target，讓 VuforiaSample 可以辨識並且出現茶壺(?!)，第 12 步驟雖然沒有詳細說明，不過照著做可以讓茶壺的顏色交換，Vuforia 系列文章目錄如下：

Qualcomm Vuforia 系列：

這篇文章 Qualcomm Vuforia 教學 (2) – Create Image Target 最早出現於記下來。