ฝากติดตามกด Like 👍 กด Love ❤️ กด Share ⤴️ ที่ https://www.facebook.com/TouchPoint.in.th/ ------------------------------------------------- ฝากกด Subscribe ช่อง YouTube TouchPoint ที่ https://www.youtube.com/c/TouchpointTH ------------------------------------------------- เว็บไซต์ http://touchpoint.in.th/ ------------------------------------------------- หนังสือดิจิทัล https://touchpoint.in.th/book/VidinotiAR/

1. TouchPoint.in.th
Facebook.com/TouchPoint.in.th
YouTube.com/c/TouchpointTH
ว�ทยากร : ดร.กฤษณพงศ เลิศบำรุงชัย
สรางสื่อ AUGMENTED REALITY งายๆ ดวย

3. สารบัญ
เรื่อง หน้า
รู้จักกับเทคโนโลยีความจริงเสริม 1
รู้จักกับ Vidinoti 2
การสมัครสมาชิก Vidinoti 3
การลงชื่อเข้าใช้ Vidinoti 4
การลงชื่อออก Vidinoti 6
การจัดการบัญชีผู้ใช้ Vidinoti 6
การสร้างโปรเจ็คต์ AR 7
การเปิดโปรเจ็คต์ AR ที่สร้างไว้ 10
หน้าต่างโปรแกรม PixLive Editor 12
การเพิ่มตอนเทนต์ AR 12
การแก้ไขคอนเทนต์ 47
คุณสมบัติของคอนเทนต์ 49
การลบคอนเทนต์ 50
การสร้างสื่อ AR ปฏิสัมพันธ์ 50
การทดสอบการแสดงผล 59
การเปลี่ยนรูปภาพ Image Target 67
การทำสำเนาโปรเจ็คต์ 68
การนำสื่อ AR ไปใช้งาน 70
การนำสื่อ AR ไปใช้งานมากกว่า 1 Image Target 72
การลบโปรเจ็คต์ AR ที่ไม่ใช้งาน 74
NOTE 76

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

6. 2 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
รู้จักกับ Vidinoti
โปรแกรม Vidinoti เป็นซอฟต์แวร์ที่ใช้สำหรับสร้างสื่อเทคโนโลยีความจริงเสริม (Augmented
Reality: AR) บนเทคโนโลยีคลาวด์ ที่ผู้ใช้สามารถนำมาประยุกต์สร้างสื่อดิจิทัลปฏิสัมพันธ์ในรูปแบบต่างๆ ได้
หลากหลาย ไม่ว่าจะใช้สำหรับการตลาดดิจิทัล บรรจุภัณฑ์ดิจิทัล และสื่อการเรียนรู้วิชาต่างๆ สร้างขึ้นง่าย
รองรับการแสดงผลทั้งในระบบปฏิบัติการ iOS และ Android เบื้องต้นผู้ใช้สามารถใช้งาน Vidinoti ได้ฟรี โดย
สร้างได้สูงสุด 5 โปรเจ็คต์

7. 3
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การสมัครสมาชิก Vidinoti
สิ่งแรกที่ผู้ใช้ต้องทำคือการสมัครสมาชิกลงทะเบียน Vidinoti เพื่อให้สามารถเข้าใช้งานโปรแกรม
Vidinoti ได้ สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่เว็บไซต์ vidinoti.com
2. คลิก Login
3. คลิก Register
4. กรอกข้อมูล ได้แก่ อีเมล์ รหัสผ่าน ชื่อ และนามสกุล
5. คลิกเลือก I agree with the terms of use และ I want to receive Product Updates and Newsletter
6. คลิกเลือก I’m not a robot
7. คลิก Register

8. 4 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
8. ระบบจะแจ้งข้อความส่งอีเมล์
9. เปิดอีเมล์และคลิกลิงก์
10. คลิก Login เพื่อลงชื่อเข้าใช้
การลงชื่อเข้าใช้ Vidinoti
หลังจากผู้ใช้ลงทะเบียนเป็นสมาชิก Vidinoti เรียบร้อยแล้ว ลำดับต่อไปให้ลงชื่อเข้าใช้ด้วยอีเมล์และ
รหัสผ่านที่ใช้ลงทะเบียน สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่เว็บไซต์ vidinoti.com
2. คลิก Login

9. 5
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
3. กรอกอีเมล์และรหัสผ่าน
4. คลิก Log in
5. การเข้าใช้งานครั้งแรก ระบบจะแสดงหน้าต่าง How to start ให้คลิกปิด
6. จะปรากฏหน้าแดชบอร์ด

