CPU Rendering: คืออะไร หลักการและการเรนเดอร์ซอฟต์แวร์ทำงานอย่างไร

CPU Rendering คืออะไร?

CPU Rendering เป็นวิธีการสร้างภาพที่ทุกขั้นตอนของไปป์ไลน์กราฟิกถูกดำเนินการบนโปรเซสเซอร์กลางผ่านการคำนวณทางคณิตศาสตร์ ต่างจาก GPU ที่การแรสเตอร์และการสร้างพื้นผิวถูกสร้างไว้ในบล็อกเฉพาะ CPU ดำเนินการผ่านคำสั่ง SSE/NEON สากล

ในอดีต การเรนเดอร์ทั้งหมดเป็นแบบซอฟต์แวร์ — อินเทอร์เฟซกราฟิกแรก (Xerox Alto, 1973) และเกม 3D (Quake, 1996) ถูกเรนเดอร์บน CPU คำว่า “software renderer” กลายเป็นคำพ้องความหมายของ CPU Rendering การเปลี่ยนไปใช้การเร่งด้วยฮาร์ดแวร์เริ่มต้นด้วยการมาถึงของตัวเร่ง 3D ที่มีราคาไม่แพงในช่วงปลายทศวรรษ 1990 แต่การเรนเดอร์ซอฟต์แวร์ยังคงเป็นกลไกสำรอง

ตาม Akamai (2025) CPU Rendering ถูกใช้ใน 35% ของเซสชันเว็บมือถือเป็นโหมดการเรนเดอร์หลัก — บนอุปกรณ์ที่อ่อนแอ ในอีมูเลเตอร์ และเมื่อปิดการเร่ง GPU บนแพลตฟอร์ม iOS และ Android เฟรมเวิร์ก UI (UIKit, Android View) จะเรนเดอร์สองสามเฟรมแรกบน CPU เสมอก่อนที่จะเริ่มต้นคำสั่ง GPU

โปรเซสเซอร์สมัยใหม่รองรับ คำสั่ง SIMD (SSE4.2, AVX-512, ARM NEON) ซึ่งเลียนแบบความขนานของ GPU ได้บางส่วน อย่างไรก็ตาม จำนวนคอร์จริง (4–12) และการไม่มีบล็อกการแรสเตอร์เฉพาะจะจำกัดประสิทธิภาพของ CPU Rendering บนกราฟิกที่ซับซ้อน

ขั้นตอนของการเรนเดอร์ซอฟต์แวร์

ไปป์ไลน์ซอฟต์แวร์ รวมถึงขั้นตอนเดียวกับฮาร์ดแวร์: การแปลงจุดยอด การตัด การแรสเตอร์ การสร้างพื้นผิว และการส่งออกพิกเซล ความแตกต่างคือแต่ละขั้นตอนถูกนำไปใช้ด้วยซอฟต์แวร์ผ่าน โค้ด C++ หรือแอสเซมบลี แทนที่จะผ่านบล็อก GPU คงที่

การแปลงจุดยอดใน CPU Rendering ดำเนินการผ่านการคูณเมทริกซ์ — 4x4 สำหรับการฉายภาพและการสร้างแบบจำลอง ด้วย 10,000 รูปหลายเหลี่ยม นี่คือการคูณเวกเตอร์ 40,000 ครั้งต่อเฟรม — ภาระที่ CPU จัดการได้ใน 5–10 มิลลิวินาทีด้วยโค้ดที่ปรับให้เหมาะสม การแรสเตอร์เป็นขั้นตอนที่หนักที่สุด ซึ่งต้องคำนวณการครอบคลุมพิกเซลสำหรับสามเหลี่ยมแต่ละรูป

ในโปรเซสเซอร์มือถือ ARM NEON เร่งการเรนเดอร์ซอฟต์แวร์ผ่านคำสั่งเวกเตอร์กว้าง 128 บิต ตาม ARM (2025) ซอฟต์แวร์เรนเดอร์ที่ปรับให้เหมาะสมกับ NEON ทำงานเร็วกว่าการนำไปใช้แบบสเกลาร์บน Cortex-X4 ที่ความถี่สัญญาณนาฬิกาเดียวกัน 3–4 เท่า

การเรนเดอร์ซอฟต์แวร์ทำงานอย่างไร?

การเรนเดอร์ซอฟต์แวร์ เริ่มต้นด้วยการเตรียมฉากบน CPU: เรขาคณิต (จุดยอด รูปหลายเหลี่ยม) จะถูกแปลงจากพิกัดโลกเป็นพิกัดหน้าจอผ่านการดำเนินการเมทริกซ์ จากนั้นทำการตัด — ลบเรขาคณิตที่อยู่นอกขอบเขตการมองเห็นของกล้อง

การแรสเตอร์ CPU แบ่งสามเหลี่ยมแต่ละรูปเป็นพิกเซลผ่านอัลกอริทึมเส้นสแกน (scanline) หรือพิกัด barycentric สำหรับแต่ละพิกเซล สีจะถูกคำนวณโดยคำนึงถึงพื้นผิว แสง และความโปร่งใส ผลลัพธ์จะถูกเขียนไปยัง framebuffer — อาร์เรย์พิกเซลใน RAM

ความแตกต่างหลักจากการเรนเดอร์ GPU คือ การขาดความขนาน ในระดับพิกเซล CPU ประมวลผลพิกเซลตามลำดับหรือด้วยความขนานที่จำกัดผ่าน 4–8 คอร์ สำหรับเฟรม 1080p (2 ล้านพิกเซล) ที่มีการสร้างพื้นผิว ต้องใช้ 15–30 มิลลิวินาทีบน CPU เทียบกับ 2–5 มิลลิวินาทีบน GPU

// การแรสเตอร์ CPU อย่างง่ายของสามเหลี่ยมเดียว
void rasterizeTriangle(uint32_t* buffer, int width,
    Vertex v0, Vertex v1, Vertex v2) {
    int minX = max(0, min(v0.x, v1.x, v2.x));
    int maxX = min(width, max(v0.x, v1.x, v2.x));
    int minY = max(0, min(v0.y, v1.y, v2.y));
    for (int y = minY; y <= maxY; y++) {
        for (int x = minX; x <= maxX; x++) {
            if (pixelInTriangle(x, y, v0, v1, v2)) {
                buffer[y * width + x] = 0xFF3498DB;
            }
        }
    }
}

ฟังก์ชันจะสแกนกล่องขอบเขตของสามเหลี่ยมและตรวจสอบพิกเซลแต่ละพิกเซลผ่านพิกัด barycentric สำหรับพิกเซลนับล้าน ลูปดังกล่าวจะดำเนินการในหน่วยมิลลิวินาทีบน CPU แต่สำหรับฉากที่ซับซ้อนที่มีสามเหลี่ยมนับพัน เวลาจะเพิ่มขึ้นเป็นเส้นตรง

เปรียบเทียบการเรนเดอร์ CPU และ GPU

ความแตกต่างระหว่าง CPU Rendering และ GPU Rendering ถูกกำหนดโดยสถาปัตยกรรมของโปรเซสเซอร์ CPU ได้รับการปรับให้เหมาะสมสำหรับงานตามลำดับที่มีการทำนายการแตกแขนง GPU สำหรับความขนานขนาดใหญ่ที่มีหลายพันเธรด ความแตกต่างพื้นฐานนี้กำหนดพื้นที่การใช้งานของแต่ละแนวทาง

CPU Rendering ชนะในด้านความแน่นอน — ข้อมูลนำเข้าเดียวกันให้ผลลัพธ์เดียวกันเสมอ นี่เป็นสิ่งสำคัญสำหรับเฟรมเวิร์ก UI ที่ทุกพิกเซลต้องตรงกับเค้าโครง GPU อาจทำให้เกิดความไม่แม่นยำเนื่องจากความแตกต่างของการปัดเศษทศนิยมระหว่างไดรเวอร์

สำหรับกราฟิก 2D ที่มีความซับซ้อนต่ำ (100–500 พรีมิทีฟ) CPU Rendering มักจะ เร็วกว่า GPU เนื่องจากไม่มีโอเวอร์เฮดของการถ่ายโอนข้อมูลผ่านบัสและการคอมไพล์เชเดอร์ ตาม Google Android Team (2025) การเรนเดอร์ซอฟต์แวร์ในระบบ View ของ Android ใช้เวลา 2–3 มิลลิวินาทีสำหรับหน้าจอทั่วไป เทียบกับ 3–5 มิลลิวินาทีพร้อมการเร่งด้วยฮาร์ดแวร์บน GPU

CPU Rendering ใช้ที่ไหน

การเรนเดอร์ซอฟต์แวร์ ยังคงเป็นที่ต้องการในสถานการณ์ที่ GPU ไม่พร้อมใช้งาน ไม่จำเป็น หรือไม่ให้ความแน่นอนที่ต้องการ มาดูพื้นที่การใช้งานหลักของ CPU Rendering ในการพัฒนาสมัยใหม่

