🎞️ Videos → SLAM: WebAR Without Markers

แนะนำตัวและเกริ่นนำเรื่อง WebAR0:00

สวัสดีครับ ชื่อเม่นนะครับ ตอนนี้เป็น technical specialist อยู่ที่ Mohara นะครับ วันนี้ก็มา hiring - ล้อเล่นนะครับ

WebAR คืออะไร? แตกต่างจาก VR อย่างไร?0:15

ก็มาเล่าเรื่อง webAR เนี่ยแหละครับ ถ้าถามว่าอะไรคือ AR เนี่ย เราเข้าใจว่าทุกคนก็น่าจะรู้จัก AR กันมาแล้วแหละครับ แต่ว่าเผื่อมีบางคนอาจจะยังไม่รู้แล้วกัน เดี๋ยวอินโทรให้นิดนึง AR เนี่ยครับมันเป็นเทคโนโลยีที่เราเอา 3D ขึ้นมา overlay

อยู่บน environment ของโลกความเป็นจริง โดยผ่านทางกล้องเนาะ

AR เนี่ยมันจะแตกต่างจากสิ่งที่เรียกว่า VR ตรงที่เราไม่ต้องใส่ headset เนาะ หรือว่าแบบไม่ต้องใส่แว่นใช่มั้ย เพราะเราจะใช้โทรศัพท์หรือว่ากล้องมือถือเราเนี่ยแหละครับ ไม่ว่าจะเป็นกล้อง webcam หรือว่ากล้องมือถือก็ตามเนี่ย

ประโยชน์ของ AR: การเรียนรู้และการตลาด0:55

AR เนี่ยก็จะมาช่วยในการ deploy digital content ของเรา

ไม่ว่าจะเป็น 2D 3D อะไรก็แล้วแต่ครับ ก็จะเข้ามาช่วยเราตรงนี้ ถ้าเกิดดูอย่างในตัวอย่างเงี้ย เค้าก็จะใช้กล้องเค้านะครับ pan ไปที่หนังสือ

หรือว่า content อะไรก็ตามที่อยู่บนโลกใบนี้เนี่ยครับ

แล้วทีเนี้ยมันก็จะขึ้นเป็น digital content ขึ้นมาเนาะ สมมุติอันเนี้ยครับ ซึ่งเดี๋ยวเนี้ยก็มีแล้วแหละ อย่างตัวอย่างเนี้ยคือเป็นหนังสือใช่มั้ย หนังสือพวกประวัติศาสตร์ หนังสืออะไรก็แล้วแต่ครับ ก็สแกน เอากล้องไปจี้ที่ content นั้นใช่มั้ย แล้วก็จะขึ้นมาเป็น content 3 มิติ ก็ไม่ได้ช่วยเรื่องการเรียนรู้สำหรับเด็กๆ ยุคใหม่เนาะ แบบก็จะมีโอกาสที่ดีในการเรียนรู้ของพวกนี้ เราจะได้รู้ว่าตรงเนี้ยมันคืออะไรใช่มั้ย แล้วตรงนี้มันเป็นยังไง กดคลิกเข้าไปดูมี info อะไรเงี้ยครับ ก็จะเป็นประโยชน์ของ AR ในปัจจุบันนี้นะครับที่เราใช้กัน อีกอย่างนึงก็คือเรื่องพวกทำ marketing นู่นนี่นั่น advertise ต่างๆ

ประเภทของ AR: Marker-based, Markerless, Projection-based และ Superimposition-based2:02

AR เนี่ยมันก็มีหลายชนิดเนาะ ชนิดของ AR เนี่ยมันก็จะมีแตกต่างกันไปนะ แต่ว่าตอนเนี้ยครับที่เค้าฮิตๆ กัน หรือว่าจริงๆ ทุกคนควรจะรู้จัก หรือว่าน่าจะรู้จักกันอยู่แล้ว คือ AR ที่มันต้องสแกนกับอะไรซักอย่างใช่มั้ยครับ เราเรียกว่า marker-based AR ครับ อันเนี้ย AR ตัวเนี้ยก็คือจะต้องมีรูปหรือว่า marker

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

