AR for Class by Ubon

มหาวิทยาลยั เกษตรศาสตร์

การสรา้ งสรรคต์ ามจนิ ตนาการ ด้วย AR by Quiver www.quivervision.com

QuiverVision.com



QuiverVision.com





QuiverVision.com

สัมผัสกับโลกแห่งความเปน็ จริงเสรมิ สรา้ งสรรค์ผลงานแบบมีชีวติ HP Reveal

เอกสารประกอบการอบรม การใชง้ านแอพพลเิ คชน่ั ออรัสมา่ (AURASMA) ----------------------------------------------------------------------------------------------------------------------------------------------------- ดร.อบุ ล ทองปัญญา | คณะวทิ ยาศาสตรก์ ารกฬี า มหาวทิ ยาลยั เกษตรศาสตร์ วทิ ยาเขตกาแพงแสน ---------------------------------------------------------------- ออรัสม่า (Aurasma) เป็นแอพพลิเคช่ันสาหรับการสร้างสื่อในโลกแห่งความจริงเสริม (Augmented Reality : AR) เหมาสาหรับการพัฒนาสื่อท่ีใช้กับอุปกรณ์ประเภท iPhone, iPad รวมถึง อุปกรณ์คอมพิวเตอร์พกพาต่างๆ ท่ีใช้ระบบปฏิบัติการ IOS และ Android คุณสมบัติพิเศษของออรัสม่า จะ เป็นตัวกลางสาหรับการเช่ือมโยงโลกของความจริง และโลกของความเสมือนเข้ามาเสริมด้วยกัน โดยแสดงผล ออกมาในรูปแบบส่ือปฏิสัมพันธ์ที่มองเห็น ควบคุมและสัมผัสได้ทางหน้าจอ ท้ังท่ีเป็นภาพน่ิง ภาพเคลื่อนไหว เสียง และการเชื่อมโยงไปยังเว็บไซตต์ ามท่ีกาหนดไว้ ความเป็นมาของออรัสม่าในตา่ งประเทศนั้น ได้กอ่ กาเนิด ขึ้นเมื่อปี ค.ศ. 2011 และได้พัฒนาเติบโตอย่างรวดเร็ว จนกลายเป็นเทคโนโลยีต้นแบบและเป็นผู้นาด้าน Augmented Reality เผยแพรอ่ อกสู่สาธารณะภายใตเ้ วบ็ ไซตช์ อ่ื www.aurasma.com สาหรับการผลิตส่ือเพ่ือการเรียนการสอนนั้น การนาเทคโนโลยีออรัสม่าเข้ามาผสมผสานกับ เอกสารท่ีพิมพ์ในรูปแบบกระดาษ แต่สามารถชมผ่านโทรศัพท์มือถือ หรือแท็บเล็ตปรากฏเห็นเป็นสื่อ มัลติมีเดียประกอบด้วย ภาพเคล่อื นไหว คาบรรยาย โมเดล 3 มิติ รวมถึงการทาทัชสกรีน เพ่ือขยายภาพแบบ เตม็ จอ และเชือ่ มโยงกบั เวบ็ ไซต์ตามทก่ี าหนดได้ คุณสมบัติของออรัสม่า เป็นเทคโนโลยีที่ผสานโลกแห่งความจริงกับโลกความเสมือนท่ีสร้าง ข้ึน ทาให้มนุษย์โลกสามารถเข้าถึงข้อมูลท่ีถูกเข้ารหัสด้วยออรัสม่า (มองด้วยตาเปล่าไม่เห็น) ให้ปรากฏเห็น ภาพผ่านหน้าจออุปกรณ์ประเภทสมาร์ทดีไวท์ (Smart Devices) เช่น โทรศัพท์มือถือ แท็บเล็ต (ท่ีมีกล้อง ด้านหลัง) ได้โดยไม่ต้องใช้มาร์คเกอร์ (Marker) ไม่ต้องเขียนโปรแกรมควบคุมใดๆ ทั้งสิ้น ใช้งานง่าย สามารถ ประยุกตใ์ ช้ออรัสม่าสร้างเป็นส่ือไดห้ ลากหลายเช่น หนังสือพมิ พ์ วารสาร ตารา กล่องบรรจภุ ัณฑ์ สินคา้ เสอ้ื ผ้า ปา้ ยโฆษณา และอ่นื ๆ เป็นตน้ ขน้ั ตอนการใช้งานแอพพลเิ คชัน่ ออรสั มา่ (AURASMA) สาหรับ Android 1. ดาวน์ โหลดและติดตั้งแอพพลเิ คชั่นออรสั ม่า (AURASMA) ไว้ในอุปกรณ์สมาร์ทดไี วซ์ โดยสามารถจะใชง้ านได้ท้งั อุปกรณ์ทมี่ รี ะบบ ปฏิบัตกิ ารไอโอเอส (IOS) และระบบปฏิบตั ิการแอนดรอยด์ (Android) 2. เปิดใชง้ านแอพพลเิ คชัน่ ออรสั ม่า (AURASMA) (ภาพที่ 1) แลว้ ดาเนินการลงทะเบยี นหรือ skip ไปจนเสรจ็ ส้นิ ขน้ั ตอนการแนะนาการใช้ในแอพพลเิ คชน่ั จนอยใู่ น สถานะการพร้อมใชง้ าน (ภาพท่ี 2) ภาพที่ 1 ภาพที่ 2

