Overdraw ในแอปพลิเคชันมือถือ: มันคืออะไร สาเหตุ และการปรับปรุง

Overdraw ในกราฟิกมือถือคืออะไร?

Overdraw คือสถานการณ์ที่พิกเซลหน้าจอเดียวกันถูกวาดซ้ำหลายครั้งภายในเฟรมการเรนเดอร์เดียว ในสถานการณ์ที่เหมาะสม พิกเซลแต่ละตัวควรถูกเขียนเพียงครั้งเดียว แต่ในอินเทอร์เฟซจริงเนื่องจากการซ้อนกันของ Views รูปภาพพื้นหลัง และเลเยอร์โปร่งใส GPU จึงทำการเขียนซ้ำ

การวาดซ้ำแต่ละครั้งเพิ่มเวลาเรนเดอร์เฟรม ที่อัตรามาตรฐาน 60 FPS แต่ละเฟรมมีเวลาประมาณ 16.6 มิลลิวินาที หาก overdraw ทำให้เกินขีดจำกัดนี้ อัตราเฟรมจะลดลงเหลือ 30 FPS หรือต่ำกว่า ซึ่งทำให้ความลื่นไหลของอินเทอร์เฟซลดลงอย่างเห็นได้ชัด

ตาม Android Performance Patterns ของ Google แอปที่มีปัจจัย overdraw 3x ใช้เวลาใน Fragment Shader มากกว่าแอปที่มี overdraw 1x ถึงสามเท่า บนอุปกรณ์ GPU ที่มีประสิทธิภาพต่ำ สิ่งนี้นำไปสู่ความหน่วงที่สังเกตได้ระหว่างการเลื่อนและแอนิเมชัน

สำหรับนักพัฒนาโมบายล์ การทำความเข้าใจ overdraw มีความสำคัญอย่างยิ่ง: ปัจจัยนี้มักทำให้เกิดการเลื่อนกระตุกและอัตราเฟรมต่ำในหน้าจอที่ดูเรียบง่ายซึ่งมีองค์ประกอบที่ซ้อนกันจำนวนมาก

Overdraw ส่งผลต่อประสิทธิภาพของ GPU อย่างไร

ไปป์ไลน์ของ GPU ประกอบด้วยหลายขั้นตอน: Vertex Shader, Rasterization และ Fragment Shader Fragment Shader เป็นส่วนที่แพงที่สุดเนื่องจากทำงานทุกพิกเซลของทุกไพร มิทีฟ ที่ overdraw 2x Fragment Shader จะประมวลผลพิกเซลเป็นสองเท่า ซึ่งเพิ่มเวลาเฟรมโดยตรง

GPU มือถือสมัยใหม่ เช่น Qualcomm Adreno และ Apple GPU มีกลไก Early-Z Test และ Hidden Surface Removal ที่ชดเชย overdraw บางส่วน อย่างไรก็ตาม การปรับปรุงเหล่านี้ทำงานภายใต้เงื่อนไขบางประการเท่านั้น และไม่ควรพึ่งพาการเร่งด้วยฮาร์ดแวร์เพียงอย่างเดียว

ตัวอย่างเช่น เมื่อเรนเดอร์องค์ประกอบกึ่งโปร่งใส Early-Z ของฮาร์ดแวร์ไม่มีประสิทธิภาพ และแต่ละพิกเซลถูกประมวลผลอย่างสมบูรณ์ — overdraw ในสถานการณ์เช่นนี้สามารถสูงถึง 5x หรือมากกว่า

สาเหตุหลักของการวาดซ้ำมากเกินไป

พื้นหลังหลายชั้น เป็นหนึ่งในสาเหตุหลักของ overdraw ในแอปมือถือ เมื่อ Activity หรือ ViewController กำหนดสีพื้นหลัง View ที่ซ้อนกันแต่ละตัวสามารถเพิ่มพื้นหลังของตัวเอง และพิกเซลจะถูกวาดซ้ำในทุกระดับของลำดับชั้น

การศึกษาของ Uber Engineering แสดงให้เห็นว่าการลบพื้นหลังที่มากเกินไปในแอป Android ของพวกเขาลด overdraw ลง 32% และเวลาเรนเดอร์หน้าจอลง 25% สถานการณ์คล้ายกันใน iOS: การตั้งค่า opaque = true สำหรับ View ที่ไม่โปร่งใสจะกำจัดการผสมอัลฟาและป้องกันการเขียนพิกเซลหลายครั้ง

• การซ้อนทับโปร่งใส — องค์ประกอบที่มีช่องอัลฟาอยู่เหนือองค์ประกอบอื่นมักทำให้เกิด overdraw
• ClipChildren=false — การปิดการคลิปองค์ประกอบลูกทำให้เกิดการเรนเดอร์พื้นที่ที่มองไม่เห็น
• การใช้ ShapeDrawable แทนสีธรรมดาเพิ่มภาระบน Fragment Shader
• การซ้อนกันมากเกินไป — แต่ละระดับของลำดับชั้น View เพิ่มเลเยอร์การวาดซ้ำที่อาจเกิดขึ้น

