Compositing: คืออะไร เลเยอร์ และหลักการทำงาน

Compositing คืออะไร?

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

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

Compositing ในไปป์ไลน์กราฟิก

ในไปป์ไลน์กราฟิก การประกอบเกิดขึ้นหลังจากผ่านชาเดอร์ทั้งหมดและการแรสเตอร์เสร็จสมบูรณ์ GPU นำเลเยอร์ที่เสร็จแล้วจาก framebuffer ใช้การดำเนินการ blending และเขียนผลลัพธ์ลงใน framebuffer หลัก (front buffer) เพื่อส่งไปยังหน้าจอ

Compositing ทำงานอย่างไร?

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

ช่อง Alpha และความโปร่งใส

แต่ละเลเยอร์ประกอบด้วยช่อง alpha (องค์ประกอบสีที่สี่ของ RGBA) ที่กำหนดความทึบของมัน Alpha = 1.0 — ทึบแสงอย่างสมบูรณ์, alpha = 0.0 — โปร่งใสอย่างสมบูรณ์ Alpha blending คำนวณสีพิกเซลเป็นผลรวมถ่วงน้ำหนักของสีของเลเยอร์ด้านหน้า (source) และด้านหลัง (destination): ผลลัพธ์ = source * alpha + dest * (1 - alpha)

ลำดับการวาด (อัลกอริทึมของจิตรกร)

การประกอบดำเนินการจากเลเยอร์ที่ไกลที่สุดไปหาใกล้ที่สุด (back-to-front) ขั้นแรก เลเยอร์พื้นหลังถูกเรนเดอร์ จากนั้นแต่ละเลเยอร์ถัดไปจะถูกซ้อนทับบนเลเยอร์ก่อนหน้าโดยคำนึงถึงความโปร่งใสของมัน Z-order กำหนดว่าเลเยอร์ใดอยู่ด้านบนและจะปกคลุมเลเยอร์ด้านล่าง

อัลกอริทึมของ Compositing

Compositing รองรับโหมดการผสมต่างๆ (blend modes) ที่กำหนดว่าสีของเลเยอร์ถูกรวมกันอย่างไร แต่ละโหมดให้เอฟเฟกต์ภาพที่แตกต่างกันและมีต้นทุนการคำนวณของตัวเอง

Premultiplied Alpha

ในโหมด premultiplied alpha ช่องสีจะถูกเก็บโดยคูณด้วยช่อง alpha แล้ว (RGB × A) สิ่งนี้ขจัดความจำเป็นในการคูณในการดำเนินการ blending แต่ละครั้ง ช่วยเร่งการประกอบ Premultiplied alpha เป็นรูปแบบมาตรฐานสำหรับ GPU compositing ใน iOS Core Animation และ Android HWUI

Compositing ในระบบปฏิบัติการมือถือ

ระบบปฏิบัติการมือถือแต่ละระบบมีระบบการประกอบของตัวเองที่ปรับให้เหมาะสมสำหรับแพลตฟอร์มฮาร์ดแวร์ของตน Compositing ในระบบปฏิบัติการมือถือรับผิดชอบการเรนเดอร์อินเทอร์เฟซผู้ใช้ทั้งหมด

iOS: Core Animation + Metal

ใน iOS การประกอบถูกจัดการโดย Core Animation — ระบบระดับสูงที่ทำงานบน Metal หรือ OpenGL ES Core Animation สร้าง layer tree (ต้นไม้เลเยอร์) ที่จากนั้นถูกประกอบเป็นภาพสุดท้าย Core Animation จะกำหนดโดยอัตโนมัติว่าเลเยอร์ใดเปลี่ยนแปลงและวาดเฉพาะเลเยอร์เหล่านั้นใหม่ (การประกอบแบบเพิ่มหน่วย) ซึ่งช่วยลดภาระของ GPU

Android: SurfaceFlinger + HWUI

ใน Android การประกอบดำเนินการโดย SurfaceFlinger — บริการระบบที่รวมพื้นผิว (surfaces) จากแอปพลิเคชันต่างๆ และ UI ของระบบ SurfaceFlinger ใช้ HWC (Hardware Composer) เพื่อโอนส่วนหนึ่งของงานประกอบไปยังฮาร์ดแวร์เฉพาะของตัวควบคุมหน้าจอ

ประสิทธิภาพของ Compositing

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

ปัจจัยที่มีผลต่อประสิทธิภาพ

• จำนวนเลเยอร์ — แต่ละเลเยอร์ต้องใช้รอบการ blending แยกกัน การลดจำนวนเลเยอร์จะเร่งการประกอบเป็นเส้นตรง
• ความละเอียดของเลเยอร์ — เลเยอร์ที่มีความละเอียดสูงจะเพิ่มจำนวนพิกเซลที่ประมวลผล ใช้ขนาดบัฟเฟอร์ offscreen ที่เล็กที่สุดเท่าที่เป็นไปได้
• ความโปร่งใสและการวาดซ้ำ (overdraw) — เลเยอร์โปร่งแสงต้องอ่านพิกเซลด้านล่าง ซึ่งเพิ่มแบนด์วิดท์
• CPU compositing — หากการประกอบทำบน CPU (software rendering) ประสิทธิภาพจะลดลงอย่างมาก GPU compositing จะดีกว่าเสมอ

GPU Compositing เทียบกับ CPU Compositing

อุปกรณ์มือถือสมัยใหม่ทำการประกอบบน GPU ผ่านหน่วย blending เฉพาะทาง GPU compositing ใช้หน่วย ROP แบบขนานและตัวกรองพื้นผิวเพื่อการผสมพิกเซลที่รวดเร็ว CPU compositing ใช้เฉพาะในกรณีที่หายาก (อุปกรณ์เก่า การทดสอบ)

การปรับแต่ง Compositing

การปรับแต่งการประกอบ เป็นหนึ่งในงานหลักในการพัฒนาอินเทอร์เฟซมือถือ ความลื่นไหลของ UI (60 FPS) ขึ้นอยู่กับประสิทธิภาพของการรวมเลเยอร์โดยตรง

วิธีการปรับแต่งหลัก

• การลดเลเยอร์ — รวมเลเยอร์คงที่เป็นชั้นเดียว (layer flattening) ผ่านการเรนเดอร์ล่วงหน้า
• เลเยอร์ทึบแสง — เลเยอร์ทึบแสงไม่ต้องการ alpha blending ซึ่งช่วยเร่งการประกอบอย่างมาก
• การประกอบแบบเพิ่มหน่วย — วาดเฉพาะเลเยอร์ที่เปลี่ยนแปลงใหม่ ไม่ใช่ทั้งฉาก (ใช้โดย Core Animation)
• Hardware Composer — การใช้ HWC สำหรับการประกอบด้วยฮาร์ดแวร์โดยไม่ต้องใช้ GPU

เครื่องมือการสร้างโปรไฟล์

สำหรับการวิเคราะห์ประสิทธิภาพการประกอบ ให้ใช้: Core Animation Profiler (Xcode Instruments) — แสดงจำนวนเลเยอร์และความถี่ในการประกอบ; GPU Debugger (Android Studio) — แสดงภาระ GPU และ overdraw; Overdraw Visualization — เครื่องมือดีบักที่แสดงพื้นที่ของการวาดพิกเซลซ้ำหลายครั้ง