10. 6 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
การลงชื่อออก Vidinoti
หลังจากผู้ใช้ได้ใช้งาน Vidinoti สร้างโปรเจ็คต์เทคโนโลยีความจริงเสริม แล้วต้องการออกจากระบบ
สามารถทำได้โดยคลิก Sign out
การจัดการบัญชีผู้ใช้ Vidinoti
ผู้ใช้จะต้องกลับมาเริ่มต้นที่หน้าแดชบอร์ดก่อน จึงจะสามารถจัดการบัญชีผู้ใช้ Vidinoti ได้ การ
จัดการบัญชีผู้ใช้ Vidinoti สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่เมนู My Account

11. 7
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. ไปที่ My Profile
3. แก้ไขข้อมูลผู้ใช้
4. คลิก Save
การสร้างโปรเจ็คต์ AR
หน้าแดชบอร์ดเป็นหน้าที่แสดงข้อมูลจำนวนโปรเจ็คต์ที่เหลือที่ผู้ใช้สามารถสร้างใหม่ได้ และโปรเจ็คต์
ที่กำลังเผยแพร่ สำหรับบัญชีผู้ใช้ฟรีจะสร้างได้สูงสุด 5 โปรเจ็คต์เท่านั้น การสร้างโปรเจ็คต์ AR สามารถทำได้
โดยมีขั้นตอนดังนี้
1. คลิก Create new content

12. 8 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
2. คลิก Image AR
3. คลิก Click or drop your image / PDF here
4. เลือกรูปภาพที่ต้องการ
5. คลิก Open

13. 9
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
6. กำหนดขอบเขตของ Image Target
7. คลิก Continue
8. กำหนดชื่อโปรเจ็คต์
9. คลิก Continue
10. คลิก PixLive Editor

14. 10 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
11. จะเข้าสู่ PixLive Editor พร้อมสำหรับการเพิ่มคอนเทนต์
การเปิดโปรเจ็คต์ AR ที่สร้างไว้
หากผู้ใช้ได้สร้างโปรเจ็คต์ AR ไว้ แล้วปิดเบราว์เซอร์หรือลงชื่อออกจากระบบ แล้วต้องการกลับมา
แก้ไขเพิ่มเติมคอนเทนต์ในโปรเจ็คต์เดิมที่ทำค้างไว้ สามารถทำได้โดยมีขั้นตอนดังนี้
1. ที่หน้าแดชบอร์ด ให้ไปที่เมนู My Contents

15. 11
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. ไปที่ Content List จะปรากฏโปรเจ็คต์ AR ทั้งหมด
3. คลิก Edit
4. จะปรากฏ PixLive Editor สำหรับการแก้ไขโปรเจ็คต์

16. 12 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
หน้าต่างโปรแกรม PixLive Editor
Contents เป็นพาเนลที่รวบรวมการสร้างคอนเทนต์ในรูปแบบต่างๆ
Edit / Delete ใช้สำหรับแก้ไขหรือลบคอนเทนต์
Scene View แสดงพื้นที่การทำงานในซีนปัจจุบัน
Scenario ดูซีนและการเชื่อมโยงซีนทั้งหมดในโปรเจ็คต์
Select Scene เลือกซีนที่ต้องการเพื่อเข้าไปจัดการคอนเทนต์
View ปรับมุมมองย่อขยายการแสดงผล
Properties พาเนลกำหนดคุณสมบัติของซีนและคอนเทนต์ในซีน
Layers จัดการลำดับบนล่างของคอนเทนต์
Save and Quit บันทึกและปิด PixLive Editor
การเพิ่มตอนเทนต์ AR
การเพิ่ม Image
Image เป็นรูปภาพนิ่ง เมื่อผู้ใช้สแกน Image Target โปรแกรมจะแสดงรูปภาพซ้อนทับขึ้นมาบน
Image Target สามารถทำได้โดยมีขั้นตอนดังนี้

17. 13
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
1. คลิก Image
2. คลิก Drop file here
3. เลือกรูปภาพที่ต้องการ
4. คลิก Open
5. คลิก Apply changes

18. 14 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
6. จะปรากฏรูปภาพบน Image Target
การเพิ่ม Image Button
Image Button เป็นการนำรูปภาพมาทำเป็นปุ่มเพื่อสร้างการปฏิสัมพันธ์กับผู้ใช้งาน โปรแกรมจะ
แสดงปุ่มซ้อนทับขึ้นมาบน Image Target สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Image Button
2. คลิก Drop file here
3. เลือกรูปภาพที่ต้องการ
4. คลิก Open

19. 15
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
5. คลิก Tap Settings
6. กำหนด Go to เป็น New scene หรือเลือกซีนที่ต้องการ
7. คลิกเลือก Animate transition และกำหนดเวลา เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนซีน
8. คลิก Apply changes
9. คลิกซีนแรก (Start Scene)

20. 16 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
10. กำหนดขนาดและตำแหน่งการวางปุ่ม
11. คลิก Scenario
12. คลิก Scene 2

