วิธีผสมผสานกล้องสองตัวเมื่อเดินทางผ่านพอร์ทัลใน Unity3D

ก่อนที่ฉันจะมาถึงคำถามของฉันฉันรู้ว่าวิธีแก้ปัญหาที่ชัดเจนที่สุดคือการใช้ rect port view ปกติ แต่ฉันต้องการรูปทรงที่ซับซ้อนมากกว่า rectangle และฉันได้ดูการใช้ rect port view และดูเหมือนจะไม่ เป็นทางออกของฉัน

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

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

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

หากคุณสามารถให้ความคิดกับฉันหรืออธิบายว่าฉันจะทำอย่างไรกับ shader หน้ากากแบบลึกที่จะช่วยได้มาก ฉันจะดำเนินการต่อในเรื่องนี้และอัปเดตเมื่อฉันฝ่าฝืน

ทำความเข้าใจกับปัญหา

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

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

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

ทางออกที่ง่าย

การทำให้ระนาบใกล้เข้ามาใกล้กับกล้องน่าจะช่วยขจัดปัญหานี้ได้ การแก้ปัญหานี้ไม่สมบูรณ์ แต่จะให้ผลดีพอในกรณีส่วนใหญ่และมีประสิทธิภาพ

โซลูชันที่สมบูรณ์

หากเพียงแค่วางระนาบใกล้เข้ามาใกล้กับกล้องมากขึ้นคุณก็สามารถสร้าง "หน้ากาก" เพื่อผสมผสานภาพที่สร้างขึ้นจากการเรนเดอร์ฉากจากมุมมองของผู้เล่นและพอร์ทัล

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

โปรดทราบว่าหากปัญหานี้เกิดขึ้นดังนั้นมุมมองกล้องจะต้องอยู่ภายในพอร์ทัลอย่างสมบูรณ์ดังนั้นเส้นตัดจะตัดจากขอบหน้าจอหนึ่งไปยังอีกหน้าจอหนึ่งเสมอ

ลิงค์นี้จะช่วยในการคำนวณหาคณิตศาสตร์ รหัสด้านล่างควรถูกต้องคร่าวๆ

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

Vector3 intersectionDir = Vector3.cross(portalNorm, viewDir);
Ray ray = new Ray(camPos + viewDir * camNearPlaneDist, portalNorm);
Vector3 intersectionPos = ray.intersects(new Plane(portalVert1, portalVert2, portalVert3);

ตรวจสอบให้แน่ใจว่า viewDir เป็นเวกเตอร์หน่วย portalVert1, 2 และ 3 เป็นเพียง 3 ใน 4 จุดยอดที่ใช้สำหรับรูปลอกพอร์ทัลหรือพื้นผิวที่เปิดอยู่ มีวิธีอื่นในการกำหนดระนาบที่พอร์ทัลวางอยู่ แต่ฉันคิดว่านี่เป็นข้อมูลที่พร้อมใช้งานมากที่สุด

เมื่อคุณมีเวกเตอร์สองตัวนี้เพื่อกำหนดเส้นตัดหลายเส้นคูณกันด้วยมุมมองจากนั้นจึงฉายเมทริกซ์เพื่อให้พวกมันอยู่ในพื้นที่หน้าจอ

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

float d = (pixelX - intersectionPos.X) * intersectionDir.Y - (pixelY - intersectionPos.Y) * intersectionDir.X;

ด้านถูกกำหนดโดยว่า d มีค่ามากกว่าหรือน้อยกว่า 0 ถ้ามันเป็น 0 ทั้งหมดคุณก็อยู่ในบรรทัด

สำหรับการอ้างอิงเกี่ยวกับคณิตศาสตร์ด้านบนดูสิ่งนี้นี้

วิธีนี้ยังสามารถใช้เมื่อสร้าง mask ลึก / บัฟเฟอร์ stencil สำหรับใช้ก่อนเรนเดอร์จากเปอร์สเปคทีฟพอร์ทัล คุณสามารถสร้างรูปสี่เหลี่ยมเต็มหน้าจอและใช้เส้นเพื่อแบ่งส่วน

คำตอบที่แนะนำนั้นดีมาก แต่ฉันก็ลงเอยด้วยการใช้เทคนิคที่แตกต่างกันโดยใช้มาสก์ลึก

สิ่งที่คุณทำคือการใช้เวลานี้สคริปต์และ Shader คุณวางสคริปต์บนวัตถุทุก renderer ในฉากของคุณและตั้งคิวที่จะทำให้ 3020 (ผมจะโพสต์สคริปต์เพื่อให้ง่ายในภายหลัง)

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

จากนั้นคุณใช้กล้องหลักและยกเลิกการเลือกเลเยอร์พิเศษของคุณจากหน้ากากที่คัดมา (ฉันไม่ได้เลือกเลเยอร์ DepthMask) และตั้งค่าความลึกเป็น 0

จากนั้นเมื่อคุณเคลื่อนย้ายผ่านและโคลนกล้องให้ตั้งค่าสถานะที่ชัดเจนของกล้องอื่นเป็น "ความลึกเท่านั้น" และความลึกเป็น 1

จากนั้นคุณจะได้รับหน้าจอที่กลมกลืนกันระหว่างมุมมองกล้องทั้งสอง