สร้างภาพสามมิติ Facebook 3D Posts ด้วยตัวเองง่ายๆ (Create a simple Facebook Posts with free online applications)

สร้างภาพสามมิติ Facebook 3D Posts/Photos ด้วยตัวเองง่ายๆ (Create simple Facebook Posts with free online applications)

เพื่อนๆที่ใช้งาน Facebook ช่วงนี้จะเห็นฟีเจอร์ใหม่ของพี่มาร์ค เป็นภาพสามมิติเช่นภาพบุคคล อาหาร น้องแมว ที่เวลาเลื่อนฟีดแล้วจะเหมือนเคลื่อนที่ช้าๆลอยๆออกมาแบบสามมิติ ฟีเจอร์ใหม่นี้ต้องใช้เจ้าไอโฟนที่มีกล้องสองตัวถ่ายเพื่อแยกวัตถุด้านหน้าและด้านหลังออกจากกันแล้วก็นำกลับมาซ้อนกันเพื่อแสดงผลในฟีดหน้าFacebookของเราเรียกว่า 3D Posts

สามารถดูรายละเอียดได้ที่ https://techcrunch.com/2018/06/07/how-facebooks-new-3d-photos-work/

3D posts

ฟีเจอร์ใหม่นี้ถูกเรียกว่า 3D posts ให้ผู้ใช้งานเฟสบุคทั่วไปรวมถึงเพจสามารถโพสภาพในลักษณะ 3 มิติได้ และจะแสดงผลบนหน้า News Feed ออกมาเป็น 3 มิติโดยสามารถขยับหมุนเปลี่ยนองศาไปตามทิศต่างๆได้ นอกจากนั้นในอนาคตยังจะรองรับการแสดงผลบนอุปกรณ์ AR, VR ได้ทั้งมือถือและบนเว็บด้วยสำหรับไฟล์ 3D ที่รองรับนั้นจะเป็นมาตฐาน glTF 2.0 ซึ่งสามารถกำหนดพื้นผิว (textures) แสง (lighting) และเทคนิคการ render ภาพต่างๆได้สมจริงมีความละเอียดสูงได้ด้วย ซึ่งทาง Facebook นั้นทำการแปลงไฟล์และคงยังรักษาคุณภาพของไฟล์ 3D เพื่อมาแสดงผลได้อย่างสวยงามและสมบูรณ์ใกล้เคียงและเทียบเท่าต้นฉบับมากที่สุด-http://www.veedvil.com/tech/application/facebook-3d-posts/

แต่ถ้าเราอยากจะสร้างวัตถุสามมิติแบบตัวอย่างด้านล่างนี้บ้างละ….จะทำอย่างไร???

https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FLEGO%2Fposts%2F10155489097298403&width=500

การสร้างวัตถุ 3มิติ 3D Posts

อ้างอิงจากทางเพจ Facebook for developers  ได้กำหนดรูปแบบไฟล์ที่จะใช้งานได้ต้องเป็น ไฟล์ GLB file (glTF 2.0) ที่มีขนาดไม่เกิน 3MB บริษัท Khronos ผู้พัฒนาไฟล์นี้กล่าวว่า ไฟล์ glTF เป็นรูปภาพ jpeg แบบสามมิตินั้นเอง

ที่มารูปภาพ https://www.khronos.org/gltf/

จากภาพด้านล่างจะเห็นผังวงจรของ glTF อาจจะมองเริ่มจากผู้สร้างความต้องการในการใช้ไฟล์แบบนี้ (Drive demand) เครื่องมือในการพัฒนา (Create) ไปถึงการสร้างประสบการณ์ (Experience)

ที่มารูปภาพ https://www.khronos.org/gltf/

จะเห็นว่าเครื่องมือในการพัฒนามีมากมาย แต่ในบทความนี้ผมจะนำเสนอเครื่องมือที่มือใหม่อย่างเราๆสามารถทำได้ง่าย รวดเร็ว และฟรี!!!

เครื่องมือในการสร้างงาน 3D- www.vectary.com

