คู่มือการสร้าง AR

1

A

คำนำ

พฤติกรรมของผู้บริโภคในยุคดิจิทัล ที่มีสมาร์ทโฟนเป็นปัจจัยที่ 5 ของการใช้ชีวิต ทำให้ธุรกิจการค้า
ต้องปรับกลยุทธ์เชิงรุกในรูปแบบออนไลน์ ตามช่องทางโซเชียลมีเดีย โดยพัฒนาสื่อมัลติมีเดียดึงดูดความ
น่าสนใจ หลายคนคงจำเกมยอดฮิตอย่างโปเกมอนโก ที่นำเทคโนโลยี AR มาสร้าง จนทำให้คนติดเกมอย่าง
หนักกันพักใหญ่ทีเดียว เทคโนโลยีเสมือนจริง (AR) ได้ถูกรวมเข้าไปเป็นส่วนหนึ่งในกิจกรรมประจําวัน มีการ
นําไปประยุกต์ใชอ้ ยา่ งแพรห่ ลายในดา้ นต่าง ๆ ท้งั ดา้ นศิลปะ การแพทย์ การศึกษา และการพาณิชย์

คำว่า Augmented แปลว่าเพิ่มหรือเติม ส่วน Reality แปลว่าความจริง นั่นก็คือ เทคโนโลยีการ
ผสมผสานโลกเสมือน (Virtual World) เพิ่มเข้าไปในโลกจริง (Physical World) เพื่อทำให้เกิดการกลมกลืน
กันมากทส่ี ดุ จนแยกไม่ออก

กมลทิพย์ คำพงษ์

ผ้จู ดั ทำ

B

สารบญั

เรอ่ื ง หนา้

ความเป็นมาของ AR (Augmented Reality) .......................................................................................1
ความหมายของ AR (Augmented Reality) ..........................................................................................1
หลกั การทำงานของ AR............................................................................................................................2
พ้นื ฐานหลักของ AR (Augmented Reality)........................................................................................2
ชนิดของ AR (Augmented Reality)....................................................................................................3
ประโยชนข์ อง AR (Augmented Reality)............................................................................................3
ตวั อยา่ งเทคโนโลยี AR (Augmented Reality)......................................................................................4

Virtual Reality หรือ VR ......................................................................................................................... 5
Mixed Reality หรอื MR ......................................................................................................................... 6
Cinematic Augmented Reality หรอื CR........................................................................................... 7
Substitutional Reality หรือ SR ........................................................................................................... 8
Extended Reality หรือ XR ................................................................................................................... 8
วิธีการสรา้ ง AR (Augmented Reality) ................................................................................................9
1. Vidinoti............................................................................................................................................ 9
2. Spark AR........................................................................................................................................ 28
3. Roar ................................................................................................................................................ 56

1

ความเป็นมาของ AR (Augmented Reality)

เทคโนโลยีนไ้ี ดถ้ กู พัฒนามาต้งั แต่ปี ค.ศ. 2004 จดั เปน็ แขนงหน่งึ ของงานวิจยั ดา้ นวิทยาการคอมพวิ เตอร์
ว่าด้วยการเพิ่มภาพเสมือนของโมเดลสามมิติที่สร้างจากคอมพิวเตอร์ลงไปในภาพที่ถ่ายมาจากกล้องวิดีโอ
กลอ้ งเว็บแคม หรือกล้องในโทรศัพทม์ ือถอื แบบเฟรมตอ่ เฟรมดว้ ยเทคนิคทางด้านคอมพวิ เตอร์กราฟิก แต่ด้วย
ข้อจำกัดทางเทคโนโลยีจึงมีการใช้ไม่แพร่หลายเท่าไหร่ แต่ปัจจุบันเทคโนโลยีมือถือ และการสื่อสารข้อมูลไร้
สาย รวมทงั้ การประมวลต่าง ๆ มีความรวดเรว็ ขึ้นและมรี าคาถกู จึงทำให้อปุ กรณ์สมารท์ โฟน และแทบเลต็ ทำ
ให้เทคโนโลยีที่อยู่แต่ในห้องทดลอง กลับกลายมาเป็นแอพที่สามารถดาวน์โหลดมาใช้งานกันง่าย ๆ ไปแล้ว
โดยในชว่ ง 2-3 ปีมานี้ AR เปน็ เรอื่ งท่ถี ูกกล่าวถงึ อยู่เป็นระยะ แมจ้ ะไม่ฮอตฮิตเหมือนแอพตวั อนื่ ๆ ก็ตาม แต่
อนาคตยังไปได้อีกไกล ทั้ง VR และ AR สามารถนำมาประยุกต์ใช้งานได้กว้างขวางหลากหลาย ทั้งด้าน
อุตสาหกรรม การทหาร การแพทย์ การตลาด การบนั เทิง การสื่อสาร และ การศกึ ษา

ความหมายของ AR (Augmented Reality)

