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

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

Android Vuforia with jPCT-AE (1) – 基本範例
Android Vuforia with jPCT-AE (2) – 載入 obj 測試
Android Vuforia with jPCT-AE (3) – 載入 md2 測試

Android Vuforia with jPCT-AE (4) – 載入 3ds 測試
Android Vuforia with jPCT-AE (5) – 多重模型載入

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

在之後的文章會說明要怎麼產生出像 CubeTest2.java 這種檔案或裡面的一些模型資訊,這個範例就先直接套用下載下來的檔案。接著需要對 ImageTargetRender.javaImageTarget.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 塑模時的打光以及環境光源有關,這裡就不討論了。
Screenshot_2014-12-09-14-50-29.png

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

 

Vuforia 系列文章目錄如下:

  1. Qualcomm Vuforia 教學 (1) – 安裝 Vuforia
  2. Qualcomm Vuforia 教學 (2) – Create Image Target
  3. Qualcomm Vuforia 教學 (3) – 替換茶壺 – Android 版本
  4. Qualcomm Vuforia 教學 (4) – 使用 Android NDK 版本並開啟多重偵測
  5. Qualcomm Vuforia 教學 (5) – 替換茶壺 – Android JNI 版本
  6. Qualcomm Vuforia 教學 (6) – 3D model -> .obj -> .h

相關文章

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

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

18

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

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

18

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

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

18

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

上一篇 Android Vuforia with jPCT-AE (1) –
2016-07-06 08:24:55
hans

18

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

說來慚愧,從 Google Adsense 被 ban 之後,就好久沒有發文了,站上 Vuforia 的文章也已經是好久以前的事情了 (遠目),最近有專案要用到 Vuforia,爬以前的文回來看,蛙哩咧 ... 現在已經更新到 Vu
2016-07-06 07:57:58
hans

18

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

終於來到 Vuforia 記錄的最後一篇了,這篇參考到網路上神人的做法,怎麼把一個 3D model 轉換成 Vuforia 可以使用的 .h 檔,這邊之後都直接使用 An
2014-12-10 11:25:50
hans

18

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

前面的文章提到為什麼要用 Android NDK 來開發,既然已經有了 Android 版本替換茶壺的文章,這邊記錄 Android NDK 版本的替換茶壺。
2014-12-09 17:54:17
hans

18

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

接續前幾篇教學,我們已經建置好 Vuforia 開發及執行環境
2014-12-09 17:10:57
hans

18

Android 2.3 @JavascriptInterface Issue

JavascriptInterface 這個問題相信 Google 一下就可以找到很多文章,雖然如此小蛙還是試了好久才成功,這篇文章記錄一下當時小蛙不成功的盲點在哪裡。上一篇文章「
2014-03-28 20:25:25
hans

18

Android 與 WebView 中的 Javascript 相互溝通

最近的一個 app 需要讓 Android 可以呼叫 WebView 中的 Javascript,並且按下 WebView 中的按鈕時,也可以呼叫 Android 內部的方法,這篇文章記錄一下大概的做法,免得下次遇到又忘記 ...
2014-03-28 20:25:19
hans

18




 回覆

你可以使用以下語法 HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">

(required)

(required)

   
© 2012 蛙齋 Suffusion theme by Sayontan Sinha