GAMESLASHLEVIATHAN เรนเดอร์อนิเมะ 83 วินาทีด้วย Three.js จากโค้ดสู่คัตซีนเกม
โดย GameSlash
แกะวิธีสร้างฉาก 3D ลายเส้นอนิเมะ กล้อง และเสียงจากโค้ดใน LEVIATHAN พร้อมตัวอย่างใช้ไทม์ไลน์กับคัตซีนและเอฟเฟกต์บอสในเกม
Movez (@0xMovez) เผย LEVIATHAN เมื่อ 4 พฤศจิกายน 2026 อนิเมะสั้น 83 วินาทีที่ใช้ Three.js เรนเดอร์ทั้ง 39 ช็อตจากโค้ด ภาพตั้งแต่ยักษ์ง้างธนูริมฝั่งไปจนถึงอสูรทะเลโผล่ข้างกองเรือมาจากฉาก 3D และเสียงก็สังเคราะห์ด้วยโค้ด Movez ระบุว่าใช้ Fable 5.5 และแบ่งงานให้เอเจนต์ 8 ทีมทำพร้อมกัน
README ของ LEVIATHAN ให้เครดิตหนังสั้นของ AHMII และอธิบายว่างานนี้รีเมกเรื่องและช็อตเดิมในสไตล์อนิเมะ ส่วน คลิป Titan Archer vs Sea Kaiju ที่ el.cine (@EHuanglu) โพสต์เมื่อ 3 ตุลาคม มีลำดับฉากคล้ายกันมาก ตั้งแต่นักธนูยักษ์ริมฝั่งยิงฉมวกขึ้นสู่วงโคจร ไปจนถึงอสูรทะเลกลางกองเรือ คลิปนี้ใช้ดูเทียบช็อตได้ โดย เอกสารการผลิตของ LEVIATHAN ระบุว่าทีมใช้เฟรมอ้างอิงระหว่างทำงาน แต่ไม่ได้ระบุ URL ของคลิปที่ใช้
ทำไมฉาก 3D ถึงดูเหมือนอนิเมะ
ทีมใช้ cel shading กับฉาก 3D แล้วแยกการเรนเดอร์เป็นหลายรอบ ฉากหลังผ่านฟิลเตอร์ให้ดูเหมือนลงพู่กัน ส่วนเส้นขอบของตัวละครคำนวณจากความลึก ทิศทางพื้นผิว และรหัสวัสดุ จากนั้นจึงซ้อนน้ำ หมอก และเอฟเฟกต์แสง ตัวหนังออกที่ 24 fps แต่โค้ดเปลี่ยนท่าตัวละคร 12 ครั้งต่อวินาที และเปลี่ยนเอฟเฟกต์น้ำ 8 ครั้งต่อวินาที เพื่อให้จังหวะภาพคล้ายอนิเมะวาดมือ ดูรายละเอียดในซอร์ส
เฟรมแต่ละภาพคำนวณจากเวลา จึงกระโดดไปเรนเดอร์ช็อตที่ต้องการได้ กล้องและคิวเหตุการณ์อยู่ในไฟล์ src/shots.js ส่วนเสียงสังเคราะห์ด้วย Web Audio โดยจับจังหวะให้ตรงกับเหตุการณ์เดียวกัน ผู้สนใจดาวน์โหลดไฟล์ HTML สำหรับเปิดดูแบบออฟไลน์ได้จาก GitHub Releases
เอาไปใช้กับคัตซีนและเอฟเฟกต์ในเกมได้อย่างไร
ลองแยกเหตุการณ์ในเกมออกจากไทม์ไลน์เอฟเฟกต์ เช่น เมื่อบอสเข้าเฟสสอง เกมส่งสัญญาณเริ่มไทม์ไลน์ แล้วให้ท่าบอส อนุภาค และเสียงดังขึ้นตามคิว วิธีนี้ช่วยให้ปรับจังหวะหรือใช้เอฟเฟกต์เดิมในฉากอื่นได้ ส่วนเกมยังเป็นคนกำหนดว่าเมื่อไรผู้เล่นข้ามฉากได้หรือกลับมาควบคุมตัวละครได้
LEVIATHAN ใช้เวลาเป็นตัวกำหนดทุกเฟรมของหนัง เมื่อนำวิธีนี้มาใช้ระหว่างเล่นจริง ควรวัดต้นทุน shader, reflection และ post-processing บนเครื่องเป้าหมาย เพราะเกมต้องแบ่งเวลาเรนเดอร์ให้ฉากที่ตอบสนองต่อผู้เล่นด้วย อ่านต่อเรื่อง การเรนเดอร์เกม Pixel Art ให้คมและสม่ำเสมอ
ต้นทาง โพสต์ของ Movez และ โปรเจกต์ LEVIATHAN โดย 0xCodez ซึ่งให้เครดิตเรื่องและช็อตอ้างอิงแก่ AHMII