เอนจิ้นกราฟิกเวกเตอร์ที่ใช้ GPU เร่งความเร็วให้ประสิทธิภาพเพิ่มขึ้น 60 เท่าหลังการพัฒนา 10 ปี

ทีมชุมชน BigGo
เอนจิ้นกราฟิกเวกเตอร์ที่ใช้ GPU เร่งความเร็วให้ประสิทธิภาพเพิ่มขึ้น 60 เท่าหลังการพัฒนา 10 ปี

หลังจากการพัฒนามาเป็นเวลาหนึ่งทศวรรษ เอนจิ้นกราฟิกเวกเตอร์ 2D ที่ใช้ GPU เร่งความเร็วชื่อ Rasterizer ได้รับการเปิดตัวแล้ว โดยสัญญาว่าจะให้ประสิทธิภาพที่เร็วกว่าการเรนเดอร์แบบใช้ CPU ถึง 60 เท่า โปรเจกต์นี้ได้รับแรงบันดาลใจจาก Adobe Flash และมุ่งเป้าไปที่แอปพลิเคชันที่ต้องการส่วนติดต่อผู้ใช้แบบเวกเตอร์แอนิเมชันที่ลื่นไหลและการเรนเดอร์กราฟิกคุณภาพสูง

รอบการพัฒนาที่ยาวนานสะท้อนให้เห็นถึงความซับซ้อนของความท้าทายหลักในกราฟิกเวกเตอร์ คือการแปลงเส้นทางเวกเตอร์ให้เป็นพิกเซลที่มีคุณภาพ anti-aliased อย่างมีประสิทธิภาพ ปัญหาพื้นฐานนี้ทำให้นักพัฒนาต้องทำงานหนักมาหลายปี เนื่องจากต้องสร้างสมดุลระหว่างความเร็ว คุณภาพ และความเข้ากันได้ในแพลตฟอร์มฮาร์ดแวร์ที่แตกต่างกัน

ข้อมูลจำเพาะด้านประสิทธิภาพ

  • เร็วกว่าการเรนเดอร์ด้วย CPU ได้ถึง 60 เท่า
  • สามารถเรนเดอร์ glyphs ได้ 50,000 ตัวที่ 60fps
  • ใช้การประมวลผลกราฟิกเวกเตอร์ 2D ที่เร่งความเร็วด้วย GPU
  • การเรนเดอร์แบบสองขั้นตอน: float mask buffer → color buffer
เสือดุดันเป็นสัญลักษณ์ของการปรับปรุงประสิทธิภาพอันทรงพลังที่ Rasterizer สัญญาไว้ แสดงให้เห็นเทคโนโลยีล้ำสมัยในการเรนเดอร์กราฟิกเวกเตอร์
เสือดุดันเป็นสัญลักษณ์ของการปรับปรุงประสิทธิภาพอันทรงพลังที่ Rasterizer สัญญาไว้ แสดงให้เห็นเทคโนโลยีล้ำสมัยในการเรนเดอร์กราฟิกเวกเตอร์

ประสิทธิภาพและแนวทางเทคนิค

Rasterizer ใช้แนวทาง GPU pipeline แบบดั้งเดิมแทนที่จะใช้ compute shaders สมัยใหม่ การเลือกออกแบบนี้ทำขึ้นเพื่อให้มั่นใจในความเข้ากันได้ของฮาร์ดแวร์ที่กว้างขึ้น โดยเฉพาะเมื่อการรองรับ GPU compute ยังไม่เป็นสากล เอนจิ้นสามารถจัดการกับสถานการณ์ที่ต้องการประสิทธิภาพสูง เช่น การเรนเดอร์ตัวอักษร 50,000 ตัวที่ 60 เฟรมต่อวินาที ทำให้เหมาะสำหรับแอปพลิเคชันที่มีข้อความเยอะและแอนิเมชันเวกเตอร์ที่ซับซ้อน

กระบวนการเรนเดอร์ใช้แนวทางสองขั้นตอนสำหรับเส้นทางที่เติม ขั้นแรกสร้าง float mask buffer จากนั้นเรนเดอร์ไปยัง color buffer สำหรับองค์ประกอบบนหน้าจอที่เล็กกว่า เช่น ตัวอักษร ระบบสามารถคัดลอกเรขาคณิตเส้นทางดิบลงในหน่วยความจำ GPU โดยตรงเพื่อประสิทธิภาพที่เหมาะสมที่สุด การเติมที่ใหญ่กว่าใช้อัลกอริทึม fat scanlines เฉพาะบนเรขาคณิต device-space

