🎞️ Videos → ทำ Game Engine บนเว็บมันจะทำยากแค่ไหนเชียว

แนะนำ Patchies: โปรเจกต์เปลี่ยนการเขียนโปรแกรมให้เห็นภาพและโต้ตอบได้0:00

ยินดีต้อนรับสู่ BKK.js อีกรอบนะครับ ก็จัดทุกรอบ ก็รู้สึกตื่นเต้นทุกรอบ อ๊ะ เดี๋ยวขอสลับจอเป็นเครื่องเราเนาะ โอเค เดี๋ยวแนะนำตัวสั้นๆ ก็ชื่อภูมินะครับ day job เราอยู่บริษัทชื่อ Metabase ในนี้มีใครแบบเคยใช้ Metabase ไหมฮะ อ้า ก็เป็น open source สำหรับแบบจัดการข้อมูล แต่ talk วันนี้ไม่เกี่ยวอะไรกับ Metabase นะครับ แต่ใครอยากได้งาน ก็ติดต่อหลังไมค์ได้เนาะ

โอเคฮะ แต่อันนี้เป็น side project ที่ภูมิทำ จริงๆ ก็คือแอบทำเวลางาน แต่อย่าไปบอกเจ้านายผมนะ เดี๋ยวโดนตี ก็โปรเจกต์ที่ภูมิทำนะครับ อันนี้ชื่อ Patchies Patchies เนี่ย มันเป็นแอปที่เอาไว้ให้เราสามารถ เล่นกับพวกเสียง เล่นกับภาพ เล่นกับการเขียนโปรแกรมแบบต่างๆ ได้ เช่น อันนี้ก็คือภูมิลองเอามือ ก็คือเอา motion มือ ลองให้มัน control ภาพ ก็คือถ้าเราเอามือปล่อยซูเปอร์ไซย่า ปุ้ง! ไอ้ตัวลูกบอลฮะ มันก็จะเด้งตาม แต่ว่าผมว่าเราใช้ Keynote มันกากไป เราก็ต้องใช้โปรแกรมตัวเอง อันนี้ โอเคฮะ

ขอสลับเป็นเดโมในโปรแกรมตัวเองนะครับ โอเคฮะ talk วันนี้ ชื่อมันล่อตีนนิดนึงนะครับ คือ Game Engine on the Web เนี่ย โอ้ ใครๆ ก็ทำได้ ไม่จริงนะครับ อันนี้ผมตั้งล่อเฉยๆ How hard can it be? โอ้เค แต่ก่อนหน้านี้ครับ ผมมีคำถามมาถามทุกคน เป็นคำถามล่อตีนอีกแล้วฮะ คุณคิดว่าระหว่าง Ruby กับ Java อะไรเป็น OOP มากกว่ากันฮะ

ก็อันนี้ ใครคิดว่า Ruby บ้าง ยกมือฮะ

ไม่มีเลย ใครคิดว่า Java บ้างฮะ ยกมือเลย อ้า ก็หลายคนก็งดออกเสียงนะครับ ก็เหมือนในสภาปกติฮะ

ขอโทษครับ โอเค คราวนี้ครับ อ้าว งั้นผมถามอีกคำถาม

OOP ที่แท้จริงของ Alan Kay คือการส่ง Message เหมือนโครงสร้างเซลล์สิ่งมีชีวิต1:45

มีใครรู้จักท่านนี้ไหมครับ Alan Kay คุ้นหน้าเขาไหมครับ ตอนเรียนคอม Alan Kay เนี่ย จริงๆ เป็นคนที่ ให้กำเนิดคำว่า OOP Object-Oriented Programming แต่ว่า OOP ในภาษาของ Alan Kay จริงๆ มันต่างจากที่เราเรียนมาก ทุกคนคิดถึง OOP นึกถึงอะไรกันบ้างฮะ คำแรก keyword แรก ใน Java เราเขียนอะไรกัน class

public static ใช่ไหมครับ แต่ว่าในมุมของ OOP เนี่ย จริงๆ Alan Kay แกเป็น เรียกว่าอะไรอะ แกเป็น biologist คือเขาเป็นนักชีววิทยาฮะ อันนี้ อ๋อใช่ พออันนี้มันรันในแอปผมเนาะ มันก็จะ interactive กดเล่นได้ สไลด์ก็คือเป็น interactive อันนี้ฮะ คือ Alan Kay เขามองว่า ตอนนั้นเขาศึกษาเรื่องเซลล์อยู่ใช่ไหมครับ เซลล์พืช แล้วเขาก็สังเกตว่า เอ๊ะ เซลล์ต่างๆ เนี่ย มันมีการคุยกัน เคยได้ยินเนาะ เวลาเราเรียนชีวะ มันจะมี cell receptor คือตัวที่แบบ รับฟัง signal จากเซลล์ ก็คือร่างกายมนุษย์เนี่ย จริงๆ มันทำงานจาก cell signaling Alan Kay เขาก็เลยมองว่า เอ๊ะ แล้วถ้าเราทำให้โปรแกรมคอมพิวเตอร์ มันเหมือนมีโปรแกรมย่อยๆ ที่มันคุยกันได้ มันจะเป็นยังไงบ้าง

คือภูมิก็ไม่เคย get concept นี้มาก่อนฮะ จนกระทั่งภูมิไปเจอศิลปิน คือมันแปลกมาก เราเป็นโปรแกรมเมอร์ แต่เราเพิ่ง get OOP จากศิลปิน

เรียนรู้ OOP ดั้งเดิมและทฤษฎี Actor Model ผ่านแอปสายทำเพลง (Pure Data, Max/MSP)3:01

เราไปเจอพี่คนนี้ฮะ เขาชื่อพี่อุ๋ พี่อุ๋ Ryan พี่อุ๋เนี่ย เขาเล่นโปรแกรมดนตรีอันหนึ่ง ที่ชื่อ Pure Data Pure Data ตามชื่อเลยครับ มันคือโปรแกรมที่ทุกอย่างเป็นเหมือน data หมด แต่ว่าเอา data เนี่ย มาสร้างดนตรี เดี๋ยวเดี๋ยวผมจะเล่นให้ดู แต่เอาเป็นว่าอันนี้ฮะ มันคล้ายกับหลักการ ของ Alan Kay มากที่บอกว่า เซลล์แต่ละอันเขาคุยกันเนาะ