21. 17
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
13. เพิ่มเนื้อหาตามต้องการ
การเพิ่ม Scratch
Scratch เป็นการนำรูปภาพ 2 รูปมาซ้อนทับกัน เพื่อให้ผู้ใช้แตะที่รูปภาพเพื่อระบายรูปภาพพื้นผิว
(Surface image) ที่ปรากฏ จนปรากฏเป็นอีกรูปที่อยู่ใต้รูปพื้นผิว (Underlying image) สามารถทำได้โดยมี
ขั้นตอนดังนี้
1. คลิก Scratch
2. ที่ Underlying image คลิก Drop file here
3. เลือกรูปภาพที่ต้องการ
4. คลิก Open

22. 18 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
5. ที่ Surface image คลิก Drop file here
6. เลือกรูปภาพที่ต้องการ
7. คลิก Open
8. กำหนดการตั้งค่าเพิ่มเติม
▪ Size of scratching finger ให้กำหนดขนาดของการระบายด้วยนิ้วมือ
▪ Clickable after scratching กำหนดให้คลิกได้หลังจากเสร็จสิ้นการระบาย
▪ Settings กำหนดซีนที่ต้องการเมื่อเสร็จสิ้นการระบาย
9. คลิก Apply changes

23. 19
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
10. จะปรากฏรูปภาพ Scratch บน Image Target
การเพิ่ม Image Carousel
Image Carousel เป็นการแสดงรูปภาพชุดที่ประกอบด้วยรูปภาพหลายรูป ผู้ใช้งานสามารถสแกน
Image Target แล้วใช้นิ้วปัดเลื่อนดูรูปภาพทั้งหมดได้ สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Image Carousel
2. คลิก Drop file here
3. เลือกรูปภาพที่ต้องการ
4. คลิก Open

24. 20 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
5. หากต้องการให้เปิดเต็มหน้าจอให้คลิกเลือก Full screen หรือ หากต้องการให้รูปภาพแสดงผลเต็มหน้าจอ
เมื่อแตะที่รูปภาพให้คลิกเลือก Open fullscreen image on click
6. คลิก Apply changes
7. จะปรากฏ Image Carousel บน Image Target

25. 21
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การเพิ่ม Audio
Audio เป็นเสียงที่จะแสดงผลเมื่อผู้ใช้งานสแกน Imaget Target โดยไม่มีตัวเล่นเสียง (Audio
Player) สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Audio
2. เลือกเสียงที่ต้องการ
3. คลิก Open
4. จะปรากฏ Audio บน Image Target (ตอนแสดงผลจะไม่แสดง Player)

26. 22 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
การเพิ่ม Video
Video เป็นภาพเคลื่อนไหวที่จะแสดงผลเมื่อผู้ใช้งานสแกน Imaget Target ผู้ใช้สามารถเลือกไฟล์
วิดีโอในคอมพิวเตอร์หรือลิงก์วิดีโอใน YouTube ก็ได้
การเพิ่มวิดีโอในคอมพิวเตอร์
1. คลิก Video
2. คลิก Drop file here
3. เลือกวิดีโอที่ต้องการ
4. คลิก Open
5. กำหนดตัวเลือกการแสดงผลเพิ่มเติม
▪ Full screen แสดงผลเต็มหน้าจอ
▪ Transparent กำหนดความโปร่งใส
▪ Upright แสดงผลตั้งฉากกับ Image Target
▪ Loop กำหนดการแสดงผลวนซ้ำ

27. 23
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
6. คลิก Apply changes
7. จะปรากฏวิดีโอบน Image Target
การเพิ่มวิดีโอโดยใช้ลิงก์
1. คลิก Video

28. 24 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
2. คัดลอกลิงก์จาก YouTube มาวาง
3. คลิก Apply changes
4. จะปรากฏวิดีโอบน Image Target
การเพิ่ม Audio Player
Audio Player เป็นเสียงที่จะแสดงผลเมื่อผู้ใช้งานสแกน Imaget Target ที่มาพร้อมกับแถบควบคุม
การเล่นเสียง พร้อมกับแสดงเนื้อหาข้อความได้อีกด้วย สามารถทำได้โดยมีขั้นตอนดังนี้

29. 25
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
1. คลิก Audio Player
2. ที่ Upload MP3 file คลิก Drop file here
3. เลือกเสียงที่ต้องการ
4. คลิก Open
5. ที่ Upload image คลิก Drop file here
6. เลือกรูปภาพที่ต้องการ
7. คลิก Open

30. 26 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
8. พิมพ์ข้อความเนื้อหา
9. หากต้องการปิดแถบควบคุมการเล่นเสียงเมื่อเสียงเล่นจบ ให้คลิกเลือก Close player at the end of audio
10. หากต้องการปรับแต่งแถบควบคุมการเล่นเสียง ให้เลือก Design เป็น Coloured
11. กำหนดสีตามต้องการ แล้วปิด Color Panel
12. คลิก Apply changes
13. จะปรากฏ Audio Player บน Image Target

31. 27
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การเพิ่ม Open web page
Open web page เป็นการฝัง URL เว็บไซต์ไว้บน Image Target เมื่อผู้ใช้งานสแกน Image Target
โปรแกรมจะเปิดเว็บไซต์ สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Open web page
2. คัดลอกลิงก์เว็บไซต์มาวางที่ช่อง Address
3. คลิก Apply changes

32. 28 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
4. จะปรากฏเว็บไซต์บน Image Target
การเพิ่ม PDF
PDF เป็นไฟล์เอกสารอิเล็กทรอนิกส์ที่ผู้ใช้งานสแกน Image Target โปรแกรมจะเปิดไฟล์ PDF บน
Image Target ผู้ใช้สามารถเลือกไฟล์ PDF ในคอมพิวเตอร์หรือลิงก์ PDF ก็ได้
การเพิ่ม PDF ในคอมพิวเตอร์
1. คลิก PDF

33. 29
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. คลิก Drop file here
3. เลือกไฟล์วิดีโอที่ต้องการ
4. คลิก Open
5. คลิก Apply changes
6. จะปรากฏ PDF บน Image Target

34. 30 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
การเพิ่ม PDF จากลิงก์
1. คลิก PDF
2. คัดลอกลิงก์ PDF (ลิงก์จะต้องเป็น .pdf เท่านั้น)
3. วางลิงก์ลงในช่อง Address
4. คลิก Apply changes

35. 31
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
5. จะปรากฏ PDF บน Image Target
การเพิ่ม Text
Text เป็นข้อความที่ผู้ใช้งานสแกน Image Target โปรแกรมจะปรากฏข้อความบน Image Target
สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Text
2. พิมพ์ข้อความที่ต้องการ
3. กำหนดรูปแบบตัวอักษร

36. 32 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
4. กำหนดสีพื้นหลัง (หากต้องการให้พื้นหลังโปร่งใสให้คลิกเลือก Transparent)
5. คลิก Apply changes
6. จะปรากฏข้อความบน Image Target
การเพิ่ม Text Button
Text Button เป็นการนำข้อความมาทำเป็นปุ่มเพื่อสร้างการปฏิสัมพันธ์กับผู้ใช้งาน โปรแกรมจะ
แสดงปุ่มซ้อนทับขึ้นมาบน Image Target สามารถทำได้โดยมีขั้นตอนดังนี้

37. 33
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
1. คลิก Text Button
2. พิมพ์ข้อความที่ต้องการ
3. กำหนดรูปแบบตัวอักษร
4. กำหนดสีพื้นหลัง (หากต้องการให้พื้นหลังโปร่งใสให้คลิกเลือก Transparent)

38. 34 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
5. คลิก Tap Settings
6. กำหนด Go to เป็น New scene หรือเลือกซีนที่ต้องการ
7. คลิกเลือก Animate transition และกำหนดเวลา เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนซีน
8. คลิก Apply changes
9. คลิกซีนแรก (Start Scene)

39. 35
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
10. กำหนดขนาดและตำแหน่งการวางปุ่ม
11. คลิก Scenario
12. คลิก Scene 2

40. 36 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
13. เพิ่มเนื้อหาตามต้องการ
การเพิ่ม Scratch and Win
Scratch and Win เป็นการนำรูปภาพมาซ้อนทับกัน เพื่อให้ผู้ใช้แตะที่รูปภาพเพื่อระบายรูปภาพ
พื้นผิว (Surface image) ที่ปรากฏ จนปรากฏเป็นอีกรูป อาจปรากฏเป็นรูปภาพแพ้ (Lose image) และ
รูปภาพชนะ (Win image) ขึ้นอยู่กับการสุ่ม เหมาะกับการใช้ AR เพื่อสุ่มแจกคูปองรางวัล ผู้เข้าร่วมที่ปรากฏ
รูปภาพชนะจะได้รางวัลไป สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก Scratch and Win
2. ที่ Lose image คลิก Drop file here
3. เลือกรูปภาพที่ต้องการ
4. คลิก Open

41. 37
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
5. ที่ Win image คลิก Drop file here
6. เลือกรูปภาพที่ต้องการ
7. คลิก Open
8. ที่ Surface image คลิก Drop file here
9. เลือกรูปภาพที่ต้องการ
10. คลิก Open

42. 38 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
11. คลิก Settings
12. กำหนดการตั้งค่าเพิ่มเติม
▪ Win scene กำหนดเป็น New scene หรือเลือกซีนที่ต้องการ
▪ Lose scene กำหนดเป็น New scene หรือเลือกซีนที่ต้องการ
▪ Size of scratching finger ให้กำหนดขนาดของการระบายด้วยนิ้วมือ
▪ Result revealed after scratched ปรากฏผลลัพธ์หลังระบายไปได้ปริมาณร้อยละของพื้นที่รูปภาพ
▪ Prevent people from playing multile times ป้องกันไม่ให้ผู้ใช้งานเล่นหลายครั้งในอุปกรณ์เดิม
▪ Animate transition เอฟเฟกต์ระหว่างเปลี่ยนซีน
13. คลิก Apply changes
14. จะปรากฏรูปภาพพื้นผิว (Surface image) บน Image Target พร้อมกับซีน Win และ Lose

43. 39
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การเพิ่ม 360o Panorama
360o
Panorama เป็นรุปภาพที่มีมุมมอง 360 องศา เมื่อคลี่ออกมาจะเรียกว่า Equirectangular
และมีอัตราส่วนด้านยาว : ด้านกว้าง เป็น 2 : 1 เมื่อแสดงผลจะมีลักษณะเป็นทรงกลมในรูปแบบเทคโนโลยี
ความจริงเสมือน (Virtual Reality: VR) เรียกว่า Spherical ผู้ใช้จะต้องสร้างภาพ 360 องศาเป็นไฟล์ JPG
ก่อน การเพิ่ม 360o
Panorama สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก 360o
Panorama
2. ที่ Format เลือก Spherical
3. คลิก Drop file here
4. เลือกรูปภาพที่ต้องการ
5. คลิก Open

44. 40 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
6. คลิก Apply changes
7. จะปรากฏ 360o
Panorama บน Image Target
การเพิ่ม 360o Video
360o
Video เป็นวิดีโอที่มีมุมมอง 360 องศา มีอัตราส่วนด้านยาว : ด้านกว้าง เป็น 2 : 1 เมื่อ
แสดงผลจะมีลักษณะเป็นทรงกลมในรูปแบบเทคโนโลยีความจริงเสมือน (Virtual Reality: VR) ผู้ใช้จะต้อง
สร้างวิดีโอ 360 องศา ด้วยการถ่ายภาพจากกล้องวิดีโอ 360 หรือใช้เทคนิคพิเศษในการทำวิดีโอ 360 และ
บันทึกไฟล์ในรูปแบบ MP4 การเพิ่ม 360o
Video สามารถทำได้โดยมีขั้นตอนดังนี้

45. 41
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
1. คลิก 360o
Video
2. คลิก Drop file here
3. เลือกวิดีโอ 360 องศา ที่ต้องการ
4. คลิก Open
5. คลิก Apply changes

46. 42 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
6. จะปรากฏ 360o
Video บน Image Target
การเพิ่ม 3D on image
3D on image เป็นรูปภาพสามมิติที่จะแสดงผลเมื่อผู้ใช้งานสแกน Imaget Target โมเดลสามมิติจะ
ปรากฏบน Image Target ไฟล์สามมิติที่รองรับ ได้แก่ Collada (.dae), 3DS Max (.3ds) และ Wavefront
OBJ (.obj) สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก 3D on image
2. คลิก Drop file here
3. เลือกโมเดลสามมิติที่ต้องการ

47. 43
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
4. คลิก Open
5. หากต้องการให้ผู้ใช้งานเคลื่อนย้ายโมเดลสามมิติได้ ให้คลิกเลือก Adjustable by user
6. คลิก Apply changes
7. จะปรากฏโมเดลสามมิติบน Image Target

48. 44 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
การเพิ่ม 3D on floor
3D on floor เป็นรูปภาพสามมิติที่จะแสดงผลเมื่อผู้ใช้งานสแกน Imaget Target โมเดลสามมิติจะ
ปรากฏบนพื้นที่ว่างในห้อง เหมาะกับการทดลองจัดวางสิ่งของที่ต้องการในห้อง ไฟล์สามมิติที่รองรับจะต้องอยู่
ในรูปแบบ GLB สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิก 3D on floor
2. คลิก Drop file here
3. เลือกโมเดลสามมิติที่ต้องการ
4. คลิก Open

49. 45
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
5. คลิก Apply changes
6. จะปรากฏโมเดลสามมิติบน Image Target
การเพิ่ม Timer
Timer เป็นตัวจับเวลา ใช้สำหรับหน่วงเวลาการเปลี่ยนซีนปัจจุบันไปยัซีนที่ต้องการโดยอัตโนมัติ โดย
จะไม่ปรากฏเมื่อผู้ใช้งานสแกน Imaget Target แต่การหน่วงเวลาจะทำงานตามค่าที่กำหนดไว้ สามารถทำได้
โดยมีขั้นตอนดังนี้

50. 46 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
1. คลิก Timer
2. กำหนดการหน่วงเวลา
3. คลิก Settings
4. กำหนด Go to เป็นซีนที่ต้องการไปอัตโนมัติ
5. คลิกเลือก Animate Transition เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนฉาก
6. คลิก Apply changes

51. 47
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
7. จะปรากฏ Timer บน Image Target
การแก้ไขคอนเทนต์
คอนเทนต์แต่ละชนิดมีรูปแบบการแก้ไขแตกต่างกันออกไป เมื่อเข้าสู่การแก้ไขจะพบคำสั่งเหมือน
ตอนเพิ่มคอนเทนต์ สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิกคอนเทนต์ที่ต้องการแก้ไข (ตัวอย่างเป็นการแก้ไข Image Button)
2. คลิก Edit (สามารถดับเบิ้ลคลิกที่คอนเทนต์แทนได้)

52. 48 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
3. คลิก Drop file here
4. เลือกรูปภาพใหม่ที่ต้องการ
5. คลิก Open
6. จะปรากฏรูปภาพใหม่
7. คลิก Tap Settings
8. กำหนด Go to เป็น New scene หรือเลือกซีนที่ต้องการ
9. คลิกเลือก Animate transition และกำหนดเวลา เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนซีน
10. คลิก Apply changes

53. 49
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
11. คอนเทนต์จะถูกแก้ไขและปรากฏบน Image Target
คุณสมบัติของคอนเทนต์
การจัดการคุณสมบัติของคอนเทนต์
การจัดการคุณสมบัติของคอนเทนต์ ผู้ใช้สามารถกำหนดคุณสมบัติของคอนเทนต์ได้ที่พาเนล
Properties สามารถทำได้โดยมีขั้นตอนดังนี้
1. คลิกคอนเทนต์บน Image Target
2. ไปที่พาเนล Properties แล้วกำหนดคุณสมบัติของคอนเทนต์

54. 50 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
คำสั่งในพาเนล Properties
Title กำหนดชื่อคอนเทนต์
Position ตำแหน่งการวางคอนเทนต์บน Image Target ในแนวนอน (X) และแนวตั้ง (Y)
Width ความกว้างของคอนเทนต์บน Image Target
Height ความสูงของคอนเทนต์บน Image Target
คัดลอกคุณสมบัติของคอนเทนต์
วางคุณสมบัติขอคอนเทนต์
จัดคอนเทนต์ให้อยู่กลาง Image Target ตามแกน X
จัดคอนเทนต์ให้อยู่กลาง Image Target ตามแกน Y
การลบคอนเทนต์
การลบคอนเทนต์ สามารถทำได้โดยคลิกที่คอนเทนต์บน Image Target แล้วคลิก Delete หรือ
กดปุ่ม [Delete] หรือ [Backspace] บนแป้นพิมพ์ก็ได้เช่นเดียวกัน
การสร้างสื่อ AR ปฏิสัมพันธ์
สื่อในยุคปัจจุบันจะต้องสร้างประสบการณ์ที่ดีให้กับผู้ใช้สื่อ การสร้างสื่อ AR ปฏิสัมพันธ์ จึงเป็นสิ่งที่
มอบประสบการณ์ที่ดีให้กับผู้ใช้สื่อได้ คอนเทนต์ที่สร้าง AR ปฏิสัมพันธ์ได้ ได้แก่ Image Button, Scratch,
Scratch and Win, Text Button และ Timer โดยสื่อปฏิสัมพันธ์ที่ดี จะต้องมีการเชื่อมโยงซีนได้สมบูรณ์ทั้ง
ตอนเข้าและตอนออก

55. 51
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การสร้างปุ่มและเชื่อมโยงซีน
1. ไปที่ Start Scene
2. คลิก Image Button
3. คลิก Drop file here
4. เลือกรูปภาพที่ต้องการ
5. คลิก Open
6. คลิก Tap Settings
7. กำหนด Go to เป็น New scene หรือเลือกซีนที่ต้องการ
8. คลิกเลือก Animate transition และกำหนดเวลา เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนซีน
9. คลิก Apply changes

56. 52 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
10. คลิกซีนแรก (Start Scene)
11. กำหนดขนาดและตำแหน่งการวางปุ่ม
12. คลิก Scenario
13. คลิก Scene 2

57. 53
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
14. คลิก Image Button
15. คลิก Drop file here
16. เลือกรูปภาพที่ต้องการ
17. คลิก Open

58. 54 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
18. คลิก Tap Settings
19. กำหนด Go to เป็น Start scene เพื่อให้กลับหน้าแรกได้
20. คลิกเลือก Animate transition และกำหนดเวลา เพื่อให้มีเอฟเฟกต์ระหว่างเปลี่ยนซีน
21. คลิก Apply changes
22. กำหนดขนาดและตำแหน่งการวางปุ่ม

59. 55
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
23. เพิ่มเนื้อหาตามต้องการ
24. ทำขั้นตอนที่ 1-23 ซ้ำ จนกว่าจะได้การปฏิสัมพันธ์ตามต้องการ
การกำหนดชื่อซีน
การสร้างสื่อ AR ปฏิสัมพันธ์ ทำให้ในโปรเจ็คต์มีซีนจำนวนมาก ผู้ใช้อาจสับสนและเกิดความผิดพลาด
ในการเชื่อมโยงซีนได้ การกำหนดชื่อซีนจะช่วยให้ลดความผิดพลาดในการเชื่อมโยงซีน สามารถทำได้โดยมี
ขั้นตอนดังนี้

60. 56 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
1. คลิกเลือกซีนที่ต้องการ
2. ไปที่พาเนล Properties
3. ไปที่ Scene title ให้พิมพ์ชื่อซีนตามต้องการ
4. ชื่อซีนจะเปลี่ยนไปตามที่กำหนดไว้

61. 57
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การลบซีน
1. ไปที่ Scenario
2. คลิก Delete ที่ซีนที่ต้องการลบ
3. ซีนที่ถูกลบจะหายไป

62. 58 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
4. ตรวจสอบการเชื่อมโยงซีนจากปุ่มอีกครั้ง
การจัดการเลเยอร์
เมื่อผู้ใช้ได้มีการเพิ่มคอนเทนต์จำนวนมากในแต่ละซีน คอนเทนต์อาจเกิดการซ้อนทับกัน ทำให้การ
แสดงผลไม่เป็นไปตามที่ผู้ใช้ต้องการ การจัดลำดับคอนเทนต์สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่พาเนล Layers
2. คลิกที่คอนเทนต์ในพาเนล Layers

63. 59
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
3. คลิกลากขึ้นลงเพื่อจัดลำดับเลเยอร์
4. เลเยอร์จะอยู่ในลำดับที่ต้องการ
การทดสอบการแสดงผล
เมื่อผู้ใช้เพิ่มคอนเทนต์เสร็จเรียบร้อยแล้ว ผู้ใช้จะต้องบันทึกโปรเจ็คต์และทดสอบการแสดงผลบน
สมาร์ทโฟน ดังนั้นผู้ใช้จะต้องดาวน์โหลดและติดตั้งแอปพลิเคชั่น V-Director ลงบนสมาร์ทโฟนให้เรียบร้อย จึง
จะสามารถทดสอบการแสดงผลได้
การดาวน์โหลดและติดตั้ง V-Director
การดาวน์โหลดและติดตั้งใน Android
1. ไปที่ Play Store
2. ค้นหา V-Player

64. 60 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
3. แตะ Install
4. แตะ Open เพื่อเปิดแอปพลิเคชั่น
5. การใช้งานครั้งแรก ให้แตะ I Agree
6. แตะ Close เพื่อปิดคำแนะนำ
7. แตะ While using the app
8. แอปพลิเคชั่นพร้อมใช้งาน

65. 61
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การดาวน์โหลดและติดตั้งใน iOS
1. แตะที่ App Store
2. ไปที่ Search
3. ค้นหา V-Player
4. แตะที่แอปพลิเคชั่น V-Player
5. แตะดาวน์โหลด
6. แตะ Open

66. 62 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
7. การใช้งานครั้งแรก ให้แตะ I Agree
8. แตะ Close เพื่อปิดคำแนะนำ
9. แตะ OK
10. แอปพลิเคชั่นพร้อมใช้งาน
การบันทึกโปรเจ็คต์และทดสอบการแสดงผล
1. คลิก Save and quit

67. 63
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. รอสักครู่จนปรากฏสถานะ Publish
3. คลิก Remote ID
4. เปิดแอปพลิเคชั่น V-Player
5. สแกน QR Code ที่ปรากฏ (รอจนครบ 100%)

68. 64 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
6. คลิก เพื่อให้ Image Target ขยายใหญ่ขึ้น
7. สแกน Image Target จะปรากฏคอนเทนต์ที่สร้างขึ้น
8. คลิกเพื่อปิดการแสดงผล
การกลับไปแก้ไขโปรเจ็คต์
1. คลิก Edit

69. 65
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. กลับเข้าสู่ PixLive Editor
การแสดงผลของวัตถุต่างๆ
Image Button Scratch Image Carousel

70. 66 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
Audio Video Audio Player Open web page
PDF Text Text Button Scratch and Win

71. 67
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
การเปลี่ยนรูปภาพ Image Target
เมื่อผู้ใช้สร้างโปรเจ็คต์จนเสร็จสิ้นแล้วต้องการเปลี่ยนรูปภาพ Image Target สามารถทำได้โดยมี
ขั้นตอนดังนี้
1. คลิก Change image
2. เลือกรูปภาพที่ต้องการ
3. คลิก Open
360o
Panorama
360o
Video 3D on image 3D on floor

72. 68 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
4. รูปภาพ Image Target จะถูกเปลี่ยนใหม่
การทำสำเนาโปรเจ็คต์
เมื่อผู้ใช้สร้างโปรเจ็คต์จนเสร็จสิ้นแล้ว ต้องการสร้างโปรเจ็คต์ใหม่โดยใช้พื้นฐานจากโปรเจ็คต์เดิม ให้
เริ่มต้นที่หน้าแดชบอร์ด การทำสำเนาโปรเจ็คต์สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่เมนู My Contents
2. ไปที่ Content list
3. คลิกโปรเจ็คต์

73. 69
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
4. คลิก Duplicate
5. กำหนดชื่อโปรเจ็คต์
6. คลิก Duplicate
7. จะปรากฏสำเนาโปรเจ็คต์

74. 70 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
การนำสื่อ AR ไปใช้งาน
เมื่อผู้ใช้สร้างสื่อเทคโนโลยีความจริงเสริม (AR) เสร็จสมบูรณ์แล้ว ขั้นตอนสุดท้ายคือการนำสื่อ AR
ไปใช้งาน ซึ่งการเผยแพร่โปรเจ็คต์สำหรับบัญชีผู้ใช้ฟรี จะมีอายุการเผยแพร่ 24 ชั่วโมง เมื่อครบเวลา โปรแกรม
จะหยุดการเผยแพร่โดยอัตโนมัติ แต่ผู้ใช้ก็สามารถเผยแพร่อีกครั้งได้ การนำสื่อ AR ไปใช้งานสามารถทำได้โดย
มีขั้นตอนดังนี้
1. ที่หน้าแดชบอร์ด ไปที่เมนู My Contents
2. ไปที่ Content list
3. คลิกโปรเจ็คต์

75. 71
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
4. ตรวจสอบสถานะ Publish
5. คลิก Remote ID
6. จะปรากฏ QR Code
7. คลิกขวา > Save image as
8. เลือกพื้นที่จัดเก็บ
9. กำหนดชื่อไฟล์
10. คลิก Save

76. 72 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
11. ออกแบบโปสเตอร์เพื่อชี้แจงวิธีการใช้งาน
การนำสื่อ AR ไปใช้งานมากกว่า 1 Image Target
ในกรณีที่ผู้ใช้ต้องการสร้างสื่อ AR มากกว่า 1 Image Target ให้ผู้ใช้งานสร้างโปรเจ็คต์ AR ตามปกติ
มากกว่า 1 โปรเจ็คต์ โดยแต่ละโปรเจ็คต์ใช้ Image Target ที่แตกต่างกัน และเผยแพร่ทุกโปรเจ็คต์ให้มีสถานะ
เป็นเครื่องหมายถูกสีเขียว ทุกโปรเจ็คต์ สามารถทำได้โดยมีขั้นตอนดังนี้
1. ไปที่หน้าแดชบอร์ด

77. 73
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. คลิกขวาที่ QR Code > Save image as
3. เลือกพื้นที่จัดเก็บ
4. กำหนดชื่อไฟล์
5. คลิก Save
6. ตรวจสอบสถานะ Publish ทุกโปรเจ็คต์

78. 74 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
7. ออกแบบโปสเตอร์เพื่อชี้แจงวิธีการใช้งาน
การลบโปรเจ็คต์ AR ที่ไม่ใช้งาน
เมื่อผู้ใช้สร้างโปรเจ็คต์ AR จำนวนมาก แล้วต้องการลบโปรเจ็คต์ AR ที่ไม่ใช้งานออก ให้กลับมา
เริ่มต้นที่หน้าแดชบอร์ด การลบโปรเจ็คต์สำหรับบัญชีผู้ใช้ฟรีไม่ได้ทำให้มีเครดิตคงเหลือ (Remaining Credits)
กลับมาเพิ่มขึ้น การลบโปรเจ็คต์ AR ที่ไม่ใช้งานสามารถทำได้โดยมีขั้นตอนดังนี้
1. ที่หน้าแดชบอร์ด ให้ไปที่เมนู My Contents

79. 75
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
2. ไปที่ Content list
3. คลิก Delete
4. จะปรากฏกล่องข้อความยืนยัน ให้คลิก OK
5. โปรเจ็คต์จะถูกลบ

80. 76 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
NOTE
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

81. 77
วิทยากร : ดร.กฤษณพงศ์ เลิศบำรุงชัย
NOTE
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

82. 78 สร้างสื่อ AUGMENTED REALITY ง่ายๆ ด้วย VIDINOTI
NOTE
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

84. TouchPoint.in.th facebook.com/TouchPoint.in.th YouTube.com/c/TouchpointTH