การเรนเดอร์ tilemap ที่ไร้รอยต่อ (ภาพที่อยู่ติดกันแบบไร้ขอบ)

ฉันมีเอ็นจิ้นเกม 2D ที่ดึงแผ่นกระเบื้องโดยการวาดแผ่นจากภาพชุดไพ่ เนื่องจากตามค่าเริ่มต้นแล้ว OpenGL สามารถห่อทั้งพื้นผิว ( GL_REPEAT) และไม่ได้เป็นส่วนหนึ่งของมันเท่านั้นไทล์แต่ละอันจึงแยกออกเป็นพื้นผิวแยกต่างหาก จากนั้นพื้นที่ของไทล์เดียวกันจะแสดงผลติดกัน นี่คือสิ่งที่ดูเหมือนว่าเมื่อทำงานตามที่ตั้งใจไว้:

อย่างไรก็ตามทันทีที่คุณแนะนำการปรับสัดส่วนแบบตะเข็บปรากฏ:

ทำไมสิ่งนี้ถึงเกิดขึ้น ฉันคิดว่าเป็นเพราะการกรองเชิงเส้นเป็นการผสมผสานเส้นขอบของคณะสี่คน แต่มันก็ยังคงเกิดขึ้นกับการกรองแบบจุด วิธีแก้ปัญหาเดียวที่ฉันพบคือการรับประกันว่าการวางตำแหน่งและการปรับขนาดทั้งหมดจะเกิดขึ้นที่ค่าจำนวนเต็มและใช้การกรองแบบจุดเท่านั้น สิ่งนี้สามารถลดคุณภาพการมองเห็นของเกม (โดยเฉพาะการวางตำแหน่งพิกเซลย่อยไม่ทำงานอีกต่อไปดังนั้นการเคลื่อนไหวจะไม่ราบรื่น)

สิ่งที่ฉันได้ลอง / พิจารณา:

• การลดรอยหยักจะลด แต่ไม่ได้กำจัดรอยตะเข็บทั้งหมด
• การปิดการทำแผนที่ไม่มีผล
• เรนเดอร์แต่ละแผ่นแยกกันและขับขอบ 1px - แต่นี่เป็นการลดประสิทธิภาพเนื่องจากมันไม่สามารถแสดงพื้นที่ของกระเบื้องได้ในคราวเดียวและสร้างสิ่งประดิษฐ์อื่น ๆ ตามขอบของพื้นที่โปร่งใส
• เพิ่มเส้นขอบ 1px รอบ ๆ รูปภาพต้นทางและทำซ้ำพิกเซลสุดท้าย - แต่จากนั้นจะไม่มีกำลังไฟสองอีกต่อไปทำให้เกิดปัญหาความเข้ากันได้กับระบบที่ไม่มีการสนับสนุน NPOT
• การเขียน shader ที่กำหนดเองเพื่อจัดการกับภาพที่มีการเรียงต่อกัน - แต่แล้วคุณจะทำอะไรที่แตกต่างออกไป? GL_REPEATควรจับพิกเซลจากด้านตรงข้ามของภาพที่ขอบและไม่เลือกความโปร่งใส
• เรขาคณิตอยู่ติดกันอย่างแน่นอนไม่มีข้อผิดพลาดในการปัดเศษจุดลอยตัว
• ถ้า Shader ส่วนจะเขียนยากที่จะกลับมามีสีเดียวกันตะเข็บหายไป
• ถ้าพื้นผิวมีการกำหนดให้GL_CLAMPแทนGL_REPEAT, ตะเข็บหายไป (แม้ว่าการแสดงผลที่ไม่ถูกต้อง)
• ถ้าพื้นผิวมีการกำหนดให้GL_MIRRORED_REPEAT, ตะเข็บหายไป (แม้ว่าการแสดงผลที่ไม่ถูกต้องอีกครั้ง)
• ถ้าฉันทำให้พื้นหลังเป็นสีแดงตะเข็บก็ยังขาวอยู่ นี่เป็นการชี้ให้เห็นว่ามันเป็นการสุ่มตัวอย่างสีขาวขุ่นจากที่อื่นแทนที่จะโปร่งใส

