Tinh chỉnh một shader phát sáng để làm cho nó trông tốt hơn

Tôi có một trò chơi đơn giản và chủ đề của nó là những dòng nhỏ này. Nó được nhắm mục tiêu cho iOS và Android vì vậy nó có một loạt bộ xử lý HUGE mà nó có thể chạy ngay bây giờ.

Tôi đang cố gắng thêm ánh sáng thời gian thực cho họ vì hai lý do

1. Tôi đang cố gắng che giấu sự thật rằng tôi không có thời gian kết xuất để xử lý khử răng cưa trên hầu hết các thiết bị.
2. Chủ đề của trò chơi được cho là ánh sáng thuần khiết, hình ảnh đó sẽ trông giống như những thứ đó là ánh sáng thuần khiết.

Tôi đã điều chỉnh một shader mờ gaussian có thể tách rời trong một thời gian khá dài và tôi đã đi đến một điểm của sự thất vọng, tôi chỉ không thể làm cho nó nhìn đúng, có lẽ vấn đề là tôi đang cố gắng che giấu các cạnh lởm chởm của ánh sáng Trong khi đó không làm cho ánh sáng trông mờ.

Vấn đề lớn nhất của tôi là tất cả các biến liên quan đến việc làm cho nó trông tốt nhất.

Tôi rất mới với đồ họa / dựng hình và tôi không phải là một nghệ sĩ. Có lẽ điều khó chịu nhất đối với tôi là tất cả các biến dường như có liên quan. Với ánh sáng tôi đã thấy rất nhiều thay đổi có thể.

• A. Thêm chế độ hòa trộn, chế độ hòa trộn màn hình hoặc một số pha chế khác
• B. Giảm độ mờ và bình thường khác nhau trước khi kết hợp
• C. Sigma của hàm chuông gaussian (Tôi đã sử dụng máy tính khó hiểu này nhưng dường như nó không đưa ra các giá trị giống như tôi thấy người khác có)
• D. Vô hướng trên các giá trị "x" được gửi đến hàm sigma
• E. Thang đo mẫu (làm cho bán kính mờ nhỏ hơn hoặc lớn hơn)
• F. Thay đổi độ phân giải của bộ đệm phát sáng

Làm thế nào để người ta tìm thấy các hằng số "đẹp nhất" khi làm việc với rất nhiều biến như thế này?

Tôi cũng gặp vấn đề vì thời gian giữa tôi thực hiện một chỉnh sửa và thấy nó rất dài mà khó thấy thay đổi, tôi sẽ làm điều đó trong đồ chơi đổ bóng tuy nhiên tôi không thể tải lên hình ảnh này hoặc tạo thủ tục như thế.

Ngay bây giờ tôi thực sự bị mắc kẹt trong sigma của hạt nhân đường cong chuông gaussian, đặc biệt bởi vì tôi đang mã hóa các con số thay vì công thức vì tôi cần tốc độ xử lý. Bạn có thể đề nghị một sigma tốt để sử dụng ?

Sigma và kích thước hạt nhân của bộ lọc Gaussian

Về cách chọn sigma và kích thước hạt nhân (pixel) của Gaussian: bạn đặt sigma dựa trên mức độ mờ bạn muốn (đánh giá nó một cách trực quan) và sau đó chọn kích thước hạt nhân dựa trên sigma. Đây là một trò chơi tìm kích thước hạt nhân thu được đủ đường cong hình chuông (vô hạn về mặt toán học) để trông đẹp mắt, trong khi không quá đắt.

Theo nguyên tắc thông thường, kích thước hạt nhân phải ít nhất gấp 6 lần sigma. Sau đó, hạt nhân mở rộng ra 3 sigmas theo mỗi hướng, đủ để bao phủ gần như toàn bộ trọng lượng của đường cong chuông toán học. Thật tuyệt khi làm tròn kích thước pixel đến số lẻ tiếp theo để bộ lọc sẽ đối xứng. Ví dụ: với sigma = 1,5 px, bạn sẽ sử dụng bộ lọc 9 pixel; với sigma = 2.0 px, sử dụng bộ lọc 13 pixel, v.v.