AR เป็นเทคโนโลยีใหม่ ที่ผสานเอาโลกแห่งความเป็นจริง (Real) เข้ากับโลกเสมอื น (Virtual) โดยผ่าน
อุปกรณ์ทางด้านฮาร์ดแวร์รวมกับการใช้ซอฟต์แวร์ต่าง ๆ ทำให้สามารถมองเห็นภาพที่มีลักษณะเป็นวัตถุ
(Object) แสดงผลในจอภาพกลายเป็นวัตถุ 3 มิติ ลอยอยู่เหนือพื้นผิวจริง มีการแสดงผลที่แสดงวัตถุมีการ
เคลื่อนไหว ดูมีมิติมีความตื่นเต้นเร้าใจ โดยสามารถนำรูปแบบใหม่ของการนำเสนอสินค้าลอยออกมานอก
จอคอมพวิ เตอร์ ซง่ึ เปน็ การนำเสนอรูปแบบใหม่ในโลกสังคมออนไลนห์ รือการตลาดออนไลนอ์ ีกทางหนง่ึ ว่ากัน
ว่า นจี่ ะเปน็ การเปล่ยี นแปลงโฉมหน้าส่ือยุคใหม่ พอๆ กับเม่ือครง้ั เกิดอนิ เทอรเ์ น็ตขนึ้ ในโลกกว็ ่าได้ หากเปรียบ
สื่อต่าง ๆ เสมือน “กล่อง” แล้ว AR คือการเด้งออกมาสู่โลกใหม่ภายนอกกล่องที่สร้างความตื่นเต้นเร้าใจ ใน
รูปแบบ Interactive Media โดยแทจ้ ริง

2

หลักการทำงานของ AR

เทคโนโลยีเสมือนจริงนี้ มีหลักการทำงานโดยสามารถแบ่งประเภทตามส่วนวิเคราะห์ภาพ
(Image Analysis) เป็น 2 ประเภท ได้แก่ การวิเคราะห์ภาพโดยอาศัย Marker เป็นหลักในการทํางาน
(Marker based AR) และการวิเคราะห์ภาพโดยใช้ลักษณะต่าง ๆ ที่อยู่ในภาพมาวิเคราะห์ (Marker-less
based AR) หลักการของเทคโนโลยีเสมอื นจริง ประกอบดว้ ย

1. Marker (หรือทเี่ รยี กว่า Markup)
2. กล้องวิดีโอ เว็บแคม กล้องโทรศัพท์มือถือ หรือ ตวั จบั Sensor อน่ื ๆ
3. สว่ นการแสดงผลภาพ เช่นจอภาพจากอปุ กรณ์แสดงผล
4. ซอฟตแ์ วรส์ ่วนประมวลผลเพื่อวตั ถแุ บบสามมิติ object 3D

พ้นื ฐานหลักของ AR (Augmented Reality)

ใช้หลักการของการตรวจจับการเคลื่อนไหว (Motion Detection) การตรวจจับการเต้นหรือการเคาะ
(Beat Detection) การจดจําเสียง (Voice Recognize) และการประมวลผลภาพ (Image Processing)
โดยนอกจากการตรวจจับการเคลื่อนไหวผ่าน Motion Detect แล้ว การตอบสนองบางอย่างของระบบผ่าน
สื่อนั้น ต้องมีการตรวจจับเสียงของผู้ใช้และประมวลผลด้วยหลักการ Beat Detection เพื่อให้เกิดจังหวะใน
การสร้างทางเลอื กแก่ระบบ เช่น เสยี งในการสงั่ ใหต้ วั Interactive Media ทํางาน

ทั้งนี้การสั่งการด้วยเสียงจัดว่าเป็น AR และในส่วนของการประมวลผลภาพนั้น เป็นส่วนเสริม เพราะ
เน้นไปที่การทํางานของปัญญาประดิษฐ์ (Artificial Intelligent: AI) ในการสื่ออารมณ์กับผู้ใช้บริการผ่านสี
และรปู ภาพ

เทคโนโลยี AR นจ้ี ะสามารถทำให้ผู้ใชเ้ หน็ ภาพเสมอื นจรงิ ไดร้ อบ โดยไมจ่ ำเปน็ จะตอ้ งเดินทางไปสถานที่
จริง หากในอนาคตเทคโนโลยีจะมีความก้าวหน้าเป็นอย่างไร สิ่งสำคัญที่สุดคือความก้าวหน้าของมนุษย์ก็ต้อง
พัฒนาควบคู่กันไปด้วย หากเรามีเทคโนโลยีที่ล้ำสมัยให้ใช้ แต่มนุษย์ไม่ได้เจริญตามเทคโนโลยีด้วย การ
ดำรงชวี ติ ของมนษุ ยก์ จ็ ะไม่เป็นปกตสิ ขุ ได้เลย

3

ชนดิ ของ AR (Augmented Reality)

1. Marker-Based : ซึ่งจะอยู่ในรูปแบบเครื่องหมาย สัญลักษณ์ต่างๆ เป็นใบปลิว โบรชัวร์ต่างๆ ผู้ใช้ทำ
การ scan ด้วยกล้องจากตวั smartphone เพ่ือแสดงภาพ 3 มติ ิ

