記下來

一路上踩到的坑、遇到的問題，一點一滴記下來，希望能幫助到需要的人~

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

作者: · 最後更新 · 發表於 · 手機 App

終於來到 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 支援匯入的檔案格式有

1
2
3
4
5
6
7
8
9
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 為例，匯出時必須勾選以下選項

1
2
3
4
5
6
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 並把原本的覆蓋掉

01
02
03
04
05
06
07
08
09
10
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

1
2
3
4
5
6
7
8
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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
// 在上方加入
#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，沒有任何錯誤的話，重新整理專案後執行即可，上個範例我們把茶壺換成方塊，現在可以換成香蕉了。
023.png
024.png
經過這系列的文章，應該都可以把 Qualcomm Vuforia 運行起來，並且支援多重偵測，也有辦法自行把茶壺更換掉、更換貼圖、產出必須的 .h 檔案，下面貼幾張有趣的例子，這是網路上找到的免費 3D model，左上為模型的樣子-一間木屋，看到門開開的，走進去看看，右上為站在門口往裡看的樣子，左下是走進房子往天花板看的樣子，右下是從房子裡面往窗戶外面看的樣子，讓人不禁覺得 Qualcomm Vuforia 好強大啊！

019.png           020.png

021.png           022.png

Qualcomm Vuforia 系列：

參考資料

你可能也想知道：

    標籤：

    2 個回應

    1. Zachary Marv表示:
      2015-08-0616:16:16

      您好，其實我也採用了同樣的方法來做。效果也跟您的一樣。但是您有沒有發現，那個香蕉的紋理貼圖其實是有問題的，不知道這個應該如何解決？

      回覆
    2. Jason Yang表示:
      2015-01-2106:59:58

      感謝分享！剛好最近也要嘗試替換 model~

      回覆

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。