ดังนั้นตะเข็บจะปรากฏขึ้นก็ต่อเมื่อGL_REPEATมีการตั้งค่า ด้วยเหตุผลบางอย่างในโหมดนี้เท่านั้นที่ขอบของรูปทรงเรขาคณิตมีการตกเลือด / การรั่วไหล / ความโปร่งใส นั่นเป็นอย่างไร พื้นผิวทั้งหมดเป็นทึบแสง

ตะเข็บเป็นพฤติกรรมที่ถูกต้องสำหรับการสุ่มตัวอย่างด้วย GL_REPEAT พิจารณาแผ่นต่อไปนี้:

การสุ่มตัวอย่างที่ขอบของกระเบื้องโดยใช้ค่าเศษส่วนผสมสีจากขอบและขอบตรงข้ามทำให้เกิดสีที่ไม่ถูกต้อง: ขอบซ้ายควรเป็นสีเขียว แต่เป็นการผสมจากสีเขียวและสีเบจ ขอบขวาควรเป็นสีเบจ แต่มีสีผสมเช่นกัน โดยเฉพาะอย่างยิ่งเส้นสีเบจบนพื้นหลังสีเขียวสามารถมองเห็นได้อย่างชัดเจน แต่ถ้าคุณมองอย่างใกล้ชิดคุณสามารถเห็นสีเขียวปนเปื้อนลงไปที่ขอบ:

การลดรอยหยักจะลด แต่ไม่ได้กำจัดรอยตะเข็บทั้งหมด

MSAA ทำงานโดยใช้ตัวอย่างเพิ่มเติมรอบขอบรูปหลายเหลี่ยม ตัวอย่างที่ถ่ายไปทางซ้ายหรือทางขวาของขอบจะเป็น "สีเขียว" (อีกครั้งโดยพิจารณาจากขอบด้านซ้ายของภาพแรก) และมีเพียงตัวอย่างเดียวเท่านั้นที่จะ "บน" ที่ขอบการสุ่มตัวอย่างบางส่วนจากพื้นที่ เมื่อตัวอย่างผสมกันผลจะลดลง

การแก้ปัญหาที่เป็นไปได้:

ไม่ว่าในกรณีใดคุณควรสลับไปใช้GL_CLAMPเพื่อป้องกันการตกเลือดจากพิกเซลที่ด้านตรงข้ามของพื้นผิว จากนั้นคุณมีสามตัวเลือก:

1. เปิดใช้งานการลดรอยหยักเพื่อให้การเปลี่ยนแปลงระหว่างกระเบื้องราบรื่นขึ้นเล็กน้อย

2. GL_NEARESTตั้งเนื้อกรอง สิ่งนี้จะช่วยให้ขอบของพิกเซลแข็งทั้งหมดดังนั้นรูปหลายเหลี่ยม / สไปรต์จึงแยกไม่ออก แต่ก็เห็นได้ชัดว่าเป็นการเปลี่ยนแปลงรูปแบบของเกมค่อนข้างน้อย

3. เพิ่มเส้นขอบ 1px ที่กล่าวถึงไปแล้วตรวจสอบให้แน่ใจว่าเส้นขอบนั้นมีสีของแผ่นกระเบื้องติดกัน (และไม่ใช่สีของขอบตรงกันข้าม)

   • นี่อาจเป็นเวลาที่ดีในการเปลี่ยนไปใช้แผนที่พื้นผิว (เพียงเพิ่มขนาดให้ใหญ่ขึ้นหากคุณกังวลเกี่ยวกับการสนับสนุนของ NPOT)
   • นี่เป็นวิธีการแก้ปัญหา "สมบูรณ์แบบ" เพียงอย่างเดียวซึ่งเปิดใช้งานการGL_LINEARกรองแบบข้ามขอบของรูปหลายเหลี่ยม / สไปรต์