เฟรมเวิร์ก UI และการเตรียมเฟรม

ระบบ Android View เรนเดอร์องค์ประกอบ UI ทั้งหมดบน CPU จากนั้นส่งผลลัพธ์ไปยัง GPU สำหรับการประกอบ แต่ละ View เรียก onDraw(Canvas) ซึ่งวาดบน Bitmap ผ่าน CPU หลังจากนั้น HWUI จึงประกอบเลเยอร์บน GPU สิ่งนี้รับประกันพฤติกรรม UI ที่แน่นอนโดยไม่ขึ้นกับไดรเวอร์ GPU

UIKit บน iOS ก็เริ่มต้นด้วยการเรนเดอร์ CPU เช่นกัน Core Animation เรนเดอร์ CALayer ในพื้นที่เก็บสำรองบน CPU จากนั้นส่งพื้นผิวไปยัง GPU ตาม WWDC 2024 ระยะซอฟต์แวร์ใช้เวลา 30–50% ของเวลาเรนเดอร์เฟรม ส่วนที่เหลือเป็นการประกอบ GPU

SVG และกราฟิกเวกเตอร์

การเรนเดอร์ SVG โดยดั้งเดิมดำเนินการบน CPU เนื่องจากต้องสร้างเส้นโค้ง Bezier ที่ซับซ้อนและเติมสี ไลบรารีเช่น librsvg และ Skia ประมวลผล SVG บน CPU โดยแบ่งเส้นโค้งเป็นสามเหลี่ยมและเติมสี ตาม Google Chrome Team (2025) Skia บน CPU เรนเดอร์ไอคอน SVG ใน 0.3–1.5 มิลลิวินาทีบนโปรเซสเซอร์มือถือสมัยใหม่

การเรนเดอร์ PDF

เอกสาร PDF มีกราฟิกซ้อนที่ซับซ้อน: แบบอักษร องค์ประกอบเวกเตอร์ ภาพแรสเตอร์ และการแปลง แอปพลิเคชันมือถือเรนเดอร์ PDF บน CPU ผ่านเฟรมเวิร์กเช่น PDFKit (iOS) และ PdfRenderer (Android) ความแม่นยำในการแสดงผลและการรองรับมาตรฐาน PDF 2.0 ต้องการการประมวลผลซอฟต์แวร์ของแต่ละองค์ประกอบ

CPU Rendering บนแพลตฟอร์มมือถือ

แพลตฟอร์มมือถือ นำ CPU Rendering ไปใช้โดยคำนึงถึงสถาปัตยกรรม ARM และการใช้พลังงานที่จำกัด มาดูว่าการเรนเดอร์ซอฟต์แวร์ทำงานบน Android และ iOS อย่างไร

Android: Canvas บน CPU

Android Canvas เมื่อปิดการเร่งด้วยฮาร์ดแวร์จะทำงานทั้งหมดบน CPU คลาส Canvas มีวิธีการวาดพรีมิทีฟที่ดำเนินการผ่าน Skia — ไลบรารี 2D ของ Google Skia รองรับแบ็กเอนด์ซอฟต์แวร์และ GPU โดยสลับตามแฟล็ก hardwareAccelerated

Canvas ซอฟต์แวร์สร้าง Bitmap ใน RAM วาดคำสั่งบนนั้นผ่าน Skia Software Renderer จากนั้นแสดงผลบนหน้าจอ การดำเนินการทั้งหมดดำเนินการบน CPU โดยใช้คำสั่ง NEON เพื่อเพิ่มประสิทธิภาพ ตาม Skia Team (2025) การเร่งด้วย NEON ให้เพิ่มขึ้น 40–60% สำหรับการดำเนินการ blend และการซ่อน

// การเรนเดอร์ซอฟต์แวร์ผ่าน Bitmap
val bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
val paint = Paint().apply {
    color = Color.RED
    textSize = 24f
}
canvas.drawText("CPU Render", 10f, 50f, paint)
imageView.setImageBitmap(bitmap)

Bitmap ถูกสร้างขึ้นในหน่วยความจำ CPU คำสั่งวาดถูกดำเนินการบนนั้น จากนั้นภาพที่เสร็จแล้วจะแสดงผ่าน ImageView วิธีการนี้ใช้สำหรับลายน้ำ กราฟ และภาพไดนามิกที่การควบคุมทุกพิกเซลอย่างสมบูรณ์เป็นสิ่งสำคัญ