ผมต้องการแค่กล้องที่เปิดอยู่ใช่มั้ย แล้วก็โลกความเป็นจริงของเรานี่แหละ เดี๋ยวเรามาดูกันว่ามันจะทำไง มีอีกอันนึงครับ อันนี้ถือว่าแบบเป็นอะไรที่ว้าวมาก ครั้งแรกที่ผมได้ไปเห็นก็คือ projection-based AR ก็คือเค้าจะเล่น AR กับตัวโปรเจคเตอร์เนี่ยแหละครับ ซึ่งไอ้อันเนี้ยมันดีตรงที่แบบมัน interact ได้เยอะกว่า

หลายๆ คนอาจจะไม่รู้ว่าแบบฝั่งประเทศทางสิงคโปร์ครับ เค้าจะมีโปรเจคเตอร์ที่มัน touch ได้เนาะ ซึ่งไอ้เจ้าโปรเจคเตอร์พวกเนี้ยครับ มัน detect touch ได้ กลายเป็นว่าเราเล่น AR กับ content แบบจริงๆ อ่ะ

จะมีงานนึงที่ผมเคยทำกับฝั่งสิงคโปร์ ก็คือเค้าจะใช้โปรเจคเตอร์นะครับ โปรเจคไปที่ wall เค้าเรียกว่า touch wall ใช่มั้ย ทีเนี้ย ก็จะเป็นการจิ้มไปตรงนี้ปุ๊บเนี่ย

AR ทำงานอย่างไร? เจาะลึกการใช้ AR บนเว็บ3:40

ก็มี content ขึ้นมาเลยบนกำแพง

อันเนี้ยน่าสนใจมากครับ ก็หวังว่าจะได้เห็นในประเทศไทยในเร็วๆ นี้ แล้วก็มีอันสุดท้ายเนี่ยครับ เป็นสิ่งที่เรียกว่า superimposition-based AR นะครับ ถามว่าแบบมันดีมั้ย ถ้าเราเห็นจากรูปหรือว่าใน screenshot เนี่ยครับ ก็ลองนึกภาพดูว่าโบราณสถานอ่ะครับ ถ้ามันพังๆ ไปแล้วอ่ะ แล้วถ้าเกิดเราอยากรู้ว่าตอนมันไม่พังเป็นยังไงอ่ะ เจ้าตัวเนี้ยแหละครับจะเข้ามาช่วยเราได้ มันสามารถที่จะ detect เป็น object detection นะครับ แล้วก็สามารถ imposition model หรือว่า content ของเราเนี่ยเข้าไปได้เลย แล้วก็ด้วยข้อได้เปรียบของ AR ที่เป็น superimposition AR เนี่ยก็ตามชื่อเลยครับ

ไม่ว่าจะเป็นแสงเงานู่นนี่นั่น detect ได้หมดเลย ถ้าแบบที่เห็นในรูปเนี่ย คือเค้าเอาไปสแกนที่โบราณสถานใช่มั้ย แล้วขึ้นมาเป็น silhouette ว่า ก่อนที่มันจะพัง หรือว่าก่อนที่มันจะมาอยู่ในสภาพเนี้ย มันเป็นยังไงมาก่อนใช่มั้ยครับ

ทีนี้เนี่ย ถามว่า AR เนี่ยเค้าทำกันยังไงใช่ป่ะ หลายๆ คนก็น่าจะคุ้นเคยใช่มั้ย ว่า AR เนี่ยเราทำกันยังไงใช่ป่ะ ก็ส่วนใหญ่จะเห็นในมือถือใช่มั้ยครับ มือถือเนี่ยถ้าเป็น stack ไทย stack เราก็คือ React Native ใช่มั้ยครับ ก็มันก็จะมีพวก ARKit แล้วก็ ARCore นะครับ ซึ่ง ARKit เนี่ยก็เป็นของ iOS นั่นเอง หรือว่าเป็น Apple เป็น closed source นะครับ ก็ develop ด้วย Apple นี่แหละครับ ส่วนถัดมาเนี่ยจะเป็น ARCore นะครับ ARCore เนี่ยเป็น open source แล้วก็เป็นของ Google ครับ ก็ไปลองเล่นกันได้ถ้าใครจะทำลงมือถือ

ข้อดี-ข้อเสียของ WebAR และปัญหาการใช้งาน5:18

แต่ทีนี้เนี่ยครับ ประเด็นของทุกวันเนี้ยครับ ถามว่าคนส่วนใหญ่อ่ะครับ มีใครชอบโหลดแอปกันมั้ยครับ