เนื่องจากโดยปกติแล้ว OpenGL จะสามารถห่อทั้งพื้นผิวได้ (GL_REPEAT) เท่านั้นและไม่เพียง แต่เป็นส่วนหนึ่งของมันเท่านั้นไทล์แต่ละอันจึงแยกออกเป็นพื้นผิวแยกต่างหาก จากนั้นพื้นที่ของไทล์เดียวกันจะแสดงผลติดกัน

พิจารณาการแสดงรูปสี่เหลี่ยมพื้นผิวธรรมดาหนึ่งตัวใน OpenGL มีตะเข็บใด ๆ ในระดับใด? ไม่ไม่เคย. เป้าหมายของคุณคือนำไทล์ฉากทั้งหมดของคุณบรรจุลงบนพื้นผิวเดียวอย่างแน่นหนาแล้วส่งไปที่หน้าจอ แก้ไขเพื่อชี้แจงเพิ่มเติมต่อไปนี้: หากคุณมีจุดยอดที่ไม่ต่อเนื่องของแต่ละสี่เหลี่ยมคุณจะมีตะเข็บที่ไม่ยุติธรรมภายใต้สถานการณ์ส่วนใหญ่ มันเป็นวิธีที่ฮาร์ดแวร์ GPU ทำงาน ... ข้อผิดพลาดของจุดลอยสร้างช่องว่างเหล่านี้ตามมุมมองปัจจุบัน ... ข้อผิดพลาดที่หลีกเลี่ยงได้ในหลากหลายรวมเนื่องจากถ้าใบหน้าทั้งสองอยู่ติดกันภายใน manifold เดียวกัน(submesh) ฮาร์ดแวร์จะแสดงผลโดยไม่มีตะเข็บรับประกัน คุณเคยเห็นสิ่งนี้ในเกมและแอพนับไม่ถ้วน คุณต้องมีพื้นผิวที่อัดแน่นในเนื้อเรื่องเดียวโดยไม่ต้องมีจุดยอดสองเท่าเพื่อหลีกเลี่ยงสิ่งนี้ทุกครั้ง มันเป็นปัญหาที่เกิดขึ้นครั้งแล้วครั้งเล่าในเว็บไซต์นี้และที่อื่น ๆ : หากคุณไม่รวมจุดยอดมุมของแผ่นกระเบื้องของคุณ (ทุก 4 แผ่นแบ่งปันจุดสุดยอดมุม) คาดว่าตะเข็บ

(พิจารณาว่าคุณอาจไม่ต้องการจุดยอดยกเว้นที่มุมทั้งสี่ของแผนที่ทั้งหมด ... ขึ้นอยู่กับวิธีการแรเงาของคุณ)

วิธีแก้ปัญหา: เรนเดอร์ (ที่ 1: 1) พื้นผิวไทล์ทั้งหมดของคุณลงใน FBO / RBOโดยไม่มีช่องว่างจากนั้นส่ง FBO นั้นไปยังเฟรมเฟรมเริ่มต้น (หน้าจอ) เนื่องจาก FBO นั้นโดยทั่วไปเป็นพื้นผิวเดียวคุณจึงไม่สามารถจบลงด้วยช่องว่างในการปรับขนาด ขอบเขตเท็กเซลทั้งหมดที่ไม่ตกบนขอบเขตพิกเซลหน้าจอจะถูกรวมกันถ้าคุณใช้ GL_LINEAR .... ซึ่งเป็นสิ่งที่คุณต้องการอย่างแท้จริง นี่คือวิธีการมาตรฐาน

สิ่งนี้จะเปิดเส้นทางจำนวนมากเพื่อปรับขนาด:

• ปรับขนาดของรูปสี่เหลี่ยมที่คุณจะแสดง FBO
• การเปลี่ยนยูวีในรูปสี่เหลี่ยมนั้น
• เล่นซอกับการตั้งค่ากล้อง

