Đồ họa và Kết xuất trong Phát triển Di động: Khái niệm, Quy trình hoạt động và Cách vận hành

Đồ họa và Kết xuất: Kiến thức cơ bản về CPU và GPU

Kết xuất là quá trình chuyển đổi dữ liệu (đỉnh, kết cấu, shader) thành hình ảnh trên màn hình. Trên thiết bị di động, kết xuất có thể được thực hiện trên CPU (bộ xử lý trung tâm) hoặc GPU (bộ xử lý đồ họa). Việc lựa chọn phụ thuộc vào loại đồ họa và hiệu suất yêu cầu.

CPU vs GPU Rendering

CPU Rendering — xử lý tuần tự. Mỗi lệnh được thực thi lần lượt. CPU được tối ưu cho logic và rẽ nhánh. Canvas (Android), Core Graphics (iOS) hoạt động trên CPU. Ưu điểm: độ chính xác, hỗ trợ thuật toán phức tạp. Nhược điểm: chậm với số lượng lớn phần tử đồ họa. GPU Rendering — xử lý song song. Hàng nghìn nhân GPU xử lý các đỉnh và pixel đồng thời. Metal (iOS), Vulkan (Android), OpenGL ES (cả hai nền tảng) sử dụng GPU. GPU Rendering là bắt buộc cho 3D, hoạt ảnh 60 FPS và hiệu ứng phức tạp. Các framework UI hiện đại (SwiftUI, Jetpack Compose, Flutter) sử dụng GPU theo mặc định.

Shader (Vertex, Fragment)

Shader là các chương trình thực thi trên GPU. Chúng xác định cách mỗi đối tượng hiển thị trên màn hình. Đường ống đồ họa bao gồm nhiều giai đoạn, nhưng hai shader chính — Vertex Shader và Fragment Shader — được sử dụng trong 99% trường hợp. Shader được viết bằng GLSL (OpenGL), MSL (Metal) hoặc HLSL (DirectX).

Vertex Shader — xử lý các đỉnh của mô hình 3D. Đầu vào: vị trí đỉnh, pháp tuyến, tọa độ UV. Đầu ra: vị trí đã biến đổi (mô hình → góc nhìn → phép chiếu). Vertex Shader không thể tạo hoặc xóa đỉnh — chỉ có thể biến đổi. Fragment Shader — tính toán màu của mỗi pixel (mảnh) trong một tam giác đã được raster hóa. Đầu vào: dữ liệu nội suy từ Vertex Shader (UV, pháp tuyến). Đầu ra: màu RGBA. Fragment Shader chịu trách nhiệm về tạo kết cấu, chiếu sáng (Phong, PBR) và hậu kỳ. Các engine hiện đại (Unity, Unreal) tự động tạo shader, nhưng hiểu về đường ống là cần thiết để tối ưu hóa.

Offscreen Rendering — kết xuất không vào màn hình mà vào bộ đệm tạm thời. Được sử dụng cho: 1) hiệu ứng (blur, shadow), 2) kết xuất vào kết cấu, 3) tính toán trước khung hình. Offscreen Rendering rất tốn kém: chuyển đổi ngữ cảnh và một lần kết xuất bổ sung. iOS tự động bật Offscreen Rendering cho đổ bóng và cornerRadius. Raster hóa — chuyển đổi dữ liệu vector (đỉnh + shader) thành pixel. Bộ raster xác định mảnh nào thuộc về tam giác và gọi Fragment Shader. Tổng hợp — lắp ráp các lớp thành hình ảnh cuối cùng. Core Animation tổng hợp các CALayer, Android tổng hợp các lớp SurfaceFlinger.

CPU — cho logic và Canvas. GPU — cho đồ họa và hoạt ảnh. IT Sectr khuyên bạn nên sử dụng GPU rendering cho bất kỳ nội dung chuyển động nào (hoạt ảnh, chuyển tiếp, cuộn) — điều này đảm bảo 60 FPS ổn định.

