คู่มือ-Zappar

คมู อื การใชโปรแกรม Zappar (AR Code) จดั ทําโดย นายเฉลมิ เกยี รติ ดสี ม หัวหนา ฝายเทคโนโลยสี ารสนเทศ

คูมอื Zappar 1. เทคโนโลยีเสมอื นจรงิ (Augmented Reality Technology : AR) เทคโนโลยีเสมือนจริง (Augmented Reality : AR) เปนประเภทหนึ่งของเทคโนโลยีความจริง เสมอื นทม่ี กี ารนาํ ระบบความจรงิ เสมือนมาผนวกกบั เทคโนโลยภี าพเพ่อื สรางสิง่ ทเ่ี สมอื นจรงิ ใหก ับผใู ชและเปน นวัตกรรมหรือเทคโนโลยที ่ีมมี าตั้งแต ปค.ศ. 2004 จดั เปนแขนงหนึ่งของงานวิจัยดานวทิ ยาการคอมพิวเตอร วาดว ยการเพ่มิ ภาพเสมือนของโมเดลสามมติ ทิ ี่สรา งจากคอมพิวเตอรลงไปในภาพที่ ถา ยมาจากกลองวดิ โี อเว็บ แคมหรอื กลองในโทรศัพทมอื ถอื แบบเฟรมตอ เฟรมดว ยเทคนิคทางดา นคอมพวิ เตอรก ราฟก ปจจบุ ันเทคโนโลยี เสมอื นจริงถกู นาํ มาประยุกตใ ชกับธุรกิจตางๆ ไมวาจะเปนดานอุตสาหกรรม การแพทยการตลาด การบันเทิง การสื่อสาร โดยใชเทคโนโลยีความจริงเสมือนมาผนวกเขากับเทคโนโลยีภาพผานซอฟตแวรและอุปกรณ เชื่อมตอตางๆ และแสดงผลผานหนาจอ คอมพิวเตอรหรือบนหนาจอโทรศัพทมือถือ ทําใหผูใชสามารถนํา เทคโนโลยีเสมือนจริงมาใชกับการทํางานแบบออนไลนท่ีสามารถโตตอบไดทันทีระหวางผูใชกับสินคาหรือ อุปกรณตอเชื่อมแบบเสมือนจริงของโมเดลแบบสามมิติท่ีมีมุมมองถึง 360 องศา โดยผูใชไมจําเปนตองไป สถานท่จี ริง ซง่ึ ถือวาการพฒั นาเทคโนโลยที ่ผี สานเอาโลกแหง ความเปน จรงิ และความเสมอื นจรงิ เขาดวยกันผา น ซอฟตแวรแ ละอุปกรณเชอ่ื มตอ ตางๆ โดยสามารถสรา งภาพออกมาได ทั้งภาพน่ิง ภาพเคล่ือนไหว และภาพ สามมิติ ซึง่ สามารถนําไปประยกุ ตใชไดใ นทุกๆวงการ โดยมอี ปุ กรณใ นการเชื่อมตอ เพื่อทีจ่ ะสามารถเขา ชมได องคประกอบของเทคโนโลยีเสมือนจรงิ 1.AR Code หรือตัว Marker ใชใ นการกาํ หนดตาํ แหนงของวัตถุ 2.Eye หรือ กลองวิดีโอ กลองเว็บแคม กลองโทรศัพทมือถือ หรือ ตัวจับSensor อื่นๆ ใชมอง ตําแหนงของ AR Code แลว สงขอมลู เขา AR Engine 3.AR Engine เปนตัวสงขอมูลทอี่ านไดผานเขา ซอฟตแ วรหรือสวนประมวลผล เพ่ือแสดงเปนภาพ ตอ ไป 4.Display หรือ จอแสดงผล เพื่อใหเห็นผลขอมูลที่ AR Engine สงมาใหในรูปแบบของภาพ หรือ วีดีโอ 2. ระบบเสมือนจรงิ บนโทรศัพทมอื ถอื ป จ จุ บั น นี้ ถื อ ได ว า โ ท ร ศั พ ท มื อ ถื อ มี บ ท บ า ท ใ น ชี วิ ต ป ร ะ จํ า วั น ข อ ง เร า เป น อ ย า ง ม า ก ซ่ึ ง ตั ว โทรศัพทม อื ถือเปน สงิ่ อํานวยความสะดวกผา นแอพลเิ คช่นั ก็จะสามารถเขาถงึ ขอมลู ทสี่ ามารถดาวนโ หลดมาใช งานได ระบบเสมือนจริงบนโทรศัพทมือถือจัดเปนเทคโนโลยีเสมือนจริงที่ใชงานบนโทรศัพทมือถือ ทําให หนาจอของโทรศพั ทม อื ถอื แสดงขอ มูลตา งๆ ทไี่ ดรบั จากเครือขา ยอินเทอรเ นต็