ก็คงไม่ใช่มั้ย

เพราะว่าการโหลดแอปเนี่ย หนึ่งเลยเราต้องรอใช่ป่ะ กับ content ยุคเนี้ยครับ marketing หนักๆ ลองคิดดูว่า มี QR code มาให้เปิดกล้องสแกน แล้วลิงก์ไปที่เว็บ แล้วขึ้นมาเป็นหน้าตาแบบนี้ อันไหนดีกว่ากันครับ

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

ตัวอย่าง WebAR ในไทยและการใช้งาน AR.js6:27

ก็จริงๆ คอนเทนต์ในไทยเนี่ยครับ ตอนเนี้ยจะบอกว่าก็มีเยอะแล้วเหมือนกัน ไม่ว่าจะเป็นพวก advertise หรือว่าแคมเปญต่างๆ ครับ

ก็สังเกตได้ว่าแบบตามขวดน้ำนู่นนี่นั่นอะไรเงี้ย ถ้าเค้ามี QR code ให้สแกนอยู่ข้างๆ ขวดอ่ะครับ ถ้าลองสแกนดูก็จะรู้เลยว่า อ๋อ

เค้าก็จะลิงก์ไปหน้าเว็บเค้าที่มันเป็น AR คอนเทนต์ของเค้าอ่ะครับ แบบ เฮ้ย เล่นกับขวดเนี่ย หรือว่าแบบเราเล่นกับ marker billboard ตามข้างถนนเนี่ย มันจะได้อะไรใช่ป่ะครับ ก็อย่างพวกของ Nescafé นะครับ เค้าก็จะมีเยอะเนาะ แล้วก็จะมีอันล่าสุดที่เป็นของ Nestlé ครับ ก็มีเล่นสะสมแต้มเป็นเหมือน AR catalogue ของเค้าครับ

ซึ่งเจ้าพวกเนี้ยครับ ก็จะเป็นเว็บ AR เนาะ แล้วก็เว็บ AR เนี่ยครับ ก็ถ้าเราอยากจะลองเล่นนะครับ แบบเราเป็นแบบงาน JavaScript ใช่มั้ย ก็จะมี AR.js ให้เราลองเล่นนะครับ ก็ AR.js เนี่ยจะเป็นแพลตฟอร์มที่เอาไว้สำหรับ ให้เราเล่น AR บนเว็บเนี่ยแหละครับ ก็จะเป็น npm package AR.js org เนี่ยนะครับ

แล้วก็เป็น open source นะครับ อันนี้สามารถเข้าไปช่วย contribute ได้ เข้าไปโหลดได้ แต่ว่าทีเนี้ยครับ อ้าว ดับไปแล้วครับ

Come back in a sec

ข้อจำกัดของ AR.js และการใช้ SLAM ใน Markerless AR7:43

โอเค ก็ทีเนี้ยพอพูดถึง AR.js ไปแล้วเนี่ย ก็อย่างที่บอกนะครับว่า AR.js เนี่ยมันไปไกลแล้วก็จริง แต่ว่าเทคโนโลยีที่เราจะทำ markerless AR เนี่ย มันยังไม่ support ไปถึง AR.js เนาะ ก็การที่เราจะทำเรื่อง markerless AR เนี่ย เค้าจะใช้แบบสิ่งที่เรียกว่า SLAM ครับ SLAM เนี่ยมาจากคำว่า simultaneous localization and mapping นะครับ ก็หลักการของไอ้เจ้าตัวเนี้ย หลักการของ SLAM เนี่ย เป็นเทคโนโลยีที่ทำให้เราแบบ map environment รอบๆ ตัวเราอ่ะครับ แล้ว stamp ไว้อ่ะ เป็นแบบ location ต่างๆ รอบตัวเรา ก็เดี๋ยวจะให้ดูว่า เฮ้ย จริงๆ แล้ว SLAM เนี่ยเค้าทำยังไง

SLAM คืออะไร? Use Case และการทำงานของ SLAM8:24

อันนี้คือ use case นะครับ use case ของ SLAM SLAM เนี่ย ก็เหมือนที่บอกไปแล้วว่า มันคือการ detect environment รอบตัวเราใช่มั้ย ก็ markerless AR ครับ แบบที่บอกไปแล้วว่า เฮ้ย ไม่ต้องการ object ไม่ต้องการอะไรเลย สิ่งที่ SLAM ทำนะครับ ก็คือการทำ keypoint detection ครับ ก็ใช้ image processing เนี่ยครับ กล้องใช่มั้ย กล้องของเราเนี่ย ก็คือในกล้อง feed อ่ะครับ

