กราฟิกและการเรนเดอร์ในการพัฒนามือถือ: มันคืออะไร กระบวนการทำงานอย่างไร และมันทำงานอย่างไร

กราฟิกและการเรนเดอร์: พื้นฐาน CPU และ GPU

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

CPU vs GPU Rendering

CPU Rendering — การประมวลผลแบบตามลำดับ แต่ละคำสั่งจะถูกดำเนินการทีละคำสั่ง CPU ได้รับการปรับแต่งสำหรับตรรกะและการแตกกิ่ง Canvas (Android), Core Graphics (iOS) ทำงานบน CPU ข้อดี: ความแม่นยำ รองรับอัลกอริทึมที่ซับซ้อน ข้อเสีย: ช้าเมื่อมีองค์ประกอบกราฟิกจำนวนมาก GPU Rendering — การประมวลผลแบบขนาน แกน GPU นับพันประมวลผลจุดยอดและพิกเซลพร้อมกัน Metal (iOS), Vulkan (Android), OpenGL ES (ทั้งสองแพลตฟอร์ม) ใช้ GPU GPU Rendering เป็นสิ่งจำเป็นสำหรับ 3D แอนิเมชัน 60 FPS และเอฟเฟกต์ที่ซับซ้อน เฟรมเวิร์ก UI สมัยใหม่ (SwiftUI, Jetpack Compose, Flutter) ใช้ GPU เป็นค่าเริ่มต้น

เชเดอร์ (Vertex, Fragment)

เชเดอร์ คือโปรแกรมที่ทำงานบน GPU พวกมันกำหนดว่าแต่ละวัตถุบนหน้าจอมีลักษณะอย่างไร ไปป์ไลน์กราฟิกประกอบด้วยหลายขั้นตอน แต่เชเดอร์หลักสองตัว — Vertex Shader และ Fragment Shader — ถูกใช้ใน 99% ของกรณี เชเดอร์เขียนด้วย GLSL (OpenGL), MSL (Metal) หรือ HLSL (DirectX)

Vertex Shader — ประมวลผลจุดยอดของโมเดล 3D อินพุต: ตำแหน่งจุดยอด, เส้นปกติ, พิกัด UV เอาต์พุต: ตำแหน่งที่แปลงแล้ว (model → view → projection) Vertex Shader ไม่สามารถสร้างหรือลบจุดยอด — แปลงได้เท่านั้น Fragment Shader — คำนวณสีของแต่ละพิกเซล (แฟรกเมนต์) ในสามเหลี่ยมที่ถูกแรสเตอร์ อินพุต: ข้อมูลที่ถูกประมาณจาก Vertex Shader (UV, เส้นปกติ) เอาต์พุต: สี RGBA Fragment Shader รับผิดชอบการสร้างพื้นผิว การให้แสง (Phong, PBR) และเอฟเฟกต์หลังการประมวลผล เอนจินสมัยใหม่ (Unity, Unreal) สร้างเชเดอร์อัตโนมัติ แต่การเข้าใจไปป์ไลน์เป็นสิ่งจำเป็นสำหรับการเพิ่มประสิทธิภาพ

Offscreen Rendering — การเรนเดอร์ไม่ใช่บนหน้าจอแต่ไปยังบัฟเฟอร์ชั่วคราว ใช้สำหรับ: 1) เอฟเฟกต์ (blur, shadow), 2) เรนเดอร์ลงพื้นผิว, 3) การคำนวณเฟรมล่วงหน้า Offscreen Rendering มีต้นทุนสูง: การสลับบริบทและรอบการเรนเดอร์เพิ่มเติม iOS เปิดใช้ Offscreen Rendering อัตโนมัติสำหรับเงาและ cornerRadius การแรสเตอร์ — การแปลงข้อมูลเวกเตอร์ (จุดยอด + เชเดอร์) เป็นพิกเซล ตัวแรสเตอร์กำหนดว่าแฟรกเมนต์ใดเป็นของสามเหลี่ยมและเรียก Fragment Shader การประกอบ — การรวมเลเยอร์เป็นภาพสุดท้าย Core Animation ประกอบ CALayer, Android ประกอบเลเยอร์ SurfaceFlinger

CPU — สำหรับตรรกะและ Canvas GPU — สำหรับกราฟิกและแอนิเมชัน IT Sectr แนะนำให้ใช้ GPU rendering สำหรับเนื้อหาที่เคลื่อนไหว (แอนิเมชัน การเปลี่ยนภาพ การเลื่อน) — ซึ่งรับประกัน 60 FPS ที่เสถียร

Core Animation (CALayer, CAShapeLayer)

