Spark AR Creator Days Thailand Day 2 : workshop ทำ AR เจ๋งๆกัน

event May 3, 2021

วันแรกได้รับแรงบันดาลใจและรู้ว่าวันนี้จะได้ทำอะไรสนุกๆ อ่ะมาสนุกกับการทำ filter แรกของเรากันเถอะ!~

ความเดิมตอนที่แล้ว

Spark AR Creator Days Thailand Day 1 : สร้างแรงบันดาลใจในการทำ AR กัน
ทาง Facebook Developer Circle: Bangkok ห่างหายไปจากการจัดงานเพราะสถานการณ์โควิด คราวนี้เลยมีงาน Spark AR Creator Days กันจ้า วันแรกเราจะได้แรงบันดาลใจ วันที่สองเราก็จะได้ทำจริงเนอะ
https://www.mikkipastel.com/spark-ar-creator-days-thailand-day-1/

เตรียมตัวให้พร้อม

ลงโปรแกรมเหล่านี้ โดยกด download จากลิ้งนี้ได้ Spark AR Studio & Player apps on your computer

Download Spark AR Studio and Start Creating Effects | Spark AR Studio
Download Spark AR Studio now! Start creating augmented reality experiences and effects without coding or special software.
  • Spark AR Studio : อันนี้โปรแกรมทำ filter ต่างๆ
  • Spark AR Player apps : เอามาเทสบนมือถือของเรา

และโหลด resource ต่างๆที่จะใช้ใน workshop นี้ลงเครื่องด้วย อันประกอบด้วยไฟล์ project ที่จะทำ, รูป galaxy, video webcam สำหรับคนที่ไม่สะดวกเปิดกล้องจ้า แล้วก็พื้นหลังที่จะทำในวันนี้ด้วย

https://drive.google.com/file/d/1GrUhA0JaXM1HLywYa0Uw2EpKhckzmsDY/view?usp=sharing

การติดตั้งโปรแกรม Spark AR Player apps

ตัว player จะรองรับทั้ง iOS, Android, Windows และ macOS ทั้งหมดเลย ในที่นี้เราจะอธิบายในส่วนของ Android app เนอะ

ก่อนอื่นไป search ชื่อแอพนี้ใน Play Store แล้วกด download มาในเครื่องเรา

เข้าไปในแอพ log in with Facebook account ให้เรียบร้อย

มาก็จะเป็นหน้าเปล่าๆ ว่างๆแบบนี้ เพราะเรายังไม่ได้ทำอะเนอะ

ของฝั่ง iOS ก็จะชัดเจนว่า เราต้องเสียบสายเพื่อเทสเจ้า AR ที่เราสร้างนะ

การเข้าใช้โปรแกรม Spark AR Studio ครั้งแรก

เมื่อติดตั้งเสร็จแล้ว เข้าโปรแกรมจะเจอหน้าตาให้ login เหมือนกันเลย

เข้ามาจะเจอ on-boarding พาทัวร์เล็กๆน้อยๆ

ถ้าเข้าโปรแกรมครั้งต่อๆไปจะเจอหน้านี้ มี template ให้ลองเล่นกันเยอะแยะมากมาย

Agenda ในวันนี้

อันนี้เป็นผลงานโดยรวมที่เขาทำจ้า

เนื่องจากว่าคนที่ไม่เคยใช้ Spark AR เลยคือเยอะมาก รวมถึงเราด้วย ช่วงแรกที่เขาสอนคือตามไม่ทันเลย พอสลับจอไปทำปุ๊ปหลุดเลยจ้า ฮือออออ ก็เลยจะไปแบบช้าๆกัน เราเลยจะอธิบายว่ามือใหม่ต้องทำยังไงต่อ จะได้เอาไปทำตามกันได้จ้า

เริ่มทำโปรเจกแรกของเรากันเถอะ

เปิดโปรแกรม Spark AR ขึ้นมา กด New Project แล้วไปที่ Blank Project