3. การใช้งานเมนใู นแอพพลเิ คช่ัน แสดงสถานะพร้อมใช้งาน เมนคู วบคุมการใช้งาน ออรัสต่างๆ แถบตวั เลอื ก Explore Account Create Search Standby

4. การสร้างสรรค์งานอ๊อกเมนเต็ดเรียลลิตี้ (Augmented Reality) ด้วยแอพพลิเคช่ันออรัสม่า (Aurasma) เบอื้ งตน้ ผู้ใช้สามารถใชง้ านไดใ้ นสถานะตอ่ ไปนี้ 4.1 สถานะผู้ใช้งาน (User) โดยสามารถใช้แอพพลิเคช่ันออรัสม่าท่ีได้มีการ Follow ออรัส (Auras) หรือช่อง (Channel) ของผู้สร้างงาน (Creator) ท่ีได้สร้างออรัสหรือช่องไว้เรียบร้อยแล้ว มีขั้นตอน การใชง้ านดงั ต่อไปนี้ 1) คลกิ ท่เี มนู 2) คลิกเมนู Search 3) พมิ พ์ Aurasma ทีต่ อ้ งการค้นหา 4) เลอื ก Aurasma ท่ตี ้องการ 3 5) คลกิ Follow แล้วรอให้เปลีย่ นสถานะเปน็ Following 6) คลิกเมนู Standby และพรอ้ มใช้งานต่อไป 2 4 5 6

4.2 สถานะผู้สร้างงาน (Creator) โดยสามารถสร้างสรรค์งานออรัสมา่ ไดท้ งั้ ในลักษณะแบบ สว่ นตวั (Private) ซึง่ จะสามารถใช้ได้เฉพาะสมาร์ทดีไวซ์ของผู้สร้างในการใชง้ านแอพพลิเคช่ันออรสั ม่าเท่านั้น และอีกลักษณะคือแบบเผยแพร่ (Public) โดยในลักษณะแบบเผยแพร่น้ี ผู้สร้างจะสร้างสรรค์งานออรัสม่าจะ สามารถเปิดให้ผใู้ ชอ้ ่ืนๆ (User) สามารถที่จะ Follow ตามออรสั (Auras) หรือช่อง (Channel) ทีไ่ ด้สรา้ งขึน้ ไว้ เรียบรอ้ ยแลว้ ดังมีขั้นตอนตอ่ ไปน้ี 4.2.1 การสร้างงานในลักษณะแบบส่วนตัว (Private) 1) คลิกท่ีเมนู 2) เลือกเมนู Create 3) เลือกแถบ Library (Overlay ที่มอี ย่ใู น server ของแอพพลเิ คช่นั ) หรอื เลือกแถบ Device (Overlay ทีม่ ีอยู่ในอปุ กรณ์สมาร์ทดีไวซ)์ 4) เลอื ก Overlay ทต่ี ้องการ 5) คลิก Select จะปรากฏ Capture Trigger image 6) กาหนด Trigger image แลว้ คลิกสญั ลกั ษณ์รูปกลอ้ งถ่ายภาพ 7) ตอ้ งตรวจสอบใหภ้ าพอยู่ในระดับความชัดเจนอยา่ งน้อยอยใู่ นแถบสีเหลืองและสเี ขยี ว 8) ปรับตาแหน่งของ Overlay แลว้ คลกิ ลกู ศรถดั ไป 9) ต้งั ชื่อออรสั มา่ ทสี่ ร้าง (สังเกตแถบสถานะเป็นแบบ Private) 10) คลิก Finish แล้วจะกลับมาสสู่ ถานะพรอ้ มใช้งาน (Standby) 4 23

