เทคโนโลยี UE5 Nanite บน WebGPU

Nanite WebGPU

สรุป

• Nanite WebGPU เป็นโปรเจกต์ที่นำ Nanite มาทำงานบนเว็บเบราว์เซอร์ด้วย WebGPU
• ใช้งานได้เฉพาะบน Chrome
• มี ลำดับชั้น Meshlet LOD, ซอฟต์แวร์แรสเตอร์ไรเซอร์, Billboard Impostor เป็นต้น
• รองรับ frustum culling และ occlusion culling
• รองรับ texture และ vertex normal
• ทำงานแบบออฟไลน์ได้ด้วย Deno

ความสามารถ

• ลำดับชั้น Meshlet LOD

  • พรีโปรเซส mesh ในเบราว์เซอร์ด้วย WebAssembly
  • มีฟังก์ชันส่งออกไฟล์ด้วย

• ซอฟต์แวร์แรสเตอร์ไรเซอร์

  • WebGPU ไม่รองรับ atomic<u64>
  • บีบอัด depth (u16) และ normal ที่เข้ารหัสแบบ octahedron (2 * u8) ให้เหลือ 32 บิต

• Billboard Impostor

  • แสดงผลด้วยการผสมภาพ 12 ภาพตามตำแหน่งกล้อง
  • ไม่รองรับมุมมองจากด้านบนและด้านล่าง

• Culling

  • ต่อ instance: frustum culling และ occlusion culling
  • ต่อ Meshlet: frustum culling และ occlusion culling
  • ต่อสามเหลี่ยม: hardware backface culling และ z-buffer

• สลับระหว่าง การเรนเดอร์บน GPU และ การทำงานบน CPU ได้

• รองรับ โมเดลที่มี texture และ อ็อบเจ็กต์หลายแบบ พร้อมกัน

• เปลี่ยนพารามิเตอร์ได้ ขณะรันไทม์

• มี ข้อมูลสถิติ เช่น หน่วยความจำ เรขาคณิต จำนวน meshlet จำนวนสามเหลี่ยม เป็นต้น

• รองรับ ฟอร์แมตไฟล์แบบกำหนดเอง

• รองรับ การควอนไทซ์ตำแหน่ง vertex และ normal ที่เข้ารหัสแบบ octahedron

• รองรับการ ปรับขนาดหน้าต่าง

• ทำงานแบบออฟไลน์ได้ด้วย Deno

• สามารถคัดลอก โค้ด WebGPU และ WGSL ไปใช้ในโปรเจกต์ได้

เป้าหมาย

1. ความเรียบง่าย: เริ่มจากไฟล์ OBJ และจัดการทุกอย่างภายในแอป
2. การทดลอง: สามารถเปลี่ยนค่าต่าง ๆ เพื่อทดสอบประสิทธิภาพได้

ฉากเดโม

• Jinx: 120*120 instances, 640m triangles
• Lucy และ Dragon: 70*70 instances, 1.7b triangles
• Lucy: 110*110 instances, 1.2b triangles
• Dragon: 70*70 instances, 1.2b triangles
• Rabbit: 500*500 instances, 1.2b triangles
• พรีวิว Impostor: เพิ่มขนาด texture ของ impostor

วิธีใช้งาน

• ใช้ปุ่ม [W, S, A, D] เพื่อเคลื่อนที่ และ [Z, SPACEBAR] เพื่อขึ้นลง
• สามารถสลับตัวเลือก culling เพื่อแก้บั๊กได้
• ใช้ปุ่ม Profile เพื่อวัดประสิทธิภาพได้

FAQ

• ความแตกต่างหลักจาก Nanite ของ UE5

  • เมตริกข้อผิดพลาดของการลดความซับซ้อนยังเรียบง่าย
  • การลดความซับซ้อนของ Meshlet ยังเรียบง่าย
  • ไม่มี 2-stage occlusion culling
  • ไม่มี work queue ใน shader
  • ไม่มีการลบ LOD ที่ไม่ได้ใช้งานออกจาก VRAM และไม่มีการสตรีม
  • ไม่มี visibility buffer
  • ไม่มี shadow/multiview ในตัว
  • ไม่สามารถจัดการอ็อบเจ็กต์ต่างชนิดจำนวนมากได้
  • ไม่มี GPU profiler

• ความหมายของจำนวนสามเหลี่ยมระดับหลายพันล้าน

  • mesh ที่หนาแน่นอาจส่งผลลบต่อประสิทธิภาพ
  • จำนวน instances ที่มากใช้ VRAM สูง
  • การจัดวางฉากมีผลต่อประสิทธิภาพ

• สิ่งที่น่าประหลาดใจเกี่ยวกับ Nanite

  1. เป้าหมายของ DAG ไม่ใช่การใช้จำนวนสามเหลี่ยมน้อยลงสำหรับวัตถุที่อยู่ไกล
  2. ใช้เวลากับ culling และงานของ Meshlet มากกว่าตัว Nanite เอง
  3. ลำดับชั้น Meshlet LOD ทำงานได้ง่ายกว่าที่คิด
  4. ถ้า mesh ไม่ถูกลดความซับซ้อนอย่างสะอาด ประสิทธิภาพจะลดลง

• การลดความซับซ้อนของ mesh

  • ระหว่างกระบวนการลดความซับซ้อนอาจเกิดปัญหาได้มาก
  • UE5 ใช้โค้ดลดความซับซ้อนของ mesh ของตัวเอง

• เมตริกข้อผิดพลาด

  • การเลือก Meshlet ที่เหมาะสมคือหัวใจของ Nanite