อัลกอริทึม Fat scanlines: เทคนิคการเรนเดอร์ที่ประมวลผลแถบพิกเซลแนวนอนเพื่อเติมรูปร่างเวกเตอร์ขนาดใหญ่อย่างมีประสิทธิภาพ

ข้อกำหนดทางเทคนิค

  • แพลตฟอร์ม: macOS (วางแผนพอร์ตไปยัง iOS)
  • ภาษาโปรแกรม: C++ 11
  • Graphics API: Metal
  • ข้อกำหนด GPU: รองรับ Instancing และ floating point render targets
  • Dependencies: XXHash, NanoSVG, STB Truetype, PDFium

ความสนใจของชุมชนและการเปรียบเทียบ

การเปิดตัวได้จุดประกายการสนทนาเกี่ยวกับการเปรียบเทียบ Rasterizer กับโซลูชันการเรนเดอร์เวกเตอร์อื่นๆ สมาชิกชุมชนได้สังเกตเห็นความคล้ายคลึงกับโปรเจกต์อย่าง Vello ซึ่งใช้ GPU compute แทน pipeline แบบดั้งเดิม และ Slug ซึ่งเน้นไปที่การเรนเดอร์ข้อความเป็นหลัก อย่างไรก็ตาม นักพัฒนา Rasterizer อ้างว่าโซลูชันของพวกเขาได้รับการทดสอบอย่างครอบคลุมกับฉากขนาดใหญ่ในระดับการซูมต่างๆ โดยไม่มีปัญหา GPU lockup ที่โซลูชันคู่แข่งบางตัวประสบ

วิทยาการคอมพิวเตอร์กราฟิกไม่ใช่สาขาของผม ขออภัยในความไม่รู้ แต่คุณช่วยอธิบายข้อดีและข้อเสียของแนวทาง graphics pipeline แบบดั้งเดิมและแนวทางสมัยใหม่ได้ไหม

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

ข้อจำกัดปัจจุบันเทียบกับฟีเจอร์ที่วางแผนไว้

ฟีเจอร์ สถานะปัจจุบัน แผนการในอนาคต
การเรนเดอร์ Path ✅ รองรับเต็มรูปแบบ -
ข้อความใน SVG ❌ ยังไม่รองรับ อยู่ระหว่างพิจารณา
Gradients ❌ ยังไม่รองรับ มีแผนการพัฒนา (โค้ดพร้อมใช้งานแล้ว)
Filters (เบลอ, เงา) ❌ ยังไม่รองรับ เป็นไปได้ผ่าน box blur extension
การรองรับแพลตฟอร์ม เฉพาะ macOS กำลังพัฒนาเวอร์ชัน iOS

ข้อจำกัดปัจจุบันและแผนอนาคต

แม้ว่า Rasterizer จะเป็นเลิศในการเรนเดอร์เส้นทาง แต่ปัจจุบันมีการรองรับฟีเจอร์ SVG ขั้นสูงที่จำกัด เอนจิ้นยังไม่รองรับการเรนเดอร์ข้อความภายในไฟล์ SVG, gradients หรือฟิลเตอร์อย่าง blur และ drop shadows ข้อจำกัดเหล่านี้เกิดจากการใช้ NanoSVG ซึ่งเป็นไลบรารีพื้นฐานแบบง่ายที่ให้ความสำคัญกับการรองรับเส้นทางพื้นฐานมากกว่าการครอบคลุมข้อกำหนด SVG อย่างครอบคลุม

ทีมพัฒนาได้ระบุว่า gradients จะถูกเพิ่มเข้ามาเมื่อมีเวลาอนุญาต โดยใช้โค้ดที่พัฒนาสำหรับเอนจิ้นก่อนหน้า อัลกอริทึม coverage อาจขยายได้เพื่อรองรับ box blurs พื้นฐานสำหรับเอฟเฟกต์ drop shadow แม้ว่าจะยังไม่มีการประกาศไทม์ไลน์เฉพาะเจาะจงสำหรับฟีเจอร์เหล่านี้

เอนจิ้นปัจจุบันมุ่งเป้าไปที่ macOS โดยใช้ C++ 11 และ Metal โดยมีแผนพอร์ตไปยัง iOS ในอนาคต แม้ว่าจะได้รับการออกแบบสำหรับแพลตฟอร์ม Apple ในตอนแรก แต่สถาปัตยกรรมควรทำงานบน GPU ใดก็ได้ที่รองรับ instancing และ floating point render targets ซึ่งอาจเปิดประตูสำหรับการรองรับแพลตฟอร์มที่กว้างขึ้น

อ้างอิง: Rasterizer