MAKAR | AR/VR/MR 教學

教學

AR 紅包袋進階教學–幸運兔


 

課程說明：

本課程將解說 AR 紅包袋進階版幸運兔的製作方式，如何利用 MAKAR 專案中的邏輯程式 (blockly) 製作出有趣的互動專案。
 

情境說明：

能快速簡易的製作出 AR 作品的工具已經越來越多，當大家對於這項技術熟悉之後，就會想嘗試更多的可能性，不管是互動性或功能性。

MAKAR 編輯器在近年增加的「邏輯功能」採用 blockly 積木程式，是相對於文字程式比較好入門，新手不會因為輸入錯誤或少了特定符號而造成程式無法執行。

本次專案是延續 AR 紅包袋，更著重於利用邏輯程式達成AR的效果，其中會使用到「隨機抽樣」和「模型淡入/淡出」的效果。

 

1. 辨識圖製作
辨識圖的製作如同初階版的教學，是使用 Midjourney，因此這裡將不再贅述，可以前往初階版教學觀看。

 

2. Doodle3d
這是一個網頁的建模工具。左邊是平面的畫布，右邊是立體的空間。在左邊可以畫出任何形狀或寫出任何文字，右便會立即產生對應的立體模型。並且可以轉存為 STL 和 OBJ 檔案類型。因此，我將使用這個工具製作出我的年份 LOGO，在平板上開啟網頁，就可以用觸控筆寫出你獨特的手寫字體。

 

創作完成之後輸出成 OBJ 檔案格式，解壓縮檔案之後就會獲得兩個資料，分別為 mtl 檔案和 obj 。單純打開 obj 檔案或發現模型是沒有顏色的，因此我們需要進入 Blender 將模型轉檔。







3. Blender

Blender 是免費開源的建模軟體，支援多種平台。我們使用 Blender 僅只是將 obj 檔案轉存成 MAKAR 支援的模型檔案類型 (fbx或glb)。
檔案匯入：File → import → wavefront(obj)
 


匯入檔案之後無須任何修正，直接輸出。


 

檔案輸出：File → export → glTF 2.0(glb/glft)
輸出設定無須任何更動。




 

4. MAKAR 編輯器
建立新專案 → AR專案 → 圖像辨識



匯入素材匯入 MAKAR



其中第三隻兔子是使用 MAKAR 線上素材中的兔子素材。新增素材 → 線上素材庫 → MAKAR 素材庫，搜尋：兔子




 

5. 動畫分割

首先需要將 giftbox 的動畫分割出靜止狀態 (box) 和打開狀態 (open)。點選 giftbox 的動畫功能的右下角三個點，可以開啟新增動畫。



 

先新增動畫名稱，輸入名稱 → 點選右方加號 (+)


將動畫名稱改為「box」後調整時間軸為5～5。 打開狀態 (open) 的時間軸為 6～49。


 

6. 模型上色

素材中的 rasengan 適用於裝飾成魔法球，但是這個模型預設沒有任何材質 (顏色)，因此藉由 MAKAR 內建的功能，可以將模型上色。

注意：模型上材質有使用時機，本模型可以從右方名稱中發現，不同的名稱對應不同部位 (多個模型名稱)，因此適合此做法。若是只有一個模型名稱，那可能不適合此方法。




將材質球改為「純色」，點選右邊三個點，就可以開啟顏色選項，選擇適合的顏色。




若覺得模型太暗，可以增加一個光源 (light)，因為材質已經改成純色，無法使用無光-標準。




 

7. Rabbit 兔子群組

本次會使用到三隻兔子，將每隻兔子擺放到場景中間，並將大小調整一致。



 

為了讓之後製作邏輯功能更便利，將建立一個透明的方塊 (命名：Rabbit)，將所有的兔子都群組在一起。
 



 

透明盒子製作：材質球右邊三個點 → 模式: 去背 → 將顏色的A (alpha) 改成 0。