2. Location-Based : ผู้ใช้ไม่จำเป็นต้องใช้ smartphone scan จากภาพ เพียงแค่ใช้ GPS ของเครื่อง
นน้ั ๆ กส็ ามารถแสดงภาพ 3 มิตไิ ด้

ประโยชน์ของ AR (Augmented Reality)

• สามารถเปน็ ส่ือและขอ้ มูลทท่ี ำให้สามารถศึกษารายละเอยี ดเพิ่มเติมเช่น สัตวโ์ ลกดกึ ดำบรรพ์ ทจี่ ำลอง
ปา่ รวมไปถงึ สภาพแวดลอ้ มให้เราเห็นได้

• ใชใ้ นเรอ่ื งการจดั บ้านเพราะคุณจะได้เหน็ ตำแหน่งและการจดั บ้านจริงๆ ก่อนที่จะซ้ือของ
• ใชใ้ นดา้ นงานศิลปะที่สามารถจำลองภาพตา่ งๆ กอ่ นการจดั จรงิ วา่ ควรทำอย่างไรใหด้ ูสวย
• ใช้สำหรับการเล่นเกม เชน่ Pokemon Go สว่ นใหญ่จะใช้ในการค้นหาโปเกม่อนและการจับเพราะเรา

ไมร่ วู้ า่ มนั อยไู่ หนจนกว่าจะหันเจอ

4

ตวั อยา่ งเทคโนโลยี AR (Augmented Reality)

Augmented Reality หรือ ARคือการจำลองภาพเสมือนให้ซ้อนกับโลกความจริง อาศัยการใช้กล้อง
จากสมารท์ โฟนและแท็บเลต ตัวอย่างการนำเทคโนโลยี AR มาใช้ ได้แก่ ใช้ในการเลน่ เกม เช่น Pokemon Go
ใชเ้ ป็นสอ่ื การสอน ทางการแพทย์การโฆษณา ฯลฯ
อปุ กรณ์ในการเลน่ : บนมอื ถอื เพียงดาวนโ์ หลดแอพลิเคชั่นลงบนสมาร์ทโฟนกเ็ ปิดเล่นไดแ้ ลว้

คอมพวิ เตอร์ สวมแวน่ ตาคลา้ ยกบั VR
ตวั อยา่ งเกม AR ได้แก่

Pokemon GO
Jurasic World
The Walking Dead: Our World
AR Kanojo
Yume 100 AR
Let’s Snuggle! AR
Sengoku Night Blood AR

นอกจาก AR แลว้ ยังมีเทคโนโลยีอน่ื ๆ เชน่ VR, MR, CR, SR, และ XR

5

Virtual Reality หรือ VR
คือการจำลองสภาพแวดล้อมเสมือนจริง ให้ผู้ใช้เกดิ การรับรู้และรู้สึกเหมือนจริงมากที่สุด เป็นการตดั

ออกจากโลกความจริง 100 เปอร์เซ็นต์ จะใช้งานได้ต้องใช้อุปกรณ์เสริม เช่น แว่นตา VR ตัวอย่างการนำ
เทคโนโลยี VR มาใช้ ไดแ้ ก่ การเลน่ เกม การดหู นัง การขับเครอื่ งบนิ จำลองด้วยเทคโนโลยี VR ฯลฯ

อปุ กรณ์ในการเล่น : บนมอื ถอื รองรับท้ังการใช้คกู่ ับแวน่ ตา VR และแบบไมต่ ้องใชแ้ ว่นตา
บนคอมพิวเตอร์ รองรบั อปุ กรณเ์ สรมิ อยา่ งแว่นตา VR, เซ็ต Oculus Rift, เซ็ต HTC Vive, Samsung Gear
VR
บน PlayStation 4 จะต้องมี PlayStation VR (เป็นอุปกรณเ์ สรมิ คลา้ ยแวน่ ตา VR)
บนเครือ่ ง VR แบบเกมอารเ์ คดเซนเตอร์ สวมอุปกรณ์ทตี่ ิดตั้งในเคร่ือง
ตัวอยา่ งเกม VR ได้แก่
Sword Art Online : Lovely Honey Days
CIRCLE of SAVIORS
Wedding VR
VR Kareshi
Hatsune Miku VR
Google Earth VR

6

Mixed Reality หรอื MR
เป็นการยกระดบั AR ใหส้ งู ขึ้น AR คอื การวางทบั ซอ้ นวัตถุเสมือนลงไป แต่ MR คอื การสร้างของในโลก

เสมือนให้รวมเข้ากับโลกจริงได้พอดี ไม่ลอยอยู่เฉพาะด้านบนเหมือน AR และสามารถมีปฏิสัมพันธ์กับวัตถุ
เสมือนได้ เช่น การสร้างห้องตัวอย่างบ้านหรือคอนโด เพื่อจำลองสภาพแวดล้อมให้ลูกค้าได้สัมผัสบรรยากาศ
ของหอ้ งตัวอย่าง

