คู่มือการใช้ Spark AR Studio

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

3 VR เป็นเทคโนโลยีที่จำลองสถานที่ขึ้นมาเป็นโลกเสมือนโดยส่วนมากจะ เกี่ยวข้องกับการ มองเห็น โดยผู้ใช้สามารถโต้ตอบกับสถานที่หรือสิ่งแวดล้อที่จำลองขึ้นมาได้ผ่านอุปกรณ์ เช่น แป้นพิมพ,์ เมา้ ส์ หรอื วา่ อปุ กรณท์ ท่ี ำขนึ้ มา โดยเฉพาะ เช่น ถงุ มอื ,รองเทา้ เปน็ ต้น MR เป็นโลกเสมือนที่สร้างสิ่งจำลองขึ้นมา ซ้อนทับโดยอิงกับตำแหน่งของโลกจริง ซึ่งเรา จะเห็นวัตถุเสมือนนั้นวางอยู่ตำแหน่งเดิมเสมอ เมื่อหันหน้าไปทางอื่นก็จะไม่เห็น แต่ถ้าหันกลับไป ตำแหน่งเดิมก็จะมองเห็น สามารถใช้มือถือเล่นได้ หรือแว่น MagicLeap One, Hololens ของ ไมโครซอฟตก์ ็ได้ CR เป็นภาพยนตร์เสมือนจริงที่พัฒนามาจาก AR และ VR จะเป็นภาพวัตถุ หรือบุคคล ปรากฏซ้อนทับขึ้นบนโลกจริง แต่มีมิติและเสมือนมีตัวตนจริงอยู่บนโลก มีทั้งแบบรองรับแว่นตา และไม่ตอ้ งใชแ้ วน่ ตาก็รบั ชมได้ SR เปน็ โลกทดแทนเสมอื นจรงิ ระบบจะนำวิดีโอภาพและเสียงท่ีบันทึกไว้และ ส่งภาพออกมา ให้ชมในรปู แบบเสมอื นจรงิ ในมมุ มองรอบทิศทางแบบ VR โดยจะเห็นภาพทงั้ ที่บันทกึ ไว้และภาพจริง ในปัจจุบันซ้อนทับกัน เทคโนโลยีนี้ถูก นำมาใช้ในเว็บไซต์โฆษณา โดยต้องเล่นผ่านแว่นตาคล้าย VR Head Set

4 XR คือ เทคโนโลยีใหม่ ที่รวม VR AR และ MR เข้าด้วยกัน และเชื่อมต่อทุกสิ่ง เข้ากับ อินเทอร์เน็ต ผสมผสานทั้งความสามารถของ AR+VR และ MR ซึ่งในอนาคตจะนำมาใช้ทั้งในด้าน อตุ สาหกรรม การศกึ ษา การทหาร สุขภาพ ท่องเท่ียว และความบันเทิง Face Reference Assets เป็นคอลเลกชั่นพื้นผิวและอ็อบเจ็กต์ 3 มิติ ใช้องค์ประกอบชุดนี้เมื่อสร้างเอ็ฟเฟ็กต์ใบหน้า ใน Spark AR Studio Face Reference Assets มอี ะไรบา้ ง

5 เมื่อคุณเปิดไฟล์ที่ดาวน์โหลดมาบนคอมพิวเตอร์ คุณจะเห็นโฟลเดอร์ 2 โฟลเดอร์ ได้แก่ \"Mesh\" และ \"Texture\" โฟลเดอร์ \"Mesh\" มีเมช 3 มิติและตัวปิดศีรษะเป็น รูปแบบไฟล์ต่างๆ โฟลเดอร์ \"Texture\" มีไฟล์พื้นผิว 2 มิติ โฟลเดอร์นี้มีอ็อบเจ็กต์ 3 มิติ 2 ประเภท ในรูปแบบไฟล์ ต่างกนั ไดแ้ ก่ 1. faceMesh.fbx, faceMesh.dae และ faceMesh.obj คือเมชหน้าที่ใช้ใน การติดตามใบหน้า ของเรา ซง่ึ คุณสามารถใช้เป็นตัวอา้ งอิงสัดส่วนเมอ่ื คณุ สรา้ งอ็อบเจก็ ต์และพนื้ ผวิ 2. headOccluder.fbx, headOccluder.dae และ headOccluder.obj คือ ใช้อ็อบเจ็กต์เพื่อปิด ปรมิ าตรของศีรษะ Textures โฟลเดอร์นี้มีฟลพ์ ืน้ ผวิ 2 มิติ 3 ประเภทในรูปแบบ JPG และ PNG ได้แก่ faceMesh.png และ faceMeshTrackers.png พน้ื ผวิ เหล่านแี้ สดง โทโพโลยีและจดุ ตา่ งๆ บนใบหน้าที่ติดตามโดย Spark AR Studio ใช้ พ้นื ผวิ เหลา่ นีเ้ พอ่ื แก้ไขจุดบกพร่องของเอ็ฟเฟก็ ต์ FaceMeshMask.png ใช้พื้นผวิ นีเ้ พื่อทำใหข้ อบของวตั ถกุ ลมกลืนกบั ใบหน้าfaceFeminine.jpg และ faceMasculine.jpg พื้นผิวเหล่านี้ได้รับการ สร้างมาให้ดูเหมือนใบหน้าจริง ใช้พื้นผวิ เหลา่ นี้เปน็ เทมเพลตเมื่อสร้าง พื้นผิวหรือเอ็ฟเฟ็กต์ใบหน้าแบบกำหนดเอง เพื่อช่วยให้คุณมีไอเดียในการจัด วางคุณลักษณะต่างๆ ของผูท้ ี่ใชเ้ อ็ฟเฟก็ ต์ของคุณ

