Compositing: nó là gì, các lớp và nguyên lý hoạt động

Compositing là gì?

Compositing là giai đoạn cuối cùng của đường ống đồ họa, nơi tất cả các lớp được kết xuất riêng biệt (cảnh 3D, phần tử UI, video, giao diện hệ thống) được kết hợp thành một hình ảnh duy nhất để hiển thị trên màn hình. Mỗi lớp có thể có màu sắc, độ trong suốt (alpha), vị trí và thứ tự xếp chồng riêng.

Trong bối cảnh phát triển di động, compositing rất quan trọng đối với giao diện người dùng: cửa sổ, nút bấm, văn bản, biểu tượng — tất cả các phần tử này được phối hợp thành một cảnh duy nhất. Hệ thống compositing quản lý thứ tự vẽ (z-order), sự chồng lấn chính xác của các phần tử bán trong suốt và hoạt ảnh chuyển tiếp giữa các trạng thái UI.

Compositing trong đường ống đồ họa

Trong đường ống đồ họa, compositing xảy ra sau khi tất cả các lượt shader và quá trình rasterization hoàn tất. GPU lấy các lớp đã hoàn thành từ framebuffer, áp dụng các thao tác blending và ghi kết quả vào framebuffer chính (front buffer) để gửi đến màn hình.

Compositing hoạt động như thế nào?

Compositing sử dụng sự pha trộn từng pixel (blending) màu sắc từ các lớp khác nhau. Mỗi pixel của hình ảnh đầu ra được tính toán dựa trên màu sắc pixel từ các lớp chồng lên, có tính đến độ trong suốt (kênh alpha) và chế độ pha trộn đã chọn.

Kênh Alpha và độ trong suốt

Mỗi lớp chứa một kênh alpha (thành phần màu thứ tư của RGBA) xác định độ mờ đục của nó. Alpha = 1.0 — hoàn toàn mờ đục, alpha = 0.0 — hoàn toàn trong suốt. Alpha blending tính toán màu pixel dưới dạng tổng trọng số của màu lớp trước (source) và lớp sau (destination): kết quả = source * alpha + dest * (1 - alpha).

Thứ tự vẽ (thuật toán họa sĩ)

Compositing được thực hiện từ lớp xa nhất đến lớp gần nhất (back-to-front). Đầu tiên, lớp nền được kết xuất, sau đó mỗi lớp tiếp theo được chồng lên lớp trước có tính đến độ trong suốt của nó. Z-order xác định lớp nào ở trên và sẽ che phủ các lớp bên dưới.

Thuật toán Compositing

Compositing hỗ trợ nhiều chế độ pha trộn (blend modes) khác nhau xác định cách màu sắc của các lớp được kết hợp. Mỗi chế độ tạo ra hiệu ứng hình ảnh khác nhau và có chi phí tính toán riêng.

Premultiplied Alpha

Trong chế độ premultiplied alpha, các kênh màu được lưu trữ đã được nhân với kênh alpha (RGB × A). Điều này loại bỏ nhu cầu nhân trong mỗi thao tác blending, tăng tốc compositing. Premultiplied alpha là định dạng tiêu chuẩn cho compositing GPU trong iOS Core Animation và Android HWUI.

Compositing trong hệ điều hành di động

Mỗi hệ điều hành di động có hệ thống compositing riêng được tối ưu hóa cho nền tảng phần cứng của mình. Compositing trong hệ điều hành di động chịu trách nhiệm kết xuất toàn bộ giao diện người dùng.

iOS: Core Animation + Metal

Trên iOS, compositing được quản lý bởi Core Animation — một hệ thống cấp cao hoạt động trên Metal hoặc OpenGL ES. Core Animation tạo một cây lớp (layer tree) sau đó được phối hợp thành hình ảnh cuối cùng. Core Animation tự động xác định lớp nào đã thay đổi và chỉ vẽ lại những lớp đó (compositing gia tăng), giảm thiểu tải cho GPU.

Android: SurfaceFlinger + HWUI

Trên Android, compositing được thực hiện bởi SurfaceFlinger — một dịch vụ hệ thống kết hợp các bề mặt (surfaces) từ các ứng dụng khác nhau và UI hệ thống. SurfaceFlinger sử dụng HWC (Hardware Composer) để chuyển một phần công việc compositing sang phần cứng chuyên dụng của bộ điều khiển màn hình.

Hiệu suất Compositing

Hiệu suất compositing là một nút thắt cổ chai phổ biến trong các ứng dụng di động, đặc biệt với hoạt ảnh phức tạp và nhiều lớp bán trong suốt chồng lên nhau. Mỗi lớp bổ sung yêu cầu đọc, pha trộn và ghi pixel vào bộ nhớ.

Các yếu tố ảnh hưởng đến hiệu suất

• Số lượng lớp — mỗi lớp yêu cầu một lượt blending riêng. Giảm số lượng lớp sẽ tăng tốc compositing một cách tuyến tính.
• Độ phân giải lớp — các lớp có độ phân giải cao làm tăng số lượng pixel được xử lý. Sử dụng kích thước bộ đệm offscreen nhỏ nhất có thể.
• Độ trong suốt và overdraw — các lớp bán trong suốt yêu cầu đọc pixel bên dưới, làm tăng băng thông.
• CPU compositing — nếu compositing được thực hiện trên CPU (software rendering), hiệu suất giảm đáng kể. Compositing GPU luôn được ưu tiên hơn.

GPU Compositing so với CPU Compositing

Các thiết bị di động hiện đại thực hiện compositing trên GPU thông qua các đơn vị blending chuyên dụng. GPU compositing sử dụng các đơn vị ROP song song và bộ lọc kết cấu để pha trộn pixel nhanh chóng. CPU compositing chỉ được sử dụng trong các trường hợp hiếm (thiết bị cũ, thử nghiệm).

Tối ưu hóa Compositing

Tối ưu hóa compositing là một trong những nhiệm vụ chính trong phát triển giao diện di động. Độ mượt của UI (60 FPS) phụ thuộc trực tiếp vào hiệu quả kết hợp các lớp.

Các phương pháp tối ưu hóa chính

• Giảm thiểu lớp — kết hợp các lớp tĩnh thành một (layer flattening) thông qua kết xuất trước.
• Lớp mờ đục — các lớp mờ đục không yêu cầu alpha blending, giúp tăng tốc compositing đáng kể.
• Compositing gia tăng — chỉ vẽ lại các lớp đã thay đổi, không phải toàn bộ cảnh (được Core Animation sử dụng).
• Hardware Composer — sử dụng HWC cho compositing phần cứng mà không cần GPU.

Công cụ phân tích

Để phân tích hiệu suất compositing, hãy sử dụng: Core Animation Profiler (Xcode Instruments) — hiển thị số lượng lớp và tần suất compositing; GPU Debugger (Android Studio) — hiển thị tải GPU và overdraw; Overdraw Visualization — công cụ gỡ lỗi hiển thị các khu vực vẽ lại pixel nhiều lần.