อุปกรณใ์ นการเลน่ : Magic Leap One, Microsoft HoloLens

ตวั อยา่ ง MR : https://www.youtube.com/watch?v=K5246156rcQ&feature=emb_logo

https://www.youtube.com/watch?v=kPMHcanq0xM&feature=emb_logo

7

Cinematic Augmented Reality หรอื CR
CR เปน็ ภาพยนตร์เสมือนจริงท่ีพัฒนามาจาก AR และ VR เป็นภาพวตั ถหุ รอื บุคคลปรากฎซ้อนทับข้ึน

บนโลกจริง แต่มีมิติและเสมอื นมตี ัวตนจรงิ อยู่บนโลก อุปกรณ์ในการเล่นมที ัง้ แบบรองรบั แวน่ ตาและไม่ต้องใช้
แว่นตาเทคโนโลยี CR ถูกนำมาใช้ในวงการภาพยนตร์ เช่น เรื่อง The Walking Dead “The Walking Dead
Cinematic Augmented Reality” ทไี่ ด้จำลองหน่งึ ในเหตกุ ารณจ์ ากซีรสี ์มาไวใ้ ห้ผู้ชมได้ร่วมสนกุ หน้าโรงหนัง

อุปกรณ์ในการเล่น : มที ั้งแบบรอ้ งรบั แว่นตาและไม่ตอ้ งใชแ้ ว่นตาก็รับชมได้

ตวั อยา่ ง CR The Walking Dead - Cinematic Augmented Reality :

https://www.youtube.com/watch?v=tIzu2EnUHLI&feature=emb_logo

8

Substitutional Reality หรือ SR
SR เป็นโลกทดแทนเสมือนจริง ชื่อเรียกนี้มาจากทางญี่ปุ่น ระบบจะนำวีดีโอภาพและเสียงท่ีบันทึกไว้

และสง่ ภาพออกมาใหช้ มในรปู แบบเสมือนจรงิ ในมุมมองรอบทศิ ทางแบบ VR โดยจะเหน็ ภาพท้งั ท่บี ันทกึ ไว้และ
ภาพในจริงปจั จุบนั ซ้อนทบั กัน เทคโนโลยีนี้ถกู นำมาใช้ในเว็บไซต์โฆษณา
อปุ กรณใ์ นการเล่น : แว่นตาคลา้ ย VR Head Set

ตัวอย่าง SR : https://www.youtube.com/watch?v=PVlBpm1UEq0&feature=emb_logo

Extended Reality หรือ XR
XR เป็นสิ่งแวดล้อมเสมือนจริงที่ผสมไปบนโลกจริง ผู้ใช้สามารถจะเชื่อมต่อข้อมูลกับเครือข่ายและมี

ปฏิสัมพันธ์กับผู้ใช้คนอื่นๆ ได้ ผสมผสานทั้งความสามารถของ AR+VR และ MR เข้าด้วยกัน ขณะนี้ยังอยู่ใน
ขั้นตอนพัฒนา โดยวางแผนจะนำมาใช้ทั้งในด้านอุตสาหกรรม การศึกษา การทหาร สุขภาพ ท่องเที่ยว และ
ความบนั เทิง

9

วธิ กี ารสร้าง AR (Augmented Reality)
1. Vidinoti

ขัน้ ตอนสรา้ งบัญชีผใู้ ช้
1. เร่ิมต้นดว้ ยไปทเี่ ว็บ https://www.vidinoti.com/home/ เมือ่ เข้าสู่หนา้ เวบ็ เรียบรอ้ ยแลว้
คลิกเลือก Log in

2. ในกรณีที่ยังไม่ได้ลงทะเบียน ให้คลิกเลือกที่ Free Sign up มุมบนด้านขวา จากนั้นให้กรอกข้อมูลเพื่อ
สมัครเข้าใชง้ าน

10

3. จะเข้าสู่ขั้นตอนการสร้าง Account โดยกรอก อีเมล กำหนด Password และชื่อ – นามสกุล จากนั้นกด
เลอื ก I agree with the terms of use และเลอื ก Register

4. ให้เข้าไป Activate จาก link ท่สี ่งไปยงั e-mail ที่เราได้สมัครเอาไว้

11

5. เมือ่ Activate เรยี บรอ้ ยแล้ว Log in เพอ่ื ทำการเขา้ ใชง้ านได้เลย

การจะเปิดดูชิ้นงาน เราต้องทำการดาวน์โหลด App V-Player ก่อน ดาวน์โหลดได้ทั้ง Google Play Store
และ App Store

V-Player

12

หนา้ แรกของระบบจะประกอบด้วย

• กลุ่มเมนกู ารจัดการตา่ ง ๆ (แถบซา้ ยมอื )
• ตรงกลางเป็นส่วน Plan ซึ่งเราสามารถดูได้ว่าเราทำไปกี่ content แล้ว หรือ publish ไปแล้วกี่