5 6 78 9 10

4.2.2 การสรา้ งงานในลักษณะแบบเผยแพร่ (Public) 1) ข้นั ตอนการสร้างงานเหมอื นกบั การสรา้ งออรัสม่าในลกั ษณะแบบ Private (1-8) 2) ตงั้ ช่อื ออรสั มา่ ท่สี ร้าง แล้วเลอื กแถบสถานะเป็นแบบ Public 3) กรณีทผ่ี ู้สรา้ งต้องการสร้างช่อง (Channel) จะต้องคลิกเลอื ก “Yes” ที่ Add to Channel? 4) เลอื่ นขน้ึ ลงเพ่ือเลือกช่อง (Channel) ทต่ี ้องการ หรือสร้างช่องใหม่ 5) ตง้ั ชอ่ื ช่อง (Channel) และสรา้ งรูปภาพของช่อง (Tap to add thumbnail) 6) คลิก Finish แล้วจะกลับมาส่สู ถานะพร้อมใชง้ าน (Standby) 3 4 5 6 Channel Name ออรัสท่สี รา้ งเสรจ็ แล้ว ช่อื ออรัส Standby

เอกสารประกอบการอบรม การใชง้ านแอพพลิเคช่ันออรสั ม่า (AURASMA) ----------------------------------------------------------------------------------------------------------------------------------------------------- ดร.อุบล ทองปญั ญา | คณะวทิ ยาศาสตรก์ ารกีฬา มหาวิทยาลยั เกษตรศาสตร์ วิทยาเขตกาแพงแสน ---------------------------------------------------------------- ออรัสม่า (Aurasma) เป็นแอพพลิเคช่ันสาหรับการสร้างสื่อในโลกแห่งความจริงเสริม (Augmented Reality : AR) เหมาสาหรับการพัฒนาสื่อที่ใช้กับอุปกรณ์ประเภท iPhone, iPad รวมถึง อุปกรณ์คอมพิวเตอร์พกพาต่างๆ ที่ใช้ระบบปฏิบัติการ IOS และ Android คุณสมบัติพิเศษของออรัสม่า จะ เป็นตัวกลางสาหรับการเชื่อมโยงโลกของความจริง และโลกของความเสมือนเข้ามาเสริมด้วยกัน โดยแสดงผล ออกมาในรูปแบบสื่อปฏิสัมพันธ์ท่ีมองเห็น ควบคุมและสัมผัสได้ทางหน้าจอ ท้ังท่ีเป็นภาพน่ิง ภาพเคลื่อนไหว เสียง และการเชื่อมโยงไปยังเว็บไซต์ตามที่กาหนดไว้ ความเป็นมาของออรัสม่าในตา่ งประเทศน้ัน ได้ก่อกาเนิด ขึ้นเม่ือปี ค.ศ. 2011 และได้พัฒนาเติบโตอย่างรวดเร็ว จนกลายเป็นเทคโนโลยีต้นแบบและเป็นผู้นาด้าน Augmented Reality เผยแพรอ่ อกส่สู าธารณะภายใตเ้ วบ็ ไซตช์ ื่อ www.aurasma.com สาหรับการผลิตส่ือเพ่ือการเรียนการสอนน้ัน การนาเทคโนโลยีออรัสม่าเข้ามาผสมผสานกับ เอกสารที่พิมพ์ในรูปแบบกระดาษ แต่สามารถชมผ่านโทรศัพท์มือถือ หรือแท็บเล็ตปรากฏเห็นเป็นสื่อ มัลติมีเดียประกอบด้วย ภาพเคล่อื นไหว คาบรรยาย โมเดล 3 มิติ รวมถึงการทาทัชสกรีน เพ่ือขยายภาพแบบ เตม็ จอ และเชอ่ื มโยงกับเวบ็ ไซตต์ ามที่กาหนดได้ คุณสมบัติของออรัสม่า เป็นเทคโนโลยีท่ีผสานโลกแห่งความจริงกับโลกความเสมือนที่สร้าง ข้ึน ทาให้มนุษย์โลกสามารถเข้าถึงข้อมูลที่ถูกเข้ารหัสด้วยออรัสม่า (มองด้วยตาเปล่าไม่เห็น) ให้ปรากฏเห็น ภาพผ่านหน้าจออุปกรณ์ประเภทสมาร์ทดีไวท์ (Smart Devices) เช่น โทรศัพท์มือถือ แท็บเล็ต (ที่มีกล้อง ด้านหลัง) ได้โดยไม่ต้องใช้มาร์คเกอร์ (Marker) ไม่ต้องเขียนโปรแกรมควบคุมใดๆ ทั้งสิ้น ใช้งานง่าย สามารถ ประยุกต์ใช้ออรัสม่าสร้างเปน็ สื่อไดห้ ลากหลายเช่น หนงั สือพมิ พ์ วารสาร ตารา กล่องบรรจภุ ัณฑ์ สนิ ค้า เสอื้ ผ้า ป้ายโฆษณา และอืน่ ๆ เปน็ ต้น ข้นั ตอนการใชง้ านแอพพลเิ คชั่นออรัสมา่ (AURASMA) สาหรับ IOS 1. ดาว์นโหลดและติดต้งั แอพพลเิ คชัน่ ออรัสม่า (AURASMA) ไว้ในอุปกรณส์ มาร์ทดไี วซ์ โดยสามารถจะใช้งานได้ทงั้ อปุ กรณ์ที่มีระบบ ปฏิบัติการไอโอเอส (IOS) และระบบปฏบิ ัติการแอนดรอยด์ (Android) 2. เปิดใชง้ านแอพพลิเคช่นั ออรสั ม่า (AURASMA) (ภาพที่ 1) แล้วดาเนนิ การลงทะเบยี นหรือ skip ไปจนเสร็จส้นิ ขน้ั ตอนการแนะนาการใชใ้ นแอพพลเิ คชนั่ จนอยู่ใน สถานะพร้อมใช้งาน (ภาพท่ี 2) ภาพท่ี 1 ภาพที่ 2