กดคลิกขวา Add -> Canvas เพื่อเราจะมาสร้าง visual ทับภาพจริง

จากนั้นเพิ่ม view สี่เหลี่ยมบน canvas ให้คลิกขวา ไปที่ Add -> Rectangle

ก็จะได้สี่เหลี่ยมลายตารางมา ขนาด 100 x 100 ซึ่งมันไม่เต็มจอ

ดังนั้นจะต้องปรับเป็น Fill Width และ Fill Height

จะได้ตารางรูปสี่เหลี่ยมทับหน้าเราแล้ว

จากนั้นไปเพิ่ม Material โดยไปตรง Assets กด Add Asset -> Material

จากนั้นทำการผูก Material เข้ากับตัว view กดที่ rectangle กดเพิ่ม Material ที่ด้านขวา เลือกอันที่เราเพิ่งสร้างเมื่อกี้ ตอนนี้จะไม่เป็นลายตารางแล้วนะ

เราสามารถเปลี่ยนสีได้ โดยไปเปลี่ยนที่ Material ตรง Shader Properties ไปที่ Color เปลี่ยนสีที่เราต้องการได้เลย

จากนั้นให้มันแยกระหว่างเรากับฉาก คลิกเลือกตรง Camera ที่ Scene ไปที่ด้านขวา ตรง Segmentation เลือก Person

แล้วก็เพิ่ม Texture Extraction ขึ้นมา มันจะสร้างใหม่ให้

กลับไปจิ้มตรง Material เปลี่ยน Texture เลือกที่ cameraTexture0 ที่มันสร้างมันให้ ก็จะเจอตัวเราหล่ะ

ไปเปลี่ยน Shader Type ให้เป็น Flat ก่อนนะ จากนั้นมองหา Alpha แล้วติ๊กถูก จากนั้นเลือก Texture เป็น personSegmentationMaskTexture0 ตัวเราก็จะเปลี่ยนสีแล้วจ้า

แล้วก็ลองเปิดกล้อง webcam บนคอมของเรานะ ไปด้านซ้าย กดตรงรูปกล้อง เราสามารถเลือกพี่ๆคนอื่นๆได้ หรือจะ import *.webm เข้ามา หรือเปิดกล้องของเรา โดยกดที่ FaceTime HD Camara จ้า

ตัวกล้องเราสามารถ pause stop และ restart ใหม่ได้จ้า

ทดลองใช้ Patch Editor

ไปที่ View -> Show/Hide Patch Editor

ตัวนี้เราสามารถลากกล่องต่างๆลงมาในนี้ได้

ก่อนอื่นลากกล่อง Texture ลงมาก่อน

จากนั้นเพิ่มกล่อง Unpack โดยกดที่ Add Patch แล้วพิมพ์หา Unpack หาเจอแล้วกด Add Patch เข้ามา

เราสามารถ custom จำนวน vector ที่เราต้องการใส่เข้าไปได้ มีให้ใส่ได้ 2-4 ตัวด้วยกัน

ใน Texture แต่ละตัว เราจะได้ output 3 ตัว คือ RGBA, RGB, A เมื่อเราใช้ RGBA เราจึงต้องให้กล่อง Unpack มี Vector 4

เอา Material ลงไปใช้ใน Patch Editor ให้กดตรงลูกศรหน้า Texture มันจะเป็นสีเหลืองให้กด ก็จะได้ออกมา

หน้าตาทั้งหมดที่ทำกันจะเป็นแบบนี้

ทั้งหมดก็จะได้ผลลัพธ์เหมือนตอนแรกที่เราทำกัน

โปรเจก workshop ในวันนี้

อันนี้คร่าวๆ ไม่ได้จด กำลังฟังตามทำตามอยู่

เปิดโปรเจกขึ้นมา จะเจอ Patch Editor ด้านล่าง เต็มไปหม๊ดดดด

หลักๆคือเข้าไปปรับสีให้ตรงกับเสื้ออ่ะ ซึ่งยาก ไม่ตรงสักที ฮืออ