Vectary เป็นโปรแกรมสร้างงานสามมิติผ่านทางหน้าเว็บ online application ไม่จำเป็นต้อง Install ลงไปในเครื่องคอมพิวเตอร์ของเรา แต่การใช้งานแบบฟรีนั้นจะถูกจำกัดไม่ให้เราสร้างโปรเจคได้เกิน10โปรเจค โปรแกรมใช้ง่ายๆเพียงแค่ลากวาง Drag&Drop

ขั้นแรกให้เราทำการสมัคร Sign up โดยเราสามารถใช้ account Facebook หรือ Google ที่มีอยู่แล้วก็ได้

จากนั้นให้เลือกกดปุ่ม Start create หรือ เลือก Create 3D design

เมื่อเข้ามาอยู่ในหน้าโปรเจค เราสามารถเลือกโมเดลสามมิติที่มีอยู่แล้วทางด้านล่างเข้ามาใช้ได้เลย โมเดลฟรีนี้จะมาจากหลายแหล่ง เช่น Google Poly, Sketchfab หรือ ทาง Vectary เอง

การควบคุมมุมมองหน้าต่างการทำงานสามารถใช้เมาส์ควบคุมเช่น

• การกดซ้ายเป็นการหมุนจอ Tumble
• การกดเมาส์ปุ่มกลางเป็นการซูม Zoom
• การกดเมาส์ปุ่มขวาเป็นการเลื่อนจอแนวระนาบ Pan

สร้างตัวอักษร 3 มิติ

เราลองมาสร้างตัวอักษรสามมิติชื่อเราใส่ใน 3D Facebook Posts กันดีกว่า

• เลือกเมนู Add-on ด้านล่าง

• เลือก 3D Text

• พิมพ์ข้อความ เลือกฟอนต์ ตามต้องการ

• เราสามารถปรับแต่งความหนา สีตัวอักษร หรืออื่นๆได้โดยเลื่อน Scroll bar ทางด้านขวาลงไปเรื่อยๆ

• เราสามารถเพิ่มวัตถุสามมิติอื่นๆเข้าไปใน Scene ได้โดยกดที่ 3D Assets ด้านล่าง แล้วเลือกวัตถุที่ต้องการ จัดวางตามต้องการ ผมนำต้นไม้ ก้อนหิน รถยนต์ เข้ามาใส่เพิ่ม สามารถเปลี่ยนสีได้ด้วย สังเกตว่าถ้าเป็นวัตถุสามมิติของ Vectaryมาใช้จะมีสีครบถ้วนดี

• เมื่อทำเสร็จแล้วให้ทำการ Export โปรเจคของเราไปใช้ใน Facebook กัน
• ให้กดปุ่ม Export ด้านขวาล่าง

• หลังจากนั้นเลือกรูปแบบไฟล์เป็น 3D File> GLB

• บันทึกไฟล์เป็น .glb

• ให้เราลากไฟล์เราไปใส่ Post Facebook ก็จะเสร็จเรียบร้อย

เห็นไหมว่าคุณก็ทำได้ไม่ยากอย่างที่คิดเลยนะครับ

ปัจจุบัน Facebook ยังไม่รองรับการแสดงผลแบบ Animation ซึ่งจริงๆแล้วไฟล์ gITF สามารถแสดงผล Animation ได้ เราก็ต้องรอให้ Facebook อัพเดทฟีเจอร์นี้อีกต่อไปในอนาคต

แต่ถ้าต้องการสร้างโมเดลสามมิติที่มีความซับซ้อนมากขึ้นเราอาจจะต้องเรียนรู้ซอฟต์แวร์ เครื่องมือ หลักการให้มากขึ้นแบบมืออาชีพ

สนใจเข้ามาศึกษาหลักสูตร และสมัครเรียน

หลักสูตร หลักสูตรวิทยาศาสตรบัณฑิต สาขาวิชาเทคโนโลยีมัลติมีเดียและการสร้างภาพเคลื่อนไหว ปริญญาตรี สำนักวิชาเทคโนโลยีสารสนเทศ ม.แม่ฟ้าหลวง
https://www.mfu.ac.th/education/program/program-bachelor/bachelor-information-technology/bsc-program-science/bachelor-it-multimedia.html

ลิงค์รับสมัครหลักสูตรอื่นๆของทางมหาวิทยาลัย
https://admission.mfu.ac.th/admission-home.html

เขียนโดย

อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn