วิธีการวาดเส้นขอบในวิดีโอเกม

 (ameye.dev)
2 คะแนน โดย GN⁺ 2025-01-05 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • บทนำ

    • การเรนเดอร์เส้นขอบในเกมมักถูกใช้เพื่อเหตุผลด้านความงามหรือเพื่อช่วยการเล่นเกม ตัวอย่างเช่น เกม Sable ใช้เส้นขอบเพื่อสร้างสไตล์แบบการ์ตูน และ The Last of Us ใช้เพื่อเน้นศัตรู

  • เอฟเฟกต์ริม

    • เทคนิค

      • ใช้เอฟเฟกต์เฟรเนล (Fresnel effect) ในการเรนเดอร์เส้นขอบที่ขอบของวัตถุ โดยเอฟเฟกต์จะมีความชัดเจนมากขึ้นที่ขอบวัตถุ

    • การนำไปใช้

      • เรนเดอร์เส้นขอบบนวัตถุด้วยเชเดอร์ที่กำหนดเองซึ่งใช้งานเอฟเฟกต์เฟรเนลอยู่ วิธีนี้เหมาะกับวัตถุที่มีพื้นผิวมนและโค้ง เช่น ลูกบอลหรือแคปซูล แต่ไม่เหมาะกับวัตถุที่คมชัดเช่นลูกบาศก์

  • การขยายเวอร์เทกซ์

    • เทคนิค

      • สร้างเส้นขอบด้วยการใช้แบบจำลองซ้ำของวัตถุเดิม โดยขยายเวอร์เทกซ์ของแบบจำลองซ้ำให้ใหญ่กว่าวัตถุเดิม

    • ทิศทางการขยาย

      • ปรับขนาดวัตถุโดยเลือกทิศทางในการย้ายเวอร์เทกซ์ โดยย้ายเวอร์เทกซ์ในอวกาศของวัตถุเพื่อสร้างเส้นขอบ

    • พื้นที่การขยาย

      • มีวิธีย้ายเวอร์เทกซ์ในอวกาศของวัตถุ และย้ายในคลิปสเปซ วิธีย้ายในคลิปสเปซจะให้เส้นขอบที่สม่ำเสมอกว่า

    • มาสก์

      • ลบด้านหน้า (front face) ของเมชที่ถูกขยายออก เพื่อให้เห็นเส้นขอบเท่านั้น

  • บัฟเฟอร์เบลอ

    • เทคนิค

      • เรนเดอร์ซิลูเอตของวัตถุลงบนบัฟเฟอร์ และนำมาทำ Gaussian blur เพื่อสร้างเส้นขอบ

    • บัฟเฟอร์ซิลูเอต

      • เรนเดอร์วัตถุด้วยสีเดียวเพื่อสร้างซิลูเอตบัฟเฟอร์

    • ขั้นตอนการเบลอ

      • ใช้ขั้นตอนการเบลอเพื่อขยายซิลูเอตบัฟเฟอร์ โดยใช้ box blur หรือ Gaussian blur เพื่อเพิ่มประสิทธิภาพ

    • ขั้นตอนเส้นขอบ

      • ผสมซิลูเอตที่เบลอแล้วเข้ากับฉากต้นฉบับเพื่อสร้างเส้นขอบ

  • อัลกอริทึม Jump Flood

    • ใช้อัลกอริทึม Jump Flood ในการเรนเดอร์เส้นขอบ ซึ่งช่วยให้เรนเดอร์เส้นขอบหนาได้ในต้นทุนประสิทธิภาพที่ต่ำ

  • การตรวจจับขอบ

    • เทคนิค

      • ตรวจจับความไม่ต่อเนื่องในฉากด้วย full-screen pass แล้วเรนเดอร์เส้นขอบ

    • การตรวจจับความไม่ต่อเนื่อง

      • ตรวจจับความไม่ต่อเนื่องด้วยตัวดำเนินการ Roberts cross หรือ Sobel

    • แหล่งที่มาของความไม่ต่อเนื่อง

      • ตรวจจับความไม่ต่อเนื่องจากเท็กซ์เจอร์ความลึก, normal และสีเพื่อสร้างเส้นขอบ

    • การปรับแต่งการตรวจจับขอบ

      • ลดอาร์ติแฟกต์ด้วยการปรับค่า threshold ที่ใช้ตรวจจับความไม่ต่อเนื่อง

    • แหล่งความไม่ต่อเนื่องแบบกำหนดเอง

      • ให้แหล่งความไม่ต่อเนื่องแบบกำหนดเองเพื่อให้สามารถควบคุมเส้นขอบได้

  • สรุป

    • มี 5 วิธีในการวาดเส้นขอบ โดยมีการแลกเปลี่ยนทางด้านประสิทธิภาพ ความสมจริงของภาพ และการตั้งค่าด้วยตนเอง

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-05
ความคิดเห็นบน Hacker News

  • อ่านบทความเกี่ยวกับอัลกอริทึม Jump Flood ด้วยความสนใจมาก คิดมุมมองหลากหลายในระดับพิกเซลได้สนุกมาก

    • เป็นวิธีที่เฉียบคมมากในการสร้าง SDF (Signed Distance Field) โดยเฉพาะอย่างยิ่งการสร้างเส้นขอบด้วยความหนาที่ต้องการได้ในเวลาเชิงเส้น
    • SDF สามารถนำไปใช้ได้หลากหลายทั้งแบบฐานเวกเตอร์ แบบฐานฟังก์ชัน หรือแบบเทกเซล/โวกเซล ฯลฯ Houdini รองรับ SDF แบบเรสเตอร์ได้ดี และยังมีเวอร์ชันฟรีด้วย
    • SDF มีประโยชน์ในหลายสาขา

  • เสนอวิธีดึงเส้นขอบผ่านการเรนเดอร์โมเดลให้เป็นสีเดียวแล้วทำ edge detection ต้องใช้ render pass เพิ่มเติม

  • สนใจโปรเจ็กต์ R&D เรื่องกราฟิก 3D สไตล์นิยาย มีคำถามอีกหลายข้อที่ยังไม่มีคำตอบ

    • วิธีลดรายละเอียดของโมเดล 3D ที่เรนเดอร์เป็นการ์ตูนเมื่อกล้องซูมออก
    • วิธีเรนเดอร์ฉากหลัง 3D ให้ดูเหมือนสีน้ำ
    • วิธีแสดงควัน เปลวไฟ และต้นไม้ในเกม 3D สไตล์การ์ตูน
    • วิธีปรับโมเดลให้อัตโนมัติเมื่อกล้องเคลื่อนไหวอย่างอิสระ
    • ภาพรวมของโปรแกรมแก้ไข mesh และฉากหลังที่เหมาะสมในตัวเรนเดอร์ 3D สไตล์สไตล์นิยาย
    • ความเป็นไปได้ในการเรนเดอร์พิกเซลอาร์ตแบบเรโทรจากโมเดล 3D ที่เรียบง่าย
    • วิธีทำให้โลกของเกม 3D สไตล์การ์ตูนมีความสอดคล้องทางฟิสิกส์มากขึ้นผ่านสไตล์คงอิทธิพล

  • พัฒนาเทคนิคคล้าย blur buffer ในเกม Astral Divide สร้างเส้นขอบด้วย anti-aliasing มีประสิทธิภาพคุ้มค่าและนำไปใช้ได้ง่าย

  • มีความหลงใหลในด้าน technical art และคาดหวังว่าการปรับปรุง compute shader pipeline ของ Godot จะเกิดขึ้น การตั้งค่า plugin ของ compositor ตอนนี้ค่อนข้างซับซ้อน

  • สงสัยว่าหลังจากเรื่องราคา/ข้อถกเถียงของ Unity แล้ว นักพัฒนามีแนวโน้มย้ายไป Unreal และ Godot เพิ่มขึ้นหรือไม่

  • แม้ย้ายจากการพัฒนาแอป VR มาเป็นเว็บแล้ว แต่ยังคิดถึงเสน่ห์แบบมหัศจรรย์ของงานกราฟิก 3D การชน และ shader

  • ผลลัพธ์เรนเดอร์การตรวจจับขอบนั้นออกมาน่าพอใจมาก ดูเหมือนฉากหนึ่งในหนังสือการ์ตูนเนเธอร์แลนด์เรื่อง Franka

  • เจอ note ที่ดีมากเกี่ยวกับวิธี edge detection ที่ผู้พัฒนา Mars First Logistics เสนอ

  • เสนอเทคนิคง่ายๆ ในการวาดเส้นขอบ

    • สร้างอาเรย์เก็บขอบของแต่ละ face
    • แปลง edge ไปเป็น view space แล้ววาดขอบตามเงื่อนไขที่กำหนด