Ngoài ra, nếu bạn có các giới hạn hiệu suất kiểm soát kích thước hạt nhân bạn có thể sử dụng, thì hãy chia cho 6 để có được sigma tối đa bạn có thể thoát khỏi. (Lưu ý rằng sigma có thể là phân số, vì nó chỉ là một đầu vào cho phương trình đường cong chuông.)

Nhân tiện, một mẹo để có hiệu suất tốt hơn khi làm mờ Gaussian lớn là lấy mẫu hình ảnh xuống, thực hiện một hiệu ứng nhòe nhỏ hơn, sau đó lấy mẫu. Chẳng hạn, để có được hiệu ứng nhòe 13 pixel hiệu quả, bạn có thể giảm mẫu hình ảnh xuống gấp 2 lần (sử dụng bộ lọc song tuyến), sau đó thực hiện làm mờ 7 pixel, sau đó lấy mẫu (sử dụng bộ lọc song tuyến). Nó sẽ trông gần như tốt như mờ 13 pixel, nhưng sẽ nhanh hơn đáng kể.

Tạo bộ lọc phát sáng đẹp mắt

Một mẹo phổ biến với những điều này là sử dụng nhiều Gaussian có bán kính khác nhau, được cộng lại với nhau. Nó tạo ra hiệu ứng phát sáng tốt hơn bất kỳ Gaussian đơn lẻ nào. Ví dụ: đây là một mockup trong Photoshop được tạo ra với ba lớp được trộn lẫn với nhau. Ba Gaussian có kích thước 3px, 5px và 11px (tương ứng với sigma = 0,5px, 0.83px, 1.83px).

Bạn cũng có thể thêm các Gaussian thậm chí lớn hơn để tăng thêm bán kính rõ ràng của ánh sáng. Đây là cách hiệu ứng "nở hoa" tiêu chuẩn được triển khai trong các công cụ trò chơi 3D.

Nếu hiệu suất là một mối quan tâm, Gaussian nhỏ nhất có thể được thay thế bằng một bản sao của hình ảnh gốc không bị mờ; hiệu ứng kết quả sẽ trông sắc nét hơn, không quá mềm mại, nhưng vẫn sẽ có một ánh sáng bao quanh nó. Như đã đề cập trước đây, Gaussian lớn hơn có thể được thực hiện bằng cách downsampling, làm mờ và upampling; và việc lấy mẫu có thể được thực hiện bằng cách sử dụng bộ lọc song tuyến phần cứng, được gấp lại thành đường chuyền trộn các lớp lại với nhau.

Jaggies

Bạn sẽ nhận thấy rằng răng cưa vẫn có thể nhìn thấy trong một số khu vực của hình ảnh trên. Thật không may, làm mờ không hiệu quả lắm trong việc che giấu răng cưa trừ khi bán kính mờ khá lớn. Không có cách nào dễ dàng để sử dụng quy trình hậu kỳ để loại bỏ răng cưa: cách tốt nhất để tránh chúng là không hiển thị chúng ở vị trí đầu tiên. :)

Tôi nghe bạn nói rằng bạn không thể sử dụng MSAA vì lý do hiệu suất, nhưng có thể là một lựa chọn khác. Tùy thuộc vào cách bạn hiển thị các vệt sáng, bạn có thể tăng một chút kích thước của chúng và viết một shader áp dụng một gradient để làm mờ màu trong một vài pixel của cạnh. Điều đó sẽ giúp họ trông mượt mà hơn. Đây là một shadertoy thể hiện sự sụp đổ cạnh rộng 1px được sử dụng để khử răng cưa một hình dạng thủ tục.