แล้วจริงๆ concept นี้ฮะ มันก็เอาไปสร้างเป็นแอปชื่อ Max MSP

concept ของแอปก็คือเราเขียนโปรแกรม แต่จะเขียนเป็นโปรแกรม text ยาวๆ ก็ให้บางอย่างเป็น visual บ้าง ทำให้แบบเวลามาเล่นกับอะไรที่เป็นดนตรี เล่นกับภาพ เนี่ยฮะ มันเล่นง่ายมาก เพราะทุกอย่างมัน very visual คำถามฮะ ให้ทายว่า MSP ย่อมาจากอะไร อันนี้ยาก MSP ย่อมาจากชื่อคนทำฮะ Miller Smith Puckette จริงๆ ตอนแรกโปรแกรมเขาชื่อ Max ฮะ แต่ว่าคนเนี่ย เขาอยากจะตั้งเหมือนแบบเป็น tribute ก็คือขอบคุณคนที่ทำ เขาก็เลยไปตั้งชื่อโปรแกรมเวอร์ชันใหม่ว่า Max/MSP คุณ Miller Smith เนี่ยฮะ จริงๆ เขาเป็น เรียกว่าอะไรอะ เป็น creative coder คนแรกๆ ของโลกเลย เป็นคนที่คิดค้นเรื่องของคอมพิวเตอร์กับดนตรีฮะ คือตั้งแต่ยุคสมัยที่คอมแม่งยังเป็นจอเขียวๆ อ่ะฮะ เขาคิดตั้งแต่ยุคนั้นแล้วว่า เอ๊ะ ถ้าเกิดคอมพิวเตอร์เรามันจะเล่นเสียงได้เนี่ย มันจะต้องเป็นยังไง คือพอผมไปเจอหลักการนี้ฮะ ทำให้เรา มีใครเขียน Scala ในนี้ไหมฮะ แบบเคยได้ยิน Scala ไหม น่าจะเคย ในนี้ใครเคยได้ยิน actor บ้าง actor model อ่ะ น่าจะมีบ้างเนาะ หลักการของ actor model อ่ะฮะ มันเหมือนกับไอเดียของ Alan Kay ที่เขาคิด OOP ตอนแรกเลย

ของ OOP มันคือเซลล์ใช่ไหมครับ มีเซลล์พืชต่างๆ ที่แบบคุยกันผ่าน signal คอนเซปต์ของ actor เนี่ยครับ คือเรามี process ต่างๆ แล้ว process นี้มันจะรับข้อความ เช่นเวลาเราจะซื้อของใน e-commerce บางอย่าง เราก็ส่ง message ไป เฮ้ย ฉันอยากซื้อของ แล้วมันก็จะมี message กลับ อ่ะ เอากลับมา ซึ่งอันนี้ฮะ จริงๆ ผมเพิ่งไปเจอว่า ในโปรแกรมของสายดนตรีเนี่ย เขาคิดแบบ OOP กัน แต่ในขณะที่ Java อ่ะฮะ จริงๆ คือมันก็ไม่ได้ผิดนะ แต่มันเป็น OOP ความหมายหนึ่ง เออ ในนี้ไม่รู้มีรีโมตทีวีไหม แต่ว่าจริงๆ อ่ะฮะ หลักการของ OOP ที่เราเรียนกันใน Java มันมาจากอีกคอนเซปต์หนึ่ง เรียกว่า object modeling คือการที่พยายามจะโมเดล เช่น รีโมตต่างๆ ฮะ จะต้องมีปุ่มอะไรบ้าง นึกถึง Java ไหมฮะ ตอนเราเรียนกัน class ต่างๆ ต้องมีอะไรบ้าง จริงๆ มันมาจากภาษาโปรแกรมที่ชื่อ Simula 67 แต่ว่าของ OOP ในเวอร์ชันนี้ฮะ มันมาจากภาษาชื่อ Smalltalk

คราวนี้ถามว่าทำไมผมมาสนใจกับเรื่อง visual

หมดยุคการพิมพ์โค้ดด้วย Text? วิสัยทัศน์เบื้องหลังการเขียนโปรแกรมแบบ Visual5:39

มีคนหนึ่งฮะเขาบอกว่าไอ้การเขียนโปรแกรมที่เป็น text อะฮะ แม่งไร้อารยธรรมฮะ คือแรงมากคนนี้ฮะ แกชื่อ Bret Victor ฮะ เขาเป็นลูกศิษย์ของ Alan Kay ฮะ คือทุกคนในวงการพูดตรงกันหมดว่า คนๆ นี้เป็นเหมือนเป็นลูกศิษย์ของคนที่สร้าง OOP ชั้นนำ Bret Victor เนี่ยฮะเขามองว่า เฮ้ย มนุษย์เราเนี่ย ตั้งแต่สมัยสงครามเย็นอะฮะ การเขียนโปรแกรมในสงครามเย็นมันใช้ diagram เยอะมาก เพราะเราจะไประเบิดบ้านคนนู้นระเบิดบ้านคนนี้เนี่ย มันต้องมีการวาด diagram ในยุคนั้นในช่วงสงครามเนี่ยเขาให้เงินทุนมาเยอะมาก มันเลยมีการ research กันเยอะ แต่ว่าพอหลังจากยุคสงครามอะฮะ คนก็กลับมาเขียนโปรแกรมเป็น text กัน และเขามองว่ามนุษย์เรามีหู มีตา มีปาก มีจมูก ใช่ไหมฮะ ทำไมเราถึงโปรแกรมทุกอย่างผ่านการดู symbol คือ symbol หรือสัญลักษณ์เนี่ย มันเหมือนเป็นแค่หนึ่งองค์ประกอบฮะ ในการรับรู้ทั้งหมดของมนุษย์ Bret Victor เขามองว่าภาษาโปรแกรมจริงๆ เราอาจจะดมมันได้ เช่นถ้าเกิด code มี code smell เนี่ย หูยดมแล้วกลิ่นแม่งเหมือนปลาขาวเลย เราอาจจะ sense ได้ดีกว่าว่า code แม่งไม่ดีนะฮะ โอเค คราวนี้ไอเดียของ Patchies คือ App ที่ภูมิทำเนี่ย คือภูมิอยากทำให้ความฝันของ Alan Kay เป็นจริง Alan Kay จริงๆ เป็นคนที่คิด concept ชื่อ Dynabook ก็คือเป็นเหมือน concept คอมพิวเตอร์ laptop สำหรับเด็กครับ แล้วเด็กก็มีโปรแกรมที่สามารถเขียนโปรแกรมแบบ visual ได้ และรัฐบาลไทยก็ไปทำเป็นแท็บเล็ตแจกแล้วมันก็ไม่เวิร์กนะฮะ แต่ว่าคือเราอยากสร้างโปรแกรม เช่นอันนี้ฮะ จริงๆ มันคือ code JavaScript เนาะ ก็คือ code ที่แบบสร้าง phyllotaxis Phyllotaxis เนี่ยฮะเหมือนเป็นดอกบัว ถ้าเราเคยเปิดเมล็ดดอกบัวเราจะเห็นว่ามันจะเป็นจุดๆๆ อันนี้เราก็เอามาโปรแกรมได้ง่ายๆ ใน Patchies นะฮะ ข้างหลังอันนี้ก็เป็น JavaScript เหมือนกัน อันนี้เป็นน่าจะเป็น canvas ฮะ คือในนี้เราสามารถเขียนโปรแกรมเข้าไปได้ค่อนข้างเยอะ ที่ใช้ JavaScript