接著將 LOGO 也放在 Rabbit 的群組中。




8. 關閉「可操作」功能＆邏輯功能開啟
可操作功能是，當物件出現在螢幕上，使用者可以用手去移動、旋轉、縮放這些擴增物品。

將場景物件中的所有物件都關閉「可操作」的功能。
全部的物件增加邏輯功能 (新增功能 → 邏輯)，群組內的元件也都需要。




 

9. 邏輯功能–giftbox跳動
物件的跳動可解成向上與向下，只要一直反覆這兩個動作，看起來就像是在跳動。
積木程式：轉變 → 轉換 → 第二個積木。




為了反覆執行，需要再增加一個「永遠執行」的積木；以及如同初階教學中所提到的照到辨識圖才會啟動這個模型動畫「可見度控制」。

(永遠執行) 積木程式：控制 → 循環 → 第一個積木。
(可見度) 積木程式：操作 → 材質 → 第二個積木。

 




10. 邏輯功能–淡入/淡出
淡入淡出的效果可以透過透明度的改變來完成或者型態快速地縮放，這裡將使用型態快速地縮放來達成。
首先，須建立一個觸發時機，這裡選擇點擊 giftbox。而此時 giftbox 的動畫將從 box 改變成 open (僅執行一次即可)。
積木程式：事件 → 輸入 → 第一個積木。




接著有三件事情同時發生，giftbox 淡出、魔法球出現 ＆ 淡出、兔子淡入。而邏輯程式要做到淡出效果 (即縮小沒有體積) 和淡入效果 (從沒有體積放大到正常體積)。
為了控制體積的縮放，這裡需要用到「變數」。



giftbox 淡出：
先將 giftbox 的值設定為「縮放大小」，透過重複執行 n 次來縮小，每次縮小之間的時間差是 0.01 秒 (若沒有時間差會很怪)。
縮小效果是利用變數的運算，在電腦程式中的邏輯運算。最後確保體積歸零，強制將 giftbox 的比例設定為 0。




數值都可能因為你的模型大小而改變，因此經常執行來測試是否正確。


 

魔法球出現＆淡出：
出現之後讓魔法球保持旋轉，過了 3 秒之後再淡出。淡出的模組與 giftbox 一樣，因此可以直接複製過來，更改新的變數和比例大小即可使用。
此外，旋轉和淡出使用平行運算接起來。




Rabbit淡入：
淡入與淡出的程式基本上一樣，差別只在於從邏輯運算中的減法改為「加法」。將原本縮放比例設定為 0，之後再增加到縮放比例為 1 即可。
注意：這段程式一開始的暫停 3 秒與魔法球的淡出 3 秒時間一致時，可以做到魔法消失時兔子出現的效果。



後面加上煙火的模型以及煙火的音效。



 

同步：
giftbox 淡出、魔法球出現 ＆ 淡出、兔子淡入三個動作同步發生，因此利用平行運算將三個動作接起來。
平行運算預設只有兩個工作，點擊左上方齒輪，可以增加工作數量。





11. 邏輯功能–隨機變數/抽籤
隨機變數是利用到運算子中的數學功能 –「A-B之間的隨機整數」，搭配可見度的應用。
首先需要另外再建立一個變數，將變數設定為「A-B之間的隨機整數」。而這個數學範圍是Ａ變數 < Ｂ，因此 Ｂ 的數值會是你模型的數量 +１ 個。




完整程式


最後，將場景物件的全部物件眼睛關閉 (可見度關掉)，除了音樂素材。此做法可以確保，當手機鏡頭離開辨識圖的時候，不會有擴增物出現在螢幕中。


 
 

如何體驗

拿起手機，輸入ID並掃描辨識圖就能進行體驗囉!

1. 安裝MAKAR APP
2. 掃描QR code或搜尋ID: class06選擇作者



3. 點擊AR圖像辨識「幸運兔」專案啟動，點擊「開始體驗」對準海報。