content รวมถึงสามารถ upgrade account ได้ (ปกตสิ ามารถใชไ้ ด้ฟรี แตม่ ีขอ้ จำกดั )
• มุมล่างด้านขวาของหน้าจอจะเป็น QR Code ซึ่งประโยชน์คือ ผู้ที่จะมองเห็นงาน AR ของเราน้ัน

จะต้องทำการเปดิ App V-Player ก่อน แลว้ นำมาส่อง QR Code ตวั นเ้ี พ่ือจะดผู ลงานของเราน่ันเอง

หมายเหตุ : ใหบ้ ันทึก QR Code เกบ็ ไว้ก่อน แล้วคอ่ ยนำรูปไปแปะไวใ้ นงานของเรา

การสรา้ งการด์ AR

• การออกแบบการ์ด สามารถใช้ได้ท้ังโปรแกรม Adobe
Illustrator, Adobe Photoshop หรอื Microsoft
PowerPoint

• ตงั้ คา่ การ์ดใหข้ นาดเท่ากับ 10.2x15.4 cm. (หรือ 1205x 1819
Pixels)

• นำภาพ QR Code ท่ีบันทึกไว้มาใส่ในการด์ ที่ออกแบบ แลว้
นำไปปรน้ิ ไดเ้ ลย

(ตัวอย่างการด์ AR)

13

ขั้นตอนสรา้ ง AR
Step 1 จากหนา้ แรก ให้คลิกเลือก “Create new content”

Step 2 เลือก “Image AR” จากนั้นให้เราทำการ Drop file หรือ Browse file ที่เราได้สร้างหรือออกแบบ
เอาไว้ เข้ามาในระบบ

14

Step 3 เม่ือเลอื กรูปท่ีต้องการ upload เสร็จแลว้ ให้กด “Continue”

15

Step 4 จากนั้นระบบก็จะแสดงหน้าถดั ไป ให้ตงั้ ชือ่ “content name” และ “Description” (ส่วนหลงั นีเ้ ป็น
คำอธิบายจะใสห่ รือไมใ่ ส่กไ็ ด้) จากนน้ั กด “Continue” อกี หน่งึ รอบ ป่มุ จะอยดู่ า้ นล่างขวาของหนา้ จอ

Step 5 เมื่อเจอหน้าจอดังรูปด้านล่าง ให้เราคลิกที่รูปในหน้าจอได้เลย ระบบจะพาเราไปยังหน้า Pixlive
editor

16

Step 6 ครั้งแรกที่เข้ามาในส่วน Pixlive editor ก็มีการแนะนำการใช้งาน คลิก “take the tour!” จากน้ัน
ให้คลิก ตามทโี่ ปรแกรมแนะนำการใชง้ านไปเรือ่ ย ๆ

เมื่อครบแล้วกโ็ ปรดรอสกั ครู่ กจ็ ะเจอกบั หนา้ จอดงั รปู
• ซ้ายของหน้าจอคือ content ต่างๆ ไวใ้ หเ้ ราเลือกใช้
• ตรงกลางสว่ นแสดงผล สามารถเลือกมุมมองสลบั ไปมาไดร้ ะหว่าง Scene View หรอื Scenario มี %
การแสดงผล
• ขวาของหน้าจอก็จะเป็น Properties ของแต่ละ Scene ท่เี ราโฟกสั อยนู่ น่ั เอง

17

Step 7 ตัวอย่างที่ผู้เขียนออกแบบงานของผู้เขียนไว้คือ “จะมีเมนู 5 เมนู ซึ่งเมนูแรกจะเชื่อมโยงไปยังไฟล์
PDF. 2 เมนูถัดมาจะเชื่อมโยงไปยัง VDO YouTube ส่วนที่ 4 เป็นแบบจำลอง 3D และส่วนสุดท้ายจะเป็น
สว่ นแสดงข้อมลู ของผู้จดั ทำ”

มาเริ่มกันที่ เมนูแรก ให้คลิกเลือก content “Image Button” เพื่อเพิ่มปุ่มแรกกันเลย โดย Image Button
จะมีสองแบบคือ ด้านซ้ายรูปแบบที่ระบบมีไว้ให้แล้ว ส่วนด้านขวาจะเป็นแบบที่เราออกแบบเอาไว้ ให้เรา
Browse file ทต่ี อ้ งการเขา้ มาได้เลย เม่อื เรียบรอ้ ยแลว้ คลิกปุ่ม “Apply changes”

18

Step 8 เมื่อสร้างปุ่มแรกเรียบร้อยแล้ว ระบบก็จะ New Scene2 ขึ้นมาให้โดยอัตโนมัติ โดยให้ลอง Switch
ไปดใู นมมุ มอง Scenario จะเห็นภาพชัดเจน ตามรูป

ในแตล่ ะ Scene สามารถเปลี่ยนช่ือได้ โดยกดรปู ใน Scene 2 แล้วเปล่ยี นชื่อได้ที่ Properties มมุ ขวาบน

19