จิ้มยังไงก็ไม่ตรง สีเพี้ยน ฮือออออ

อันนี้ปรับความ smooth ของสีจ้า

ถ้าจะทำให้ filter ของเรามี silder สามารถปรับได้อะไรได้ ให้เชื่อมก่อน Silder UI เข้าไปในกล่อง Distance จ้า

ผลที่ได้ก็คือ ถ้าเจอสีที่เราจิ้ม มันจะเปลี่ยนเป็น galaxy วิ้งๆ เมื่อเอาไปรันบนเครื่องจริงเราสามารถปรับตรง slide ได้ และเปลี่ยน media จาก galaxy เป็นอื่นๆได้

Breakout ห้อง Beginner

เนื่องจากมีมือใหม่มาแบบเรา และมืออาชีพสุดๆ เลยมี breakout room ห้อง beginner และ advance ในนั้นมีคุณนิว คุณเอิร์ท และคุณมิ้นต์ คอยช่วยมือใหม่แบบพวกเราอยู่ ขอขอบคุณมา ณ ที่นี้ค่ะ

การทำ filter แต่งหน้าแบบง่าย ไม่ต้องแต่งหน้าเป็นก็ทำได้

ทางคุณมิ้นต์ได้ส่งไฟล์ zip อันนึง ชื่อว่า Face-reference-assets-classic.zip

เพิ่มเติม จริงๆแล้วตัว Face Reference สามารถเข้าไปอ่านวิธีใช้และ download ได้ที่นี่เลยจ้า
Using the Spark AR Studio Face Reference Assets
https://sparkar.facebook.com/ar-studio/learn/articles/people-tracking/face-reference-assets#facefeminine-jpg-and-facemasculinejpg

ข้างในที่เราสนใจ จะอยู่ที่ folder FaceAssets/Textures/ ข้างในจะมี face mesh แบบต่างๆให้เรา

ไฟล์ที่เราสนใจคือไฟล์ faceMesh.png จะเป็นไฟล์ png พื้นใส แบบโครงหน้าเราจาก 3D เป็น 2D อ่ะ ตามความเข้าใจของเรา เราสามารถนำไฟล์ template ตรงนี้ไปใช้ทำ filter ต่างๆต่อได้จ้า

แต่เราแนะนำให้ใช้ไฟล์ faceMeshTracker.png เพราะมีจุดแดงๆ mask ไว้ ทำให้เราเอาไปทำ filter ง่ายกว่า เวลาเราเพ็นต์หน้าหรือแต่งหน้าลงไป คิ้ว ตา ปาก จมูก จะไม่เลยเนอะ

วิธีการทำ filter แบบรีบๆของเราก็คือ ไปเปิดไฟล์ template นี้ใน Procreate ซะ จากนั้นสร้าง layer ใหม่มาทับ แล้ววาดๆๆๆๆตามใจชอบ พอเราวาดจนพอใจแล้ว ให้กดซ่อน layer background และ ตัว template จากนั้นเซฟเป็น png เราจะได้ไฟล์ png แบบพื้นใสมาใช้งานต่อได้จ้า

การที่เราทำจากไฟล์ template ข้อดีคือ ทำให้ตำแหน่งที่เราต้องการวาดลงไปบนหน้าของเรานั้น ตำแหน่งไม่เพี้ยน ถ้าเราจะเอาไฟล์ภาพจากที่อื่นมา ให้เข้า template นี้เพื่อป้องกันภาพตำแหน่งเพี้ยนจ้า

นอกจากจะทำผ่าน Photoshop, Procreate และอื่นๆแล้ว สามารถทำผ่านเว็บนี้ได้ด้วยจ้า

Photopea | Online Photo Editor
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!
https://www.photopea.com/

กลับมาที่ Spark AR ตรง Scene ด้านซ้ายบน ให้ทำการคลิกขวา ไปที่ Add -> Face Mesh ก็จะได้ Face Mesh ที่เป็นลูกของ Face Tracker มา

