วิดีโออาจเป็นจุดเริ่มต้นของโลกใบใหม่ที่คุณเปลี่ยนแปลงได้ เพียงส่งวิดีโออ้างอิงให้ coding agent ปล่อยให้มันศึกษาทีละเฟรม แล้วสั่งให้สร้างฉากนั้นขึ้นมาใหม่ในรูปแบบของโค้ดแบบ procedural จากนั้นคุณก็เปลี่ยนมุมกล้อง แสง วัสดุ หรือการเคลื่อนไหว แล้วเรนเดอร์ออกมาใหม่อีกครั้ง
นี่คือแนวคิดเบื้องหลัง Video 2 GLSL ซึ่งเป็นเวิร์กโฟลว์แปลงวิดีโออ้างอิงไปเป็น shader ที่ผมพัฒนาขึ้นควบคู่กับ shader-skills สิ่งที่น่าสนใจคือ กระบวนการส่วนใหญ่สามารถนำไปใช้ต่อกับวิดีโอคลิปถัดไปได้มากแค่ไหน
https://x.com/gokayfem/status/2111907592129671505
สองส่วนที่ทำงานร่วมกัน
shader-skills มอบคลังเทคนิคกราฟิก ตัวอย่างที่ใช้งานได้จริง และกระบวนการสำหรับสร้างและตรวจสอบ shader แบบ procedural ให้กับ coding agent ส่วน Video 2 GLSL เพิ่มงานที่ขับเคลื่อนด้วยวิดีโออ้างอิงเข้ามา นั่นคือการศึกษาคลิป สร้างข้อกำหนด (specification) ประกอบฉาก แล้วนำผลลัพธ์มาเทียบกับคลิปต้นฉบับ
สกิลนี้รองรับทั้ง Claude Code, Codex, Cursor, Gemini และ coding agent ตัวอื่น ๆ ส่วนประกอบที่นำกลับมาใช้ซ้ำได้ครอบคลุมตั้งแต่รูปทรง noise วัสดุ ภูมิประเทศ อาคาร น้ำ เมฆ แสง ไปจนถึงสี คุณสามารถนำสิ่งเหล่านี้ไปใช้สร้างฉากต้นฉบับ การทดลองแบบอินเทอร์แอคทีฟ หรือการสร้างวิดีโอขึ้นมาใหม่ก็ได้
สำหรับเป้าหมาย Video 2 GLSL แบบสแตนด์อโลน ผลลัพธ์ที่ได้จะเป็น fragment shader เดียวที่ใช้งานร่วมกับ Shadertoy ได้ รูปทรงเรขาคณิตจะถูกอธิบายด้วยสมการคณิตศาสตร์ พื้นผิวเป็นแบบ procedural และการเคลื่อนไหวถูกขับเคลื่อนด้วยเวลา วิดีโออ้างอิงทำหน้าที่เป็นตัวกำหนดข้อกำหนดทางภาพ โดยเฟรมต่าง ๆ จะไม่ถูกนำมาเล่นกลับภายใน shader
เริ่มจากการแปลงวิดีโอให้เป็นข้อกำหนด
ขั้นตอนแรกคือการดึงเฟรมออกมาอย่างแม่นยำ URL หรือชื่อไฟล์วิดีโอเพียงอย่างเดียวให้ข้อมูลกับ agent น้อยเกินไป มันจำเป็นต้องตรวจสอบว่าในภาพมีอะไรปรากฏอยู่บ้าง และสิ่งเหล่านั้นเปลี่ยนแปลงไปตามเวลาอย่างไร
พรอมต์ที่นำกลับมาใช้ซ้ำได้นี้จะสั่งให้สร้างไฟล์ REFERENCE.md ขึ้นมาก่อนเขียนโค้ดฉาก โดยระบุข้อเท็จจริงของคลิป ไทม์ไลน์ของช็อต รายการวัตถุ สัดส่วนของตัวละครหลัก การเคลื่อนไหว การจัดเฟรมกล้อง แสง และพาเลตสีที่สุ่มตัวอย่างมา นอกจากนี้ยังสั่งให้ agent ระบุว่าส่วนใดที่ไม่สามารถจำลองได้เหมือนเป๊ะ และเสนอทางเลือกอื่นเพื่อขออนุมัติ
รายละเอียดที่ต้องสังเกตจะเปลี่ยนไปตามคลิป ช็อตที่มีตัวละครต้องดูจุดสัมผัสพื้น จังหวะก้าว และการเคลื่อนไหวรอง ช็อตสถาปัตยกรรมต้องดูสัดส่วน มุมมองเพอร์สเปกทีฟ และการเคลื่อนที่ของกล้อง ส่วนช็อตน้ำต้องใส่ใจกับการเคลื่อนไหวของผิวน้ำ การสะท้อน และความลึก กระบวนการแยกย่อยแบบเดียวกันนี้จะช่วยให้แต่ละช็อตมีจุดเริ่มต้นที่เป็นรูปธรรม
มอบบล็อกสร้างกราฟิกที่ผ่านการทดสอบแล้วให้ agent
สูตรคำนวณที่ดูสมเหตุสมผลอาจสร้าง distance field ที่ไม่ปลอดภัย noise ที่ไม่เสถียร หรือสีที่ผิดพลาดได้ และข้อผิดพลาดเหล่านี้จะยิ่งหาสาเหตุยากขึ้นเมื่อถูกฝังอยู่ในฉากขนาดใหญ่
ปัจจุบัน shader-skills มีฟังก์ชัน 186 ตัวกระจายอยู่ใน 20 โมดูล GLSL ตัว agent สามารถค้นหาเทคนิคที่ต้องการ เรียกใช้ฟังก์ชันจากไลบรารีด้วยชื่อ และใช้ bundler เพื่อรวม dependency ทั้งหมดไว้ใน shader ไฟล์เดียวที่สมบูรณ์
ไลบรารีนี้มี signed distance functions สำหรับรูปทรงต่าง ๆ ตัวดำเนินการสำหรับรวมรูปทรงเข้าด้วยกัน procedural noise และแพตเทิร์น ตัวช่วย raymarching การใส่เงา บรรยากาศ และการแปลงสี เทมเพลตต่าง ๆ จะแสดงให้เห็นว่าชิ้นส่วนเหล่านี้ทำงานร่วมกันในฉากที่สมบูรณ์ได้อย่างไร
การตรวจสอบความถูกต้องครอบคลุมถึงการคอมไพล์ใน WebGL2 และคุณสมบัติเชิงตัวเลขบน GPU เช่น เครื่องหมายและขอบเขตของ distance field อนุพันธ์ของ noise ความถูกต้องของการแปลงสีไป-กลับ และพฤติกรรมอื่น ๆ ที่ตรวจสอบได้ ตัวอย่างที่เรนเดอร์ออกมาแล้วจะช่วยยืนยันด้วยการมองเห็น การตรวจสอบเหล่านี้ทำให้ชิ้นส่วนต่าง ๆ น่าเชื่อถือมากขึ้น แต่ฉากสุดท้ายก็ยังต้องได้รับการตรวจสอบอยู่ดี
สร้างวงจรรับคำติชมรอบตัวเรนเดอร์
เวิร์กโฟลว์จะดำเนินผ่านขั้นตอนการจัดบล็อกและจังหวะเวลา การเคลื่อนไหว รายละเอียดของตัวละครหลัก รายละเอียดของสภาพแวดล้อม แสงและสี การเทียบเคียงกับวิดีโออ้างอิง และประสิทธิภาพ แต่ละขั้นจะสร้างสิ่งที่มองเห็นได้เพื่อให้คุณประเมินผล
ควรเปรียบเทียบวิดีโออ้างอิงกับภาพเรนเดอร์ในเวลาและกรอบภาพเดียวกัน ใช้ภาพเต็มเฟรมเพื่อดูองค์ประกอบ ใช้ภาพครอปเพื่อดูรูปทรงวัตถุและวัสดุ และใช้ลำดับเฟรมเพื่อดูการเคลื่อนไหว ภาพนิ่งที่สวยงามเพียงภาพเดียวอาจซ่อนอาการเท้าไถล กล้องกระโดด หรือปฏิสัมพันธ์ที่เกิดขึ้นเร็วเกินไปไว้ก็ได้
พรอมต์นี้เรียกร้องให้มีการวิจารณ์ซ้ำ ๆ คือหาความแตกต่างที่ใหญ่ที่สุด 5 จุด แก้ไข แล้วเรนเดอร์ใหม่ การวัดค่าต่าง ๆ จะช่วยสนับสนุนการตรวจสอบนี้ ขนาดของตัวละครและตำแหน่งเส้นขอบฟ้าช่วยวินิจฉัยข้อผิดพลาดของกล้อง สีที่สุ่มมาช่วยวิเคราะห์การเกรดสี และเครื่องมือตรวจการเคลื่อนไหวช่วยหาจุดที่ขาดความต่อเนื่อง
การทำซ้ำอย่างรวดเร็วเป็นสิ่งสำคัญในที่นี้ พรีวิวความละเอียดต่ำและการดูวัตถุแบบแยกส่วนช่วยให้คุณปรับสัดส่วนให้ถูกต้องก่อนจะไปเสียเวลากับการเรนเดอร์ที่ใช้ทรัพยากรสูง ควรตรวจสอบซิลูเอตและสัดส่วนของวัตถุก่อนที่จะไปขัดเกลาวัสดุและแสง
แบ่งฉากที่ซับซ้อนตามหน้าที่รับผิดชอบ
ฉากขนาดใหญ่จะได้ประโยชน์จากการให้ agent หลายตัวทำงานคนละส่วน เช่น ตัวละคร สภาพแวดล้อม พร็อพ การเคลื่อนไหว หรือแสง การแบ่งงานควรทำตามความต้องการของฉากนั้น ๆ
อินเทอร์เฟซที่ใช้ร่วมกันจะช่วยให้งานเหล่านั้นเข้ากันได้ ควรตกลงเรื่องสเกล พิกัด เวลา และตัวระบุวัสดุให้ชัดเจน มอบสิทธิ์การจัดการไฟล์ให้ agent แต่ละตัว และบังคับให้แสดงหลักฐานจากภาพเรนเดอร์จริง ตัว orchestrator สามารถนำชิ้นส่วนต่าง ๆ มารวมกันและประเมินภาพรวมเทียบกับวิดีโออ้างอิงได้
บทเรียนที่นำกลับมาใช้ซ้ำได้คือโครงสร้างการตรวจสอบ ต้องมีคนประเมินภาพรวมของช็อตทั้งหมดเสมอ เพราะอาคารที่รายละเอียดครบถ้วนหรือตัวละครที่ดูสมจริง อาจไม่เข้ากับองค์ประกอบภาพโดยรวมก็ได้
สิ่งที่การทดลองเหล่านี้พิสูจน์ให้เห็น
ผลงานที่ผ่านมาประกอบด้วยลำดับฉากเกาะลอยฟ้าที่มีการกระทำเปลี่ยนไปเรื่อย ๆ ลำดับฉากหมู่บ้านที่มีปฏิสัมพันธ์ และลูปถนนที่ไม่มีที่สิ้นสุด แต่ละฉากมีความต้องการต่างกัน ทั้งจังหวะของเหตุการณ์ จุดสัมผัสที่วางไว้ การเปลี่ยนมุมกล้อง และการทำซ้ำที่เหมือนเดิมเป๊ะ ซึ่งแต่ละอย่างต้องใช้ตรรกะของฉากที่แตกต่างกัน ระดับความสำเร็จและคุณภาพทางภาพก็แตกต่างกันไปด้วย
แต่ในทุกกรณี กระบวนการเดียวกันยังคงใช้ได้ผล นั่นคือ ดึงข้อมูล วัดค่า ประกอบร่าง เรนเดอร์ เปรียบเทียบ และแก้ไข ใน repo ยังมีตัวอย่างเมือง ภูมิประเทศ และน้ำแบบ procedural ขณะที่การทดลองแบบอินเทอร์แอคทีฟอื่น ๆ จะสำรวจรูปทรงออร์แกนิกและภาพหลุมดำ
อะไรที่แก้ไขได้ และอะไรที่ยังไม่แน่นอน
เมื่อฉากกลายเป็นโค้ดแล้ว คุณก็สามารถเปิดช่องให้ควบคุมตำแหน่งกล้อง ทิศทางแสง พาเลตสี จังหวะเวลา และรายละเอียดแบบ procedural ได้ การทดลองฉากถนนแสดงให้เห็นมุมมองกล้องแบบอื่น ๆ จากเซ็ตที่ถูกสร้างขึ้นชุดเดียวกัน
แต่มุมมองใหม่เหล่านั้นก็เผยให้เห็นขีดจำกัดของการสร้างฉากขึ้นมาใหม่เช่นกัน วิดีโออ้างอิงแสดงให้เราเห็นแค่บางส่วนของโลก พื้นผิวที่ซ่อนอยู่ต้องอาศัยการคาดเดา และวิดีโอที่สร้างโดย AI อาจมีรูปทรงเรขาคณิตที่เปลี่ยนไปหรือการเคลื่อนไหวที่ไม่สอดคล้องกัน การจับคู่ที่ดูสมจริงจากมุมเดียวไม่ได้แปลว่าฉากนั้นจะสมบูรณ์และถูกต้องทั้งหมด
ประสิทธิภาพก็เป็นอีกผลลัพธ์ที่ขึ้นอยู่กับแต่ละฉาก รูปทรงเรขาคณิตแบบ raymarched ที่มีรายละเอียด ต้นไม้ เงา และการสะท้อน ล้วนใช้ทรัพยากรสูง ควรวัดเวลาต่อเฟรมบนเครื่องเป้าหมาย ตรวจสอบหลาย ๆ จังหวะในช็อตนั้น และรายงานทั้งจุดที่ยังไม่ถึงเป้าพร้อมกับความแตกต่างทางภาพที่เหลืออยู่
Video 2 GLSL เป็นเวิร์กโฟลว์การสร้างผลงานที่นำกลับมาใช้ซ้ำได้ ความน่าเชื่อถือเมื่อเจอกับวิดีโอรูปแบบต่าง ๆ ยังต้องได้รับการประเมินในวงกว้างกว่านี้ แต่งานที่ทำอยู่ตอนนี้ได้มอบการทดลองที่เป็นรูปธรรมหลายชุด และวิธีการร่วมกันที่เราสามารถนำไปพัฒนาต่อได้
ลองใช้กับวิดีโออ้างอิงของคุณเอง
สำหรับ Claude Code ให้เพิ่ม marketplace แล้วติดตั้งปลั๊กอิน:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
สำหรับ agent ตัวอื่นที่รองรับ:
npx skills add gokayfem/shader-skills
ใช้ prompts/video-to-shader-prompt.md ใส่คลิปอ้างอิง ชื่อไฟล์เอาต์พุต และเครื่องเป้าหมาย พร้อมระบุว่าอะไรที่ต้องคงไว้และอะไรที่ข้ามได้ ควรทบทวนการแยกย่อยงานก่อนเริ่มลงมือสร้างจริง
ผมอยากผลักดันสิ่งนี้ต่อไป เพื่อให้กลายเป็นวิธีที่เชื่อถือได้ในการเปลี่ยนวิดีโออ้างอิงให้กลายเป็นฉาก procedural ที่แก้ไขได้ การสร้างฉากใหม่แต่ละครั้งควรทิ้งเครื่องมือที่ดีขึ้น การทดสอบที่ดีขึ้น และเทคนิคที่งานชิ้นต่อไปนำไปใช้ซ้ำได้เอาไว้
Repository: github.com/gokayfem/shader-skills