เดโมยกระดับ Game Engine: การจับตาดู Message ที่ Object คุยกันได้แบบสดๆ7:38

ไอเดียของ Patchies เนี่ยฮะคือภูมิอยากให้ ทุกอย่างมันคุยกันผ่าน message เพราะอะไร เพราะเราจะได้รู้ว่าโปรแกรมต่างๆ มันทำงานยังไง เช่นภูมิมีภาษา assembly ตรงนี้ใช่ไหมฮะ อันนี้เราเขียนเหมือนเป็น OS เล็กๆ ของตัวเอง แล้วเราอยากรู้ว่าไอ้ assembly เนี่ยมันส่งข้อความอะไร เราก็สามารถ...

อ้อ มันน่าจะ pause อยู่

ขออนุญาต live code นะครับ โอเค สดมาก อันนี้เราก็สามารถใช้คำสั่งชื่อ peek ก็คือการดัก คราวนี้ภูมิสามารถดักได้แล้วว่า อ้ะ มันกำลังส่งเลข 1 มา มันทำให้โปรแกรมต่างๆ เราสามารถ visualize มันได้ว่า เอ้ะ สิ่งนี้ถ้าเราจะแสดงผลมันแบบต่างๆ มันจะเป็นยังไง เช่นอันนี้ถ้าภูมิเลื่อน slider ใช่ไหมฮะ ปึ๊บ เราก็จะเห็นว่ามันก็มีข้อมูลส่งมา เหมือนกับการคุยกันของเซลล์เลยเนาะ ที่เราคุยกันเมื่อกี้ โอเค กลับไปที่ full screen

คราวนี้ถามว่ามันเอาไปทำอะไรได้บ้าง จริงๆ ภูมิวันนี้เสียดายอย่างหนึ่งครับ คือเราเอาไฟแบบหมุนได้มา แต่ว่าตอนนี้อยู่บน GrabBike อยู่ เดี๋ยวจะ demo หลังจากนี้นะครับ ก็คือถามว่ามันต่อกับอะไรได้บ้าง ก็คือทุกอย่างที่ผมคิดได้ฮะ เช่น เอาไปต่อกับ projector เพื่อทำ projection mapping ได้ เราเอาไปต่อกับไฟเพื่อให้ JavaScript มัน control ไฟเวทีได้

หรือว่าแบบเราสามารถเล่นกับ gesture ได้ เดี๋ยวภูมิน่าจะมี demo ให้ดูฮะ หรือเอาไปทำเป็น visual ต่างๆ หรือบางทีเราเรียนภาษาโปรแกรมอยู่ใช่ไหมฮะ สมมติเรียนเรื่อง sorting แต่เราไม่รู้ว่าเอ้ะ จริงๆ merge sort หรือ insertion sort มันเร็วกว่านะ เราก็อาจจะให้มันเขียนให้ดูฮะ

จริงๆ ฮะ ทั้งสไลด์อันนี้ที่มันวึบไปวึบมา ก็เป็นแน่นอนฮะว่ามันเป็น code มันอยู่ในโปรแกรม Patchies เหมือนกัน ถ้าภูมิเอา object ชื่อ peek peek คือแอบดูฮะ ภูมิเอา peek เข้าไปเนาะ แล้วภูมิสลับสไลด์หน้าสไลด์หลัง เนี่ยฮะ คือ keyboard มันกำลังส่งข้อความชื่อ ArrowLeft ก็คือขยับไปทางซ้าย แล้วถ้าภูมิกดไปทางขวา ปึ๊บ มันก็จะเปลี่ยนเป็น ArrowRight ใช่ไหมฮะ ทำให้จริงๆ โปรแกรมเนี่ยฮะ ทั้งหมด มันก็คือโปรแกรม Patchies ใหญ่ๆ หนึ่งอัน แต่เราเอามาทำสไลด์

โอเค น่าจะสรุปเนาะ

รับมือการสลับการทำงานยุ่งเหยิง (Graphics, Sound) ด้วยระบบ Parallel9:50

มันคือ concept ของมี object เล็กๆ คุยกันใช่ไหมครับ คำถามคือ เฮ้ย เราจะโปรแกรมสิ่งนี้ยังไง โปรแกรมการคุยกันของ object ยังไง คำตอบครับคือ callback ฮะ JavaScript เนี่ยมันมีความเจ๋งอย่างหนึ่ง ก็คือเราสามารถใส่ function เข้าไปเป็น callback ได้ แล้ว function นั้นมันก็ไปเรียกอะไรสักอย่างใช่ไหมครับ ตอนที่เราเขียน messaging เนี่ย เราก็เหมือนสร้าง message queue ขึ้นมา เพราะหลักการของ message queue ก็คือมันต้องมีข้อมูลเนาะ ข้อมูลไหลเข้าไป แล้ว object ก็เลือกจะตอบสนองยังไง ในนี้ฮะ มันก็คือเขียนเหมือนเซลล์คุยกันเลย เขียนแบบ OO คราวนี้ครับ ปัญหาคือ เฮ้ย มันก็ฟังดูง่ายใช่ไหมฮะ ฟังดูแบบก็แค่เรียก callback อะ เด็กน้อยก็ทำได้ ปัญหาครับ คือมัน Everything Everywhere All at Once มีใครเคยดูเรื่องนี้ไหมฮะ คือถ้าเคยดูเนี่ยจะเห็นว่าเหมือนนางเอกอะฮะ แม่งกระโดดข้ามจักรวาลแบบทุกๆ 2 วิ เวลาทำ game engine ฮะ มันคืออย่างนั้นเลยฮะ เพราะอะไร ในนี้มี oscilloscope ใช่ไหมครับ ที่กำลังรับค่าสัญญาณ 2 อัน มี graphic ที่กำลังรัน มีเพลงที่กำลังเล่น แล้วใน patch หนึ่งจริงๆ อะฮะ มันอาจจะมี object เป็นร้อยเป็นพันอันก็ได้ คำถามคือเราจะแก้ปัญหาไอ้ Everything Everywhere All at Once ได้ยังไง