Step 9 แนบไฟล์ PDF. โดยให้คลิกเลือก content “PDF” โดย PDF จะมีสองแบบคือ ด้านซ้ายจะให้เราอัพ
โหลดไฟล์ที่มีอยู่แล้วจากเครื่องคอมพิวเตอร์ ส่วนด้านขวาจะให้แนบลิงค์URLที่อยู่บนเว็บไซต์ เมื่อเรียบร้อย
แล้ว คลกิ ปมุ่ “Apply changes”

Step 10 Scene 3 และ Scene 4 จะเชื่อมโยงไปยัง VDO ดังนั้น อันดับแรกให้สร้าง Scene ใหม่ โดยทำ
เหมือนเดิม คือคลิกเลือกที่ content “Image Button” เมื่อสร้างเสร็จแล้วก็ให้เลือก content ที่เป็น
“Video” มาวางบน Scene 3 และ Scene 4 ไดเ้ ลย

20

โดย content ที่เป็น “Video” ฝั่งซ้ายจะเป็นการอัพโหลด Video มีอยู่แล้วจากเครื่องคอมพิวเตอร์ และ
สามารถตั้งค่าในการเล่นได้ในช่องสี่เหลี่ยมสีขาว ส่วนด้านขวาจะให้แนบลิงค์URLที่อยู่บน YouTube (ใน
ตวั อยา่ งน้จี ะใช้ลิงคบ์ น YouTube) เมอื่ เรียบรอ้ ยแลว้ คลกิ ปุ่ม “Apply changes”

เม่ือกด “Apply changes” แล้ว จะได้เป็นรูปแบบดังนี้

21

**Image Button ใน Scene แรก สามารถจดั รปู แบบ เอียงซ้าย/ขวา หรือ ย่อ/ขยายขนาดของรูปภาพได้

Step 11 แบบจำลอง 3D เริ่มจากสร้าง Scene ใหม่ โดยทำเหมือนเดิม คือคลิกเลือกที่ content “Image
Button” เมื่อสรา้ งเสร็จแล้วกใ็ ห้เลอื ก content ท่ีเป็น “3D on image”
**แบบจำลอง 3D
สามารถดาวน์โหลดได้ที่เว็บไซต์ 3D Warehouse https://3dwarehouse.sketchup.com/ (เลือกดาวน์
โหลดเปน็ ไฟล์ Collada File) โหลดแลว้ ให้ทำการแตกไฟล์
และเว็บไซต์ clara.io https://clara.io/ (เลอื กดาวน์โหลดเป็นไฟล์ .obj)
โดยทงั้ สองเวบ็ ไซต์ตอ้ งทำการลงทะเบยี น เพอ่ื สมัครเขา้ ใช้งานกอ่ น

22

เมอ่ื อพั โหลดไฟล์เรียบรอ้ ยแลว้ คลิกปุม่ “Apply changes”

Step 12 เปน็ ส่วนแสดงขอ้ มลู ของผ้จู ดั ทำ ให้ทำเหมอื นเดมิ คอื คลิกเลือกที่ content “Image Button” เม่ือ
สร้างเสร็จแล้วกใ็ ห้เลอื ก content ที่เปน็ “Image”

23

Step 13 สร้างปุ่มย้อนกลับ คลิกเลือกที่ content “Image Button” เลือกรูปภาพ ก่อนที่คลิกปุม่ “Apply
changes” ให้ทำการตั้งคา่ ตรง “Tap Settings” Go to เลือก “Start Scene”

เมื่อคลิกปุ่ม “Apply changes” แล้ว สามารถปรับขนาดปุ่ม และจดั วางรูปแบบไดต้ ามตอ้ งการ

24

Step 14 เมื่อทำเสร็จและตรวจสอบความถูกต้องเรียบร้อยแล้ว ให้ทำการ Save โดยคลิกเลือกที่มุมบน
ดา้ นขวาของหน้าจอ ตามรปู

Step 15 เมื่อบันทึกเรียบร้อยแล้ว ให้เลือก “My Contents” ให้สังเกตว่า Content ที่เราได้สร้างไปนั้น
แสดงสถานะเปน็ Published แล้วหรือไม่ (สงั เกตป่มุ วงกลมเคร่อื งหมายถกู สเี ขียว)
โดยปกตแิ ลว้ โปรแกรมจะเปิดเปน็ Publish ให้อตั โนมตั ิ

25

Step สุดท้าย สามารถทดสอบงานของเราโดยคลิกเข้าไปใน Content ที่เราสร้างไว้ จากนั้นให้เอา
smartphone ของเราที่ได้ติดตั้ง App V-Player เรียบร้อยแล้ว นำมาส่อง QR Code ของเราได้เลย งานที่เรา
สรา้ งกจ็ ะแสดงให้เราเหน็ ตามตวั อย่างตอ่ ไปน้ี

26

เม่ือสแกนแลว้ สามารถยกสมารท์ โฟนออกจากการ์ดได้ Content “PDF”

Content “Video”

27

Content “3D on image” Content “image”

28

2. Spark AR

