Một Cuốn Sách Ảnh Tôpô, Được Dựng Hình: Các Bề Mặt 3D Vẽ Bằng Nét Gạch Trong Trình Duyệt

Có một góc yên tĩnh của đồ họa mà hầu hết các nhà phát triển web không bao giờ chạm tới: dựng hình phi hiện thực. Mục tiêu không phải là sự chân thực—mà là sự rõ ràng và tay nghề. Một trang tương tác mới, A Topological Picture Book, Rendered, mang tay nghề đó vào trình duyệt, cho phép bạn khám phá các bề mặt kinh điển từ tôpô và hình học vi phân như thể chúng là những minh họa vẽ tay từ một cuốn sách toán giữa thế kỷ.

Công cụ dựng hình các bề mặt tham số và ẩn—nghĩ đến bề mặt Boy, bề mặt Morin, các nút thắt xuyến—bằng một quy trình dựa trên nét vẽ. Thay vì pixel, đầu ra là một tập hợp các dải băng thuôn nhọn mô phỏng ngòi bút rộng. Các đường viền được tính là tập hợp zero của n·v trên lưới, được nối thành các đường cong mượt mà. Các đường ẩn được xử lý bằng một bước kiểm tra độ hiển thị trên GPU và được vẽ đứt nét hoặc mờ. Gạch chéo theo hướng cong chính, với ba mật độ lồng nhau cho tông màu, và gạch chéo chỉ ở các vùng bóng đổ.

Điều ấn tượng là độ trung thực với các kỹ thuật cổ điển. Trang trích dẫn một dòng dõi các bài báo từ SIGGRAPH và Eurographics—Illustrating Smooth Surfaces của Hertzmann và Zorin, hiệu ứng đường viền sáng của Appel, khoảng cách dòng chảy của Jobard và Lefer—và triển khai chúng một cách trung thực. Kết quả không phải là một bộ lọc rẻ tiền mà là một sự tái tạo chân thực phong cách khắc in trong Topological Picture Book năm 1987 của Francis.

Bên dưới, nó là sự pha trộn giữa công nghệ web hiện đại và các thuật toán cổ điển. Các bề mặt ẩn được đa giác hóa qua phép chia khối tứ diện. Đường cong kép của một phép nhúng chìm được tìm bằng các phép thử giao điểm tia-tam giác. Các hướng cong chính được tính trên lưới, và các đường dòng được vết theo quy tắc khoảng cách tách để giữ gạch chéo đều. Giao diện cho phép bạn tinh chỉnh mọi thứ: khoảng cách nét, độ rộng bút, độ rung tay, sự tụ mực, thậm chí cả vân giấy.

Đối với các kỹ sư, đây là một lớp học bậc thầy trong việc chuyển một quy trình nghiên cứu đồ họa 30 năm tuổi thành một ứng dụng web tương tác. Nó cũng là một lời nhắc rằng trình duyệt giờ đây có khả năng dựng hình phi hiện thực theo thời gian thực mà những năm 90 cần một máy trạm. Mã nguồn mở—bạn có thể kiểm tra các công thức, logic gạch chéo và các bước dựng hình. Nếu bạn từng thắc mắc làm thế nào để vẽ một đường nét sạch từ một lưới nhiễu, trang này đáng để mổ xẻ.