Three.js Post-Processing: เจาะลึก 192 การทดลองบนเดสก์ท็อป

การเปิดใช้งานเอฟเฟกต์ post-processing มักทำให้เบราว์เซอร์แสดงผลอยู่ที่ราว 60 เฟรมต่อวินาที แต่นั่นไม่ได้หมายความว่าภาระงานเบื้องหลังของการเรนเดอร์จะยังคงเดิม นักพัฒนา Alicia ได้ทำการทดสอบใหม่โดยรันหน้าเว็บสดถึง 192 ครั้ง ครอบคลุมฉากต่างๆ 3 ฉาก ทั้งเอฟเฟกต์ N8AO, bloom, tone mapping, ลำแสง volumetric, การสะท้อน และความละเอียดของ render-buffer เพื่อดูผลลัพธ์ที่แท้จริงนอกเหนือจากตัวเลข FPS ทั่วไป

ผลลัพธ์ที่มีประโยชน์ที่สุดชิ้นหนึ่งคือการควบคุมเชิงลบ (negative control) ซึ่งพบว่าเอฟเฟกต์ bloom ที่ตั้งค่าความเข้มเป็นศูนย์ให้ภาพ Reliquary ออกมาเหมือนกับการถอด bloom ออกไปเลยทุกประการ แต่กลับยังคงสร้าง draw calls เพิ่มขึ้นมาถึง 16 ครั้งโดยไม่จำเป็น นอกจากนี้ ผลลัพธ์ด้านเวลายังแสดงให้เห็นคำเตือนสำคัญว่า การรันซ้ำบนเดสก์ท็อปบางครั้งมีความแปรปรวนสูงกว่าผลกระทบเล็กน้อยที่พยายามวัดเสียอีก บทความนี้จึงรักษาช่วงความแปรปรวนเหล่านี้ไว้ให้มองเห็นได้ เพื่อเสนอการวัดผลที่ทำซ้ำได้จริงแทนที่จะเป็นตารางมิลลิวินาทีแบบครอบจักรวาล

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

จุดเริ่มต้นของการทดสอบอ้างอิงจากโปรเจกต์ Dioramas ที่คอมมิต 868539f โดยปรับแต่งหน้า Reliquary และ Kōen เพื่อตรึงกล้องตัวแรกและสถานะฉากไว้ ฉาก Reliquary มีพื้นผิวสะท้อนแสงและแสง volumetric ส่วน Kōen มีต้นบอนไซและฉากหลังที่สว่างจ้าแตกต่างกันอย่างสิ้นเชิง นอกจากนี้ยังมีฉากที่สามที่วางอินสแตนซ์ต้นไม้ Houdini 1,000 ต้นในฉาก WebGL แยกต่างหาก โดยยังคงสี vertex เชิงวินิจฉัยไว้ทั้งหมด