Tạo trình kết xuất 3D ASCII

 (kciter.so)
28 điểm bởi kciter1 2024-05-07 | 3 bình luận | Chia sẻ qua WhatsApp

Bài viết triển khai một trình kết xuất 3D ASCII và giải thích về pipeline kết xuất 3D

Ngoài bài viết trên blog, bạn cũng có thể xem thành quả tại các liên kết sau
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

  • Có thể làm cho ASCII trông như 3D không?
    • ASCII tương tự như các pixel đen trắng được phóng to mạnh
    • Có thể điều chỉnh độ sáng theo mật độ ký tự
  • Làm thế nào để biến tọa độ 3D thành tọa độ 2D?
    • Quá trình này chủ yếu gồm xử lý vertex, rasterization và xử lý fragment
    • Tọa độ 3D được gọi là vertex, nghĩa là một “đỉnh” nằm trong không gian 3D
    • Một vertex đơn lẻ không thể biểu diễn vật thể, nên cần tập hợp nhiều vertex để mô tả vật thể
    • Đơn vị nhỏ nhất để biểu diễn vật thể được gọi là polygon
  • Xử lý vertex
    • Quá trình biến đổi vertex được gọi là xử lý vertex
    • Diễn ra theo thứ tự biến đổi world, biến đổi view, rồi biến đổi projection
    • Mỗi phép biến đổi được tính toán bằng ma trận
    • Biến đổi world là đặt các vertex chứa trong tệp mô hình 3D vào không gian 3D
    • Biến đổi view là đặt camera, tức tính toán nhìn vật thể từ tọa độ nào và góc nhìn nào
    • Biến đổi projection là phép tính để thể hiện phối cảnh. Thông thường dùng phép chiếu phối cảnh.
    • Thông qua biến đổi projection, có thể chuyển đổi sang tọa độ không gian 2D
  • Rasterization
    • Quá trình chuyển tọa độ không gian 2D thành tọa độ pixel
    • Gồm clipping, chia phối cảnh, loại bỏ mặt sau, biến đổi viewport và scan conversion
    • Trong bài viết này, các công việc trên được trộn lại và triển khai theo cách phù hợp
  • Xử lý fragment
    • Quá trình xử lý các tọa độ đã được chuyển thành pixel
    • Trong trình kết xuất 3D thông thường, bước này sẽ thực hiện hậu xử lý như tính toán shader
    • Trong bài viết này chỉ áp dụng kết quả của phép tính ánh sáng
  • Phần triển khai hầu hết là mã nguồn nên được lược bỏ trong phần tóm tắt

Bài viết liên quan

3 bình luận

 
cosine20 2024-05-09

Tôi đã đọc rất thú vị. Những ký ức về lớp đồ họa máy tính tôi học thời đại học cũng sống lại rõ ràng, thật tuyệt.
 
toaonly 2024-05-08

Tôi đọc rất thú vị. Việc tác giả thực hiện cả phần tính đến vị trí camera khiến tôi rất ấn tượng.
 
thesol9 2024-05-07

Giải thích cả pipeline dựng hình cơ bản
Nội dung rất thú vị.