แอพพลิเคช่นั นับไดวาเทคโนโลยีเสมือนจริงนั่นไดเขามามีบทบาทในชีวิตประจําวันของเรามากข้ึนซ่ึงมี แอพพลิเคชั่นที่นาสนใจในหลายตัวท่ีนาสนใจในการศึกษาและนําไปประยุกตไปใชงานใหเหมาะสมตอการ ทาํ งานของเรามากยงิ่ ขึ้น 1. Zappar เปนวิธีการใหมที่นามองโลกรอบๆ ตัวคุณผานอุปกรณของคุณจะคนพบและแบงปน เนื้อหาใหมจาก ภาพยนตร, เพลง, เกมและวิธกี ารทางมากขน้ึ มนั ก็เหมอื นกับการเปดหนาตางไปอกี มติ ิสิ่งทใ่ี น ชีวติ ประจําวนั สามารถเปลี่ยนเพอื่ ปลดล็อควดิ ีโอเกมหรอื ตวั อกั ษร 3D แมจะเลน กับในโลกแหงความจริง สงิ่ ท่ี คุณตองทาํ คือดาวนโ หลด app และจุดกลองทผี่ ลติ ภัณฑพ ลงั งาน Zappar และภาพจะทําใหพ วกเขามาในการ ดาํ รงชวี ิต ภาพท่ี 1 Zappar ท่ีมา : http://sarahsafiyyahusna.blogspot.com/2014/11/toughest-week.html 2. Aurasma เปนท้ังเครื่องมือออนไลนและฟรีโมบายแอพ (Free Mobile Apps) บน Androids และ iOS เพ่ือสรางสรรคผลงาน AR หรือ Augmented Reality เทคโนโลยีเสมือนจริง บนพ้ืนฐานการซอน วัตถโุ ดยเฉพาะวตั ถุภาพเคลื่อนไหวบนวตั ถภุ าพน่ิง ทาํ ใหภ าพนิง่ แปลงสภาพและนําเสนอไดอยา งนา สนใจ เม่ือ เรียกดูผาน Apps เฉพาะสามารถประยุกตการใชงานไดหลากหลายลักษณะ เชน เอกสารเผยแพร เอกสาร ประชาสัมพันธ นทิ รรศการ ภาพที่ 2 Aurasma ท่มี า : https://pronpimonblog.wordpress.com/2014/06/03 3. Junaio เปน เบราวเซอรท ่ีออกแบบมาสําหรับ 3G และ 4G บนอุปกรณม ือถือพัฒนาโดย Munich - Based Company metaio GmbH สามารถใชไดท้ัง Android และ IOS วิธีการใชงาน Junaio

เพยี งนํากลองไปสองยังสง่ิ ของ เชน CD, Magazine, หนงั สือพมิ พเพอ่ื ดูวัตถุจําลองแบบ 3 มิติลอยข้นึ มา หรือ การนํา AR มาประยุกตใชแมอ ยภู ายในอาคารท่ีมขี อ จาํ กัดในการระบตุ ําแหนงดว ย GPS เปนตน ภาพท่ี 3 Junaio ท่มี า : http://imagine.gatech.edu/node/509 3. ขัน้ ตอนการสมคั รสมาชกิ Zappar 1. คลกิ ที่ Register เพื่อเขาสูหนา สมคั รสมาชิก ภาพท่ี 4 หนา เขาสรู ะบบ 2. กรอกรายละเอียดขอมูลการสมัครเปนสมาชิก และสามารถสมัครสมาชิกโดยผานบัญชี Facebook หรือ บญั ชี Google

ภาพท่ี 5 หนาสมัครสมาชิก 3. เขาไปยนื ยันการสมัครสมาชิกใน e-mail ที่ใชในการสมคั ร โดยคลิก CONFIRM YOUR EMAIL ADDRESS ภาพท่ี 6 ยนื ยนั การสมคั รสมาชิก