ถ้ามือลั่นไปทาง Add -> Face Tracker ไม่ต้องตกใจ ทำการ Add -> Face Mesh อีกทีก็จะได้ผลลัพธ์เหมือนกันจ้า

ในรูปเราเพิ่ม retouch ไปหล่ะ ขี้เกียจลบหล่ะ 555 จะเป็นประมาณนี้หนา

พอทำเสร็จแล้วเป็นหน้าตารางก็คือถูกต้องแล้วจ้า อย่าตกใจ เพราะเรายังไม่ได้เพิ่ม Material ให้กับเจ้า Face Mesh นั่นเอง

ต่อมาทำการเพิ่ม Material กัน ไปช่อง Assets ด้านซ้ายล่าง จิ้มที่ Add Asset -> Material

หน้าตาตรง assets จะประมาณนี้ อันนี้เพิ่ม Material และ Texture แล้ว

select ที่ Material ที่สร้างมาเมื่อกี้ ไปที่ด้านขวา ทำการเพิ่ม Texture โดยการกดลงมา ไปที่ New Texture แล้วเลือกไฟล์ png พื้นใสที่เราต้องการจ้า

ยังเป็นลายตารางอยู่ ถูกแล้ว เพราะว่า เรายังไม่ได้เชื่อม Face Mesh กับ Material เข้าด้วยกันนั่นเอง ไป select ที่ Face Mesh ดูตรงฝั่งขวา เพิ่ม material เลือก material ที่เราสร้าง และเราก็จะได้ filter ที่เราวาดขึ้นแล้วหล่ะ แน่นอนว่ามันจะลอยๆนิดนึง

ตรงฝั่งขวาของ material นั้น ให้ลองปรับเปลี่ยน Shader Type ซึ่งอันที่เหมาะกับในเคสนี้ก็คือ Face Paint เพราะสามารถปรับได้เยอะกว่า และดูเนียนกว่า หรือถ้าอยากได้สีสดๆให้เลือกแบบ Flat จ้า และไม่มีเงาให้ด้วย

ส่วน retouch ทำให้หน้าเราเนียนขึ้น เราจะไปแบบเร็วๆนะ สร้าง Material ใหม่ เปลี่ยน Shader Type เป็น Retouching มันก็จะสร้าง Texture หน้าเนียนให้ จากนั้นทำการผูกกับ Face Mesh อันใหม่ แล้วลากไปไว้ layer ชั้นบนสุดเป็นอันเสร็จจ้า

เพิ่มตัวหนังสือสามมิติ

กดคลิกขวา ไปที่ Add -> 3D Text

แล้วจะได้ text ลอยๆกลางจอ ที่น่าจะผิด policy แน่ๆ

ดังนั้นจะต้องลากมันเข้าไปอยู่ใน Face Tracker กันก่อน ตัวหนังสือจะตามหน้าเราแล้วนะ

เราสามารถแก้ไขตัวหนังสือตรง Typography ที่ด้านขวา ทั้ง text แล้วมีแสดง Dynamic Text ตัว font ได้ด้วยนะ โดยเราสามารถใส่ font อื่นๆตามในนี้เลยจ้า

Adding Fonts
https://sparkar.facebook.com/ar-studio/learn/articles/2D/adding-fonts/#add-the-custom-font-capability

เมื่อทำครบทุกอย่างแล้ว เราสามารถใช้ font อื่นที่เราต้องการได้เลยยย

เราสามารถขยับตำแหน่งของ text ได้ โดยการลากตัว object ใน Viewport ไปในตำแหน่งที่ต้องการ แนะนำให้ pause ก่อนค่อยลากเนอะ

จะได้แบบนี้

อยากปรับสีเพิ่มเนอะ ไปที่ material ที่ผูกกับ text ของาน ตรง Shader Type เลือกที่ Shader Asset -> Create UI Shader Code Asset

จะได้ประมาณนี้เนอะ

ถ้าเราอยากได้จมูกโด่ง ตาโต หน้าเรียวหล่ะ?