3. การใชง้ านเมนูในแอพพลิเคชนั่ แสดงสถานะพรอ้ มใช้งาน คน้ หา AURAS / Search Account Create ออรัสต่างๆ Search Auras Standby

4. การสร้างสรรค์งานอ๊อกเมนเต็ดเรียลลิต้ี (Augmented Reality) ด้วยแอพพลิเคชั่นออรัสม่า (Aurasma) เบอ้ื งตน้ ผู้ใช้สามารถใชง้ านไดใ้ นสถานะตอ่ ไปนี้ 4.1 สถานะผู้ใช้งาน (User) โดยสามารถใช้แอพพลิเคชั่นออรัสม่าท่ีได้มีการ Follow ออรัส (Auras) หรือช่อง (Channel) ของผู้สร้างงาน (Creator) ท่ีได้สร้างออรัสหรือช่องไว้เรียบร้อยแล้ว มีขั้นตอน การใช้งานดงั ตอ่ ไปน้ี 1) คลิกทีเ่ มนู 2 2) คลิกเมนู Search 3) พิมพ์ชอ่ื Auras ท่ีต้องการคน้ หา แลว้ กด search 4) คลกิ เลือก Auras ท่ีตอ้ งการ 5) คลิก Follow แล้วรอให้เปล่ยี นสถานะเปน็ Following 6) กด Back เพอ่ื กลบั มาสู่เมนู Standby และ พร้อมใช้งานต่อไป 4 5 6