6 faceMesh.fbx, faceMesh.dae และ faceMesh.obj นี่คือเมชหน้าที่ Spark AR Studio ใช้เพื่อ ระบุใบหน้าบคุ คลและตดิ ตาม ใชเ้ มชน้ีเพอื่ ช่วยสร้างองคป์ ระกอบของคุณในซอฟตแ์ วร์ภายนอก เราขอแนะนำให้ ใช้ \"FaceMesh.fbx\" เพือ่ ความเข้ากันได้สงู สดุ ใช้อา้ งอิงสัดส่วน ใช้เมชหนา้ เปน็ ตัวอ้างองิ สัดส่วน เชน่ เมื่อคุณสร้างอ็อบ เจก็ ต์ อยา่ งแวน่ ตาหรือ หมวกทจี่ ะใหต้ ดิ ตามใบหน้าการใชเ้ มชน้ีเป็นตวั อ้างอิงจะทำให้อ็อบเจ็กต์ของคุณมี ขนาดท่เี หมาะสมเม่ือคุณนำเข้าใน Spark AR Studio สร้าง Blendshape การดัดแปลงใบหน้าใช้ซอฟต์แวร์ 3 มิติในการย้ายจุด ต่าง ๆ ในอ็อบเจ็กต์นี้ เพื่อดัดแปลงรูปทรงของเมช คุณสามารถนำเข้าไฟล์นี้ใน Spark AR Studio และใช้ เป็น Blendshape เพ่ือปรับเปล่ียนรูปหน้าของบคุ คลไดเ้ ม่ือพวกเขาใชเ้ อฟ็ เฟ็กต์นี้ สร้างหน้ากากและการแต่งหน้าแบบกำหนดเองใช้เมชเป็นตัวอ้างอิงเมื่อคุณ จะสร้าง

7 พื้นผิวในซอฟต์แวร์ภายนอก เช่น ใช้เป็นจุดเริ่มต้นในการสร้างหน้ากาก เอ็ฟเฟ็กต์แต่งหน้า เอ็ฟ เฟ็กต์ หรอื แมป เพื่อใช้กบั เชเดอรต์ ามกายภาพ headOccluder.fbx, headOccluder.dae และ headOccluder.obj รวมอ็อบ เจ็กต์น้ี กับวัตถตุ ัวปดิ เพื่อปิดปริมาตรของหัว เมชนอี้ าจไมพ่ อดีกบั ศีรษะ ของผู้ใชโ้ ดยสมบรู ณ์ เช่น มงกุฎ หรอื หมวก เนอ่ื งจากเมชน้จี ะซ่อนสว่ นของสิ่งของที่ถูกศรษี ะบังในโลกจรงิ ส่วนใบหน้าจะแบน หมายความว่าเมชนี้จะไม่แทรกแซงเมชหน้าที่คุณจะเพิ่มลงในซีน ซง่ึ จะแสดงใหเ้ ห็นใบหน้าและการเคลอื่ นไหวของผใู้ ช้ faceMesh.png และ faceMeshTrackers.png

