Home / Technology  / Mobile Technology  / Augmented Reality  / การสร้าง Augmented Reality ร่วมกับ Unity 5 และ Vuforia แบบง่าย

การสร้าง Augmented Reality ร่วมกับ Unity 5 และ Vuforia แบบง่าย

บทเรียนในรอบนี้คือ Unity 5 สำหรับสร้างเกม 3D ร่วมกับเทคโนโลยี Augmented Reality หรือ AR ร่วมกับ SDK ของ Vuforia กับตัวอย่างที่ปราศจากการเขียนโปรแกรม 

เทคโนโลยี Augmented Reality นั้นเมื่อหลายปีก่อนเว็บไซต์แห่งนี้ก็เริ่มพัฒนาร่วมกับ FLARToolkit หรือ Layar มาบ้างแล้ว ในเมื่อเราเปลี่ยน Position ของ Content เว็บไซต์ของเราเป็นแนว Game Development และ Gamification แล้วล่ะก็ คงต้องได้เวลาหยิบเอา เทคโนโลยี Augmented Reality หรือ AR ตัวนี้มาใช้งานร่วมกับ สมาร์ทโฟนได้แล้ว

และสำหรับ AR SDK ที่น่าสนใจและน่าจะทำงานร่วมกับ Unity 3D ได้ง่ายที่สุดนั้นก็คงจะต้องยกให้กับ Vuforia ครับ

เริ่มต้นพัฒนาแอพพลิเคชัน AR บนสมาร์ทโฟน Android และ iOS กันดีกว่า

ให้เราเปิดโปรแกรม Unity เวอร์ชัน 5 ขึ้นมาครับสร้าง Project ใหม่ชื่อว่า “ARUnity” บันทึก Scene ของเราให้เรียบร้อย

vofuria-unity-basic-1

ไม่ต้องสนใจอะไรนะครับ ให้เราลบ Main Camera ไปเลยเพราะเราจะใช้กล้อง AR จาก Vuforia อยู่แล้ว

ไปที่เว็บไซต์: https://developer.vuforia.com/downloads/sdk
 ทำการดาวน์โหลด SDK สำหรับ Unity (ต้องสมัครสมาชิกก่อนนะครับ)

vofuria-unity-basic-3

เมื่อดาวน์โหลดเสร็จแล้วให้เราเปิด Unity ขึ้นมาครับ ทำการเลือกเมนู Assets -> Import Package -> Custom Package

แล้วเลือก SDK ของ Vuforia ที่เราเซฟไว้ในเครื่องเลย

vofuria-unity-basic-5

ทำการ Import Package ให้เรียบร้อย

vofuria-unity-basic-6ให้เราสังเกตที่ Project ของเรา ไปที่ Folder ชื่อ “Qualcomm Augmented Reality” เลือก Folder ชื่อ “Prefabs” แล้วลากเอา Prefabs ชื่อ ARCamera ไปวางใน Scene ได้เลยครับ

vofuria-unity-basic-7

vofuria-unity-basic-9

ตามด้วย Prefabs ที่ชื่อว่า “ImageTarget” ไปวางในมุมกล้องของ ARCamera ครับเหมือนภาพประกอบข้างบน

vofuria-unity-basic-8

 

ต่อมาเราจะทำการสร้าง Marker ของ Vuforia แล้วครับ จริง AR สมัยนี้ใช้ภาพอะไรก็ได้ครับ ลวดลายจะมากน้อยแค่ไหนก็ได้ ขอแค่ แสงเงาตกกระทบไม่เพี้ยนพอ ในตัวอย่างนี้ เลือกใช้ QR Code แทน (มักง่ายดี) เพราะ Vuforia จะมีระบบ Rating ว่าภาพไหนเหมาะกับการทำ Marker เป็นแต้ม 5 ดาว ซึ่ง QR code ผม 5 ดาวเน้นๆ

vofuria-unity-basic-21