คำตอบคือ parallel พ่อทุกสถาบัน คำตอบง่ายมาก ขอโทษคนอัด live ด้วยนะครับ คือปัญหาของเว็บ ทุกอย่างมันมีความ single-thread มาก เช่น เวลาคลิกอะไรบางอย่างที่ handler มันก็จะต้องหยุดรอก่อน เช่น หยุดรอ action นี้เสร็จ หยุดรอ graphic อัปเดต และปัญหาของหลายอย่างในเว็บ หรือแม้แต่ใน Node.js จริงๆ Node.js มันดี เพราะมันเป็น async I/O แต่ลองคิดดูว่าถ้าเกิดมันต้องหยุดรอทุก request มันน่าจะช้ากว่ามาก

ทลายข้อจำกัด Web Thread ด้วย 3 ทหารเสือ: Web Worker, OffscreenCanvas, และ AudioWorklet11:37

คราวนี้บนเว็บมี 3 ทหารเสือ ที่ทำให้เราเขียนโปรแกรมแบบโคตรเร็ว ง่ายมาก และทุกอย่างไอเดียเดียวกันเลย คือ parallel อันแรก web worker อันนี้เป็น meme นะครับ ก็คือเคยเล่นเกมไหมครับ ที่แบบแม่งใช้อยู่ core เดียว แล้วก็อีก 7 core ก็คืออยู่เฉยๆ แต่สิ่งนี้จะไม่เกิดขึ้น ถ้าเราใช้ web worker เพราะ web worker มันจะเสก thread ใหม่มาให้เรา แปลว่าโปรแกรมบนเว็บจริงๆ เราใช้ CPU แบบอัดแน่นก็ได้ ไม่เชื่ออาจจะลองเปิด Task Manager ในนี้ ก็จะเห็นว่ามันใช้เยอะมาก ตัวที่สองเราเรียกว่า OffscreenCanvas ปกติเรา render อะไร เราต้อง render เข้าจอใช่ไหมครับ แต่จะดีกว่าไหม ถ้าเราสามารถ render อะไรไปใน canvas ที่มันไม่ต้องออกจอจริงๆ ได้ อันนี้เดี๋ยวผมจะเปิดให้ดู และก็ AudioWorklet ก็คือเวลาประมวลผลเสียง audio เนี่ยมันมีความเร็วสูงมาก ก็คือ sample rate คือความเร็วในการประมวลผลเสียงคอมพิวเตอร์เรา ประมาณ 44,100 ครั้งต่อวินาที

JavaScript ตายโหงครับ เราต้อง optimize อะไรบางอย่าง โอเค เรามาที่ render กันดีกว่า

จัดระเบียบคิวการเรนเดอร์กราฟิกด้วยกราฟ DAG ไม่ให้หน้าจอค้าง12:43

เราจะแสดงผลสิ่งนี้ยังไง มีใครรู้จักคำว่า DAG ไหมครับ ไม่ใช่แดกนะครับ DAG มีใคร... DAG คืออะไรครับ ถูกต้องฮะ Directed Acyclic Graph. มันคือกราฟที่ไม่มี cycle หรือไม่มีการ loop กลับไปที่ตัวเองเนาะ แล้วพอเป็นกราฟในนี้ฮะ สิ่งที่เราสามารถทำได้ก็คือ

เราเช็กซิว่ามันมีอะไร loop กลับไปหาตัวมันเองบ้าง ถ้ามีก็ ignore ถ้าไม่มีเราสามารถทำสิ่งที่เรียกว่า topo sort ได้ topo sort มาจาก Topological Sorting นะฮะ พูดง่ายๆ ก็คือจัดกราฟให้มันเป็นระเบียบแหละ ให้มันต่อกัน มีจุดเริ่ม มีจุดจบ สวยงาม พอเราทำอย่างนี้แล้วฮะ สิ่งที่เราทำได้ก็คือ เราจะได้สิ่งที่เรียกว่า render graph ครับ คือเวลาเราไปเขียนพวกโปรแกรมเกมเนี่ย เราจะเคยได้ยินคำว่า shader graph เนาะ มันมีโปรแกรม shader ก็คือเป็นโปรแกรมตัวมันเอง และมันก็อาจจะรับ texture จากที่อื่นมาครับ แล้วมันก็เอาสองตัวนี้มาระยำอะไรกันบางอย่าง หลักการทำงานฮะ ก็คือ มันจะสร้าง OffscreenCanvas ที่เราบอกเมื่อกี้ ก็คือเป็น canvas ที่ไม่ได้ออกจอโดยตรงฮะ ถามว่าเอ๊ะ แล้วทำไมมันออกจอโดยตรงไม่ได้ คำตอบก็คือบางทีฮะ เราอยากให้มันรัน parallel แต่ถ้ามันออกจอโดยตรงเลยเนี่ย แปลว่าทุกคนก็ต้องหยุดรอไอ้นี่ render แปลว่าถ้าเกิดมันมี object บางอย่างฮะ ที่มัน render หนักมาก ทุกคนฮะ ก็รอกันเหมือนรถติดกรุงเทพฯ แต่ถ้าเราใช้อันนี้ฮะ แปลว่า เราสามารถให้ render เนี่ย มันไปอยู่ใน thread ไหนก็ได้ และเราก็ไป render ที่ thread อื่น พอ render เสร็จปุ๊บเนี่ย มันค่อยส่งข้อมูลกลับมา มันก็จะเร็วขึ้นมามากๆ เทคนิคนี้ฮะ เราเรียกว่า FBO หรือ Frame Buffer Object อันนี้บางคนอาจจะไม่เคยได้ยิน ถ้าไม่ใช่สายทำเกมนะฮะ แต่หลักการของมันก็คือ เราไม่ render ให้มันออกจอโดยตรงฮะ เรา render ไปที่สิ่งที่เรียกว่า frame buffer ในคอมพิวเตอร์เราฮะ มันจะมีสิ่งที่เรียกว่า frame buffer อยู่ ก็คือก่อนที่อะไรมันจะออกจอเนี่ย ให้มันไปออกที่ frame buffer ก่อน แล้วเดี๋ยวตัว driver เราเนี่ย มันจะส่งไปออกจอ แต่ถ้าเราไม่บังคับมันให้ออกจอฮะ