• ควรเขียน implementation ของ Nanite เองหรือไม่?

  • การใช้ UE5 เป็นวิธีที่ง่ายที่สุด
  • หากเพื่อการเรียนรู้ การลองทำเองก็น่าสนใจ

• ความคุ้มค่าของ Meshlet backface cone culling

  • มีประสิทธิภาพกับ mesh ที่หนาแน่น
  • อาจซ้ำซ้อนกับ occlusion culling
  • อาจเกิดประสิทธิภาพตกจากการเรียกใช้ WebAssembly

สรุปโดย GN⁺

• Nanite WebGPU เป็นโปรเจกต์ที่น่าสนใจซึ่งนำ Nanite มาทำงานบนเว็บเบราว์เซอร์
• ปรับแต่งประสิทธิภาพด้วยเทคนิค culling หลายแบบและซอฟต์แวร์แรสเตอร์ไรเซอร์
• เมื่อเทียบกับ UE5 มีความต่างในด้านการลดความซับซ้อนและเมตริกข้อผิดพลาด
• หากเพื่อการเรียนรู้ การลองทำเองก็น่าสนใจ แต่ในโปรเจกต์จริงการใช้ UE5 อาจเหมาะกว่า
• โปรเจกต์ที่มีความสามารถคล้ายกันคือ Nanite ของ Unreal Engine 5

[GN⁺]

ความคิดเห็นบน Hacker News

• การนำ Nanite ไปทำใหม่โดยบุคคลที่สามน่าสนใจ

  • Nanite เป็นวิธีที่ชาญฉลาดมากในการแสดงผลกราฟิกเมช
  • การทำซ้ำถูกจัดการด้วยลิงก์ และสามารถแชร์ซับเมชแบบเรียกซ้ำได้
  • รองรับระดับรายละเอียดภายในเมช ทำให้ซับเมชขนาดเล็กถูกตัดออก
  • สามารถเรนเดอร์คอนเทนต์ที่ซ้ำกันในขนาดใหญ่ได้อย่างรวดเร็วด้วยข้อมูลเพียงเล็กน้อย
  • การออกแบบ GPU ในปัจจุบันไม่เข้ากับ Nanite และต้องการงานฮาร์ดแวร์แบบใหม่
  • เดโมของ Unreal Engine แสดงฉากที่ใช้รูปปั้นชิ้นเดิมซ้ำๆ
  • การสร้างเมช Nanite มีความซับซ้อน และตอนนี้ทำได้ผ่านเอดิเตอร์ของ Unreal Engine เท่านั้น
  • ออฟเซ็ตภายในของฟอร์แมตอาจเปิดพื้นผิวการโจมตีได้

• Bevy ก็มี Virtual Geometry ที่นำแนวคิดของ Nanite ไปใช้เช่นกัน

  • ผู้เขียนของ Bevy อาจมาตอบคำถามได้โดยตรง
  • Scthe มีส่วนช่วยปรับปรุงโค้ดของ Bevy

• การที่เดโมใช้สตริง user agent เพื่อตัดสินความเข้ากันได้ไม่ใช่แนวทางที่ดี

  • ควรตรวจจับและใช้งานความเข้ากันได้ของฟีเจอร์เป็นรายตัว
  • กำลังใช้ Chromium และใช้ WebGPU บ่อย แต่เดโมกลับ要求 Chrome

• WebGPU ใช้งานไม่ได้บน iPhone 12 Pro Max

  • เปิดใช้ WebGPU ในฟีเจอร์ทดลองแล้ว แต่เว็บไซต์อื่นยังใช้งานได้
  • อยากให้เว็บแอประบุข้อมูลสาเหตุที่ล้มเหลวได้มากกว่านี้

• ต้องมีการประนีประนอมเพื่อแก้ปัญหาการขาด 64-bit atomic ใน WebGPU

  • บนฮาร์ดแวร์ระดับเดสก์ท็อป รองรับฟีเจอร์นี้กันแทบทั้งหมด

• ชื่อและคำอธิบายทำให้สับสน และอาจมีความเสี่ยงเรื่องการละเมิดเครื่องหมายการค้า

  • ไม่ได้เกี่ยวข้องกับ Nanite ตัวจริง และเป็นการทำใหม่โดยคนที่ไม่เกี่ยวกับ UE5
  • Virtual Geometry ของ Bevy อาจมีประโยชน์มากกว่า

• การเปรียบเทียบระบบ LOD ของเอนจินอื่นๆ

  • Godot มี LOD อัตโนมัติ
  • Unity ต้องสร้างโมเดล LOD ด้วยตนเอง
  • NeoAxis มีแนวทางที่น่าสนใจ แต่ประสิทธิภาพไม่ดี
  • Unreal นำหน้าอย่างมากในการแสดงวัตถุจำนวนมากบนหน้าจอ

• ได้อ่านการสนทนาที่น่าสนใจในฟอรัม three.js เกี่ยวกับการทำ virtual geometry

  • การพูดคุยเรื่องการทำกราฟิกบนเว็บและ trade-off ต่างๆ น่าสนใจมาก

• มีคำถามต่อคำกล่าวอ้างที่ว่า software rasterizer เร็วกว่า hardware rasterizer

  • จุดประสงค์ของ GPU คือการเร่งการทำ rasterization
  • ยากจะเข้าใจ เว้นแต่ software rasterizer จะรันอยู่บน GPU

• เกิดข้อผิดพลาด WebGPU ระหว่างรันเดโม jinx บน M2 Max

  • ขึ้นข้อความผิดพลาด "Fill size (7398781) is not a multiple of 4 bytes"