บนแพลตฟอร์ม iOS overdraw มักเกิดขึ้นเนื่องจากการใช้ UIStackView โปร่งใส CALayer ที่มี shouldRasterize และ UIBlurEffect ที่ทับซ้อนกัน Apple แนะนำให้ตรวจสอบ overdraw ผ่านเครื่องมือ Core Animation ใน XCode — มันแสดงโซนการวาดซ้ำเป็นชั้นซ้อนทับสีแดง

วิธีวินิจฉัย Overdraw: เครื่องมือและวิธีการ

Debug GPU Overdraw เป็นเครื่องมือในตัวของ Android ที่ทำให้หน้าจอเป็นสีต่างๆ ตามปัจจัย overdraw สีม่วงหมายถึง 1x, สีน้ำเงิน — 2x, สีเขียว — 3x, สีชมพู — 4x, สีแดง — 5x หรือมากกว่า หน้าจอที่เหมาะสมควรเป็นสีม่วงเป็นส่วนใหญ่

ใน iOS การวินิจฉัยที่คล้ายกันดำเนินการโดยเครื่องมือ Core Animation ใน XCode Instruments มันแสดงโซนการวาดซ้ำและแสดงจำนวนการเขียนพิกเซลที่แน่นอนในโหมด Color Blended Layers เลเยอร์สีเขียวทึบแสง (เหมาะสมที่สุด) เลเยอร์สีแดงมีความโปร่งใสและทำให้เกิด overdraw

• Profile GPU Rendering ใน Android แสดงฮิสโตแกรมของเวลาเรนเดอร์ แถบสีเขียวสูงบ่งบอกถึงปัญหา overdraw
• Renderscript เป็นเครื่องมือขั้นสูงกว่าสำหรับวิเคราะห์ไปป์ไลน์การเรนเดอร์บนอุปกรณ์ Android 10+
• Metal Debugger ใน XCode ช่วยให้วิเคราะห์แต่ละรอบการเรนเดอร์และดูจำนวนการเรียก Fragment Shader ที่แน่นอน

หลังการวินิจฉัย สิ่งสำคัญคือวัด FPS ก่อนและหลังการปรับปรุง ความแตกต่าง 10–15 FPS เมื่อแก้ไข overdraw เป็นผลลัพธ์ปกติสำหรับหน้าจอที่ซับซ้อนพร้อมรายการและแอนิเมชัน

เทคนิคการปรับปรุง Overdraw ในแอปพลิเคชันมือถือ

การลบพื้นหลังที่มากเกินไป เป็นวิธีที่ง่ายและมีประสิทธิภาพที่สุด ใน Android เพียงตั้งค่า android:windowBackground สำหรับ Activity หรือธีมเท่านั้น ไม่ใช่สำหรับแต่ละ View ใน iOS opaque = true สำหรับ UIView ที่ไม่โปร่งใสทั้งหมดจะลด overdraw เหลือเกือบศูนย์สำหรับองค์ประกอบเหล่านั้น

ตาม Google I/O 2019 การปรับปรุง overdraw ใน Google Maps ช่วยลดเวลาเรนเดอร์เฟรมลง 40% ผ่านการรวมเลเยอร์และการใช้ ClipRect เพื่อจำกัดพื้นที่วาด สำหรับนักพัฒนา Android Google แนะนำแนวทางปฏิบัติต่อไปนี้:

• ClipRect — จำกัดพื้นที่วาด Canvas หากไม่มีสิ่งใดอยู่นอกพื้นที่ที่มองเห็น GPU จะไม่สิ้นเปลืองทรัพยากร
• ViewStub — สำหรับองค์ประกอบที่ใช้งานน้อยหรือมองไม่เห็นเมื่อโหลดครั้งแรก คอมโพเนนต์จะเรนเดอร์เมื่อเรียก inflate เท่านั้น
• merge และ include — ลดความลึกของลำดับชั้น View ซึ่งลดจำนวนรอบการเรนเดอร์
• บัฟเฟอร์แบบเรียบ — แทนที่ Layout ที่ซ้อนกันด้วย ConstraintLayout หรือ RelativeLayout เดียว

ใน iOS การปรับปรุงทำได้ผ่านการกำหนดค่า CALayer: การตั้งค่า masksToBounds = true จะตัดเนื้อหาที่เกินขอบเขตเลเยอร์ และ shouldRasterize เปิดใช้งานแคชบิตแมปสำหรับเลเยอร์แบบคงที่

ตัวอย่างโค้ด: การกำจัด Overdraw ใน Android และ iOS

มาดูตัวอย่างเชิงปฏิบัติใน Kotlin และ Swift ที่แสดงสถานการณ์การกำจัด overdraw ทั่วไป ตัวอย่างแรกแสดงการปรับปรุงผ่าน ClipRect ใน Android:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

ตัวอย่างที่สองใน Swift แสดงการปิดความโปร่งใสสำหรับเลเยอร์หากองค์ประกอบไม่ควรกึ่งโปร่งใส:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

ตัวอย่างที่สามสาธิตการใช้ ViewStub สำหรับการโหลดแผนที่แบบเลื่อนออกไปใน Android ViewStub จะไม่เรนเดอร์จนกว่าจะมองเห็น ซึ่งกำจัด overdraw ในขั้นตอนการเริ่มต้นหน้าจอ:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()