Core Animation (CALayer, CAShapeLayer)

Core Animation — framework của Apple để kết xuất hoạt ảnh tăng tốc GPU. Phần tử cơ bản là CALayer: một vùng hình chữ nhật có nội dung (hình ảnh, màu sắc, văn bản). CALayer quản lý: vị trí, kích thước, màu nền, đường viền, đổ bóng, cornerRadius và các phép biến đổi (2D và 3D). Core Animation tự động tổng hợp các lớp trên GPU — nhà phát triển không cần viết mã đồ họa.

CALayer

CALayer — một đối tượng nhẹ (không phải view) chứa bitmap nội dung. UIButton, UILabel, UIImageView — tất cả đều sử dụng CALayer bên trong. Thuộc tính: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Hoạt ảnh của các thuộc tính CALayer diễn ra trên GPU — đây là ưu điểm chính của Core Animation. CALayer.shouldRasterize — bật raster hóa lớp để lưu cache đồ họa phức tạp. CAShapeLayer — một lớp con cho đồ họa vector: vẽ đường dẫn trên GPU. Được sử dụng cho thanh tiến trình, biểu đồ, mặt nạ và hoạt ảnh hình dạng. CAShapeLayer.path — một thuộc tính có thể tạo hoạt ảnh (hoạt ảnh biến đổi hình dạng).

Tổng hợp trong Core Animation — quá trình lắp ráp các CALayer thành khung hình cuối cùng. Mỗi CALayer là một kết cấu riêng biệt trên GPU. Quá trình tổng hợp diễn ra trong Render Server (một tiến trình riêng). Các thuộc tính yêu cầu tổng hợp: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Càng ít lớp — quá trình tổng hợp càng nhanh.

Tối ưu hóa (Overdraw, Offscreen Rendering)

Overdraw — tình huống cùng một pixel được tô nhiều lần trong một khung hình. Ví dụ: nền đỏ → hình chữ nhật xanh → văn bản. Pixel trung tâm được vẽ 3 lần. Overdraw là nguyên nhân chính gây lag giao diện, đặc biệt trên các thiết bị cũ. iOS: Debug Color Blended Layers (Xcode) — vùng đỏ = pha trộn (overdraw). Android: Debug GPU Overdraw (Tùy chọn nhà phát triển) — màu từ xanh lam (1x) đến đỏ (3x+).

Overdraw

Cách giảm Overdraw: 1) sử dụng opaque = true cho các view không trong suốt (iOS). 2) Android — sử dụng android:windowBackground chỉ một lần. 3) Loại bỏ các lớp không nhìn thấy. 4) Sử dụng kiến trúc phân lớp: nền (1 lần) → nội dung (2 lần). 5) Tránh clipChildren và clipToPadding không cần thiết. Offscreen Rendering — kết xuất vào bộ đệm trước màn hình. Trình kích hoạt: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — vùng vàng = offscreen. Trên Android: profile GPU rendering — kiểm tra độ dài thanh.

Đồ họa Vector (SVG, Vector Drawable)

Đồ họa Vector — hình ảnh được mô tả bằng công thức toán học (đường dẫn, đường cong, tô màu). Vector không mất chất lượng khi thu phóng — lý tưởng cho biểu tượng và hình minh họa trong ứng dụng di động.

SVG (Scalable Vector Graphics) — tiêu chuẩn W3C. Không được hỗ trợ trực tiếp trên hệ điều hành di động. Được chuyển đổi: trên iOS — thành PDF vector assets (Xcode 12+), trên Android — thành Vector Drawable XML. Vector Drawable — định dạng Android. Được định nghĩa trong XML: <vector> với <path> và <group>. Hỗ trợ hoạt ảnh qua AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDF vector trong Assets.xcassets. Xcode biên dịch chúng thành các kết cấu tối ưu GPU. SVG và Vector Drawable không hỗ trợ các hiệu ứng phức tạp (blur, gradient mesh). Đối với ảnh và gradient, hãy sử dụng PNG/WebP raster.