iOS: Core Graphics บน CPU

Core Graphics เป็นเฟรมเวิร์กของ Apple สำหรับกราฟิกแรสเตอร์และเวกเตอร์ ซึ่งทำงานหลักบน CPU CGContext ดำเนินการวาดทั้งหมดในโหมดซอฟต์แวร์ โดยใช้ไลบรารีที่ปรับให้เหมาะสมสูงจาก Apple Core Graphics ขับเคลื่อน Quartz 2D — เอนจินที่มีประวัติ 25 ปี

บน iOS Core Graphics ส่งผลลัพธ์ไปยัง Core Animation เพื่อประกอบบน GPU ตาม Apple Engineering (2025) Core Graphics จัดการการวาด UI 80% บน CPU ใน UIKit ในขณะที่การประกอบ Metal ประกอบพื้นผิวที่พร้อมบน GPU UIGraphicsImageRenderer เป็นตัวห่อหุ้มที่ทันสมัยสำหรับการเรนเดอร์ภาพแรสเตอร์บน CPU

การเพิ่มประสิทธิภาพการเรนเดอร์ซอฟต์แวร์

การเพิ่มประสิทธิภาพ CPU Rendering มีความสำคัญต่อประสิทธิภาพเพราะการเรนเดอร์ซอฟต์แวร์เป็นผู้บริโภคหลักของรอบ CPU ในเฟรมเวิร์ก UI มาดูวิธีการหลักในการเร่งการวาดซอฟต์แวร์

การแคชผลลัพธ์

วิธีที่มีประสิทธิภาพที่สุดคือ ไม่วาดสิ่งที่ไม่ได้เปลี่ยนแปลงซ้ำ หากเนื้อหาคงที่ ให้เรนเดอร์ครั้งเดียวใน Bitmap หรือ CGLayer และคัดลอกผลลัพธ์ที่พร้อม ใน Android สิ่งนี้ถูกนำไปใช้ผ่าน View.setLayerType(LAYER_TYPE_SOFTWARE) พร้อม Bitmap ที่ถูกแคช ใน iOS — ผ่าน drawsAsynchronously และ CALayer.shouldRasterize

การลดพื้นที่วาดซ้ำ

ใช้ dirty rectangles — ติดตามว่าพื้นที่ใดของหน้าจอเปลี่ยนแปลงและวาดเฉพาะพื้นที่เหล่านั้นซ้ำ Android ViewSystem คำนวณพื้นที่ที่ถูกทำให้เป็นโมฆะโดยอัตโนมัติ iOS CALayer ใช้ setNeedsDisplayInRect เพื่อจำกัดพื้นที่วาดซ้ำ

การดำเนินการระดับบิตและ SSE/NEON

สำหรับการดำเนินการพิกเซล (blend, การซ่อน) ให้ใช้ คำสั่ง SIMD ของ CPU Android Skia ใช้ NEON โดยอัตโนมัติสำหรับโปรเซสเซอร์ ARM iOS Core Graphics ถูกทำให้เป็นเวกเตอร์ผ่านเฟรมเวิร์ก Accelerate ตาม Google (2025) การดำเนินการ blend ที่ปรับให้เหมาะสมกับ NEON ใน Skia ทำงานเร็วกว่าโค้ดสเกลาร์ 3–5 เท่า

// การผสมพิกเซลที่ปรับให้เหมาะสมด้วย NEON (ARM)
#include <arm_neon.h>
void blendNEON(uint32_t* dst, const uint32_t* src, int count) {
    for (int i = 0; i < count; i += 4) {
        uint8x16_t a = vld1q_u8((uint8_t*)(src + i));
        uint8x16_t b = vld1q_u8((uint8_t*)(dst + i));
        uint8x16_t r = vhaddq_u8(a, b);
        vst1q_u8((uint8_t*)(dst + i), r);
    }
}

คำสั่ง NEON ประมวลผล 16 พิกเซล (128 บิต) ในการดำเนินการครั้งเดียว เมื่อรวมกับการทำไปป์ไลน์ของ ARM Cortex-X4 สิ่งนี้ให้ปริมาณงานสูงถึง 500 ล้านพิกเซลต่อวินาทีสำหรับการคัดลอกและผสมซอฟต์แวร์ — เพียงพอสำหรับหน้าจอ FullHD ที่ 60 FPS