4.2 สถานะผสู้ ร้างงาน (Creator) โดยสามารถสร้างสรรค์งานออรัสมา่ ได้ท้ังในลักษณะแบบ ส่วนตัว (Private) ซง่ึ จะสามารถใช้ได้เฉพาะสมาร์ทดีไวซข์ องผู้สร้างในการใช้งานแอพพลิเคชั่นออรัสม่าเท่านั้น และอีกลักษณะคือแบบเผยแพร่ (Public) โดยในลักษณะแบบเผยแพร่นี้ ผู้สร้างจะสร้างสรรค์งานออรัสม่าจะ สามารถเปิดให้ผู้ใชอ้ ่นื ๆ (User) สามารถทีจ่ ะ Follow ตามออรสั (Auras) หรือช่อง (Channel) ทีไ่ ดส้ ร้างขึ้นไว้ เรยี บรอ้ ยแลว้ ดังมขี ้นั ตอนต่อไปนี้ 4.2.1 การสร้างงานในลักษณะแบบสว่ นตัว (Private) 1) คลิกทีเ่ มนูหนา้ Search หรือ Discover Auras 2) คลิกเลือกเมนู Create (เคร่อื งหมาย +) 3) กาหนด Take a photo ไปยัง Trigger image ท่ีตอ้ งการโดยต้องตรวจสอบให้ความชดั เจนของ ภาพ Trigger image ให้อย่ใู นระดับแถบสเี หลอื ง (พอใช)้ และแถบสีเขยี ว (ด)ี 4) เขา้ สู่หน้าต่าง Choose An Overlay แล้วเลือกแถบ Library (Overlay ทีม่ ีอย่ใู น server ของ แอพพลิเคช่ัน) หรอื เลือกแถบ Device (Overlay ท่ีมอี ยู่ในอุปกรณ์สมาร์ทดีไวซ)์ 5) เลอื ก Overlay ที่ต้องการ 6) คลกิ Select จะปรากฏหน้าต่าง Position Overlay แลว้ ปรับตาแหนง่ และมุมมองการปรากฏของ Overlay ตามความตอ้ งการ 7) ตัง้ ชอ่ื ออรัส (Auras) ท่ีสรา้ ง (สงั เกตแถบสถานะเปน็ แบบ My Private Auras) 8) คลิก Submit แลว้ จะกลับมาสสู่ ถานะพร้อมใชง้ าน (Standby) 2 3

4 5 78 6

4.2.2 การสร้างงานในลักษณะแบบเผยแพร่ (Public) 1) ขั้นตอนการสร้างงานเหมอื นกบั การสรา้ งออรสั (Auras) ในลกั ษณะแบบ Private (1-8) 2) ตงั้ ช่อื ออรสั (Auras) ทสี่ รา้ ง แล้วเลือกแถบสถานะเป็นแบบ Public หรอื เปลย่ี นออรสั (Auras) จาก Private ไปสู่ Public 3) คลกิ เมนู Profile แล้วเข้าส่กู ารเลือก Auras ในแทบ็ My Auras 4) คลิก Auras ที่ต้องการแลว้ จะปรากฏหนา้ ต่างของ Auras นั้น 5) คลกิ ทช่ี ื่อของ Channel จะเข้าสกู่ ารจดั การใน Channel ทเี่ ลอื ก 6) คลิกเลือกแท็บ Private เพอ่ื ให้เปลี่ยนเปน็ Public หลงั จากนนั้ กด Back ไปสหู่ นา้ ตา่ งพรอ้ มใช้งาน 3 4 6 5