เทคนิค ‘Parallax 7’ แบบ Don’t Starve·Diablo
(simonschreibt.de)- แม้ในยุคเกม 2D ที่การทำ 3D จริงยังเป็นเรื่องยาก นักพัฒนาก็สร้างความลึกให้ภาพด้วย parallax scrolling และ Mode 7 ของ SNES โดย Perspective Mode ของ Diablo 2 ก็แสดงให้เห็นสายวิวัฒนาการนั้นภายในเกม 2D ARPG
- Don’t Starve สร้างฉากที่ดูมีมิติได้ แม้จะใช้พุ่มไม้ ต้นไม้ และศัตรูเป็นแอสเซ็ตแบบระนาบ ขณะที่ Diablo 2 ก็ให้ความรู้สึกคล้ายกันในเกม 2D ปี 2000 ด้วยการผสานการเรนเดอร์พื้นกับการแปลงรูปสไปรต์
- Perspective Mode ของ Diablo 2 ไม่ใช่แค่เอฟเฟกต์เลื่อนสไปรต์เฉยๆ แต่สร้าง การบิดรูปที่เหมือนทั้งหน้าจอเอียงเข้าหาเส้นขอบฟ้า ทำให้เห็นจุดสลายและมุมมองระยะลึก
- Blizzard แบ่งสไปรต์ DT1 ออกเป็น ชิ้นขนาด 32×32px และพยายามลดช่องว่างของฉากด้วยการแปลงรูปวัตถุอย่างกำแพงหรือรั้วแตกต่างกันตามค่า orientation
- ตามข้อมูลที่เปิดเผยภายหลังใน Gamasutra ระบุว่า Perspective Mode ต้องใช้การ์ดจอ 3D และสร้างความลึกกับเอฟเฟกต์ parallax ด้วยการหมุน ปรับสเกล และยืดเท็กซ์เจอร์ของมินิไทล์เล็กน้อย โดยใช้เวลาทำราว 1~2 สัปดาห์
เทคนิคยุคแรกที่ทำให้ 2D ดูเหมือน 3D
- เกมในยุค 1990 เริ่มเปลี่ยนผ่านจาก 2D ไปสู่ 3D แต่แม้ก่อนมี 3D จริง นักพัฒนาก็ใช้กลเม็ดหลายอย่างเพื่อสร้าง ภาพที่ดูเหมือน 3D
- วิธีที่เป็นตัวแทนที่สุดคือ เอฟเฟกต์ parallax
- องค์ประกอบบางอย่างเคลื่อนที่เร็วหรือช้าต่างกันตามระยะ จนเกิดความรู้สึกลึกตื้น
- Moon Patrol ในปี 1982 สร้างมิติที่ชัดเจนได้เพียงแค่ให้หลายระนาบเคลื่อนที่ด้วยความเร็วต่างกัน
- Mode 7 ในยุค SNES แม้ไม่ใช่ 3D จริง แต่ก็ทำให้หน้าจอดูมีเพอร์สเปกทีฟได้ด้วยการจัดการเท็กซ์เจอร์ของพื้น
- ตามคำอธิบายของ GBA แม้ไม่มีฮาร์ดแวร์ 3D จริง ก็ยังเลียนแบบ 3D ได้ด้วยการปรับสเกลและค่าการเลื่อนในแต่ละสแกนไลน์
- วิธีนี้ใกล้เคียงกับการจัดการเท็กซ์เจอร์ที่เปลี่ยนความสูงให้ดูเป็นความลึก
การใช้แอสเซ็ตแบบระนาบใน Don’t Starve และ Diablo 2
- ทุกวันนี้สามารถเรนเดอร์แอสเซ็ตทั้งหมดเป็น 3D จริงได้ แต่ก็ไม่ได้แปลว่าทุกฉากจำเป็นต้องใช้โมเดลสามมิติ
- พุ่มไม้ ต้นไม้ และศัตรูใน Don’t Starve เป็นแอสเซ็ตแบบระนาบ แต่ก็ยังให้ผลลัพธ์ที่น่าดึงดูดทางสายตาอย่างเพียงพอ
- Diablo 2 เป็น 2D ARPG ที่ออกในปี 2000 และเป็นตัวอย่างที่ชวนให้นึกถึงทั้ง parallax แบบ Moon Patrol และการแสดงผลพื้นแบบ Mode 7
- Diablo 2 ในการตั้งค่าปกติเป็นภาพ 2D ล้วน
- ไม่มีเพอร์สเปกทีฟ
- ไม่มีเอฟเฟกต์ parallax
- เมื่อเปิด Perspective Mode พิกเซลพื้นชุดเดิมจะไม่ถูกเสาทับซ้ำไปเรื่อยๆ และทำให้แอสเซ็ตแบบระนาบดูเหมือนเคลื่อนที่อยู่ในพื้นที่ที่มีความลึกแบบเดียวกับ Don’t Starve
วิธีวิเคราะห์ Perspective Mode ของ Diablo 2
- เนื่องจากแทบไม่มีข้อมูลทางการเกี่ยวกับ Diablo 2 จึงสำรวจ Perspective Mode ผ่านเครื่องมือสำหรับแตกและวิเคราะห์ไฟล์ MPQ กับ DT1
- MPQ Editor ใช้สำหรับแตกไฟล์ DT1 จาก MPQ
- DT1 Tools ใช้สำหรับแตกไฟล์ PCX จาก DT1
- DT1 Tutorial ใช้เพื่อทำความเข้าใจฟอร์แมต DT1
- Perspective Mode ไม่ใช่เอฟเฟกต์ง่ายๆ แบบขยับสไปรต์ทีละนิด
- เมื่อนำภาพจากตำแหน่งเดียวกันมาเทียบกันระหว่างเปิดและปิดโหมด จะเห็นว่าทุกองค์ประกอบมี การบิดรูปคล้ายเอียงเข้าหาเส้นขอบฟ้า
- หากใส่ลายตารางลงบนเท็กซ์เจอร์พื้น ความบิดรูปนี้จะยิ่งเห็นชัดขึ้น
- ฉากประกอบขึ้นจากชิ้นสไปรต์จำนวนมาก จึงมีโอกาสเกิดช่องว่างตามรอยต่อได้ง่ายระหว่างการแปลงรูป
- Diablo 2 จัดการให้ชิ้นส่วนประกบกันได้ พร้อมยังคงภาพที่มีเพอร์สเปกทีฟไว้
ชิ้นส่วน 32×32 และค่า orientation
- Blizzard แบ่งสไปรต์ออกเป็น ส่วนขนาด 32×32px
- ดูเหมือนเป็นการปรับแต่งเพื่อโหลดเฉพาะส่วนภาพที่จำเป็น
- และยังน่าจะมีประโยชน์ตอนนำการแปลงรูปมาใช้กับ Perspective Mode
- หากวาดเส้นทุก 32px บนเท็กซ์เจอร์ของเสาให้เหมือนโครงลวดจำลอง จะเห็นว่าเส้นแนวตั้งดูเหมือนพุ่งเข้าหา จุดสลาย ที่อยู่ลึกลงไปใต้พื้น
- ในบางสไปรต์ ขอบด้านล่างดูเหมือนโค้ง
- หากมองเฉพาะหลักเพอร์สเปกทีฟ การโค้งแบบนั้นไม่ได้จำเป็นเสมอไป
- การแปลงรูปนี้เปลี่ยนไปตามมุมที่มองสไปรต์ หรือขึ้นกับตำแหน่งของผู้เล่นและกล้อง
- ในฟอร์แมต DT1 สไปรต์สามารถมี ค่า orientation ได้
- ตามเอกสารของ Paul Siramy วิธีแปลงรูปสไปรต์อาจต่างกันตามค่าทิศทางนี้
- ตัวอย่างเช่นทิศของกำแพงอย่าง Left Wall, Upper Wall, Lower-Left corner
- สไปรต์ที่มีทิศทางต่างกัน เช่น กำแพงหรือรั้ว จะถูกแปลงรูปคนละแบบ
- ในบางกรณี ขอบบนและล่างไม่โค้ง และเส้นขอบดูเหมือนมุ่งไปยังจุดสลายทางซ้าย
- เกมดูเหมือนจะจงใจขยายการแปลงรูปให้มากขึ้นเล็กน้อยเพื่อหลีกเลี่ยงช่องว่าง และสไปรต์รั้วก็ต่อกันได้ดี
- หากกำหนดค่า orientation ผิดให้กับกำแพงเดียวกัน จะเกิด ช่องว่าง ระหว่างสไปรต์
ข้อมูลเพิ่มเติมที่ถูกเปิดเผยและกรณีคล้ายกัน
- Perspective Mode เปิดใช้ได้เฉพาะตอน Diablo 2 รันแบบ D3D เต็มหน้าจอ
- Diablo 2 รองรับทั้ง Glide และ Software Rendering ด้วย
- มีความพยายามค้นข้อมูลเพิ่มจากเอกสาร DirectX เก่า แต่ไม่พบอะไรเป็นชิ้นเป็นอัน
- ในอัปเดตภายหลังมีการเพิ่มลิงก์เกี่ยวกับการบิดเบือนภาพ
- image aberration ดูคล้ายกับความบิดเบือนที่เห็นใน Perspective Mode ของ Diablo 2 มาก
- แต่ก็ไม่อาจทราบได้ว่านักพัฒนา Diablo 2 ใช้มันจริงหรือไม่
- บทความ Gamasutra ที่ Paul Siramy แชร์ไว้ อธิบายวิธีทำ Perspective Mode ไว้อย่างตรงไปตรงมามากขึ้น
- ต้องมี การ์ดจอ 3D จึงจะเปิด Perspective Mode ได้
- Diablo II ใช้ไทล์รูปเพชรขนาดใหญ่ที่ประกอบจากไทล์รูปเพชรขนาดเล็กหลายชิ้น เพื่อให้ได้กริดที่ละเอียดกว่าเดิม
- มีการหมุนเท็กซ์เจอร์ของมินิไทล์แต่ละชิ้นเล็กน้อย จากนั้นการ์ดจอจะนำไปวาดลงบนโพลิกอนสองชิ้น แล้วค่อยยืดในแนวตั้งและแนวนอน เพื่อให้ดูใหญ่หรือเล็กลงตามตำแหน่งของตัวละคร
- ต้นไม้และอาคารจะดูมีขนาดเปลี่ยนไปเมื่อเข้าใกล้หรือไกลออก และเลื่อนด้วยความเร็วต่างจากวัตถุฉากหน้าและฉากหลัง จึงเกิด เอฟเฟกต์ parallax
- อาการที่วัตถุดูระยิบเล็กน้อยอธิบายได้ว่าเป็นผลจาก bilinear filtering ของการ์ดจอ
- ทั้งตัวละคร ไอเท็ม และสิ่งปลูกสร้างอย่างกระท่อมหอคอยใน Act I ต่างก็ถูกขยายและย่อใน Perspective Mode
- ตามคำอธิบายของ Dave มีการใช้ คณิตศาสตร์ 3D จริงในการปรับสเกลและยืดกริดเล็กน้อยเพื่อสร้างความรู้สึกลึก
- ใช้เวลาทำราว 1~2 สัปดาห์ โดยต้องจัดแนวกำแพงและแสงใหม่ และศิลปินก็ต้องตัดวัตถุใหม่รวมถึงเรนเดอร์ในแบบที่ต่างออกไป
- ในอัปเดต 3 ยังเพิ่ม Cultures เป็นอีกตัวอย่างของเกมที่ใช้กลเม็ดเพอร์สเปกทีฟ 2D คล้ายกัน
1 ความคิดเห็น
ความเห็นจาก Hacker News
นี่เป็นหนึ่งในรายการที่เคยสงสัยมานาน ตอนนี้คงได้ขีดออกแล้ว ถ้ามีใครรู้ว่า ท้องฟ้าใน World of Warcraft ถูกสร้างขึ้นอย่างไร และรวมถึงภูมิประเทศของ Warcraft 3 ที่แม้จะน้อยกว่า ก็อยากให้ช่วยบอกที
ผมคิดมาตลอดว่าภูมิประเทศของ Warcraft 3 น่าจะใช้ marching squares อย่างชาญฉลาด สงสัยเรื่องนี้มานานกว่า 10 ปีแล้ว ฟีเจอร์อย่างกลางวัน/กลางคืน/เมฆ/ดวงจันทร์/ดวงดาวนั้นยอดเยี่ยมมาก สวยงาม เบามาก และดูเหมือนจะอัปเดตข้ามเฟรมแต่ก็ยังลื่นไหลเป็นธรรมชาติมาก ไม่น่าใช่ render-to-texture และก็เนียนมากจนแทบไม่เห็นโพลิกอนหรือพิกเซล ทั้งยังรันได้บนคอมพิวเตอร์ปี 2002 จึงเป็นความมหัศจรรย์ของ เทคอาร์ต จริงๆ
https://simonschreibt.de/gat/homeworld-2-backgrounds/
http://simonschreibt.de/gat/homeworld-2-backgrounds-tech/
[1] https://www.hiveworkshop.com/attachments/wc3search-tutorial0...
[2] https://www.hiveworkshop.com/attachments/15-jpg.7734/
สรุปคือมันเป็น โครงสร้างที่ซ้อน skybox mesh หลายชั้น
ผมยังเล่น D2 อยู่จนถึงทุกวันนี้เพราะคนที่ดูแล Project Diablo 2[1] โหมด perspective นั้นสวยมากจริงๆ ที่ 144fps และกลับไปเล่น LoD client ดั้งเดิมที่ 30fps ได้นี่ยากพอตัว
ตอนนี้ก็ยังจำความรู้สึกและความคิดถึงตอนเดินลงบันไดคดเคี้ยวใน Pandemonium Fortress แล้วถูกภาพกราฟิกที่สวยงาม หรือบางทีอาจเรียกว่าน่าขนลุกจะเหมาะกว่า เข้าครอบงำได้อยู่เลย
[1] https://www.projectdiablo2.com/
ผมมองว่า Mode 7 โดยแก่นแล้วใกล้เคียงกับ ตัวเร่ง 3D แบบดึกดำบรรพ์ เพราะมันเรนเดอร์พื้นผิวระนาบเดียวโดยใส่ทรานส์ฟอร์มหลายแบบ ดังนั้นในเชิงหลักการก็อาจเรียกได้ว่า “เป็น 3D จริง” พอๆ กับ GPU สมัยใหม่ เพียงแต่มีข้อจำกัดมากและความแม่นยำต่ำ
การแฮ็กให้ดูเป็น 3D ที่สมจริงกว่านั้นมาจากโปรเซสเซอร์เสริมบนตลับเกม เกมอย่าง Super Mario Kart ใช้ชิปเพิ่มเพื่อคำนวณพารามิเตอร์ Mode 7 ใหม่อย่างรวดเร็วสำหรับแต่ละ scanline และถ้าเปลี่ยนการซูมกับการเลื่อนในแต่ละบรรทัดโดยคงการหมุนเดิมไว้ ก็จะทำให้บรรทัดด้านบนดูเล็กกว่าและบรรทัดด้านล่างดูใหญ่กว่า จนเกิดความรู้สึกเหมือนเอียงเป็น 3D
วิธีแบบนี้ที่ “เปลี่ยนอัตราการซูมตามแต่ละ scanline” นั้นต่างจาก GPU สมัยใหม่มาก และก็ไม่ใช่การแปลงแบบอิสระด้วย ตัวอย่างเช่น เทคนิคนี้ทำให้หมุนระนาบตามแกนนอนได้เท่านั้น แต่หมุนตามแกนตั้งไม่ได้
คอมพิวเตอร์กราฟิก ยุคแรกๆ น่าทึ่งเสมอ ผมมั่นใจว่าถ้าไม่มีผลงานบุกเบิกจากแอนิเมชันและคอมพิวเตอร์กราฟิก ทั้งซอฟต์แวร์และฮาร์ดแวร์ก็คงล้าหลังกว่านี้ไปอีกหลายยุค
ถ้ามองที่ NVIDIA การที่สถาปัตยกรรมเดียวกันดันใช้ได้ดีกับแมชชีนเลิร์นนิงระยะแรกและ “ปัญญาประดิษฐ์” นั้นแทบจะเป็นโชคด้วยซ้ำ แต่ตัวบริษัทเองถูกสร้างขึ้นบนพื้นฐานของคอมพิวเตอร์กราฟิก
เหตุผลที่ขอบล่างของสไปรต์โค้งมากขนาดนั้น น่าจะเป็นเพราะต้องเลียนแบบ จุดรวมสายตา ที่อยู่ “ใต้” พื้น สำหรับสไปรต์แนวตั้ง ถ้าเสาสามต้นกางออกด้านนอกจากด้านบนแล้วหมุน ด้านล่างก็น่าจะต้องหมุนตามไปบ้าง และการใช้แค่ shear transform คงดูแปลก
ในฉาก 3ds Max มันอาจไม่แสดงความต่างนี้ชัด เพราะวางตรงกับ viewport พอดีและเป็นเท็กซ์เจอร์สี่เหลี่ยมจัตุรัส เลยทำให้การเอียงดูใช้ได้ ในตัวอย่างที่เคลื่อนไหว ถ้ามองให้ใกล้ความจริง เสาทั้งสามต้นควรกางออกจากกันตามมุมมองเมื่อมันเข้ามาใกล้ขึ้น และเรนเดอร์จาก 3ds Max แสดงจุดนี้ได้ไม่ดีนัก
บทความนี้เน้นเรื่องพารัลแลกซ์ในเกม แต่ เอฟเฟกต์พารัลแลกซ์ มีประวัติยาวนานในงานแอนิเมชัน
กล้อง multiplane ของ Disney และสิ่งที่มาก่อนหน้านั้นมีมาตั้งแต่เกือบ 100 ปีก่อนแล้ว แม้จะใช้ภาพ 2D ก็ยังมีลูกเล่นมากมายในการสร้างฉากให้ดูมีมิติได้
https://en.wikipedia.org/wiki/Multiplane_camera
ดูเหมือนผู้พัฒนาจะค่อนข้างพอใจกับเอฟเฟกต์พารัลแลกซ์นี้ แต่ผมจำไม่ได้ว่าเคยใช้จริง พอคุ้นกับการตั้งค่าปกติไปแล้ว มันเลยให้ความรู้สึกแปลกๆ มากกว่า
คนชอบบอกว่า 3D ของเกมเก่าแบบนี้ “ไม่ใช่ของจริง” แต่เกม 3D สมัยใหม่สุดท้ายก็แสดงผลบนจอแบนเหมือนกัน ถ้างั้นในความหมายพื้นฐานมันก็ ไม่ใช่ 3D จริง เหมือนกันไม่ใช่หรือ?
อีกจุดสำคัญคือสไปรต์ที่เรนเดอร์มาล่วงหน้า ในเกมอย่าง Roller Coaster Tycoon หรือ Diablo จะสร้างโมเดลบนคอมพิวเตอร์เฉพาะทางราคาแพงแล้วเรนเดอร์ออกมาเป็น sprite sheet แม้ออบเจ็กต์จะดูเหมือน 3D แต่ส่วนใหญ่ก็ถูกแจกจ่ายเป็นแอสเซตแบบ 2D แบนๆ เกมพิกเซลอาร์ตสมัยใหม่บางเกมถึงกับใส่ normal map มาคู่กับสไปรต์ 2D เพื่อให้ใช้แสงแบบไดนามิกได้
เอฟเฟกต์พารัลแลกซ์ในเกมสมัยใหม่สามารถทำได้ง่ายๆ เพียงเรนเดอร์ออบเจ็กต์แบนภายในฉาก 3D แต่กราฟิกไปป์ไลน์เมื่อ 20 ปีก่อนต่างออกไปมาก ดังนั้นการทำเอฟเฟกต์ 3D ในตอนนั้นจึงต้องใช้ความชาญฉลาดมากกว่า
นั่นเป็นเพียงข้อจำกัดของสถานการณ์ 3D ที่ระบบ Mode 7 สามารถเรนเดอร์ได้ ไม่ได้แปลว่าสิ่งที่เรนเดอร์ได้นั้นปลอมกว่าแต่อย่างใด สุดท้ายแล้ววิธีเรนเดอร์ 3D ทุกแบบก็คือการจัดการกับ กริดพิกเซล 2D บนหน้าจอเพื่อสร้างภาพลวงตาให้เหมือนกำลังมองวัตถุเสมือนจริงอยู่