ถ้าเกิดเราลงไปลึกๆ เนี่ย แต่ละเฟรมอ่ะครับ มันก็จะเอาไปถูก image processing เนาะ SLAM เนี่ยจะ image processing กล้องแต่ละเฟรม แล้วก็เป็น keypoint detection ออกมา อย่างในรูปเนี้ยครับ จะบอกว่าอันเนี้ยเป็นของ IKEA นะ เป็นแอปของ IKEA ที่แบบใช้ SLAM เข้ามาช่วย ลองคิดดูว่า เฮ้ย การที่เราจะซื้อเก้าอี้ ซื้อเฟอร์นิเจอร์เข้าบ้านเนี่ยครับ ก็สิ่งที่มันลำบากคืออะไรครับ เราไม่รู้ว่าตอนวางแล้วมันจะเป็นยังไงใช่มั้ย แบบเราไปเจอใน Shopee อย่างเงี้ย เฮ้ย เราจะสั่ง เราไปเจอใน IKEA HomePro อะไรเงี้ย เราจะสั่ง แล้ววางแล้วมันจะเป็นยังไงอ่ะ ใช่ป่ะ แล้วขนาดมันจะพอดีมั้ยอะไรเงี้ย เราต้องไปวัดเหรอ ไม่ครับ เราอยู่ในยุค 2024 แล้ว ก็ IKEA เค้าก็มีแอปของตัวนี้ของเค้าใช่มั้ย ก็สิ่งที่ทำก็คือ อ่ะ อยากลองใช่มั้ย เปิดเลยครับ เปิดกล้องแล้วก็ลองเอาไป map ดู ใช่มั้ย ปุ๊บ ได้อันที่ต้องการปุ๊บ กดวาง อ้า รู้แล้วว่าเป็นยังไงทีนี้ ก็อันนี้จะเป็นข้อได้เปรียบของ SLAM นะครับ

ข้อดีของ SLAM และการใช้งานใน IKEA Place และ Pokemon Go9:42

เพราะว่าเหมือนที่บอกไปแล้วว่า SLAM เนี่ย จะไป detect environment รอบๆ ใช่มั้ย ด้วยแบบ keypoint detection ต่างๆ แล้วแบบ แล้วก็จะ map ว่า เฮ้ย รอบตัวเรามีอะไรใช่มั้ยครับ แล้วทีเนี้ยพอมันได้ keypoint มาแล้วอ่ะครับ เราก็สามารถที่จะวาง object ของเราเนี่ย ลงไปตรงที่ keypoint นั้นได้ใช่มั้ยครับ ก็อันนี้ก็จะเป็นหลักการของ SLAM แล้วก็ use case คร่าวๆ แล้วก็พวกเนี้ยครับ use case อ่ะไม่ได้มีแค่นี้นะครับ ก็ถ้าใครเคยเห็นพวก Pokemon Go อะไรพวกเนี้ยครับ ก็จะเป็น location-based ใช่มั้ยครับ แต่ว่า location-based เค้าอ่ะครับ ก็จะเอามารวมกับ SLAM ด้วยเช่นกัน ถ้าเราลองเปิดกล้องดูให้เป็นแบบ environment AR ของเค้าจริงๆ อ่ะ เจ้าตัว Pokemon Go เนี่ยก็จะ detect environment รอบๆ เราได้ใช่มั้ย ก็จะรู้ว่า เฮ้ย ตัวมันควรจะต้องขึ้นตรงไหนใช่มั้ยครับ อ่า อันนี้ก็จะเป็น use case ครับ

ORB-SLAM: Library สำหรับ SLAM และการทำงานร่วมกับ OpenCV10:29