ไปที่เว็บไซต์ : https://developer.vuforia.com สร้าง App License ของเราขึ้นมา ที่แท็บชื่อว่า “License Manager” ให้เราสร้าง App License แรกของเราครับตั้งชื่อว่าอะไรก็ได้

vofuria-unity-basic-10

เลือก Plan เป็น None ครับ ใช้สำหรับทดสอบถ้าใช้จริงค่อยซื้อ ไม่แพงหรอก

เราจะได้ APP License Key ครับให้ Copy ไปวางที่ Inspector windows ของ ARCamera ใน Hierarchy ครับ (ถ้าตาไม่บอด น่าจะเห็นนะ)

ขึ้นตอนต่อมาคือการสร้าง Target Image หรือ Marker ครับ ให้เลือก Image ปรกติก็พอ แล้วก็อัพโหลดภาพของเราขึ้นไปดูแต้มด้วยว่ากี่ดาว

vofuria-unity-basic-11

คลิกที่แท็บ TargetManager แล้วเลือก App License ที่เราสร้างก่อนสร้าง Marker

vofuria-unity-basic-12

เลือกกราฟิกแบบไหนก็ได้นะ

vofuria-unity-basic-13

ถ้าไม่ใช่ QR Code เป็นนามบัตรก็ได้แต่จะได้ 3 ดาว (ตัวอย่างนะข้างบน) ถ้าโอเคกับภาพที่ต้องการแล้วให้ดาวน์โหลดลงมาเป็น Unity Package ครับ ให้เลือกที่ภาพที่อยู่ในระบบแล้วเลือก Download Database

vofuria-unity-basic-14

ให้ไปที่ Unity 5 ครับทำการ เลือกเมนูแบบเดิมคือ Assets -> Import Package -> Custom Package แต่รอบนี้เลือก Package ที่เราสร้าง Target Image จาก Vuforia แทน

vofuria-unity-basic-15

ไปที่ Hierarchy ครับเลือก Object ตัว ImageTarget แล้วมองที่ Inspector ส่วนของ Image Target Behaviour ส่วนของ Data Set ให้เลือก Drop down เลือก Package ตัว Image ล่าสุดที่เราเพิ่ง Import เข้าไป

vofuria-unity-basic-16

ไปที่ Objetc ARCamera ให้เลือกค่า Data Set Load Behaviour เลือกทั้งชื่อ Data Set และ Activate

vofuria-unity-basic-17

ทีนี้ก็หา Model สักหน่อยจะเอา Cube, Sphere ก็ธรรมดาไป แนะนำให้ไปหาที่นี่ครับเว็บไซต์ http://www.models-resource.com/

vofuria-unity-basic-2

ให้นำ model ไปวางใน Project แล้วลาก Object ไปวางเหนือ ImageTarget ได้เลยครับ แต่ให้ซ้อน Layer ใน Hierarchy ให้ Model เราอยู่ให้ Image Target นะครับ

vofuria-unity-basic-20

วางตำแหน่งตามรูป

vofuria-unity-basic-18

ส่วนของ Hierarchy เป็นตามนี้

vofuria-unity-basic-22

เอาล่ะมาทดสอบกัน Android สมาร์ทโฟนของเราสักหน่อย ให้ Build and Setting ทำการ Export ออกเป็น APK ครับ (อ่านได้ที่บทนี้: Unity 5 เขียนเกมวิ่งเก็บของบน Android หลักสูตรเร่งรัดเป็นเร็ว)

ลงแอพที่เครื่องให้เสร็จแล้วทดสอบ เราจะได้ผลลัพธ์ตามนี้ครับ

cover

Screenshot_2015-04-20-15-05-37

Screenshot_2015-04-20-15-06-39

ไม่น่ายากใช่ไหมครับไม่มี โปรแกรมมิ่งเลย (เสียชื่อ Daydev หมด) ไปทดลองเล่นกันนะครับ

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview