Tag: AR

Blog ก่อนหน้าเราได้ทำความรู้จักกับ สื่อเสมือนจริง หรือที่เราเรียกกันว่า AR กันไปแล้ว ภาคต่อใน Blog นี้จะพาไปเจาะลึกมากขึ้นอีก Step นึง ก็คือ เราจะมาดูกันว่า AR เนี่ย สร้างกันอย่างไร

สำหรับผู้เขียน Blog นี้ขอเลือกใช้งานการสร้าง AR ง่ายๆ ผ่านเว็บ VIDINOTI ละกันนะ
ปะ ไปดูกันเลย

เริ่มต้นด้วยไปที่เว็บ https://www.vidinoti.com/home/ เมื่อเข้าสู่หน้าเว็บเรียบร้อยแล้ว ก็สมัครเข้าใช้งานกันก่อนเลย คลิกเลือกที่ Free Sign up มุมบนด้านขวา จากนั้นก็กรอกข้อมูลเพื่อสมัครเข้าใช้งาน ตัวอย่างตามรูปด้านล่างนะทุกคน

เมื่อ Register เรียบร้อยแล้ว ให้เข้าไป Activate จาก link ที่ส่งไปยัง e-mail ที่เราได้สมัครเอาไว้นะ เมื่อ Activate แล้วก็ Log in เพื่อใช้งานกันโลดดดดดดด !!

หน้าแรกจะมีการแนะนำขั้นตอนเบื้องต้นบอกเราว่า เราต้องทำการดาวน์โหลด App V-Player นะ จะต้อง Scan QR Code นะ และก็มีวีดีโอแนะนำการใช้งานให้เราได้ดูกัน อ่านเสร็จแล้วก็กด “OK” ได้เลย

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

1. ซ้ายมือจะเป็นกลุ่มเมนูการจัดการต่างๆ
2. ตรงกลางเป็นส่วน Plan ซึ่งเราสามารถดูได้ว่าเราทำไปกี่ content แล้ว หรือ publish ไปแล้วกี่ content รวมถึงสามารถ upgrade account ได้ด้วยน๊าาาาาา (ระดับเราแล้ว ฟรี อย่างเดียว !!)
3. มุมล่างด้านขวาของหน้าจอจะเป็น QR Code ซึ่งประโยชน์ของมันก็คือ คนที่จะมองเห็นงาน AR ของเรานั้น จะต้องทำการเปิด App V-Player จากนั้นนำมาส่ง QR Code ตัวนี้เพื่อจะดูผลงานของเรานั่นเอง
   หมายเหตุ : ให้บันทึก QR Code เก็บไว้ก่อนนะ แล้วค่อยนำรูปไปแปะไว้ในงานของเรา

มาเริ่มสร้างงาน AR ของเรากันเถอะ !!

Step 1
จากหน้าแรก ให้คลิกเลือก “Create new content”

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

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

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

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

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

Step 6
ก่อนอื่นเรามามองภาพรวมก่อนการสร้างงานกันสักนิดนึง ตามตัวอย่างที่ผู้เขียนออกแบบงานของผู้เขียนไว้คือ “จะมีเมนู 5 เมนู ซึ่ง 3 เมนูแรกจะเชื่อมโยงไปยัง VDO เมนูถัดมาจะเชื่อมโยงไปยังหน้าเว็บที่ได้มีไฟล์แขวนเอาไว้ ส่วนสุดท้ายจะเป็นส่วนแสดงช่องทาง Contact มายังผู้จัดทำ storyboard ก็ประมาณนี้นะ” มาเริ่มกันที่ 3 เมนูแรกเลยละกัน

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

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

Step 8
คราวนี้เราจะมาโฟกัสที่ Scene2 กันนะ ตามที่บอกไว้ ปุ่มแรกของเราจะเชื่อมโยงไปยัง VDO ดังนั้นให้คลิกบน Scene2 ก่อนเลย เมื่อคลิกเสร็จแล้วก็ให้เลือก content ที่เป็น “Video” มาวางบน Scene2 เลย
ปล … ชื่อ Scene นี่สามารถเปลี่ยนได้ตรง Properties ด้านขวามือเลยนะ เปลี่ยนให้เป็นชื่อที่เราเข้าใจได้ง่ายๆ เวลามีหลาย Scene จะได้ไม่งงเน้อออ

Step 9
VDO นี่ก็เลือกได้ 2 แบบเหมือนกันนะ upload จากเครื่องเราขึ้นไป หรือจะแปะ link แทน เช่น พวก link จาก youtube เป็นต้น แต่ผู้เขียนขอ upload จากเครื่องตัวเองละกันนะ และเลือกแสดงได้นะว่าจะให้แสดงแบบไหน Full , Loop หรืออื่นๆ ตามที่เห็นนั่นแหละ จากนั้นคลิก “Apply changes” ได้เลย

Step 10
ก็ทำตามขั้นตอนเดิม จนครบทุกหน้าที่ตาม Storyboard ที่เราวางไว้ แต่ปุ่มเมนูหลักเนี่ยเวลาจะลากมาวางให้ วางไว้ใน Start Scene นะ อย่าลืมกันละทุกคน และสำหรับหน้าอื่นๆ ที่ไม่ใช่ VDO เนี่ย ก็ให้เลือก content ให้ถูกนะ เป็น Web เป็น PDF หรืออื่นๆ ก็เลือกให้ถูกต้องก่อนนำมาวางละ หากทำครบตามที่วางแผนเอาไว้ ก็จะได้หน้าตาประมาณนี้นะ

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

Step 12
เมื่อบันทึกเรียบร้อยแล้ว ก็ให้เลือก “My Contents” ระบบก็จะมาโฟกัสที่ Content list ให้เรา จากนั้นก็ให้ดูว่า Content ที่เราได้สร้างไปนั้น แสดงสถานะเป็น Published แล้วหรือไม่ ปล..จริงๆ แล้วก็จะ Publish ให้อัตโนมัตินั่นแหละ

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

เป็นยังไงกันบ้างทุกคน ยากมั้ย นี่ผู้เขียนว่ามันไม่ยากนะ แต่มันแค่ยาวเท่านั้นเอง 555+ ยังไงก็แล้วแต่สามารถทดลองไปสร้างไปใช้งานกันได้นะ สนุกดี แถมเรายังได้ไอเดียอะไรใหม่ๆ ไว้ใช้ในการพัฒนาตัวเราเองได้ด้วย ผู้เขียนหวังเป็นอย่างยิ่งว่า Blog นี้จะมีประโยชน์ต่อผู้อ่านไม่มากก็น้อยแหละเนอะ ไว้เจอกันใหม่ Blog หน้า เน้อทุกคนนนนน แฮ่ 🙂

อ้างอิง
youtube ช่องของอาจารย์ Apiwat Wongkanha ค่ะ ละเอียด และทำตามได้จริงๆ แนะนำๆ