เราก็แค่ render ไปเก็บที่ไหนสักอย่างก่อน อันนี้ทุกคนอาจจะงงเนาะ ผมเปิดเดโมอีกอันให้ดูดีกว่า

อะขอโทษฮะ ขอโหลดอีกรอบ loading your patch. อันนี้จะเป็นเดโมของตัว stress test นะฮะ แต่ว่าเน็ตอาจจะโดนตัด สักครู่นะ

โอเคฮะ ผมน่าจะเน็ตตัด น่าจะเปิดเดโมนั้นไม่ได้ ไม่เป็นไร เอาเป็นว่าจริงๆ ในแอปเราฮะ เราสามารถ render ของหลายๆ อย่างพร้อมกันเป็นกราฟได้ ผมขอเช็กอีกรอบนะฮะ โอเค ไม่ได้ เวลาเดโมมันจะเป็นอย่างนี้แหละ มันจะชอบพังๆ อะไม่เป็นไร

แต่ว่าเอาเป็นว่า ให้คิดว่าไอ้กราฟเนี่ยฮะ จะเกิดอะไรขึ้นถ้ากราฟเนี่ย มันใหญ่ขึ้นมากๆ มันต่อกันเป็น 10 node 100 node 1000 node ก็ต้องไป render กองที่ไหนสักที่แล้วเนาะ แต่ปัญหาครับคือ สมมติมันไป render ออก frame buffer แล้วก็คือ ตัวผลลัพธ์สุดท้ายฮะ มันพร้อมแล้ว แต่มันยังต้อง render preview ก็คือแบบในแอปผมอะ มันต้องมีตัวแสดงผลมาก่อน ใช่ไหมฮะ ต้องมี node นี้ต้อง preview node นี้ต้อง preview คือมันไม่ได้เห็นแค่ node เดียวครับ มันอาจจะเห็นพร้อมกัน 100 node ก็ได้ แล้ว GPU ฮะ สุดท้ายสิ่งที่เราต้องทำ เนี่ย ก็คือ เราจะต้องอ่านข้อมูลจากพวก GPU พวกนี้ฮะ กลับมา CPU แล้วมันจะเกิดปัญหาหนึ่งครับ

ลดคอขวด CPU รอ GPU (Synchronization Stall) ให้ไหลลื่นด้วย FBO และ PBO16:14

มีใครอ่านคำใบ้นี้ออกไหมฮะ มันคืออะไรฮะ สิ่งนี้ คนใต้น่าจะรู้ฮะ คืออะไรครับ stall ถูกต้องครับ อันนี้ปัญหาการ render เนี่ย เราเรียกว่า synchronization stall แต่ผมชอบเรียกว่า เออ แม่งก็คือ stall ปัญหาของไอ้ stall นี่คือ มันจะ เรียกว่าอะไรอะ แทนที่มันจะ render ลื่นๆ 60 frame CPU มันจะต้องหยุดรอ GPU ก่อน ยกตัวอย่างเช่น เราอยากจะอ่านข้อมูลบางอย่างจาก GPU ใช่ไหมฮะ มันก็จะหยุดรอ หยุดรอ หยุดรอ render เสร็จยัง render เสร็จแล้วครับ มันค่อยส่งข้อมูลกลับมา กราฟมันก็จะเป็นแบบประมาณทางขวาครับ คือมันก็จะต้องหยุดๆ ได้ๆ หยุดๆ ได้ๆ ไอ้สิ่งนี้ฮะ เป็นปัญหามากเวลาเราทำพวก engine คำถามคือ เราจะทำยังไงให้มันไปได้ลื่นๆ ไม่ต้องหยุดรอ คำตอบฮะ คือมันมีสิ่งที่เรียกว่า PBO Pixel Buffer Object อันนี้เริ่มมาไกลละ แต่ว่าหลักการของมันฮะ คือ มันคือหลักการที่เราบอกเลยเนาะ ตั้งแต่ตอนแรก คือทุกอย่างให้มัน parallel ก็คืออย่า อย่าหยุดรอกัน หลักการของสิ่งนี้ฮะ คือเราบอก GPU ว่า เอ๊ย แก render ไปเลย ไม่ต้องรอฉัน render เสร็จแล้วค่อยมาบอกกัน พอมันทำอย่างนี้ฮะ มันจะไม่เกิดการ block เลย แล้วจริงๆ มันมีเทคนิคค่อนข้างเจ๋งอันหนึ่ง ในการ์ดจอเรา เรียกว่า DMA Direct Memory Access ก็คือ render เสร็จแล้ว ส่งไปเลย ไม่ต้องผ่าน JavaScript ฮะ มันก็จะทำให้แบบการ render อะไรพวกนี้เร็วขึ้นมากๆ

โอเค คราวนี้ เมื่อกี้ render แล้วเนาะ

แยกกระบวนการหนัก: รัน Python, Ruby, Assembly บน Web Worker17:44

แบบไปแบบอาจจะมึนกันเยอะ แต่ว่าจริงๆ อะ คอนเซปต์หลักๆ มันคือ 1. ทุกอย่าง parallel ไม่ต้องหยุดรอกัน 2. ก็คือให้ทุกคนเนี่ยฮะ อยู่บน worker ตัวเอง สิ่งนี้ฮะ ไม่ได้ apply แค่ render เพราะทุกคนอาจจะไม่ได้ทำ render ใช่ไหมฮะ บางคนอาจจะแบบ เฮ้ย ผมอยากรัน Python บนเว็บ ผมอยากรัน อะไรดีอะ อยากรัน Ruby บนเว็บ