แล้วทีนี้บางคนบอกว่า หน้าตามันเป็นยังไงครับ ก็อันนี้คือ ORB-SLAM นะครับ ก็เป็น library ของ SLAM อันนึง ที่พัฒนามาจาก OpenCV อ่า ชื่อนี้คุ้นๆ ใช่มั้ยครับ ก็หนีไม่พ้นนะครับ OpenCV ก็ทำ image processing ใช่ป่ะ ทีเนี้ยนะครับ เจ้าตัว ORB-SLAM เนี่ยมาจากคำว่า oriented FAST and rotated BRIEF SLAM ใช่มั้ยครับ ก็สิ่งที่มันทำนะครับ ก็คือ สิ่งที่ ORB ทำอ่ะครับ ก็คือจะ map object ต่างๆ ใช่มั้ย ที่อยู่รอบตัวเราครับ จะเห็นจากในกล้องทางซ้ายว่า เฮ้ย เค้าจะขึ้น keypoint detection ไม่ว่าจะเป็นแบบตามมุม ตาม edge ต่างๆ

ของ object เราใช่มั้ยครับ แล้วทำการ map ไว้ใน space ของตัว AR

ของ library เนี่ยครับ ก็เราก็จะเห็นว่า เฮ้ย เนี่ย พอมันจำๆๆๆ จำใช่มั้ย สิ่งที่เราได้กลับมาคืออะไรครับ เป็น point keypoint ของ data ใช่มั้ยครับ พอเราได้ keypoint ของ data พวกนี้มา เราไปทำอะไรต่อได้ครับ จริงๆ เราก็รู้แล้วใช่ป่ะ ทีเนี้ยกล้องเรารู้แล้วว่าอะไรครับ ว่า เฮ้ย โลกเรามันเป็นยังไงใช่ป่ะ หมายถึงสิ่งรอบตัวเรามันเป็นยังไงใช่มั้ย

ทำไมต้องสร้างเอง? เปรียบเทียบกับ Third-party WebAR Platform11:37

แล้วทีเนี้ยครับ นี่ก็จะเป็นเหตุผลว่า เฮ้ย ทำไม markerless AR เนี่ย มันถึงวางได้โดยไม่ต้องใช้ marker หรือว่าอะไรเลย เพราะว่าอะไรครับ เพราะมันรู้อยู่แล้วว่ารอบตัวเราเนี่ยมีอะไรบ้าง เราวางตรงไหนได้บ้างใช่มั้ยครับ

แล้วก็อันนี้ครับจะเป็น key feature หลักๆ ของตัว ORB นะครับ ก็เหมือนที่บอกไปแล้วว่าตัว ORB เนี่ยจะใช้ keypoint detection ใช่มั้ยครับ เป็นการ detect ถ้าเราดูตาม screenshot เนี่ย ก็จะเป็น detect edge หรือว่า corner หรือว่า surface ต่างๆ ใช่มั้ยครับ ให้ library เนี่ยเอาไปใช้ต่อได้

แล้วทีนี้ถัดมา ข้อดีของ ORB เนี่ยคืออะไร ORB เนี่ยมันจะดีกว่า image processing ทั่วไป ตรงที่มันเร็วใช่มั้ยครับ แล้วมันก็เป็น real-time tracking ด้วย พอมันเป็น real-time tracking เนี่ย การที่เราจะ image processing frame by frame จากกล้องเข้ามาที่เป็น feed มันก็ง่ายใช่มั้ยครับ ทีนี้พอเค้าได้ตรงนี้มาแล้ว สิ่งที่เค้าเอาไปทำครับ เค้าไม่ได้เก็บ data หรือว่า keypoint พวกนี้ไว้เฉยๆ สิ่งที่เค้าทำคือเค้าจะเอาไป map ครับ map กับตัว environment 3D ที่ตัว ORB ครับสร้างขึ้นมา

ถ้าเกิดดูจาก visualize เนี่ยครับ เค้าก็จะเอา keypoint มา map ใช่มั้ย ว่าเฮ้ยตรงนี้มันอยู่ตรงไหน ตรงนี้อยู่ตรงไหนใช่มั้ยครับ ข้อดีของ ORB เนี่ยคือมันสามารถปิด loop ได้

บางคนงงว่า เอ๊ย ปิด loop คืออะไรใช่ปะ loop closure เนี่ยครับมันสำคัญตรงไหนใช่มั้ย เคยถ่าย panorama แล้วแบบมันไม่จบซักทีปะ

จริงๆ แล้วมันควรจะหมุนได้ 360 ใช่มั้ย แบบหมุนไปแล้วแบบ เอ๊ย มันเกินได้ยังไงวะ ก็นั่นก็คือ loop มันไม่ closure ใช่มั้ยครับ แต่ว่าด้วยความที่ ORB มันทำ keypoint detection แล้วก็ mapping ไว้ครับ มันทำให้มันรู้ว่า เอ๊ย ตรงไหนมันวนกลับมาแล้ว แล้วตรงไหนมันควรจะจบ หมายความว่าอะไรครับ ถ้าเราเดินรอบห้องนี้ด้วย ORB ครับ เราจะสามารถสร้าง keypoint ของห้องนี้เลยใช่มั้ยครับ แล้วพอมันเป็นถ้านี้ครับ กลายเป็นว่า เฮ้ย เราสามารถ deploy ของได้ ไปบน keypoint นี้ใช่มั้ยครับ

ทีนี้ถามว่า แล้วทำไมเราต้องทำขึ้นมาด้วย

ทำไมต้องใช้ ORB เราใช้ third-party ได้มั้ย จริงๆ WebAR เนี่ยครับ ถ้าเป็นแบบ third-party ทุกวันนี้ครับที่ทำ SLAM ดีๆ ได้นะ ที่เป็นแบบทำ keypoint detection วางของไปบนโลกความเป็นจริง หรือว่า environment ที่เราต้องการเนี่ยครับ

ข้อจำกัดและราคาของ 8th Wall และ Zappar14:07

ก็มี 2 เจ้าใหญ่ๆ นะ ก็คือเจ้าแรกครับชื่อ 8th Wall 8th Wall เนี่ยจะถูกใช้ตาม event หรือ campaign ต่างๆ ของแบรนด์ชั้นนำในโลกนี้แล้วกัน ไม่ว่าจะเป็นพวก Louis Vuitton หรือว่าพวก brand name ต่างๆ ครับ ก็จะใช้ตัว 8th Wall เนี่ยครับมาเล่น content ตัวเอง

ราคาเนี่ยครับ 700 เหรียญต่อเดือนเนี่ยมันแบบว่า สุดมั้ย

ก็ถ้าเราเอาไปทำ cloud function เราคงทำได้แบบว่า โอ้ สบายใช่มั้ยครับ

แล้วแบบอีกตัวนึงก็คือจะเป็นตัวที่รองลงมาที่ว่า Zappar แต่ราคามันก็แบบ 255 เหรียญต่อเดือน แล้วแบบราคาพวกนี้คือราคา per month แล้วแบบนอกจากจะเป็นราคา per month ไม่พอ ถ้าเกิด view มันเกิน limit ของเค้าครับ

ถ้าเราไปเทียบกับ request นะ

ปกติเราคิดเป็น request กันใช่ปะ AR WebAR ต่างๆ เนี่ยครับคิดเป็น view ลองคิดดูว่าถ้าเรามี content view เกินแสนคน แล้วเค้า charge แบบ 10 เหรียญ per พัน view อย่างเงี้ยครับ มันจะบานปลายแค่ไหนใช่มั้ยครับ

สุดยอดไปเลย ก็จริงๆ ก็ถามว่า charge โหดไหม โหดนะครับเพราะว่าจะบอกว่าอันนี้มันเป็น per project นะครับ มันไม่ใช่ว่าเราจ่ายแล้วแบบมา host เป็น service ไม่ใช่ครับ ก็ฟันกันโหดพอสมควรเลยทีเดียว

เหตุผลที่ต้องพัฒนา WebAR เองและแนะนำ React-three-fiber15:38

ฝั่ง WebAR เนี่ยก็เลยเป็นเหตุผลที่ว่า เฮ้ย ทำไมเราถึงต้องแบบอยากลองหรือว่ามี session นี้ขึ้นมาใช่ไหมครับ ก็เราก็เลยรู้สึกว่า เฮ้ย แพงไม่มีประโยชน์เลยอะ ทำไมอะ ใช่ปะ ก็ทีเนี้ยครับ เราก็เลยไปศึกษาว่า เฮ้ย ฝั่ง web เนี่ยครับเขาใช้อะไรกัน ทำ AR กันใช่ไหมครับ ก็เราก็จะ intro ให้ก่อนเลยว่า

การ render 3D หรือว่า 3D environment ในฝั่ง JavaScript เนี่ยครับ ไม่รู้ว่ามีใครเคยลองใช้ 𝚝𝚑𝚛𝚎𝚎.𝚓𝚜 มามั้ยใช่ไหม 𝚝𝚑𝚛𝚎𝚎.𝚓𝚜 เนี่ยถามว่าดีไหม ก็ดีครับ

ถ้าเราเขียนเจ้าตัว three มาใช่ปะ แต่ว่าถ้าเกิดเราแบบ อย่างเราเงี้ย เราแบบ muggle เลย บอกเลยว่า 𝚝𝚑𝚛𝚎𝚎.𝚓𝚜 เนี่ยคือแบบ โห ไม่เก่งเลยอะ ใช่ปะ แต่ว่าเราเคยเขียนแบบพวก 3D เขียน Unity เขียน graphic มาใช่ปะครับ เราแล้วเราทำ React อะ ทีเนี้ย เราก็เลยไปเจออีกสิ่งหนึ่งที่มันเรียกว่า 𝚛𝚎𝚊𝚌𝚝-𝚝𝚑𝚛𝚎𝚎-𝚏𝚒𝚋𝚎𝚛 ครับ อ่า ทีนี้มาเข้าเรื่องเลยละกัน ก็เราก็เป็น React enjoyer ท่านหนึ่งเหมือนกันนะครับ ก็จริงๆ ก็คือรู้สึกว่ามันง่ายแหละ เพราะว่าถ้าถามเราแบบเข้ามาถึงมาใช้ three เงี้ย แบบเจอ 𝚞𝚜𝚎𝙵𝚛𝚊𝚖𝚎 เข้าไป ไปไม่ถูกเลยทีเดียวใช่ปะครับ อ่า ก็เลยแบบ อ่ะ โอเค

เราเปลี่ยนจาก 𝚘𝚗𝙵𝚛𝚊𝚖𝚎 ของ 𝚝𝚑𝚛𝚎𝚎.𝚓𝚜 มาเป็น 𝚞𝚜𝚎𝙵𝚛𝚊𝚖𝚎 ของ 𝚛𝚎𝚊𝚌𝚝-𝚝𝚑𝚛𝚎𝚎-𝚏𝚒𝚋𝚎𝚛 ละกัน ก็เจ้าตัวเนี้ยครับ สำหรับใครที่แบบเป็น React dev อยู่แล้วอะ

ข้อดีของ React-three-fiber สำหรับการ Render 3D บนเว็บ17:14

แนะนำตัวนี้เลย ก็มันไม่ได้แค่เอาไว้ทำ AR จะบอกว่า

เจ้าตัว React Three เนี่ยครับ มันทำได้หลายอย่างเลย ไม่ว่าจะเป็นแบบพวก showcase advertise campaign อะไรต่างๆ ที่มันต้องเป็น render เป็น 3D อะครับ ก็เจ้าตัวเนี้ยจะตอบโจทย์เลย เพราะว่าถ้าเกิดว่าลงไปลึกๆ เรื่อง performance ของ React แล้วอะครับ ถ้าเกิดมัน render เยอะๆ เนี่ย มัน crash ใช่ไหมครับ ก็ทีเนี้ย ด้วยความที่เป็น three อะครับ three เขาจะทำงานบน canvas เนาะ คล้ายๆ พวก Phaser ถ้าใครเคยใช้ Phaser ก็จะรู้ว่า เฮ้ย canvas เนี่ยมันช่วยเราเรื่องการ render ให้แบบเกิน 30 frame rate ได้ถูกปะครับ ก็ถ้าเกิดว่า use effect แล้วไม่ cap ไว้ ก็ระเบิดกันไปเลยทีเดียวใช่ไหมครับ ถ้าไม่เป็น canvas เนาะ เพราะว่า web มันก็ไม่สามารถจะ re-render ได้บ่อยขนาดนั้นใช่ไหมครับ แต่ว่าด้วยความที่เป็น 3D อะครับ

เรา dev กันลงไปถึงระดับ frame ใช่ไหมครับ ก็จะมีเจ้าตัวเนี้ยแหละครับที่เข้ามาช่วยเรื่องของ render 3D ครับ

Demo: การ Implement ORB-SLAM กับ React-three-fiber18:15

แล้วก็ทีเนี้ย เราก็ได้ลองใช้ตัว three อะครับ