Core Animation — เฟรมเวิร์กของ Apple สำหรับการเรนเดอร์แอนิเมชันเร่งด้วย GPU องค์ประกอบพื้นฐานคือ CALayer: พื้นที่สี่เหลี่ยมที่มีเนื้อหา (ภาพ สี ข้อความ) CALayer จัดการ: ตำแหน่ง ขนาด สีพื้นหลัง ขอบ เงา cornerRadius และการแปลง (2D และ 3D) Core Animation ประกอบเลเยอร์บน GPU โดยอัตโนมัติ — นักพัฒนาไม่ต้องเขียนโค้ดกราฟิก

CALayer

CALayer — วัตถุขนาดเล็ก (ไม่ใช่วิว) ที่มีบิตแมปของเนื้อหา UIButton, UILabel, UIImageView — ทั้งหมดใช้ CALayer ภายใน คุณสมบัติ: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds การเคลื่อนไหวของคุณสมบัติ CALayer เกิดขึ้นบน GPU — นี่คือข้อได้เปรียบหลักของ Core Animation CALayer.shouldRasterize — เปิดการแรสเตอร์เลเยอร์เพื่อแคชกราฟิกที่ซับซ้อน CAShapeLayer — คลาสย่อยสำหรับกราฟิกเวกเตอร์: วาดพาธบน GPU ใช้สำหรับแถบความคืบหน้า แผนภูมิ มาสก์ และแอนิเมชันรูปร่าง CAShapeLayer.path — คุณสมบัติที่เคลื่อนไหวได้ (แอนิเมชันการเปลี่ยนรูปร่าง)

การประกอบ ใน Core Animation — กระบวนการรวม CALayer เป็นเฟรมสุดท้าย แต่ละ CALayer คือพื้นผิวแยกบน GPU การประกอบเกิดขึ้นใน Render Server (กระบวนการแยก) คุณสมบัติที่ต้องการการประกอบ: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize ยิ่งเลเยอร์น้อย — การประกอบยิ่งเร็ว

การเพิ่มประสิทธิภาพ (Overdraw, Offscreen Rendering)

Overdraw — สถานการณ์ที่พิกเซลเดียวกันถูกทาสีหลายครั้งในหนึ่งเฟรม ตัวอย่าง: พื้นหลังสีแดง → สี่เหลี่ยมสีน้ำเงิน → ข้อความ พิกเซลกลางถูกวาด 3 ครั้ง Overdraw เป็นสาเหตุหลักของความล่าช้าของ UI โดยเฉพาะบนอุปกรณ์เก่า iOS: Debug Color Blended Layers (Xcode) — พื้นที่สีแดง = ผสม (overdraw) Android: Debug GPU Overdraw (ตัวเลือกนักพัฒนา) — สีจากน้ำเงิน (1x) ถึงแดง (3x+)

Overdraw

วิธีลด Overdraw: 1) ใช้ opaque = true สำหรับวิวที่ไม่โปร่งใส (iOS) 2) Android — ใช้ android:windowBackground เพียงครั้งเดียว 3) เอาเลเยอร์ที่มองไม่เห็นออก 4) ใช้สถาปัตยกรรมแบบชั้น: พื้นหลัง (1 รอบ) → เนื้อหา (2 รอบ) 5) หลีกเลี่ยง clipChildren และ clipToPadding โดยไม่จำเป็น Offscreen Rendering — การเรนเดอร์ไปยังบัฟเฟอร์ก่อนหน้าจอ ตัวกระตุ้น: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize Xcode: Debug Offscreen Renderer — พื้นที่สีเหลือง = offscreen บน Android: profile GPU rendering — ตรวจสอบความยาวของแถบ

กราฟิกเวกเตอร์ (SVG, Vector Drawable)

กราฟิกเวกเตอร์ — ภาพที่อธิบายด้วยสูตรทางคณิตศาสตร์ (เส้นทาง เส้นโค้ง การเติม) เวกเตอร์ไม่สูญเสียคุณภาพเมื่อปรับขนาด — เหมาะสำหรับไอคอนและภาพประกอบในแอปมือถือ

SVG (Scalable Vector Graphics) — มาตรฐาน W3C ไม่รองรับโดยตรงในระบบปฏิบัติการมือถือ แปลง: บน iOS — เป็น PDF vector assets (Xcode 12+), บน Android — เป็น Vector Drawable XML Vector Drawable — รูปแบบ Android กำหนดใน XML: <vector> ด้วย <path> และ <group> รองรับแอนิเมชันผ่าน AnimatedVectorDrawable PDF Vector Assets (iOS) — PDF เวกเตอร์ใน Assets.xcassets Xcode คอมไพล์เป็นพื้นผิวที่ปรับให้เหมาะสมกับ GPU SVG และ Vector Drawable ไม่รองรับเอฟเฟกต์ซับซ้อน (blur, gradient mesh) สำหรับภาพถ่ายและเกรเดียนต์ ใช้ PNG/WebP แรสเตอร์