Phương Pháp Kết Xuất Phông Chữ Chống Răng Cưa 16 Lần Hiệu Quả

Anonymous trong Nghiên Cứu Trường Hợp và Plugin

2019-01-01 Khoảng 900 từ 4 phút

Hôm qua tôi đọc một loạt bài viết rất thú vị giới thiệu một kỹ thuật mới trong việc xử lý phông chữ chống răng cưa (anti-aliasing) trên giao diện người dùng. Ngay lập tức tôi quyết định thử nghiệm phương pháp này bằng cách xây dựng một bản thực thi trên CPU để kiểm tra hiệu quả với phông chữ tiếng Trung. Dù kết quả cho thấy thuật toán này có hạn chế nhất định khi ứng dụng trong ngành công nghiệp game, nhưng những nguyên lý khoa học đằng sau vẫn mang đến nhiều cảm hứng sâu sắc.

Nguyên lý cốt lõi của phương pháp này bắt nguồn từ câu hỏi thiết kế thú vị: “Giao diện người dùng của chúng tôi có nhiều hiệu ứng chuyển động mượt mà, vậy tại sao văn bản lại không thể di chuyển trơn tru trên màn hình?” Đây chính là thách thức mà các phương pháp truyền thống chưa giải quyết tốt trong nhiều năm qua. Khi văn bản dịch chuyển chỉ 1/4 pixel màn hình, hiện tượng mờ nhòe gần như không tránh khỏi. Nhưng kỹ thuật mới này có thể bảo tồn tối đa thông tin hình ảnh gốc.

Giải pháp độc đáo nằm ở cách lưu trữ dữ liệu phông chữ. Thay vì lưu trữ bản đồ điểm (bitmap) xám thông thường, hệ thống sử dụng một kết cấu mỗi pixel 16 bit để chứa 16 phiên bản chữ lớn gấp 4 lần (4x4). Mỗi bit trong 16 bit này đại diện cho một điểm ảnh đơn sắc (trắng/đen). Điều này cho phép lưu trữ đồng thời 16 bit thông tin trong một pixel kết cấu - tương ứng với 4x4 điểm ảnh văn bản.

Khi GPU thực hiện lấy mẫu (sampling) từ kết cấu, mỗi lần lấy mẫu sẽ thu được thông tin từ 16 điểm ảnh chữ. Nếu thực hiện lấy mẫu 4 lần, hệ thống có thể tái tạo bản đồ điểm 16x16 (256 pixel). Việc tính toán số lượng bit ‘1’ trong vùng lấy mẫu cho phép xác định chính xác mức độ xám của pixel cuối cùng trên màn hình. Đây là bước tiến vượt trội so với phương pháp truyền thống vốn chỉ có thể tính trung bình mức xám sau khi lấy mẫu.

Tôi đã thử nghiệm phương pháp này bằng một đoạn animation đơn giản - cho chữ “tốt” (tương đương 23 pixel chiều cao) di chuyển tròn trong phạm vi 1 pixel. Điều đặc biệt là hộp giới hạn (bounding box) của chữ không thay đổi, nhưng mắt thường vẫn cảm nhận được chuyển động mượt mà. Khi mở rộng ra, với các vị trí dịch chuyển 1/4, 1/2 và 3/4 pixel theo cả trục X và Y, hệ thống tạo ra 16 phiên bản chữ với độ chính xác cao:

Về lý thuyết, chúng ta hoàn toàn có thể kết hợp kỹ thuật này với công nghệ ClearType của Microsoft để tận dụng cấu trúc RGB của màn hình LCD, tạo ra độ phân giải hình ảnh cao hơn nữa. Tuy nhiên, tôi nghĩ việc này có lẽ chỉ mang lại cải tiến hình thức mà không thực sự cần thiết.

Với các ứng dụng game hiện đại, hạn chế lớn nhất của phương pháp này nằm ở độ phức tạp khi triển khai trên GPU. Ngoài ra, lợi ích mang lại - khả năng di chuyển văn bản mượt mà - lại không phải yếu tố then chốt trong thiết kế game. Đặc biệt, thuật toán chưa giải quyết triệt để vấn đề tỷ lệ (scaling). Khi phóng to/thu nhỏ font chữ, mối quan hệ 1:1 giữa kết cấu và buffer khung hình bị phá vỡ. Theo nguyên tắc 4x4, hệ thống cần điều chỉnh kích thước cửa sổ lấy mẫu theo tỷ lệ thực tế - sử dụng cửa sổ lớn hơn 4x4 khi thu nhỏ, và nhỏ hơn 4x4 khi phóng to.

Giới hạn thú vị nhất nằm ở khả năng phóng đại tối đa 4x4 lần mà không mất mát thông tin. Khi cần hiển thị chữ lớn gấp 16 lần, hệ thống chỉ cần lấy mẫu 1 bit (cửa sổ 1x1) từ kết cấu. Cả GPU và CPU đều có thể xử lý vấn đề tỷ lệ này, nhưng đòi hỏi giải pháp kỹ thuật phức tạp - chẳng hạn như xây dựng một kết cấu kèm theo mipmap đặc biệt, sử dụng các kênh màu để truyền tải thông tin tỷ lệ.

Với phông chữ Latin, vấn đề này dễ giải quyết hơn nhờ số lượng ký tự ít. Chỉ cần tạo nhanh kết cấu theo kích thước mong muốn và kết hợp hệ thống cache hợp lý. Tuy nhiên với chữ tượng hình tiếng Trung gồm hàng nghìn ký tự, yêu cầu về không gian lưu trữ cache trở nên quá lớn, làm giảm tính thực tiễn của phương pháp này trong các ứng dụng đa ngôn ngữ.