Kỹ thuật kết xuất văn bản không cần texture

• Kết xuất văn bản không cần texture

  • Theo cách truyền thống, để kết xuất văn bản, cần kết xuất toàn bộ glyph của font vào atlas, bind atlas đó làm texture, rồi vẽ các tam giác lên màn hình để kết xuất từng glyph một.
  • Bài viết giới thiệu một cách đơn giản để xuất nhanh các thông điệp debug.
  • Giải thích một kỹ thuật có thể vẽ toàn bộ văn bản chỉ với một draw call duy nhất.

• Font: pixel không cần texture

  • Để loại bỏ texture atlas của font, cần lưu trữ một thứ tương tự font atlas ngay bên trong fragment shader.
  • Có thể dùng hằng số nguyên để lưu bitmap, và nhờ đó kết xuất được glyph.
  • Có thể dùng số nguyên 8 bit làm bitmap để vẽ lên màn hình trong fragment shader của GLSL.

• Một draw call duy nhất

  • Có thể dùng instanced draw call để tránh các lệnh vẽ lặp lại.
  • Dữ liệu cho mỗi instance bao gồm offset vị trí và văn bản cần xuất.
  • Chia thông điệp thành các nhóm 4 ký tự, chuyển thành uint32_t, rồi lưu vào cấu trúc word_data.

• Vertex shader

  • Vertex shader tạo ra ba đầu ra.
  • Đặt các đỉnh của tam giác lên màn hình thông qua gl_Position.
  • Truyền từ cần xuất sang fragment shader.
  • Tạo tọa độ texture để tính toán tọa độ uv.

• Fragment shader

  • Fragment shader cần ba loại thông tin để kết xuất văn bản.
  • Kết xuất glyph bằng cách ánh xạ tọa độ uv vào đúng bit trong bitmap của glyph.
  • Nếu bit được bật thì kết xuất bằng màu tiền cảnh, nếu không thì kết xuất bằng màu nền.

• Triển khai đầy đủ và mã nguồn

  • Phần triển khai kỹ thuật này có thể tìm thấy trong mã nguồn của mô-đun le_print_debug_print_text.
  • Mô-đun này giúp dễ dàng xuất các thông điệp debug lên màn hình.

[GN⁺]

Ý kiến Hacker News

• Viết code trên ShaderToy bằng các phép toán số học đơn giản là một việc thú vị và dễ làm. Có rất nhiều ví dụ hack văn bản đa dạng
  • Ví dụ: Matrix dưới 300 ký tự, hiệu ứng màn hình CRT xanh lá, v.v.
• Cách này sáng tạo nhưng kết quả không đẹp lắm. Có thể thêm nhiều bit hơn để cho ra kết quả tốt hơn, nhưng cách hiệu quả hơn là dùng pixel đen trắng và lưu chúng dưới dạng texture
• Cách phổ biến để vẽ văn bản trong các engine kết xuất 3D hiện đại là dùng văn bản SDF. Cách này sử dụng texture atlas truyền thống để tạo atlas của signed distance field
• Chưa từng trực tiếp thử thuật toán kết xuất văn bản này, nhưng đã có kinh nghiệm triển khai nhiều cách khác nhau. Vì cần tính độc lập với độ phân giải và anti-aliasing nên cách này không giúp ích nhiều
• Cách này giống về mặt khái niệm với phương pháp của Will Dobbie nhưng đơn giản hơn. Nó lưu dữ liệu pixel trong mảng
• Cũng có lựa chọn kết xuất văn bản thành mesh. TextMeshPro dùng signed distance field để xử lý việc scale tùy ý
• Sẽ rất thú vị nếu so sánh hiệu năng với cách dùng texture truyền thống. Với các tác vụ đơn giản trên GPU hiện đại, khả năng cao câu trả lời về hiệu năng sẽ là "có"
• Video của Sebastian Lague đề cập đến nhiều kỹ thuật kết xuất phông chữ khác nhau
• Đã từng dùng một kỹ thuật tương tự là nhúng dữ liệu phông chữ vào mã nguồn fragment shader. Dùng snprintf để xuất trực tiếp vào GPU buffer
• Cách này giống với việc vẽ các sprite 8x8 nhỏ trong BBC Basic. Nó gợi lại ký ức từ 35 năm trước
• GPU rất hiệu quả khi kết xuất từ texture, nhưng lại tương đối chậm với thao tác bit. Nó tiết kiệm bộ nhớ, nhưng liệu có thực sự nhanh hơn dùng atlas hay không thì còn đáng nghi
• Có câu hỏi liệu việc tải các texture nhỏ lên GPU có ảnh hưởng lớn đến hiệu năng hay không. Không rõ có thể kết xuất chuỗi vào texture theo kiểu 2D rồi hiển thị texture đó trên hai tam giác hay không