Cách vẽ đường viền trong game điện tử

• Giới thiệu

  • Trong đồ họa game, việc vẽ đường viền thường được sử dụng vì lý do thẩm mỹ hoặc để hỗ trợ gameplay. Ví dụ, trong trò chơi Sable, đường viền được dùng để tạo phong cách truyện tranh, còn trong The Last of Us, nó được dùng để làm nổi bật kẻ địch.

• Hiệu ứng rim

  • Kỹ thuật

    • Có thể render đường viền ở mép đối tượng bằng hiệu ứng Fresnel, vì hiệu ứng này mạnh hơn gần ranh giới của đối tượng.

  • Triển khai

    • Sử dụng shader tùy chỉnh triển khai hiệu ứng Fresnel để render đường viền trên đối tượng. Kỹ thuật này phù hợp với các vật thể trơn như cầu hoặc capsule, nhưng không phù hợp với vật thể sắc nhọn như khối lập phương.

• Phóng đỉnh (vertex extrusion)

  • Kỹ thuật

    • Tạo đường viền bằng cách dùng bản sao của đối tượng gốc. Mở rộng đỉnh của bản sao để nó lớn hơn đối tượng gốc.

  • Hướng phóng

    • Chọn hướng di chuyển đỉnh để điều chỉnh kích thước đối tượng. Di chuyển đỉnh trong không gian đối tượng để tạo đường viền.

  • Không gian phóng

    • Có hai cách: di chuyển đỉnh trong không gian đối tượng và di chuyển trong không gian clip. Di chuyển trong không gian clip cho ra đường viền đồng đều.

  • Masking

    • Loại bỏ mặt trước của mesh đã sao chép để chỉ hiển thị đường viền.

• Bộ đệm làm mờ

  • Kỹ thuật

    • Render silhouette của đối tượng vào buffer rồi làm mờ để tạo đường viền.

  • Bộ đệm silhouette

    • Render đối tượng bằng một màu đơn để tạo bộ đệm silhouette.

  • Pass làm mờ

    • Dùng pass blur để mở rộng silhouette buffer. Dùng box blur hoặc Gaussian blur để cải thiện hiệu năng.

  • Pass đường viền

    • Kết hợp silhouette đã blur với cảnh gốc để tạo đường viền.

• Thuật toán Jump Flood

  • Sử dụng thuật toán Jump Flood để render đường viền. Có thể render đường viền rộng với chi phí hiệu năng thấp.

• Phát hiện cạnh

  • Kỹ thuật

    • Dùng full-screen pass để phát hiện discontinuity trong cảnh và render đường viền.

  • Phát hiện discontinuity

    • Dùng toán tử Roberts cross hoặc Sobel để phát hiện discontinuity.

  • Nguồn gốc discontinuity

    • Phát hiện discontinuity từ texture độ sâu, normal và màu để tạo đường viền.

  • Điều chỉnh phát hiện cạnh

    • Điều chỉnh ngưỡng được dùng để phát hiện discontinuity để loại bỏ artefact.

  • Nguồn gốc discontinuity tùy chỉnh

    • Cung cấp nguồn gốc discontinuity tùy chỉnh để kiểm soát đường viền.

• Kết luận

  • Có năm cách vẽ đường viền, mỗi cách đều mang lại sự đánh đổi giữa hiệu năng, độ chân thực trực quan và mức độ hiệu chỉnh thủ công.

[GN⁺]

Ý kiến Hacker News

• Tôi thấy bài viết về Jump Flood Algorithm thật thú vị. Thật vui khi được nghĩ về các cách tiếp cận khác nhau ở cấp độ pixel.

  • Đây là cách rất thông minh để tạo SDF (Signed Distance Field); ấn tượng ở chỗ có thể tạo đường viền có chiều rộng mong muốn trong thời gian tuyến tính.
  • SDF có thể được áp dụng theo nhiều hình thức khác nhau, như dựa trên vector, dựa trên hàm, hoặc dựa trên texel/voxel. Houdini hỗ trợ tốt SDF raster và có cả bản miễn phí.
  • SDF rất hữu ích trong nhiều lĩnh vực.

• Đề xuất phương pháp lấy biên bằng cách render mô hình thành màu phẳng rồi phát hiện biên; cần một pass render bổ sung.

• Tôi quan tâm đến dự án R&D về đồ họa 3D phong cách hóa. Còn nhiều câu hỏi vẫn chưa được giải đáp.

  • Cách làm giảm chi tiết của mô hình 3D được render theo phong cách hoạt hình khi camera zoom out.
  • Cách render nền 3D theo kiểu tranh sơn thủy.
  • Cách biểu diễn khói, lửa, cây cối trong game 3D phong cách hóa.
  • Cách tự động chỉnh sửa mô hình cho camera di chuyển tự do.
  • Hình dáng của một trình chỉnh sửa lưới và nền lý tưởng trong renderer 3D phong cách hóa.
  • Khả năng render pixel art retro từ mô hình 3D đơn giản.
  • Cách làm thế giới game 3D chính xác về mặt vật lý hơn thông qua phong cách hóa.

• Trong game Astral Divide tôi đã phát triển kỹ thuật tương tự blur buffer, sử dụng anti-aliasing để tạo biên; hiệu năng thấp và triển khai rất đơn giản.

• Có đam mê kỹ thuật số và chờ đợi Godot cải thiện pipeline compute shader. Cấu hình plugin compositor hiện tại có phần phức tạp.

• Tôi tò mò không biết sau tranh cãi về giá của Unity liệu có nhiều nhà phát triển chuyển sang Unreal và Godot không.

• Tôi đã chuyển từ phát triển ứng dụng VR sang phát triển web, nhưng vẫn nhớ cảm giác đầy mê hoặc của công việc đồ họa 3D, va chạm, shader.

• Kết quả render phát hiện biên rất ấn tượng; trông giống một cảnh trong truyện tranh Franka của Hà Lan.

• Tôi đã tìm thấy một ghi chú hay về phương pháp phát hiện biên do nhà phát triển của Mars First Logistics đề xuất.

• Đề xuất một kỹ thuật đơn giản để vẽ viền

  • Tạo một mảng lưu các cạnh duy nhất của từng mặt
  • Chuyển các cạnh sang không gian quan sát rồi vẽ biên theo một số điều kiện