spark AR คือ แฟลตฟอร์ม AR (Augmented Reality) ของ Facebook เดิมชื่อ Camera Effects Platform
เป็นเครื่องมือเพิ่มขุมพลังให้ Facebook และ Instagram ไม่ว่าจะเป็น animation หรือ เอ็ฟเฟ็กต์ต่าง ๆ แต่
ตอนนย้ี ังคงเป็นแคเ่ พียงเวอร์ช่ัน beta ใชง้ านได้ฟรที ง้ั บน Windows และ macOS

ขัน้ ตอนการดาวนโ์ หลดโปรแกรม
1. เรมิ่ ต้นดว้ ยไปท่ี Google ค้นหาคำวา่ spark ar download แลว้ คลกิ เลอื กเว็บไซต์แรก ดังรูป

2. เม่ือเขา้ มาในเว็บไซต์ของSpark AR แลว้ ให้คลกิ เลือกคำว่า “Download”

29

3. เมอื่ ดาวน์โหลดเสร็จ ให้ทำการคลิกเลอื กไฟลส์ ำหรับการติดตัง้ ขึ้นมา แล้วคลิก “Run” เพ่อื ทำการติดต้ัง

4. จากน้ันคลกิ “Next”

30

5. คลิกเลือกเครื่องหมายถูกในช่อง “I accept the terms in the License Agreement” แล้วคลิก
“Next”

6. คลิก “Next”

31

7. หนา้ นี้เป็นส่วนทบ่ี อกว่าโปรแกรมจะถกู ติดตั้งลงที่ไหน ให้คลกิ เลือก “Next”

8. คลิกเลือก “Install”

32

9. ให้รอสกั ครู่ เมื่อมหี น้าจอป๊อปอัพขน้ึ มาให้คลิกเลือก “Yes”

10. จากนั้นโปรแกรมจะทำการตดิ ต้งั ให้รอสกั ครู่ เมื่อดาวน์โหลดเสร็จแล้วแลว้ ใหค้ ลิกเลอื ก “Finish”

33

11. เมอื่ ดาวนโ์ หลดเสรจ็ สนิ้ แลว้ โปรแกรมจะปรากฏบนหน้าจอ Desktop สามารถเขา้ ใช้งานโปรแกรมได้เลย

34

ข้ันตอนสรา้ ง AR
Step 1 เรม่ิ ตน้ ด้วยการเปิดโปรแกรมข้ึนมา แล้ว Login ด้วย Facebook

Step 2 เมอื่ เขา้ ส่โู ปรแกรมแล้วสามารถคลกิ เลือก Start Tour เพอ่ื ดกู ารแนะนำโปรแกรม หรือ Maybe Later
เพ่ือต้องการดูในภายหลัง

35

Step 3 จากน้นั โปรแกรมจะปรากฎหน้าต่อไปนี้ ใหเ้ ลอื ก Create New คลกิ “New Project”

Step 4 คลิกเลือกเป็น “Blank Project” เป็นโปรเจคว่างเปล่า สำหรับสร้างสรรค์ชิ้นงานพร้อมทั้งตกแต่ง
แก้ไขด้วยตนเอง

36

Step 5 เมอื่ เขา้ มาหน้าน้ใี หค้ ลกิ “Ok, I Understand”

หน้าหลกั ของโปรแกรมจะประกอบไปด้วย

• Scene หน้าจอที่เราจะใส่วัตถุ หรอื เอ็ฟเฟ็กตต์ ่าง ๆ ลงไป (สแี ดง)
• Assets รปู ภาพ หรือเอ็ฟเฟ็กต์ต่าง ๆ ทเ่ี ราต้องการใส่เข้าไปในวัตถุ (สฟี า้ )
• Properties เป็นการต้ังค่าต่าง ๆ (สีชมพู)
• หน้าต่างภาพ ทีจ่ ะแสดงใหเ้ ห็นบนอุปกรณ์ (สเี หลือง)
• View เอาไวด้ ูภาพแต่ละ Layer ท่ใี ส่วตั ถตุ ่าง ๆ ลงไป (สีนำ้ เงนิ )

37

Step 6 ในตัวอย่างนี้จะเป็นการสร้าง เอ็ฟเฟ็กต์ Instagram ที่มีรูปภาพ Emoji อยู่บนหน้า เริ่มต้นด้วยการ
ดาวน์โหลดต้นแบบใบหน้า โดยคน้ หาใน Google แลว้ พิมพ์คำวา่ “Spark AR Face Reference Assets”
แลว้ เลอื กคลิกทเ่ี ว็บอันแรก
หรอื กดดาวน์โหลดตามลิงค์นี้ได้เลย https://sparkar.facebook.com/ar-studio/learn/articles/people-

tracking/face-reference-assets