อันนี้เป็นเว็บปั้น model ที่คุณมิ้นต์แนะนำจ้า

SculptGL - A WebGL sculpting app
SculptGL is a small sculpting application powered by JavaScript and webGL.
https://stephaneginier.com/sculptgl/

Tutorial จ้า

https://www.youtube.com/watch?v=3cDr_weipeI

เมื่อทำการปั้น model แล้ว ให้ไปเพิ่ม Face Mesh จ้า แล้วไปที่ tab ด้านขวา ไปที่ Deformation เพื่อ import model เข้ามา

วิธีการแชร์ filter ที่เราทำ

อันนี้เป็นวิธีการ link account social ของเราเข้ามา

Linking an Instagram Account
https://sparkar.facebook.com/ar-studio/learn/publishing/setting-up-instagram-accounts-for-effect-distribution/#linking-one-Instagram-account-to-a-facebook-page

ถ้าเราอยากลองบนจอมือถือ ให้เข้าไปที่แอพ Spark AR Player จากนั้นกดแถบด้านซ้ายที่เป็นเข้าเครื่องอ่ะ ชื่อปุ่มว่า Test on Device จากนั้นรอให้ device ของเราขึ้นมา และกดส่งเลย

ถ้าจะแชร์ให้เพื่อนๆ ให้กด Send ที่ social app ที่เราต้องการ จากนั้น copy link ไปแชร์ให้เพื่อนๆได้ ซึ่ง link นั้นจำกัดคนดู 200 views ต่อวันจ้า

ท้ายสุดกลับมาห้องรวม มีการ show case ของที่ทำกัน ของเราทำเป็นแพนด้า สามารถไปลองเล่นได้ โดยกดจากมือถือที่นี่จ้า

Facebook
https://www.facebook.com/fbcameraeffects/tryit/1144908212698772/
Panda Mask by pastel_in_the_wonderland
https://instagram.com
https://www.instagram.com/ar/1144908212698772/

สุดท้ายนี้ก็ขอขอบคุณทุกภาคส่วน ไม่ว่าจะเป็นทาง Facebook Developer Circle: Bangkok แล้วก็ Spark AR Thailand Community แล้วก็ speaker และทุกคนๆที่มาร่วมงานที่คอยช่วยเหลือกันในงานด้วยนะคะ ที่ทำให้เราได้ทำ filter สนุกๆแล้วนำไปใช้ได้จริง :D


อันนี้แถม

ตอนกดส่ง submit ให้กดปุ่มล่างจากที่แชร์ให้เพื่อนเมื่อกี้ ชื่อว่า Publish

พอกดเสร็จจะมีหน้าจอนี้ออกมา จากนั้นกด upload แล้วจะพาไปหน้า Spark AR Hub

คลิป Tutorial ที่ลองทำ filter แบบง่ายๆ ที่ลองทำจากที่คุณมิ้นต์สอน จากสร้างโปรเจกยันทำจริง

https://www.youtube.com/watch?v=HERptvZnT2g

เดี๋ยวทยอยทำเล่นสนุกๆมาเพิ่มน้า


อันนี้เอามาดูกันยาวๆกับ Tutorial จ้า

https://www.youtube.com/watch?v=Wk9ZoW1aLrw

download แอพอ่านบล็อกใหม่ของเราได้ที่นี่

MikkiPastel - Apps on Google Play
First application from “MikkiPastel” on play store beta feature- read blog from https://www.mikkipastel.com by this application- read blog content by chrome custom tab- update or refresh new content by pull to refresh- share content to social network
https://play.google.com/store/apps/details?id=com.mikkipastel.blog

ติดตามข่าวสารและบทความใหม่ๆได้ที่

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, 10 December 2017

ช่องทางใหม่ใน Twiter จ้า

และ YouTube ช่องใหม่จ้า

mikkicoding
Android Developer & Content Creator
https://www.youtube.com/channel/UCtGbMSe4i7NJiKQ271Fezcg

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.