มาสร้าง Filter IG ด้วย Spark AR กัน!

ตอนนี้หลายๆคนคงได้ยินคำว่า AR VR บ่อยกันมากขึ้น วันนี้ Beyond Code Academy เลยอยากชวนทุกคนมาลองทำ AR ของตัวเองผ่าน Spark AR ไว้เป็นฟิลเตอร์ใน Instagram ไว้ใช้เป็นของตัวเองกันค่ะ

---

มารู้จัก Spark AR กัน

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

มาเริ่มทำกันเลย!

1. โหลด Spark AR Studio มาก่อน และติดตั้งให้เรียบร้อย https://sparkar.facebook.com/ar-studio/download

2. โหลดไฟล์ Base LUT image.png โหลดไฟล์ FastColorLUT https://drive.google.com/file/d/1WWX3CjKxr250ds335lfAtNOoVN5D-Sa_/view

3. นำภาพ Base LUT image ไปใช้กับ present ที่เรามี โดยบันทึกและตั้งชื่อใหม่เป็น green-preset นามสกุล jpeg หรือ png ก็ได้

ตัวอย่างภาพ green-preset ที่เราได้หลังจากใส่ Filter ของเราไป

4. ปิด Spark AR Studio และ Login ด้วย Facebook หลังจากนั้นกดปุ่มสร้างโปรเจค จะได้หน้าจอดังรูป แล้วกดสร้างโปรเจค

หน้าแรกของ Spark AR Studio

หน้าแรกหลังจากที่เรากดสร้างโปรเจคใหม่

5. ต่อไปเราจะใส่วัตถุลงไปใน Scene ของเรา คลิกขวาที่ Focal Distance>Add>Canvas พอเราได้ Canvas แล้ว ต่อไปก็สร้าง Rectangle คลิกขวาที่ Canvas>Add>Rectangle ดังรูป

สร้างวัตถุ Canvas และ Rectangle

ตัวอย่าง 3D หรือ FaceTracker

หลังจากเรา ได้ Rectangle แล้วให้กำหนดขนาด Fill width และ Fill Height แบบรูปนี้เลย

การตั้งค่าขนาดของ filter ที่เราต้องการ

6. ลากรูปของเรา green-preset.jpeg ลงใน assent Spark AR Studio หลังจากนั้นให้คลิกที่ green-preset แล้วติ๊ก No compression

ตัวอย่างการตั้งค่ารูป preset

7. คลิกที่ Camera>Texture Extraction > +

จะได้ File Textures ที่ชื่อว่า CameraTexture0

หลังจากนั้นจะได้ไฟล์ที่มีชื่อว่า cameraTexture0 แล้วลากลงไปใส่ใน Patch Editor ต่อ

8. มาถึงขั้นตอนที่สำคัญที่สุด Patch Editor

Patch Editor คือ โปรแกรมจัดการคำสั่ง ควบคุมเชื่อมต่อเส้นระหว่างบล็อค เพื่อกำหนด event หรือ value ต่างๆ ได้ เช่น ถ้าเกิดเหตุการณ์นี้จะให้ไปทำอะไรต่อ, เปลี่ยนแปลงค่าบางอย่าง, หมุนวนรอบตัวเอง อ้าปากกระพริบตาแล้วจะแสดง AR ฯลฯ ซึ่งความสามารถพิเศษได้ใกล้เคียงกับการเขียน code หรือมากกว่าเลยทีเดียว

ปกติแล้วการ coding เพื่อควบคุมเอฟเฟกต์ที่ซับซ้อนนั้นจะใช้ JavaScript ในการพัฒนา แต่ถ้าคนที่เขียน code ไม่คล่องคงจะรู้สึกว่ายากเกินไป ดังนั้นเราจึงใช้ Patch Editor

หน้า Patch Editor ที่เรากำหนดค่าเรียบร้อยแล้ว

9. Export ไฟล์กันค่ะ File>Export>Export จะได้ไฟล์ที่มีนามสกุล .areexport

.

เท่านี้เราก็จะมี Filer IG เอาไว้ใช้เป็นของตัวเองแล้วค่า มาเตรียมความพร้อมกับโลกอนาคตกับคอร์สเรียนที่จะพาน้องๆ ไปโลดแล่นกับเทคโนโลยี AR ที่ Beyond Code Academy ค่า

.

ติดตามการอัปเดตบทความทุกสัปดาห์ได้ที่ https://www.facebook.com/beyondcodeacademy

.

สนใจสมัครเรียนหรือขอคำปรึกษา ติดต่อเราได้ที่

.

​ Facebook Inbox

​โทร:02-096-4477

​ Line: @beyondcode (https://lin.ee/yYW32sz)