ข้อดีคือ ไอ้คอนเซปต์เมื่อกี้ฮะ คอนเซปต์ของ web worker มันใช้ได้กับทุกอย่างเลย เช่น อันนี้ฮะ ภูมิมี node ที่เป็น node Ruby อยู่ แต่ว่า Ruby runtime มันใหญ่มากเนาะ เรารัน Python ดีกว่า ไม่ได้จะบูลลี่นะฮะ มา โอเค หรือว่ามันไม่มี net มันก็น่าจะโหลดไม่ได้ทั้งคู่

อะ ขอลองดู assembly ปึ๊บ รันได้ไหมนะ โอเค เอาเป็นว่าเวลาที่มีอะไรที่มันหนักมากๆ ฮะ ที่มันกิน compute มากๆ แทนที่เราจะให้มันอยู่บน main thread หมด เราก็เอาสิ่งเหล่านี้ฮะ ไปรันข้างนอก ไปรันใน worker อะ จริงๆ มีอีกตัวอย่างหนึ่งที่น่าจะน่าสนใจ ก็คือเล่นกับ gesture กันฮะ ปึ๊บ เดี๋ยวผมขอ... โอเค อันนี้จอออกเนาะ แล้วก็ในแอปภูมิอะฮะ จะมีตัวที่เราเรียกว่าพวก gesture อยู่ เออ ผมเช็กก่อนนะฮะ ขอเปิดนิดหนึ่ง เออ เราเปิดเสร็จหรือยัง โอเค

อะ อันนี้ฮะ ภูมิสามารถอ่านข้อมูลแบบ จากมือ จาก vision จากอะไรขึ้นมาก็ได้ เช่นผมขออ่านข้อมูลที่เป็นมือหน่อย ปึ๊บ สักครู่นะฮะ ส่องอันนี้มา กด play peek โอ๊ มันไม่มีเน็ต model ก็เลยโหลดไม่ได้นะฮะ โอเค ไม่เป็นไร

แต่ว่าเอาเป็นว่าปกติอะฮะ model machine learning มันหนักมากๆ ใช่ไหมฮะ มันแบบเป็นไฟล์ขนาดใหญ่มาก ถ้าเรารันใน main thread เนี่ย โห รอนานเลยฮะ แต่ถ้าเราให้ทุกอย่างมันเป็น worker ที่แบบมันก็อยู่ของมัน และก็รันเร็วๆ ฮะ ของพวกนี้จะแบบ แอปเราจะทำงานลื่นขึ้นมาก ปกติคนชอบคิดว่า เฮ้ย เว็บอะ มันทำอะไรหนักๆ ไม่ได้หรอก ไม่จริงฮะ ถ้าเราใช้ worker มันทำอะไรหนักได้ตามที่คอมเราจะรับไหวฮะ แต่มันก็จะมี overhead ของเว็บเนาะ เพราะฉะนั้น ก่อนที่จะไปตรงนั้น ให้ดู quote เล็กๆ ฮะ

ความท้าทายในโลก Audio: หลีกเลี่ยงหน้ากาก Abstraction และงัดทักษะการเขียนโค้ดดิบแบบ C19:51

Alan Kay เขาบอกคำหนึ่งฮะ คำหนึ่งที่ผมจำขึ้นใจเลยคือ the big idea is messaging ไอเดียที่ใหญ่ที่สุดของ OOP ครับ คือการส่งข้อความ ไม่ใช่ class ไม่ใช่ public static constructor นะฮะ ไอเดียหลักๆ มันคือส่งข้อความเฉยๆ เลย เพราะฉะนั้นฮะ เวลาเราเขียน worker ก็คือเราก็ประกาศว่า ใน worker เราเนี่ย มันรับข้อความอะไรบ้าง มันรับ frame ที่จะต้อง render ต่อหรือเปล่า หรือมันรับ config บางอย่าง แล้วมันก็เอาเอามันไปใช้ต่อ อ้าว แล้ว audio ล่ะครับ เสียง เหมือนกันครับ worker ไอเดียเดียวกัน apply 100 รอบ worker เนี่ยฮะ ความโหดร้ายของมันคือ อย่างที่ผมบอกไปคือ audio มันรันถี่มาก 44,100 ครั้ง

หรือถ้าเป็นพวก audio เกรด pro ฮะ ก็จะเป็น 115,200 ครั้งต่อวินาทีนะฮะ

ทำให้พวก processing อันนี้จริงๆ มันแบบ แอบหนักเหมือนกัน เพราะฉะนั้นฮะ ถ้าเกิดเราเขียนโปรแกรมแบบกับพวกนี้ฮะ ให้คิดว่ากำลังเขียน C อยู่ฮะ ให้คิดว่าแบบอย่าไปเล่นท่ายาก ใช้ abstraction เยอะๆ เพราะมันรันไม่ไหวฮะ มันคือขนาด C มันยังรันไม่ค่อยไหวเลย JavaScript มันจะไหวเหรอ เพราะฉะนั้นก็เขียน code ให้ simple simple ครับ for loop มีเราก็ใช้ while loop มีเราก็ใช้ฮะ แค่นี้เราก็จะทำแบบ audio processing สนุกๆ ได้แล้วฮะ อะ เหมือนกันครับ quote มันจะบอกว่า code audio video render คอนเซปต์เดียวกันคือ messaging อะ ก็คือรับ message บางอย่างไป แล้วก็แบบไปอัปเดตการ render บางอย่าง โอเค แต่ว่าอีกอันหนึ่งที่ผมรู้สึกว่ามันเจ๋งมากก็คือ

ทะลุขีดจำกัดความเร็ว JavaScript ด้วยพลัง WebAssembly (รันภาษา ChucK และ uxn Emulator)21:21

WebAssembly ฮะ เพราะอย่างเมื่อกี้ปัญหาคือ เราเขียนด้วย JavaScript ใช่ไหมครับ แล้ว JavaScript เนี่ย มันไปติดคอขวดบางอย่าง คือ engine มันก็เจ๋งแหละ V8 มัน optimize มาดีมาก แต่มันก็มีข้อจำกัดของมันครับ ในแอปภูมิเราก็เลยเลือกที่จะเอาหลายอย่างเนี่ย ไปรันใน WebAssembly เช่น Python, Ruby, MediaPipe พวกนี้ฮะ มันรันอยู่บน WebAssembly หมดเลย ทำให้แบบมันค่อนข้างเร็ว หรือว่าการแบบ process audio ฮะ เช่น อันนี้ผมไม่รู้ว่ามันจะใช้ไม่ได้เพราะเน็ตมันกากหรือเปล่านะ แต่ขอลองดูก่อน อะ ใช้ได้ อันนี้ฮะ เป็นโปรแกรมชื่อ ChucK ฮะ ภาษามันดูลามกนิดหนึ่ง แต่ว่าจริงๆ ไอ้โปรแกรม ChucK เนี่ย มันคือโปรแกรมที่เล่นกับเวลาฮะ มันเป็น loop ที่เราสามารถใส่ loop เป็นหน่วยเวลาได้ เช่น ผม loop ทุกๆ 300 มิลลิวินาที อะ มันก็จะค่อยๆ loop ตามเวลา engine ของภาษา ChucK เนี่ยฮะ ก็ใช้ WebAssembly เหมือนกัน อะ แล้วก็มีอีกอันฮะ เพราะเวลามี อันนี้ชื่อ uxn ครับ เป็น virtual machine ผมสามารถโหลด ROM เกมเข้าไปได้ฮะ เช่น เดี๋ยวผมโหลด ROM นี้เข้าไปดีกว่า ปึ๊บ

อะ คราวนี้ฮะ เราก็จะแบบเหมือนเรามี OS ตัวเองในเว็บแล้ว ก็คือรันโปรแกรมอะไรก็ได้ และแน่นอนว่ามันอยู่บน engine เดียวกัน ทำให้เราสามารถส่งมันไปที่ renderer อื่นได้ ปึ๊บ อะไรแบบนี้ฮะ

แล้วเราก็อาจจะแบบใส่ effect ให้มันว่า เฮ้ย ฉันเหมือนฉันมีจออยู่ แต่จอนี้มันแปลกๆ เช่น เราก็บอกว่าลอง scroll หน่อยซิ

แล้วก็จะได้อะไรแบบนี้ฮะ ทำให้เราสามารถเล่นกับ frame buffer ที่ภูมิบอกเมื่อกี้ได้แบบ real time เลย เพราะฉะนั้นเวลาที่เราแบบขยับอะไร ไอ้ตรงนี้มันก็ขยับตาม ก็คือเอา feed จากเกมไปเล่นได้ ไอ้เนี่ยเป็นไปไม่ได้เลยถ้าเราไม่ใช้ WebAssembly มันรับไม่ไหวจริงๆ ฮะ ผมลองละ ลองเขียนเป็น JS ก็คือหน่วงทั้งหมดนะฮะ เพราะฉะนั้นนะฮะ ก็อะไรที่มันเริ่มหนักๆ อะฮะ ก็แนะนำว่า ลองดูให้ assembly กับ worker ทำงานด้วยกัน ก็เป็นคำตอบที่ดีฮะ

รวมร่างสถาปัตยกรรมสู่โปรเจกต์โลกจริง: ควบคุม Projection Mapping ด้วยโหนดนับร้อย23:29

จริงๆ ในแอปภูมิมี node 186 node เพราะฉะนั้นมันคือไอเดียเดียวกัน ของ Alan Kay เลย messaging แต่มันทำซ้ำๆ 186 ครั้ง มันก็เลยจะได้ของเล่นเยอะมาก

เช่น อันนี้ภูมิเปิดให้ดูอีกอัน อันนี้ชื่อ project map ฮะ คือผมซื้อ projector มาใช่ไหมฮะ เคยเห็นที่เขาไป map ตึกป่ะฮะ ก็คือยิง projector ไป แล้วก็แบบทำตึกให้เป็นสีต่างๆ อันนี้ภูมิก็ทำไว้เหมือนกัน ก็คือสมมติเรามีตึก แบบรัฐสภาอะไรเงี้ย อยากจะไปฉายรูปอะไรขึ้นสภา เราก็เปิด Patchy ฮะ แล้วก็กด project แต่ว่าติดคุกอะไรก็อย่ามาโทษกันนะฮะ

อะไรประมาณนี้ฮะ แล้วก็จะแบบเหมือนรัน texture feed ให้มันรันไปเรื่อยๆ ได้ โอเค

แล้วก็อันนี้ก็คือเป็น โห แต่อันนี้แมปสนุกมากฮะ อันนี้คุยกันหลังไมค์ได้ ก็คือเราใส่ shape อะไรเข้าไปก็ได้ แล้วก็สามารถมาแก้ในแบบ full editor ได้ โอเค เหลือ slide อีกไหมนะ หรือว่าหมดแล้ว โอเค จริงๆ slide หมดแล้วนะฮะ แต่ว่าภูมิอยากขอบคุณเพื่อนๆ ภูมิ ที่แบบเหมือนคอยแนะนำหน่อย ก็มี พี่กิต พี่ไท พี่อู๋ พี่แพท พี่เกี้ยง ชุน และก็ปั๊บ นะฮะ ก็ขอบคุณคนแก๊งนี้มากๆ เพราะปกติผมทำ feature ที่เห็น feature เสกทุกวัน ภูมิทำได้ 1 อันก็ส่งไปให้เพื่อนฮะ คิดว่าทุกคนจริงๆ น่าจะรำคาญ แต่ขอบคุณมากฮะ แล้วก็โอเค

ผมว่า talk น่าจะมีประมาณนี้ แต่ถ้ามีใครอยากถามอะไรก็ถามเพิ่มได้ฮะ ขอบคุณครับ

Q&A โชว์ของแถม: อ่านท่าทางมือเพื่อควบคุม Hardware จริงๆ ผ่าน Web Serial25:06

เรายังมีเวลาหลงเหลืออยู่นะครับ ใครมีคำถามเกี่ยวกับโปรแกรมที่ภูมิสร้างบ้าง อันนี้มีใครเคยใช้พวกแบบ n8n หรืออะไรอย่างนี้บ้างไหม อันนี้ก็จะมีความคล้ายกันเหมือนกัน แต่ว่าของเขาจะ advance กว่า สามารถ visualize ให้เห็นภาพได้ทันที

อันนี้คือห้องนอนภูมิเมื่อคืนฮะ ก็คือเราเอาอันนี้เรียกว่า Web Serial ก็คือเป็น API ของเว็บที่ไปต่อ hardware ได้ ภูมิก็ต่อ Web Serial แล้วก็เอานิ้วชี้ แล้วไฟมันก็จะขยับตาม อันนี้ผมกำลัง GrabExpress มาอยู่ฮะ เดี๋ยวเย็นนี้ได้เล่นกันต่อ คือเราสามารถเหมือน input พวกรูปภาพได้ แล้วก็แปลมาเป็น action เหมือนเราคุม hardware USB อีกทางหนึ่งได้ใช่ไหมฮะ ใช่ครับ