หากภาพควรปรากฏเป็นพื้นผิวเดียวให้เรนเดอร์เหล่านี้เป็นพื้นผิวหนึ่ง (มาตราส่วน 1x) บน 3D mesh / plane หากคุณแสดงผลเป็นวัตถุ 3 มิติแยกต่างหากมันจะมีรอยต่อเสมอเนื่องจากข้อผิดพลาดในการปัดเศษ

คำตอบโดย @ Nick-Wiggill ถูกต้องฉันคิดว่าคุณเข้าใจผิด

2 ความเป็นไปได้ที่น่าลอง:

1. ใช้GL_NEARESTแทนGL_LINEARการกรองพื้นผิวของคุณ (ดังชี้โดย Andon M. Coleman)

   GL_LINEARจะ (มีผลบังคับใช้) ทำให้ภาพเบลอเล็กน้อย (แทรกระหว่างพิกเซลที่ใกล้ที่สุด) ซึ่งจะช่วยให้การเปลี่ยนสีเป็นไปอย่างราบรื่นจากพิกเซลหนึ่งไปยังอีกพิกเซลหนึ่ง สิ่งนี้สามารถช่วยให้พื้นผิวดูดีขึ้นในหลาย ๆ กรณีเนื่องจากมันจะป้องกันพื้นผิวของคุณจากการมีพิกเซลบล็อกเหล่านั้นอยู่ทั่ว นอกจากนี้ยังทำให้เป็นสีน้ำตาลเล็กน้อยจากหนึ่งพิกเซลของกระเบื้องมากกว่าหนึ่งสามารถเบลอไปที่พิกเซลสีเขียวที่อยู่ติดกันของกระเบื้องที่อยู่ติดกัน

   GL_NEARESTเพียงแค่หาพิกเซลที่ใกล้ที่สุดและใช้สีนั้น ไม่มีการแก้ไข เป็นผลให้เร็วขึ้นเล็กน้อย

2. ลดขนาดพื้นผิวสำหรับแต่ละกระเบื้องเพียงเล็กน้อย

   เรียงลำดับเช่นเพิ่มพิกเซลพิเศษที่อยู่รอบ ๆ ไทล์แต่ละอันเป็นบัฟเฟอร์ยกเว้นแทนที่จะขยายไทล์บนรูปภาพคุณย่อขนาดไทล์ในซอฟต์แวร์ ไทล์ 14x14px ขณะที่เรนเดอร์แทนไทล์ 16x16px

   คุณอาจสามารถหลุดออกไปได้ด้วยกระเบื้องขนาด 14.5x14.5 โดยไม่มีสีน้ำตาลผสมอยู่มากเกินไป

--edit--

ดังที่แสดงในภาพด้านบนคุณยังสามารถใช้พลังของสองพื้นผิวได้อย่างง่ายดาย ดังนั้นคุณสามารถรองรับฮาร์ดแวร์ที่ไม่รองรับพื้นผิว NPOT การเปลี่ยนแปลงอะไรคือพิกัดพื้นผิวของคุณแทนที่จะเปลี่ยนจาก(0.0f, 0.0f)เป็น(1.0f, 1.0f)คุณจะเปลี่ยนจาก(0.03125f, 0.03125f)เป็น(0.96875f, 0.96875f)เป็น

นั่นทำให้เท็กซัสของคุณอยู่ในแผ่นกระเบื้องเล็กน้อยซึ่งช่วยลดความละเอียดที่มีประสิทธิภาพในเกม (แม้ว่าจะไม่ใช่บนฮาร์ดแวร์เพื่อให้คุณยังมีพื้นผิวที่มีพลังแห่งสอง) อย่างไรก็ตามควรมีเอฟเฟกต์การแสดงผลเช่นเดียวกับการขยายพื้นผิว

