Ar in active learning
1 like554 views
โครงการประชุมวิชาการ“เภสัชศาสตร์ศึกษาแห่งชาติ ประจำาปี 2560” (Thai Pharmacy Education National Conference 2017)
Ar in active learning
- 1. ผผศศ..ดดรร..สสุุรรพพลล บบุุญญลลืืออ ภภาาคคววิิชชาาเเททคคโโนนโโลลยยีีแแลละะสสืื่่ออสสาารรกกาารรศศึึกกษษาา คคณณะะคครรุุศศาาสสตตรร์์ออุุตตสสาาหหกกรรรรมมแแลละะเเททคคโโนนโโลลยยีี มมหหาาววิิททยยาาลลััยยเเททคคโโนนโโลลยยีีพพรระะจจออมมเเกกลล้้าาธธนนบบุุรรีี โโคครรงงกกาารรปปรระะชชุุมมววิิชชาากกาารร““เเภภสสััชชศศาาสสตตรร์์ศศึึกกษษาาแแหห่่งงชชาาตติิ ปปรระะจจํําาปปีี 22556600”” ((TThhaaii PPhhaarrmmaaccyy EEdduuccaattiioonn NNaattiioonnaall CCoonnffeerreennccee 22001177)) คคณณะะเเภภสสััชชศศาาสสตตรร์์ จจุุฬฬาาลลงงกกรรณณ์์มมหหาาววิิททยยาาลลััยย ววัันนศศุุกกรร์์ททีี่่ 3300 มมิิถถุุนนาายยนน 22556600 AR in Active Learning
- 2. WWhhaatt IIss AAuuggmmeenntteedd RReeaalliittyy?? AAuuggmmeenntteedd rreeaalliittyy ((AARR)) enhances what we see via smart glasses or smart phones which overlay 3D, contextually aware graphics onto our view of the real-world environment. Milgram, Takemura, Utsumi, and Kishino’s (1994) reality-virtuality continuum
- 3. AR กับ QR หรือ VR • เทคโนโลยี VR • Virtual reality เป็นการใช้ Gyroscope เพื่อ เปลี่ยนภาพที่เห็นให้มีการเคลื่อนที่ ตามพิกัดการเคลื่อนที่ • เทคโนโลยี AR • Augmented reality • เป็นการซ้อนภาพด้วย ข้อมูลจากอินเทอร์เน็ต • เทคโนโลยี QR • QQuuiicckk RReessppoonnssee CCooddee เป็นการใช้ Image Processing เพื่อ เปลี่ยนจากภาพเป็นข้อมูลเช่น การเชื่อมโยง ลิงก์ • การอ่านเป็นตัวอักษร หรือtext VR is nice, but augmented reality is the future .Tim Cook
- 4. AR คืออะไร u เทคโนโลยีใหม่ที่พัฒนารูปแบบ Human- Machine Interface ที่ อาศัยเทคโนโลยี คอมพิวเตอร์ และระบบความจริงเสริม (Virtual Reality) โดยการนาเอาภาพกราฟิก ของคอมพิวเตอร์ทั้งในรูปแบบ ที่เป็น 3d 2d หรือ Video มาซ้อนทับเข้ากับฉากหลัง ซึ่งเป็นภาพ ในเวลาจริง (Real time) u นั่นคือ การผสานโลกของความจริง กับ โลกของอินเทอร์เน็ตมาซ้อนในเวลาเดียวกัน • ARหรือย่อมาจากคําว่า ่AugmentedReality หรือ “อ็อกเมนทเ์ท็ตเรียลลิต้ี ” • เป็นการนาเอาภาพกราฟิกของคอมพิวเตอร์ ในรูปแบบที่เป็น สื่อ3มิติและ 2 มิติหรือ หรือ วีดิทัศน์ มาซ้อนเข้ากับภาพหรือ ซ่ึง เป็นภาพในเวลาจริง (Real time)
- 6. AR มี3 ประเภท Marker Based uเป็น AR ในยุคแรกๆ ที่ใช้ภาพตารางเป็นตัวเชื่อมโยงไปยังข้อมูลที่ต้องการ uZappar ก็คล้ายๆกัน Pliker
- 7. AR ประเภท Location Based • Layar Pokamon Game
- 8. AR ประเภท Object Based u Location Based •Aurasma,Pixlive •Buppar,Vidnoti •Snangin,Unity3D+Vuforia, •Kudan,Augment
- 9. AR มีการทํางานอย่างไร u หลักการทางานแบ่งเป็น 4 ส่วน คือ u 1. AR-Marker คือส่วนที่กาหนดมุมมอง และตําแหน่งในการวางวัตถุเสมือนให้กับ คอมพิวเตอร์ u 2. กล้อง Webcam หรือกล้องแสดงภาพจริง ทําการจัดภาพเพื่อมาสร้างเป็น AR-Marker และส่งไปยัง โปรแกรมประมวลผล u 3. เครื่องคอมพิวเตอร์ซ่ึงบรรจุโปรแกรมที่ทําการวิเคราะห์หาหรืออ่าน AR-Marker จากนั้นไปนําข้อมูลที่ได้เก็บไว้ (Overlay) มาแสดง
- 10. หลักการของเทคโนโลยีเสมือนจริง ประกอบด้วย u 1. ตัว Marker (หรือที่เรียกว่า Markup) u 2. กล้องวิดีโอ กล้องเว็บแคม กล้องโทรศัพท์มือถือ หรือตัวจับ Sensor อื่น ๆ u 3. ส่วนแสดงผล อาจเป็นจอภาพคอมพิวเตอร์ หรือ จอภาพโทรศัพท์มือถือ หรืออื่น ๆ u 4. ซอฟต์แวร์หรือส่วนประมวลผลเพื่อสร้างภาพหรือ วัตถุแบบสามมิติ วิเคราะห์ภาพ (Image Analysis) คํานวณตําแหน่งเชิงสามมิติ (Pose Estimation) สร้างภาพจากโมเดลสามมิติ (3D Rendering) ฐานข้อมูลสามมิติ (3D Model) ฐานข้อมูล Marker (Marker Database)
- 11. ววิิธธีีกกาารรออ่่าานนภภาาพพ AAuurraassmmaa u 1. Scan QR Code ตามที่กําหนดไว้ โดยหลังจากนั้นเครื่องจะไปบังคับเปิด App ที่ชื่อ Aurasma และเปิดกล้องอัตโนมัติ u 2. Scan ภาพที่กําหนดไว้ ด้วย App Aurasma จากนั้นระบบการอ่านภาพและเชื่อมโยงข้อมูลโดยการดาวน์โหลดแบบ ออนไลน์จากเซิร์ฟเวอร์ จะปรากฏให้เห็นรูปวงคลื่นขึ้นมา u 3. ถือเครื่อง Scan จนกระทั่งเห็นเป็นภาพเคลื่อนไหวทั้งหมด u * หมายเหตุ การชมแบบออนไลน์ต้องเชื่อมต่อ Smartphone หรือ Tablet กับเครือข่ายอินเทอร์เน็ตตลอดเวลา และในการ ชมครั้งต่อๆ ไป เราแค่ Scan ภาพด้วยแอพพลิเคชั่น Aurasma ก็พอ โดยไม่จํา เป็นต้อง Scan QR Code อีก u ก่อนที่จะใช้งานแอปพลิเคชันออรัสมา ควรมีการเตรียมพร้อม ดังนี้ u 1. Smartphone หรือ Tablet (ใช้ได้ทั้งระบบปฏิบัติการ iOS และ Android) u 2. ติดตั้งแอปพลิเคชัน สําหรับอ่าน QR Code และแอปพลิเคชัน สําหรับอ่านภาพ (แอปพลิเคชันสําหรับอ่าน QR Code แนะนําให้ติดตั้ง i-nigma ส่วนแอปพลิเคชันสําหรับอ่านภาพให้ติดตั้ง Aurasma) u 3. เครือข่ายอินเทอร์เน็ต (Wifi หรือ 3-4G)
- 12. สื่อของAR หรือ AR-Object คือสิ่งที่จะนํามาซ้อน ภาพนิ่ง jpg,png หรือ gif • วีดิทัศน์ • flv,mp4 • ภาพสามมิติ • 3D model • 3D animation • Interact • ปุ่มกด • การเชื่อมโยง
- 13. ทําไมต้องใช้ AR uสร้างความแปลกใหม่ ให้น่าสนใจ uสร้างปฎิสัมพันธ์กับสื่อ uส่งเสริมการเรียนรู้ที่มากขึ้น เพิ่มขึ้น uเสริมข้อมูลให้กับสื่อที่หลากหลาย uเกิดความจริงเสมือนขึ้น
- 14. กกาารรสสรร้้าางงสสืื่่ออเเททคคโโนนโโลลยยีีผผสสาานนคคววาามมจจรริิงง ดด้้ววยย ออออรรััสสมมาา สสตตููดดิิโโออ u การที่จะสร้างสื่อเทคโนโลยีผสานความจริง ด้วย อรัสมา สตูดิโอ (Aurasma studio) มี รายละเอียด ดังนี้ u 11.. สส่่ววนนปปรระะกกออบบททีี่่จจํําาเเปป็็นนใในนกกาารรสสรร้้าางงสสืื่่ออดด้้ววยยแแออปปพพลลิิเเคคชชัันนออออรรััสสมมาา u 1. Trigger หมายถึง รูปภาพในหนังสือ หรือสิ่งพิมพ์ (โลกจริง) ซึ่งทําหน้าที่เป็นเหมือน บาร์โค๊ด เพื่อเชื่อมโยงไปยังแหล่งข้อมูลปลายทาง u 2. Overlays หมายถึง ข้อมูล ภาพนิ่ง คลิปวิดีโอ หรือ ภาพ 3 มิติ ที่จะดึงมาแสดงผล (โลก เสมือน) u 3. Auras หมายถึง การจับคู่เพื่อเชื่อมโยงระหว่าง Trigger กับ Overlays หากไม่มีการจับคู่ โปรแกรมจะไม่สามารถระบุได้ว่า รูปที่เป็น (Trigger) จะดึงไฟล์ (Overlays) ใดมาแสดง
- 15. กกาารรสสรร้้าางง TTrriiggggeerr iimmaaggeess u ในการทํางานหรือสร้างชิ้นงานจะ เริ่มต้นที่ Trigger ซึ่งออรัสมาใช้ภาพ และเทคโนโลยีการจดจําวัตถุเรียกว่า Trigger ภาพ Trigger จะต้องเป็นไฟล์ JPAG หรือ PNG มีขนาดน้อยกว่า 500,000 พิกเซล (ผลรวม กว้าง × สูง) เพื่ออัพโหลดไปยังออรัสมา สตูดิโอ u ภาพ Trigger ที่ดีนั้นควรจะ u 1. มีความแตกต่างของโทนสี และมีความคมชัดสูง u 2. เป็นภาพที่มีรูปร่างสมส่วน และรูปแบบชัดเจน u 3. เป็นภาพที่มีรายละเอียดทั่ว ทั้งภาพมีจํานวนมาก
- 16. การสร้างสื่อด้วยแอปพลิเคชันออรัสมา วิวัฒน์ มีสุวรรณ์ กกาารรททํําา OOvveerrllaayyss u Overlays เป็นขั้นตอนต่อมา เป็นเหมือนที่เก็บทรัพยากรต่าง ๆ ที่ต้องการแสดงผลเป็นการเพิ่ม เนื้อหาสื่อ มาซ้อนทับบน Trigger นั่นเอง เหมือนกับที่เราทับสื่อ AR ด้วยโปรแกรมอื่น ๆ โดย สามารถนําภาพวิดีโอ ภาพนิ่ง โมเดล 3 มิติ หรือหน้าเว็บมาใช้งาน Overlays ยังสามารถใช้ใหม่ได้ หลายครั้งกับ Trigger อื่น ๆ ได้
- 17. กกาารรททํําา OOvveerrllaayyss ประเภทวิดีโอ uรรููปปแแบบบบววิิดดีีโโออออืื่่นน ๆๆ ททีี่่สสนนัับบสสนนุุนน ไไดด้้แแกก่่1. ไฟล์ .MOV,.WMV ,MPG1 ,MPG2 MMPP 44 ไไฟฟลล์์ FFLLVV ขขนนาาดดขขอองงคคววาามมจจุุไไฟฟลล์์ 512 ×512 พิกเซล เป็นขั้นตํ่า แต่การเก็บในอัตราส่วนที่ต้องการ ทําให้แน่ใจว่าขนาดเล็ก ที่สุด คือไม่น้อยกว่า 512 พิกเซล ตัวอย่าง เช่น • อัตราส่วน 16 : 9 ไฟล์ วิดีโอควรเป็น 936 ×512 พิกเซล 512 ×512 พิกเซล เป็นขั้นตํ่าสุด แต่การเก็บในอัตราส่วน ที่ต้องการ ทําให้แน่ใจว่าขนาดเล็กที่สุด คือไม่น้อยกว่า 512 พิกเซล ตัวอย่าง เช่น • อัตราส่วน 16 : 9 ไฟล์ วิดีโอควรเป็น 936 ×512 พิกเซล ขขนนาาดด 100 เมกะไบต์ ขึ้นไป 100 เมกะไบต์ ขึ้นไป บบิิตตเเรรตต 3 เมกะบิต ต่อวินาที 10 เมกะบิต ต่อวินาที เเฟฟรรมมตต่่ออนนาาททีี 15 หรือ 25 เฟรม ต่อวินาที 15 หรือ 25 เฟรม ต่อวินาที รระะยยะะเเววลลาา 3 นาที หรือน้อยกว่าที่แนะนํา 30 วินาที หรือน้อยกว่าที่แนะนํา เเสสีียยงง ได้ ไม่ได้ สสนนัับบสสนนุุนนออััลลฟฟาา ไม่สนับสนุน สนับสนุน สสตตรรีีมม ได้ ไม่ได้
- 18. กกาารรททํําา Overlays ประเภทภาพนิ่ง uรรููปปแแบบบบววิิดดีีโโออออืื่่นน ๆๆ ททีี่่สสนนัับบสสนนุุนน ไไดด้้แแกก่่1. JJPPEEGG PPNNGG ขขนนาาดดขขอองงพพืื้้นนททีี่่ ขนาดเล็กที่สุด 512 พิกเซล แต่ สําหรับการใช้งานที่มีขนาดเล็กกว่า เช่น ปุ่ม ขนาด 256 พิกเซล หรือ 128 พิกเซล ก็เพียงพอ ขนาดเล็กที่สุด 512 พิกเซล แต่ สําหรับการใช้งานที่มีขนาดเล็กกว่า เช่น ปุ่ม ขนาด 256 พิกเซล หรือ 128 พิกเซล ก็เพียงพอ ขขนนาาดด 100 เมกะไบต์ ขึ้นไป 100 เมกะไบต์ ขึ้นไป สสนนัับบสสนนุุนนออััลลฟฟาา ไม่สนับสนุน สนับสนุน หหมมาายยเเหหตตุุ ไฟล์ JPEG ไฟล์ PNG เหมาะสําหรับทําปุ่ม
- 19. คคุุณณสสมมบบััตติิ OOvveerrllaayyss ปปรระะเเภภททโโมมเเดดลล 33 มมิิตติิ uรรููปปแแบบบบววิิดดีีโโออออืื่่นน ๆๆ ททีี่่สสนนัับบสสนนุุนน ไไดด้้แแกก่่1. ไฟล์โมเดล 3 D ที่อัพโหลดไปยัง Aurasma นั้นต้องทําการบีบอัดด้วยโปรแกรมบีดอัดทั่วไป ให้เป็นไฟล์ .TAR ก่อน ซึ่งไฟล์โมเดล 3 มิติ ที่สามารถนํามาใช้งานได้ ได้แก่ 1. Collada export (.dae) 2. Textures (.png) 3. Audio file (.mp3) 4. Thumbnail images (.png 256 × 256 px. Name thumbnail)
- 24. Download App : Anatomy 4D
- 25. Download App : Animal 4D
- 26. Download App : Quiver
- 27. Download App : Aurasma
- 28. ท่านสามารถดาวน์โหลดเอกสาร ขั้นตอนการสร้างสื่อ โดยการ โหลด App Zappar และนํามาส่องที่ภาพนี้ จะเชื่อมต่อไปยังเอกสาร และติดต่อผู้บรรยายได้
- 29. ขอขอบคุณ u ดดรร..ไไพพฑฑููรรยย์์ ศศรรีีฟฟ้้าา u ดดรร..ออภภิิชชาาตติิ ออนนุุกกููลลเเววชช u ดดรร..สสุุพพจจนน์์ ศศรรีีนนุุตตพพงงษษ์์ u รรศศ..ดดรร..ววิิววััฒฒนน์์ มมีีสสุุววรรรรณณ์์ u แแลละะขข้้ออมมููลลจจาากกเเวว็็บบไไซซตต์์ออืื่่นนๆๆ ททีี่่ไไดด้้นนํําามมาาปปรระะกกออบบ u ทท่่าานนผผูู้้เเขข้้าารรัับบกกาารรออบบรรมมททุุกกทท่่าานน ททีี่่สสนนใใจจแแลลกกเเปปลลีี่่ยยนนเเรรีียยนนรรูู้้รร่่ววมมกกัันน u โโคครรงงกกาารรปปรระะชชุุมมววิิชชาากกาารร““เเภภสสััชชศศาาสสตตรร์์ศศึึกกษษาาแแหห่่งงชชาาตติิ ปปรระะจจํําาปปีี 22556600”” ((TThhaaii PPhhaarrmmaaccyy EEdduuccaattiioonn NNaattiioonnaall CCoonnffeerreennccee 22001177)) ขอขอบพระคุณอย่างสูงสําหรับข้อมูลและข้อคิดเห็นต่างๆจาก