ซึ่งในขณะเดียวกันผมแอบเห็นทาง Facebook ของเขาละ เขาสามารถใช้ชูนิ้วเหมือนเลข 1 เลขต่างๆ แล้วหลังจากนั้นเนี่ย ก็สามารถบรรเลงเสียง หรือ pattern บางสิ่งบางอย่างตามนั้นได้ ใช่ เดี๋ยวเรามาดู มีโชว์ไหมครับ ถ้าเกิดเน็ตต่อได้ก็จะมีครับ ขอลองหน่อย ปึ๊บ gesture ได้ครับ โอเค ปึ๊บ แล้วก็ on ระหว่างนี้ใครมีคำถามถามได้เลยนะครับ มีประมาณอีก 5 นาทีก่อนที่ speaker ท่านถัดไป อะ ได้

เสียงออกไหมครับ เสียงออกไหม loading อยู่ อ๋อใช่ครับ น่าจะไม่ได้ น่าจะติดเน็ต น่าจะติดอะไร อ๋อได้แล้วนี่นา โอเค เอ๊ย เราเสียงออกแล้วใช่ไหม

อ๋อ อันนี้ผมไม่ได้เล่นเสียงฮะ อันนี้ลองเล่น gesture โอเค ก็คือเหมือนเรารับ input รูปภาพ แล้วมันก็สามารถประมวลผลแบบ real time ได้เลย ใช่ครับ ก็คืออันนี้เรากำลังประเมินว่า ตอนนี้ gesture มันเป็นอะไรบ้าง อ๋อ หรือเพราะผมถือไมค์อยู่ โอ๊ะ จริงด้วย นี่ ถ้าเกิดเรา เดี๋ยวผมซูมให้ดู อันนี้คือรัน AI หรือมีการยังไงบ้างครับ ใช่ฮะ อันนี้เป็น TensorFlow on web ฮะ ก็คือแบบใช้ MediaPipe เช่นอันนี้ถ้าภูมิชี้นิ้ว ขึ้นลงใช่ไหมฮะ ก็เหมือนเราเหมือนปัด Tinder แต่เป็นปัด Tinder แบบใช้นิ้วแบบขึ้นลง

เป็นวิธีการเล่น Tinder ที่เมื่อยมือดีนะครับ

ก็แล้วแต่ครับว่าเราจะเอาไป apply ใช้กับ flow อะไรได้บ้าง อย่างคือถ้าเป็น presentation ทั่วไปเนี่ย อาจจะใช้ PowerPoint ไม่ก็ Keynote ใช่ไหมครับ อันนี้เขาใช้พรีเซนต์ด้วยในระบบของเขาเอง

ผสานร่าง AI ช่วยโปรแกรม: ใช้ Gemini 3 สร้างและประมวลผลโค้ด Patch ทันทีผ่านหน้า UI27:32

ใช่ฮะ แล้วก็ในนี้ฮะ ลืมพูดเรื่อง AI ไป ก็คือในนี้ฮะ support AI แบบ 100% ก็คือจริงๆ AI เนี่ยฮะ สามารถอ่าน patch เราได้ เช่นเราบอกมันได้ว่าแบบเอ๊ย ช่วยทำเสกอะไรให้หน่อย เช่น make a storyboard อีก 3 นาทีนะครับ

ปึ๊บ อะไรแบบนี้ฮะ แล้วก็คือเสกได้ไม่จำกัด ก็คือสมมติเราเขียน JavaScript ไม่เป็นใช่ไหมฮะ ก็ vibe เสกของได้ อันนี้มันก็จะบอกเราด้วยว่า แบบเฮ้ย ตอนนี้มันกำลังคิดอะไรอยู่ หรือว่าเราถาม AI ก็ได้ว่า what is this patch ก็คือแบบเฮ้ย สิ่งนี้มันคืออะไร ตามเทรนด์ AI อยู่ทุกที่ ใช่ฮะ อันนี้มี tool call ประมาณ 10 อันฮะ ก็คือมันสามารถเข้าใจ แบบ context บริบททุกอย่าง ของสิ่งที่เรากำลังทำอยู่ได้ และก็กดดูได้ด้วยฮะ เช่นเอ๊ย ตอนนี้มันกำลังทำอะไร กำลังอ่านกราฟอยู่ เช่นเนี่ยฮะ มันก็เข้าใจว่าอ๋อ สิ่งนี้เป็น gesture control แล้วเราก็บอกมันได้ว่า เอ๊ย ช่วยเปลี่ยนหน่อย เช่นเราอาจจะบอกว่า make it pretty ก็ได้ฮะ ทำให้สวยๆ หน่อย แล้วเดี๋ยวมันก็ทำให้ ปึ๊บ ใช้เจ้าไหนอยู่ครับ อันนี้เป็น Gemini 3 Flash ฮะ อ๋อ

ครับ เหลือ 2 นาที โอเค ได้เลยครับ น่าจะประมาณนี้ก่อนดีกว่าฮะ มีใครมีคำถามอะไรไหมครับ ไม่งั้นไว้คุยกันหลังไมค์ พี่ภูมิทิ้งโปรไฟล์ Facebook หรือแบบเราจะตาม follow โปรเจกต์นี้ ได้ที่ไหนบ้าง GitHub เออ ได้ฮะ โอเค อันนี้ GitHub ภูมิก็ github.com/heypoom นะฮะ น่าจะเป็นโปรเจกต์แรกที่ภูมิ pin ไว้ อยู่ใน open source ก็อันนี้ฮะ ไปลองเล่นกันได้ heypoom/patchies มีใน Docker ไหมครับ หรือว่าต้อง npm เออ อันนี้จริงๆ มันเป็น static site อะฮะ ก็คือแบบไม่มี server เลย ก็คือทุกอย่างรันบน browser? ใช่ฮะ รันบน browser 100% อ๋า โอเค

ก็ครับผม ขอบคุณสำหรับพี่ภูมินะครับ

เป็น MC ชั่วคราวนะครับ ขอบคุณ speaker ท่านนี้นะครับ ต่อไปนะครับ