4. ข้นั การสรา ง AR ดวย Zappar 1. เขา สรู ะบบ แลว เลือกประเภทของบญั ชีผูใช บญั ชีผูใชม ี 3 ประเภท ไดแก 1) Personal คอื บญั ชีท่สี ามารถใชงานไดฟ รี แตสรา งผลงานได 1 ผลงาน 2) Business คือ บญั ชีสําหรับองคกร มคี า ใชจายในการใชง าน 3) Education คอื บัญชีทีส่ ามารถใชงาน 30 วัน ตอหน่ึงบัญชี แตสามารถสรางผลงานไดไมจ ํากัด ใน กรณีน้แี นะนาํ ใหใ ชแบบ Education ภาพที่ 7 หนา เลอื กประเภทบญั ชีการใชงาน 2. กรอกขอ มลู ช่อื ผใู ชเ บอรโ ทรศัพท ประเทศ และชื่อสถาบนั ภาพท่ี 8 หนากรอกขอ มลู เกย่ี วกับผใู ชแ ละสถาบัน

3. การสรา งสรรคผ ลงาน คลกิ เลอื ก MAKE A NEW ZAPCODE ภาพที่ 9 การสรางสรรคผ ลงาน ใสชื่อผลงานทจ่ี ะสรางสรรค และเลอื กรปู แบบ Logo แบบใดกไ็ ด ภาพที่ 10 การใสชือ่ ผลงานและรปู แบบLogo

4. เลือกเคร่ืองมือทตี่ อ งการใชต ามความเหมาะสมของงาน โดยมที ง้ั หมด 3 เคร่อื งมือ 1) Widgets 2) Designer 3) Studio ภาพที่ 11 เคร่อื งมือในการสรรคผ ลงาน - เมอ่ื เลอื กเครอื่ งมอื แลว ใหคลกิ เลือก ผลงานที่ไดส รางไว แลว คลกิ Edit Zapcode Content ภาพที่ 12 เมนูการสรางผลงาน

4.1 Widgets ผใู ชส ามารถสรางสรรคเ น้อื หาไดโดยมีแบบฟอรมกําหนดให ซง่ึ สามารถใชง านไดงาย และเหมาะสําหรับผใู ชท่ไี มม ีพนื้ ฐานทางคอมพวิ เตอร แตไ มส ามารถแกไขรปู แบบการนาํ เสนอเนื้อหาได พื้นที่ทํางาน เคร่ืองมอื ภาพท่ี 13 หนา การทาํ งานแบบ Widgets การสรางเนื้อหาสามารถใสเนอื้ หาตามเครอื่ งมือที่มอี ยู เชน ใสภ าพ ใสอ ลั บม้ั ภาพ ใสว ดิ โี อ เปน ตน 4.1.1 ใสร ปู ภาพ คลิกที่ IMAGE > UPLOAD IMAGE > เลอื กรูปภาพ > OPEN ดังภาพ 14- 16 ภาพท่ี 14 ใสร ปู ภาพ

4.1.2 การใสอ ลั บ้ลั รูปภาพ คลิกที่ PHOTO ALBUM > UPLOAD IMAGE > เลือกรปู ภาพ > USE SELECT IMAGE ดังภาพ 15 ภาพท่ี 15 การอปั โหลดรปู ภาพ 4.1.3 การใสวิดโี อ สามารถใสไ ดจ าก 3 แหลง คอื อปั โหลดจากเครอื่ ง นาํ URL จาก YouTube มาใส และ URL จาก VIMEO อัปโหลดจากเครื่อง URL จาก YouTube URL จาก VIMEO ภาพท่ี 16 การใสวดิ ีโอ - Upload วิดีโอจากภายในเครอ่ื งคอมพิวเตอร คลกิ Upload > Upload Video > เลอื กวดิ โี อท่ี ตอ งการ > OPEN - YouTube วดิ โี อจาก YouTube คลกิ YouTube > นํา URL มาใส > USE THIS VIDEO - Vimeo วิดโี อจาก Vimeo คลกิ Vimeo > นาํ URL มาใส > USE THIS VIDEO

4.1.4 ใสเ สยี ง คลิกที่ SOUND > UPLOAD SOUND > เลอื กไฟลเสียง > OPEN ภาพท่ี 17 การใสเ สียง 4.1.5 ใสขอมลู การตดิ ตอ คลกิ CONTACT > ใสขอ มลู > CREATE CONTACT ภาพที่ 18 การใสขอมูลการตดิ ตอ