นี่คือสิ่งที่ฉันคิดว่าอาจเกิดขึ้น: ที่ซึ่งไพ่สองใบชนกันส่วนประกอบของ x ของขอบควรเท่ากัน หากไม่เป็นความจริงพวกเขาอาจถูกปัดเศษไปในทิศทางตรงกันข้าม ตรวจสอบให้แน่ใจว่าพวกเขามีค่า x เหมือนกันทุกประการ คุณมั่นใจได้อย่างไรว่าสิ่งนี้เกิดขึ้น? คุณอาจลองสมมติว่าคูณด้วย 10 ปัดเศษแล้วหารด้วย 10 (ทำได้แค่นี้บน CPU ก่อนที่จุดยอดของคุณจะเข้าสู่จุดยอด shader) ที่ควรให้ผลลัพธ์ที่ถูกต้อง นอกจากนี้อย่าวาดไทล์ด้วยไทล์โดยใช้เมทริกซ์การแปลง แต่วางลงในแบทช์ VBO เพื่อให้แน่ใจว่าผลลัพธ์ที่ผิดไม่ได้มาจากระบบจุดลอยตัว IEEE ที่สูญเสียร่วมกับการคูณเมทริกซ์

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

สิ่งที่อาจเป็นปัญหาคือคุณกำลังใช้ spritesheet (หรือที่เรียกว่า atlas) และเมื่อทำการสุ่มตัวอย่างพื้นผิวพิกเซลของพื้นผิวกระเบื้องที่อยู่ติดกันจะถูกเลือก เพื่อให้แน่ใจว่าสิ่งนี้จะไม่เกิดขึ้นคือการสร้างเส้นขอบเล็ก ๆ ในการจับคู่รังสียูวี ดังนั้นหากคุณมีไทล์ 64x64 การแมป UV ของคุณควรครอบคลุมน้อยกว่านี้เล็กน้อย เท่าไหร่ ฉันคิดว่าฉันใช้ในเกมของฉัน 1 ใน 4 ของพิกเซลที่แต่ละด้านของสี่เหลี่ยม ดังนั้นชดเชย UV ของคุณด้วย 1 / (4 * widthOfTheAtlas) สำหรับส่วนประกอบ x และ 1 / (4 * heightOfTheAtlas) สำหรับส่วนประกอบ y

เพื่อแก้ปัญหานี้ในพื้นที่ 3 มิติฉันได้ผสมอาร์เรย์ของเนื้อสัตว์กับคำแนะนำของ Wolfgang Skyler ฉันใส่เส้นขอบ 8 พิกเซลรอบ ๆ พื้นผิวที่แท้จริงของฉันสำหรับแต่ละไทล์ (120x120, 128x128 ทั้งหมด) ซึ่งสำหรับแต่ละด้านซึ่งฉันสามารถเติมด้วยภาพ "ห่อ" หรือด้านที่เพิ่งขยาย ตัวอย่างอ่านพื้นที่นี้เมื่อมีการแก้ไขภาพ

ขณะนี้มีการกรองและการแม็พการทำตัวอย่างสามารถอ่านได้อย่างง่ายดายผ่านเส้นขอบทั้ง 8 พิกเซล เพื่อจับปัญหาเล็ก ๆ นั้น (ฉันบอกว่าเล็กเพราะมันเกิดขึ้นเพียงไม่กี่พิกเซลเมื่อรูปทรงเรขาคณิตเอียงหรือห่างออกไปจริงๆ) ฉันแบ่งกระเบื้องเป็นอาร์เรย์พื้นผิวดังนั้นแต่ละกระเบื้องมีพื้นที่พื้นผิวของตัวเองและสามารถใช้ตัวหนีบบน ขอบ

ในกรณีของคุณ (2D / flat) ฉันจะไปกับการสร้างฉากที่สมบูรณ์แบบของพิกเซลแล้วปรับสัดส่วนของผลลัพธ์ที่ต้องการลงในวิวพอร์ตตามที่ Nick Wiggil แนะนำ