8 พื้นผิวเหล่านี้แสดงให้เห็นเลย์เอาท์ UV และโทโพโลยีของเมชหน้าที่ใช้ใน Spark AR Studio โดย faceMeshTrackers.png จะมีจุดสีแดงเพื่อเน้นจุดต่างๆ บนใบหน้าที่ระบบของเราติดตาม การ สรา้ งพืน้ ผวิ โดยใชเ้ ส้นกริดเหล่านีเ้ ป็นตัวอ้างอิง จะช่วยใหค้ ณุ เข้าใจว่าส่วนต่างๆ ของพื้นผิวจะจัด วางที่ใดบ้างในเอ็ฟเฟ็กต์นีโ้ ปรดทราบว่าพื้นผวิ เหล่าน้ีจะไม่มีจุดทีแ่ สดงให้เห็นขอบของเมชหน้าตรง ดา้ นขา้ งใบหนา้ FaceMeshMask.png พื้นผิวนี้อาจใช้เพื่อทำให้ขอบของวัตถุเลือนหายไปเมื่อใช้กับใบหน้าของบุคคล ซึ่งจะมี ประโยชน์เมื่อคุณต้องการทำให้วัตถุกับพื้นผิวกลมกลืนกับใบหน้า ในรูปภาพด้านล่าง เราใช้ \"FaceMeshMask\" ในเอ็ฟเฟก็ ตด์ ้านขวา

9 วิธใี สพ่ ้ืนผิวนใ้ี นโปรเจ็กต์ของคุณ สร้างวัตถุสำหรับเมชหน้าในซีนของคุณ เลือกวัตถุในแผงองค์ประกอบในแผง ตัว ตรวจสอบ ใหท้ ำเคร่ืองหมายในช่องถัดจาก \"Alpha\"นำเขา้ พ้ืนผวิ นี้จากคอมพิวเตอร์ของคุณโดยใช้ เมนดู ร็อปดาวน์ถัดจาก \"Texture\" faceFeminine.jpg และ faceMasculine.jpg ใช้พ้นื ผวิ และเทมเพลตเหลา่ นีเ้ มอ่ื สร้างพนื้ ผวิ ของคุณเองสำหรับเอ็ฟเฟ็กต์ ใบหน้า นำเข้า ไฟลเ์ หลา่ น้ใี นซอฟต์แวรท์ ่ีคุณใช้สรา้ งพ้นื ผิว แลว้ สร้างพืน้ ผิว ของคุณบนเลเยอร์ใหม่ไฟลเ์ หล่านีจ้ ะ ชว่ ยใหค้ ณุ เห็นลักษณะใบหน้าโดยละเอียดย่ิงขนึ้ เช่น จดุ เร่มิ และจดุ สน้ิ สดุ ของคว้ิ หรือปรมิ าตรของ ริมฝปี าก โดยพ้ืนผวิ เหลา่ นมี้ โี ทนสเี ป็นสีเทา

10

11 คู่มือการใช้โปรแกรม Spark AR Studio ขนั้ ตอนที่ 1 ดาวนโ์ หลดไฟล์ และโปรแกรม ดาวน์โหลดไฟล์ฟิลเตอร์ > https://drive.google.com/drive/folders/18SPt7c47B4mCmSkAFBde_1F1q074WHND?usp=sharing ดาวนโ์ หลดโปรแกรม Spark AR > https://sparkar.facebook.com/ar-studio/ ขนั้ ตอนท่ี 2 แตง่ รปู Lightroom

12 • นำไฟล์ BaseColor.png ไปแตง่ ในแอพ Lightroom • ใชว้ ธิ ีก็อปพรเี ซ็ตมาวางใสก่ ไ็ ด้ • เสรจ็ แลว้ ก็สง่ ไฟลร์ ปู เข้าคอมพิวเตอร์  ขอ้ แนะนำ ปรบั แต่งคา่ แสง เบาๆก็พอ ส่วนคา่ สี จัดหนักตามใจไมแ่ นะนำให้ใส่ เอเฟค เชน่ เมด็ ฟิลม์ ทำผิวนวล ฯลฯ พวกนี้ ไม่สง่ ผลต่อฟิลเตอร์ และทำให้สเี พ้ยี นอีกการใส่เม็ด ฟิลม์ ทำผิวเนียน เปน็ อกี เทคนิคท่ีตอ้ งทำในโปรแกรม Spark AR เท่านัน้ ขนั้ ตอนที่ 3 ตงั้ คา่ เปดิ โปรแกรม Spark AR และลอ็ กอนิ ผ่าน Facebook A. คลกิ Create New เลอื ก New Project

13 B. เลอื ก Blank Project C. พอเข้าโปรแกรมไดแ้ ล้ว จะเจอหน้าตาแบบน้ี

14 D. ตอ่ มา เขา้ เมนู View เลอื ก Show / Hide Patch Editor

15 E. เมนู Project เลอื ก Edit Properties F. คลิกเลอื ก Instagram Media Library และ Done

16 G. คลิก Camera และคลิกปุ่มท่ี Texture Extraction

17 H. คลกิ ท่ปี ่มุ กลอ้ ง แลว้ โปรไฟลใ์ หม่ แนะนำให้เลอื กผู้หญงิ ฝรั่ง หรือชาวเอเชียกไ็ ด้ จะได้ผวิ ที่ ไกลเ้ คียงกบั คนไทยหรือคลกิ กลอ้ ง FaceTime จะเป็นการใชก้ ล้องจากคอม