Step 7 เมื่อดาวน์โหลดเสร็จแล้ว ไฟล์ที่ได้นั้นจะเป็นไฟล์ .zip ให้ทำการแตกไฟล์ เปิดโปรแกรม Adobe
Photoshop แล้วเลือกโฟล์เดอร์ “FaceAssets” > “Textures” > แล้วเปิดไฟล์รูป faceFeminine.jpg
(หนา้ ผหู้ ญงิ ) หรอื ไฟลร์ ูปหน้าแบบอ่ืน ๆ ไดต้ ามใจชอบ

38

Step 8 จากนัน้ ให้เลือกภาพ Emoji เพอ่ื นำมาใส่บนใบหนา้
สามารถดาวน์โหลดได้ทีเ่ ว็บ https://emojipedia.org/ คลิกรปู ที่เลือก 1 คร้งั เลือกรปู แบบท่ชี อบ แลว้ คลิก
ขวาเพือ่ เซฟรูปภาพเป็นไฟล์ .png

Step 9 ใหน้ ำรูปทีโ่ หลดเสร็จแล้ว นำมาจัดวางบนรปู ต้นแบบใบหน้า

39

Step 11 จากนน้ั ให้ลบรูป Background ท่เี ป็นใบหน้าต้นแบบออกได้เลย แลว้ ให้ Export เป็นไฟล์ .png

Step 11 เมอ่ื ปรบั แต่งรูปภาพเรียบร้อยแลว้ คลิกเลอื กท่ี “Add Object” > “Face Tracker” > “Insert”

1
2

3

40

Step 12 เราสามารถเปิดกล้องเพื่อทดสอบกับหน้าตัวเองได้ โดยเลือกคลิกที่รูปกล้องวีดิโอแถบซ้ายมือ แล้ว
คลิก “USB2.0 VGA UVC WebCam” หรือเลือกวีดิโอใบหนา้ ตวั อย่างเปน็ ใบหน้าอืน่ ได้ตามท่ีโปรแกรมมใี ห้
เลอื กใช้

Step 13 ตอ่ ไปให้คลิกเลือกที่ “Add Asset” > “Import From Computer…” แลว้ เลอื กรปู ภาพท่ีแกไ้ ข
แลว้ ในโปรแกรม Adobe Photoshop

41

Step 14 จากน้นั ให้คลิกขวาที่ “faceTracker” > “Add” > “Face Mesh”

จะไดต้ ามรูปดังนี้

42

Step 15 ต่อไปให้ดูที่ Properties แท็บขวามือ ใหค้ ลิกเพม่ิ Materials โดยคลกิ ตรงรูปบวก (+)

Step 16 จากนัน้ ใหท้ ำการเปลยี่ นชอื่ Materials ตรง Assets ทางดา้ นซ้ายมือ

43

Step 17 ตงั้ ค่า Materials โดยเลอื ก Shader Type เป็น “Flat”

แลว้ ไปที่ Diffuse เปลี่ยน Texture เป็น ชอื่ ไฟล์ภาพที่เรานำเขา้ มาจากเครื่องคอมพิวเตอร์ จะได้ดังตัวอย่าง

44

Step 18 คลิกเลือกที่ชื่อไฟล์ภาพที่นำเข้ามาใน Assets แล้วดูท่ี Properties เลื่อนลงไปดูท่ี “Manual
Compression” คลิก “No Compression” สี่เหลี่ยมให้เป็นเครื่องหมายถูก (เลือกคลิกทุกภาพที่นำเข้า
เพื่อความคมชัดของรูปภาพตอนนำไปใช้งาน)

วธิ ีแรกทไ่ี ด้ทำเสรจ็ ไปแลว้ รูปภาพ Emoji จะตดิ ไปกับใบหนา้ ของเรา
สว่ นวธิ ีท่ี 2 จะเป็นการทำใหภ้ าพ Emoji ลอยออกมาจากใบหนา้ ดังน้ี

Step 1 เร่ิมจากให้คลิกขวาท่ี “faceTracker” > “Add” > “Plane”

45

จะได้ดังตวั อยา่ ง

Step 2 ต่อไปให้ดูท่ี Properties แท็บขวามือ ให้คลิกเลื่อนแกน Y ขึ้นเป็น 0.1 Plane จะเลื่อนขึ้นไปอยู่
ตรงหน้าผากของเราพอดี

46

Step 3 จากนนั้ ให้นำรูปภาพท่เี ราโหลดมา สามารถใช้รูปที่ไมม่ ีการปรับแต่งมาใสใ่ น Plane ไดเ้ ลย โดยเลือกท่ี
“Add Asset” > “Import From Computer…”

Step 4 คลิกเลือกที่ Plane แล้วไปท่ี Properties แท็บขวามือ ให้คลิกเพิ่ม Materials โดยคลิกตรงรูปบวก
(+) แล้วคลกิ เลอื ก “Create New Materials”

47

จากน้ันใหท้ ำการเปล่ียนช่อื Materials ตรง Assets ทางดา้ นซา้ ยมือ

Step 5 ไปท่ี Diffuse เปลย่ี น Texture เป็น ชื่อไฟลภ์ าพท่เี รานำเข้ามาจากเครอื่ งคอมพวิ เตอร์ จะได้ดงั น้ี