4.1.6 การใสล งิ คเ วบ็ ไซต คลกิ WEB LINK > ใสล งิ คเว็บไซต > CREATE WEB LINK 4.1.7 ขน้ั ตอนการ PREVIEW คลิกเลอื ก PUBLISH> จากน้ันกด PREVIEW > ใชอ ุปกรณม อื ถอื สแกนทบ่ี ารโ คด ภาพท่ี 19 ปุม PULISH และ PREVIEW ภาพท่ี 20 Zapcode เพอ่ื ใชแ อพพลเิ คช่ัน Zappar สแกน

ภาพท่ี 21 การใชแ้ อพ Zappar ในการดู 4.2 Designer ผใู ชสามารสรา งสรรคผลงานไดตามความตรงการ ซ่งึ ผูใชสามารถจดั รปู แบบของ การ นําเสนอผลงานไดต ามความตองการของผูใชง าน เพม่ิ หนา จดั ตําแหนง ของเนื้อหา พ้นื ทท่ี าํ งาน เครอื่ งมือ ภาพที่ 22 การทาํ งานแบบ Designer

4.2.1 การเพิม่ Scene คอื การเพ่ิมหนา ของเนอ้ื หา โดยคลิกท่ี หลงั Scene 1 ภาพที่ 23 เพิม่ Scene 4.2.2 ใสร ปู ภาพ คลกิ ที่ IMAGE > UPLOAD IMAGE > เลอื กรปู ภาพ > OPEN ดังภาพ 14- 16 ภาพที่ 24 ใสรปู ภาพ 4.2.3 การใสอ ลั บล้ั รูปภาพ คลกิ ที่ PHOTO ALBUM > UPLOAD IMAGE > เลอื กรปู ภาพ > USE SELECT IMAGE ภาพท่ี 25 การอปั โหลดรปู ภาพ

4.2.4 การใสวดิ ีโอ สามารถใสไดจ าก 3 แหลง คือ อปั โหลดจากเครือ่ ง นาํ URL จาก YouTube มาใส และ URL จาก VIMEO อปั โหลดจากเคร่อื ง URL จาก YouTube URL จาก VIMEO ภาพท่ี 26 การใสวิดโี อ - Upload วิดีโอจากภายในเครอ่ื งคอมพวิ เตอร คลกิ Upload > Upload Video > เลอื ก วดิ โี อที่ตอ งการ > OPEN - YouTube วิดโี อจาก YouTube คลกิ YouTube > นํา URL มาใส > USE THIS VIDEO - Vimeo วดิ ีโอจาก Vimeo คลิก Vimeo > นาํ URL มาใส > USE THIS VIDEO 4.2.5 ใสเ สยี ง คลกิ ท่ี SOUND > UPLOAD SOUND > เลือกไฟลเสยี ง > OPEN ภาพที่ 27 การใสเ สยี ง

4.2.6 การใสข อความ คลกิ TEXT แลว จัดตําแหนง ขอความ ใสขอความในชอ ง Text ดานลา ง ภาพที่ 28 การใสขอความ นอกจากนย้ี งั สามารถเพม่ิ คุณสมบัติ ใหกบั ขอความไดโดยไปที่สว นของ Action สามารถเพ่มิ คณุ สมบัตติ า งๆได เชน เปล่ียนหนา ลงิ คเ ว็บไซต อปั โหลดไฟล เปนตน ภาพท่ี 29 สวนของ Action

4.2.7 การใสป ุม คลิก BUTTON เปลีย่ นขอความบนปมุ ในชอง Text ดา นลาง สามารถเพ่มิ คณุ สมบตั ิท่ี Action ได ภาพท่ี 30 การใสป ุม 4.2.8 ใสข อ มลู การติดตอ คลกิ CONTACT > ใสขอมลู > CREATE CONTACT ภาพท่ี 31 การใสขอมูลการติดตอ

4.2.9 การใสล งิ คเ ว็บไซต คลิก WEB LINK > ใสลงิ คเว็บไซต > CREATE WEB LINK 4.2.10 ขน้ั ตอนการ PREVIEW คลิกเลือก PUBLISH> จากนน้ั กด PREVIEW > ใชอุปกรณม อื ถอื สแกนทบ่ี ารโคด ภาพที่ 32 ปมุ PULISH และ PREVIEW ภาพท่ี 33 Zapcode เพือ่ ใชแอพพลเิ คชั่น Zappar สแกน

