WebGL Trace: ส่วนขยาย DevTools สำหรับการดีบัก WebGL ต่อการเรียก
WebGL Trace โดย arthurthkng เป็นส่วนขยายของ Chrome สำหรับโปรแกรมเมอร์กราฟิกและนักพัฒนาเว็บที่ทำการดีบักการเรนเดอร์ WebGL มันฝังอยู่ในเครื่องมือพัฒนาเบราว์เซอร์เพื่อทำให้การตรวจสอบระดับเฟรมและการแยกข้อผิดพลาดเป็นไปได้ในระหว่างการพัฒนา เครื่องมือนี้เปิดเผยลำดับการดำเนินการที่ละเอียด สถานะของท่อ และไทม์ไลน์ของทรัพยากรเพื่อช่วยระบุข้อผิดพลาดในการเรนเดอร์ ผู้ใช้เป้าหมายคือผู้เชี่ยวชาญทางเทคนิคที่ต้องการการมองเห็นที่แน่นอนเกี่ยวกับลำดับการเรียกวาด ปัญหาเชดเดอร์ และสถานะของพื้นผิวภายในเบราว์เซอร์。
WebGL Trace ใช้ทำอะไร?
ส่วนขยายนี้รวมเข้ากับ Chrome DevTools เพื่อจับภาพเฟรมแต่ละเฟรมและนำเสนอการดูแบบก้าวผ่านของกิจกรรมการเรนเดอร์ มันบันทึกการเรียก WebGL ตามลำดับการดำเนินการและจัดกลุ่มตามการเรนเดอร์ ซึ่งช่วยในการระบุการเรียกที่ทำให้เกิดปัญหาที่มองเห็นได้ นักพัฒนาที่ทำงานกับเอนจินหรือไลบรารีที่กำหนดเอง เช่น Three.js สามารถเล่นซ้ำเฟรมเดียวเพื่อสำรวจว่ารหัสของพวกเขาแมพไปยังการดำเนินการของ GPU อย่างไร
มันแสดงเชดเดอร์, เท็กซ์เจอร์, และสถานะของพายป์ไลน์ได้อย่างไร?
การตรวจสอบพายป์ไลน์และทรัพยากร เป็นสิ่งสำคัญของเครื่องมือ เชดเดอร์ซอร์สสามารถดูได้พร้อมกับสถานะการคอมไพล์และลิงค์แบบสด และเท็กซ์เจอร์จะถูกพรีวิวด้วยการเข้าถึงระดับ mip, การสนับสนุนเลเยอร์อาเรย์, และมุมมองของหน้าคิวบ์ ส่วนขยายยังเปิดเผยการแนบเฟรมบัฟเฟอร์, ยูนิตฟอร์ม, และการผูกแอตทริบิวต์เวกเตอร์เพื่อให้วิศวกรสามารถตรวจสอบสถานะของ GPU ที่สร้างการวาดได้
การเรียก API, ข้อผิดพลาด, และประวัติทรัพยากรถูกแสดงอย่างไร?
การเรียกจะถูกบันทึกตามลำดับเวลาโดยมีการตรวจสอบอาร์กิวเมนต์และค่าที่ส่งคืนอย่างละเอียดและการรายงานข้อผิดพลาด GL อย่างชัดเจน ซึ่งทำให้การค้นหาสาเหตุที่แท้จริงเป็นไปได้โดยตรงมากขึ้น ประวัติทรัพยากร GPU ช่วยให้คุณติดตามว่าบัฟเฟอร์, เท็กซ์เจอร์, หรือโปรแกรมเปลี่ยนแปลงอย่างไรตลอดการจับภาพ อินเทอร์เฟซรวมถึงการควบคุมการค้นหาและกรองเพื่อลดรายการเรียกยาวๆ ให้เหลือเฉพาะการดำเนินการที่สำคัญที่สุด
สามารถแชร์การจับภาพได้อย่างไรและมันทำงานที่ไหน?
ส่วนขยายสนับสนุนการส่งออกเซสชันที่จับภาพเป็น JSON สำหรับการเก็บรักษาหรือการตรวจสอบของทีม ซึ่งช่วยให้การวิเคราะห์ออฟไลน์ที่สามารถทำซ้ำได้ มันถูกสร้างขึ้นสำหรับเบราว์เซอร์ที่ใช้ Chromium ดังนั้นจึงทำงานใน Chrome และไคลเอนต์เดสก์ท็อปที่คล้ายกันบน Windows, macOS, และ Linux นักพัฒนาตำแหน่งเครื่องมือว่าเป็นเครื่องมือที่เบาและมุ่งเน้นไปที่การติดตาม WebGL และการตรวจสอบสถานะการทำงาน
เครื่องมือเฉพาะที่เหมาะกับวิศวกรกราฟิกมากกว่าผู้เขียนเว็บทั่วไป
WebGL Trace เป็นตัวเลือกเฉพาะสำหรับนักพัฒนาที่ต้องการความโปร่งใสในระดับเฟรมที่แน่นอน ซึ่งถือเป็นเครื่องมือเฉพาะที่ได้รับการตอบรับที่ดีจากชุมชน WebGL ขอบเขตที่มุ่งเน้นทำให้มันมีประโยชน์น้อยลงสำหรับการดีบัก DOM หรือเลย์เอาต์ตามปกติ; ทีมที่ตรวจสอบลำดับการเรียกวาดและการโต้ตอบของเชเดอร์จะได้รับประโยชน์มากที่สุด สำหรับผู้ใช้เหล่านั้น ส่วนขยายนี้ให้วิธีการที่สามารถทำซ้ำได้ในการจับภาพและบันทึกการตรวจสอบการเรนเดอร์เพื่อการตรวจสอบในภายหลัง.