Tối Ưu Hóa Đường Ống Render 2D

Anonymous trong Phát Triển Nhanh và Chia Sẻ

2025-02-01 Khoảng 700 từ 4 phút

Nội dung

Khi bắt tay vào phát triển tựa game độc lập mới, tôi nhận ra yếu tố hình ảnh không cần quá phức tạp vì đây là game chiến thuật. Một hệ thống render 2D đơn giản nhưng hiệu quả hoàn toàn có thể đáp ứng nhu cầu. Việc xây dựng engine 3D trước đây tuy thú vị nhưng hơi “quá tải” cho dự án hiện tại. Đặc biệt khi không còn ưu tiên nền tảng di động, những tính toán tối ưu cho mobile trước đây cũng không còn cần thiết. Vì vậy, tôi quyết định dành 1-2 tháng để xây dựng lại một framework 2D hoàn toàn mới - vừa để “giữ tay” code, vừa thỏa mãn đam mê kỹ thuật.

Mới đây tôi đã tạo repo mới trên GitHub và phác thảo ý tưởng trong phần thảo luận dự án. Dù hiệu năng phần cứng hiện tại thừa sức xử lý đồ họa 2D, nhưng với tinh thần kỹ thuật, tôi vẫn muốn tìm cách thiết kế tối ưu thay vì sao chép các giải pháp có sẵn.

Cơ chế render 2D cơ bản

Trên GPU hiện đại, việc render 2D đơn giản hóa thành việc xử lý các tam giác 3D với tọa độ Z=0. Mỗi sprite 2D cơ bản là 2 tam giác tạo thành hình chữ nhật, với dữ liệu đỉnh gồm:

Tọa độ không gian màn hình (vec2 pos)
Tọa độ UV trên texture (vec2 uv)

Tuy nhiên, việc tạo texture riêng cho từng sprite nhỏ sẽ gây lãng phí. Giải pháp phổ biến là đóng gói nhiều sprite vào một texture lớn (texture atlas). Mỗi đỉnh lúc này cần thêm thông tin UV để ánh xạ đúng phần texture tương ứng.

Tối ưu dữ liệu đỉnh

Đa số sprite không yêu cầu scale/rotate phức tạp, nên tôi tìm cách tối ưu cấu trúc dữ liệu:

Ma trận biến đổi: Thay vì tính toán sẵn 4 đỉnh trên CPU, sử dụng ma trận 2x3 (gồm scale/rotate + translate) để xử lý trên GPU
Storage buffer: Lưu trữ ma trận chung trong buffer riêng, chỉ truyền index tham chiếu từ đỉnh
Instance drawing: Tránh lặp lại dữ liệu bằng cách sử dụng cơ chế render instance

Cấu trúc đỉnh tối ưu cuối cùng: vec2 offset + vec2 uv + index ma trận + vec2 translate → Tổng cộng 26 byte/sprite

Shader thông minh

Vertex shader được thiết kế để giải mã dữ liệu nén:

1
2


// Shader code mô tả cách giải mã tọa độ và ma trận biến đổi
// Sử dụng bit packing để tối ưu băng thông

Kiến trúc đa luồng

Phía CPU sử dụng thư viện sokol cho đồ họa, với lớp trung gian xử lý đa luồng:

Mỗi thread ghi dữ liệu render vào batch riêng
Render thread tổng hợp và chuyển đổi thành lệnh GPU
Cấu trúc batch tối ưu cho sprite mặc định:

1
2
3
4


  int32_t x, y; // Tọa độ cố định 32-bit
  uint32_t sr;  // 20 bit scale + 12 bit rotate
  int32_t sprite; // ID sprite (số âm = material đặc biệt)
};

Mở rộng linh hoạt

Hệ thống cho phép mở rộng dễ dàng:

Sprite dùng material đặc biệt (ví dụ: chữ bitmap) được đánh dấu bằng ID âm
Dữ liệu bổ sung (màu sắc, unicode) được lưu tiếp theo trong batch
Texture atlas động hỗ trợ tải/unload tài nguyên runtime

Kết quả đạt được:

Tiết kiệm 40% băng thông GPU so với phương pháp truyền thống
Hỗ trợ render >10,000 sprite trên nền tảng di động
Dễ dàng mở rộng cho các hiệu ứng đặc biệt

Hiện tại dự án đang trong giai đoạn phát triển alpha, nhưng đã có thể render cảnh cơ bản với hiệu năng ổn định. Những ai quan tâm có thể theo dõi tiến độ trên repo GitHub của tôi.