ภาพท่ี 34 การใชแ อพ Zappar ในการดู 4.3 Studio เปน เคร่ืองทีเ่ หมาะสาํ หรับ Programmer ซึง่ ตอ งเขียนโคด ในการสรางสรรค ผลงานเองท้งั หมด 5. หลังจากใสเนื้อหาเสร็จ ใหคลิกท่ี PUBLISH และคลิก PREVIWE นํา Zapcode ไปสแกนกับ สมารทโฟนเพือ่ ดเู นื้อหาที่ไดสรางไวใ นสมารทโฟน ภาพที่ 35 Zapcode ทีใ่ ชส ามรทโฟนในการแสกน

6. สามารถดาวนโ หลด Zapcode นาํ ไปแนบกบั ส่งิ พิมพหรอื ใสไ วใ นหนา เวบ็ เพอ่ื แสกน Zapcode ใหดูเนือ้ หาในสมารทโฟนไดผ า นแอพลเิ คชัน Zappar ซง่ึ มที งั้ IOS และ ANDROID โดยการคลิกDOWNLOAD และสามารถเลือกรูปแบบของ Zapcode ไดห ลากหลายรปู แบบ ภาพท่ี 36 สวนดาวนโหลด Zapcode

5. เคร่อื งมอื ท่ใี ชในการสรา งผลงาน IMAGE อปั โหลดรูปภาพ PHOTOALBUM อปั โหลดรปุ ภาพเปน อลั บม้ั VIDEO อปั โหลดวดิ ีโอ หรอื ใส URL จาก YouTube ได SOUND อพั โหลดเสียง CONTACT ขอมลู การติดตอ CALENDAR ตารางวนั เวลากจิ กรรม WEB ลิงคเชอื่ มโยงไปยงั เวบ็ ไซต BUTTON สรางปมุ สามารถกาํ หนดคณุ สมบัติการทํางานได TEXT กลองขอความ สามารถกาํ หนดคุณสมบตั ิการทาํ งานได BACKGROUND SOUND อปั โหลดเสยี งประกอบพน้ื หลงั PUBLISH เผยแพรผ ลงาน และ PREVIEW ดูตวั อยางผลงาน เพิ่ม Scene เพอ่ื หนาในการนําเสนอ

Properties คอื สวนทอ่ี ธิบายรายละเอยี ด Actions คือ เคร่ืองมอื ทีใ่ ชก าํ หนดคณุ สมบตั กิ ารการทํางาน เชน เปล่ยี นหนา ลงิ ค ไปยังเวบ็ ไซต Transitions คอื กําหนดเวลาการแสดงผล Appearance คือ เปน รูปแบบกรอบ

6. ตวั อยา ง AR แบบ Widgets การสรา ง AR แบบ Widgets สามารถใสข อ มลู ไดห ลากหลายตามเครื่องมือที่มีให ภาพที่ 37 หนาการทาํ งานแบบ Widgets ภาพที่ 38 ภาพ Zapcode ใชแอพพลิเคช่นั Zappar ในการแสกน

อางอิง พนิดา ตันสริ .ิ (2553). โลกเสมอื นผสานโลกจริง Augmented Reality. 9 มนี าคม 2560. http://www.bu.ac.th/knowledgecenter/executive_journal/30_2/. ไพฑรู ย ศรีฟา. (2556). Aurasma คอื อะไร. 9 มนี าคม 2560. https://www.slideshare.net/iqthai/augment-42033876. มสุ ตอฟา มเู ด็ง. (2558). หนงั สอื เสรมิ บทเรียนดว ยเทคโนโลยีเสมอื นจรงิ . 9 มนี าคม 2560. http://mustorfa.blogspot.com/p/blog-page_19.html Boonlert Aroonpiboon. (2556). เทคโนโลยเี สมอื นจรงิ AR ดวย Aurasma. 9 มนี าคม 2560. http://www.thailibrary.in.th/2013/11/26/aurasma/ Nipatanoy. (2556). องคป ระกอบของเทคโนโลยเี สมอื นจรงิ . 9 มีนาคม 2560. https://nipatanoy.wordpress.com Pantich Production. (2556). Zappar. 9 มีนาคม 2560. http://th.4androidapps.net/ tag/applications/zappar.