แล้วเราก็ implement ของเขามา เดี๋ยวให้ดูอันนี้ ก็คือตัวเนี้ยครับ ทำการ implement ORB-SLAM เข้ามานะ กับเจ้าตัว three React Three ใช่ปะ

ก็เราก็จะมี keypoint detection ขึ้นมาแล้ว อันนี้อัดเมื่อเช้าข้างหน้า ถ้าใครอยากลองเดี๋ยวแปะลิงก์ไว้ให้ครับ ก็ใช้ Vite build มา ก็จะเห็นว่า เฮ้ย อันเนี้ยก็จะมีเรื่อง keypoint detection ใช่ไหมครับ แล้วก็จะมี deploy model ลงไปบน Macbook ตัวเองใช่ปะครับ

อ่ะ โอเคครับ ก็ทีเนี้ย

Roadmap ในการพัฒนา WebAR และ Plane Detection18:59

ถามว่าตอนเนี้ยครับ สิ่งที่ทำไปเนี่ยครับ แบบอยากจะไปลองสู้กับ library ที่เป็น third-party พวกนั้นดูใช่ไหม ตอนเนี้ยทำอะไรไปแล้วบ้างใช่ไหมครับ ก็ roadmap ก็มีตอนเนี้ยยังขาดเรื่อง plane detection อยู่ ก็คือตอนเนี้ยแหละครับ เราสามารถแบบ detect keypoint ต่างๆ นู่นนี่นั่นได้ และแล้วก็มี real-time tracking เสร็จแล้ว

AR object เสร็จแล้ววางได้ใช่ไหมครับ แล้วก็มี use AR นู่นนี่นั่นใช่ไหมครับ ทีเนี้ย to-do ถัดไปก็คือพวก plane detection แล้วก็แบบ anchor anchor เนี่ยคืออะไร ก็คือแบบสมมติว่าเราวางมันไว้ตรงนี้ แล้วเดินไปตรงนู้น ใช่ไหมครับ เดินกลับมาก็ยังอยู่ตรงนี้อยู่ อ่า ก็ตัวเนี้ยครับ ก็ยังเหลือขาดตัว mapping ของ ORB-SLAM ใช่ไหมครับ

ก็เป็นคร่าวๆ นะครับว่า SLAM คืออะไรใน session นี้

โดนกินเวลาไป

ทำไมไม่ใช้ ARKit และ ARCore บนเว็บ?19:54

แล้วก็มีคนถามว่า มันจะมีคำถามเสมอนะครับว่า เฮ้ย แล้วทำไม ARKit กับ ARCore ก็ใช้บน web ได้นะครับ แล้วทำไมไม่ใช้อะ ใช่ปะ ในเมื่อ ARCore เป็นของ Google ใช่ไหม แล้ว ARKit เป็นของ iOS ปัญหาคือเจ้า ARKit เนี่ยครับ มันใช้บน Safari ไม่ได้

ถามว่า เฮ้ย ทำไมใช้บน Safari ไม่ได้ หมายความว่าอะไรวะ ก็ไปดู ticket เขามานะครับ ก็เขาบอกว่าเนี่ย เปิด ticket ไว้ตั้งแต่ 2020 อะครับ เขาบอกเหลืออยู่อีก 2 ticket จะเสร็จ ก็เนี่ยแหละครับ เป็นเรื่องตลกของฝั่ง iOS แล้วก็ถ้าใครลงไปลึกขนาดนั้นครับ

ต่อให้ใช้ Chrome ไป run บน iOS มันก็คือ Safari ใส่หน้ากากมาอะครับ เข้าใจปะ มันก็ run ไม่ได้อยู่ดีครับ เพราะฉะนั้นมันก็เลยแบบ เออ ก็ต้องมีแบบ library ตัวนี้ขึ้นมา ก็คิดว่าอาจจะเปิดเป็น open source นะครับ ให้แบบช่วย contribute อะไรอย่างเงี้ย ก็จริงๆ ก็มี repo แล้วครับ แต่ยังไม่ได้เปิด public ก็มีตัวอันนี้นิดนึง

แต่ว่าตอนเนี้ยเวลาหมดแล้ว

อ่ะ อันนี้เป็น web test นะครับ เดี๋ยวแปะ deploy ให้อีกที ก็ขอบคุณครับ ถ้าใครมีคำถาม

ครับ ขอบคุณคุณกิตติทัศน์มากนะครับสำหรับ session SLAM นะครับ