18 ขนั้ ตอนท่ี 4 สรา้ งฟลิ เตอร์ A. นำไฟล์ BaseColor.png ทแี่ ตง่ เสรจ็ แล้ว และ FastColorLUT.arp ลากมาวางไว้ในช่อง Assets

19 B. คลิก Add Object เลอื ก Rectangle และกด Insert

20 C. คลิก rectangle เปล่ยี นค่า Width และ Height ให้เป็น 100% D. คลกิ ที่ช่อง แลว้ เลือก Fil Width หรือพิมพต์ ัวเลข 100

21 ถ้าเต็ม 100% แล้ว ภาพวิดีโอจะถูกปิดทับ E. ต่อมาคลิกปุม่ ท่ีช่อง Materials

22 F. คลิก material เปลีย่ นค่า Shader Type เปน็ Flat

23 G. คลิกท่ีปมุ่ หน้า Texture จะเหน็ กรอบสเี หลอื ง โผล่ขึ้นมาด้านล่าง

24 H. ลากไฟล์ BaseColor , CameraTexture และ FastColorLUT มาวางไวใ้ นชอ่ ง Patch Editor I. คลิกปุม่ ที่กรอบ J. ลากเสน้ เชื่อมหากัน (ตามภาพ)

25 K. คลิกทไี่ ฟล์ BaseColor และคลิก No Compression จะทำใหฟ้ ิลเตอรม์ ีความคมชัด

26 ขน้ั ตอนท่ี 6 แกฟ้ ลิ เตอรต์ ดิ แดง ในกรณที ่ี ถา่ ยรูปในท่มี ดื แล้วมสี ีแดงข้ึนมา ให้แกต้ ามนี้ A. ดบั เบลิ้ คลิก FastColorLUT B. ดทู ก่ี รอบ Clamp เปลีย่ นค่า • Min = 0.05 • Max = 0.09

27 ขนั้ ตอนท่ี 7 ทดสอบ A. คลิกปมุ่ media

28 B. ลองเปลย่ี นภาพ หรือเพ่ิมรูปภาพมาใสเ่ องกไ็ ดเ้ พ่อื ทดสอบโทนสี

29 C. จากนัน้ คลิกทีป่ ุ่มือถือ (ล่างซา้ ย) แล้วเลือกส่งเข้าแอพ Instagram และกอ็ ปล้งิ ค์ สง่ ใหค้ น อ่นื ไปทดสอบได้ดว้ ย

30 D. เปิดมือถือ เข้าแอพ Instagram E. ดูทีเ่ มนแู จ้งเตอื น กดที่ Preview.axeport แลว้ เอาไปทดลองถา่ ยรูปได้เลย

31 ขนั้ ตอนที่ 8 สง่ ขนึ้ ระบบ A. เมนู File > Save B. แล้วต่อด้วย File > Upload and Export C. คลิก Upload

32 D. ตอ่ มา แอพจะเดง้ ไปทีเ่ ว็บเบราว์เซอร์ • ตง้ั ช่ือฟลิ เตอร์ • เลือกแพทฟอร์ม Instagram • เลือก หมวดหมู่ • กรอกขอ้ มลู คียเ์ วริ ์ด E. คีย์เวิรด์ คือคำท่ีคุณคดิ ว่า ผคู้ นจะใชค้ น้ หาฟลิ เตอร์ตัวน้ี เช่น โทนส้ม โทนฟิล์ม หนา้ สด เปน็ ตน้ สามารถใชไ้ ด้หลายคำ

33 • อัพโหลดไฟลว์ ิดโี อ ทีถ่ า่ ยดว้ ยฟลิ เตอร์ตัวนี้ • อพั โหลดไฟลไ์ อคอน เปน็ ไฟล์ภาพ png ขนาด 480 x 480

34 F. วนั ทเี่ ผยแพร่ ให้เลือก โดยเรว็ ที่สดุ ในสว่ นของ ขอ้ มลู การตรวจสอบ ใหพ้ มิ พร์ ายละเอียด บอกว่า ฟลิ เตอรน์ ้ีเก่ียวกับอะไร G. เสรจ็ แลว้ คลิกปุ่ม ส่ง H. หลงั จากน้ัน ต้องรออกี 1-3 วนั ถึงจะไดร้ ับอนุมัติ

35 I. ถ้าได้รับอนมุ ัติแลว้ ฟิลเตอรจ์ ะข้นึ มาทห่ี นา้ โปรไฟลใ์ หท้ นั ที

36

37