Ulepszenie modułu cieniującego, aby wyglądał lepiej


9

Mam prostą grę, której przedmiotem są te małe linie. Jest ukierunkowany na iOS i Androida, więc ma OGROMNĄ gamę procesorów, na których mógłby teraz działać.

wprowadź opis zdjęcia tutaj

Próbuję dodać im blask w czasie rzeczywistym z dwóch powodów

  1. Próbuję ukryć fakt, że nie mam czasu renderowania, aby przetworzyć wygładzanie na większości urządzeń.
  2. Tematem gry powinno być czyste światło, a więc ten obraz powinien wyglądać tak, jakby te rzeczy były czystym światłem.

Od jakiegoś czasu poprawiam separator gaussowskiego rozmycia i doszedłem do punktu frustracji, po prostu nie mogę go dobrze wyobrazić, być może problem polega na tym, że próbuję daremnie ukryć postrzępione krawędzie światła tymczasem nie sprawia, że ​​światło wygląda rozmazane.

Moim największym problemem są wszystkie zmienne związane z tym, aby wyglądał jak najlepiej.

Jestem bardzo nowy w grafice / renderingu i nie jestem artystą. Być może najbardziej frustrującą rzeczą w renderowaniu są dla mnie wszystkie zmienne, które wydają się być w to zaangażowane. Z blaskiem widziałem tyle możliwych zmian.

  • A. Dodaj tryb mieszania, tryb mieszania ekranu lub inną miksturę
  • B. Ważenie rozmycia i normalnie inaczej przed kombinacją
  • C. Sigma funkcji dzwonka gaussowskiego (korzystam z tego mylącego kalkulatora, ale wydaje się, że nie daje tych samych wartości, które widzą inni ludzie)
  • D. Skalary wartości „x” wysyłanych do funkcji sigma
  • E. Skala próbki (zmniejszająca lub zwiększająca promień rozmycia)
  • F. Zmiana rozdzielczości bufora poświaty

Jak znaleźć „najlepiej wyglądające” stałe podczas pracy z tak wieloma zmiennymi jak ta?

Mam również problemy, ponieważ czas między mną a poprawką jest długi, więc trudno jest dostrzec zmiany. Zrobiłbym to w zabawce shadera, ale nie mogę załadować tego obrazu lub wygenerować podobnej procedury.

W tej chwili naprawdę utknąłem na sigmie gaussowskiego jądra krzywej dzwonowej, szczególnie dlatego, że koduję liczby, a nie formułę, ponieważ potrzebuję szybkości procesora. Czy możesz zasugerować dobry Sigma do użycia ?

Odpowiedzi:


8

Sigma i rozmiar jądra filtra Gaussa

Jeśli chodzi o sposób wyboru sigmy i rozmiaru jądra (pikseli) Gaussa: ustawiasz sigmę na podstawie tego, jak szeroki chcesz rozmycie (oceniając go wizualnie), a następnie wybierasz rozmiar jądra na podstawie sigmy. Jest to gra polegająca na znalezieniu rozmiaru jądra, który uchwyci wystarczającą (matematycznie nieskończoną) krzywą dzwonka, aby wyglądać dobrze, a jednocześnie nie jest zbyt drogi.

Zasadniczo rozmiar jądra powinien być co najmniej 6 razy większy niż sigma. Następnie jądro rozciąga się na 3 sigmy w każdym kierunku, co wystarcza, aby pokryć prawie cały ciężar matematycznej krzywej dzwonowej. Przyjemnie jest także zaokrąglić rozmiar piksela do następnej liczby nieparzystej, aby filtr był symetryczny. Na przykład przy sigma = 1,5 piksela użyłbyś 9-pikselowego filtra; z sigma = 2,0 px, użyj 13-pikselowego filtra itp.

Alternatywnie, jeśli masz ograniczenia wydajności, które kontrolują, jak duży rozmiar jądra możesz użyć, to podziel przez 6, aby uzyskać maksymalną sigmę, z której możesz uciec. (Zauważ, że sigma może być ułamkowa, ponieważ jest to tylko dane wejściowe do równania krzywej dzwonowej).

Nawiasem mówiąc, sztuczką, aby uzyskać lepszą wydajność na dużych rozmytach gaussowskich, jest próbkowanie obrazu w dół, wykonywanie mniejszego rozmycia, a następnie próbkowanie w górę. Na przykład, aby uzyskać skuteczne rozmycie 13-pikselowe, możesz próbkować obraz w dół 2x (przy użyciu filtrowania dwuliniowego), a następnie wykonać rozmycie 7-pikselowe, a następnie próbkować w górę (przy użyciu filtrowania dwuliniowego). Będzie wyglądał prawie tak dobrze, jak rozmycie 13 pikseli, ale będzie znacznie szybszy.

Stworzenie dobrze wyglądającego filtra żarowego

Częstą sztuczką jest użycie wielu Gaussów o różnym promieniu, zsumowanych. Zapewnia lepszy efekt jarzenia niż sam pojedynczy gaussowski. Na przykład, tutaj jest makieta w Photoshopie utworzona z trzech warstw połączonych ze sobą. Trzej Gaussianie mają rozmiary 3px, 5px i 11px (odpowiednio sigma = 0,5px, 0,83px, 1,83px odpowiednio).

naśladowany filtr kwitnienia

Możesz także dodać jeszcze większych Gaussianów, aby jeszcze bardziej zwiększyć widoczny promień blasku. W ten sposób zaimplementowano standardowy efekt „rozkwitu” w silnikach gier 3D.

Jeśli problemem jest wydajność, najmniejszy gaussowski można zastąpić kopią niewyraźnego obrazu oryginalnego; uzyskany efekt będzie wyglądał ostrzej, nie tak miękko, ale nadal będzie otaczał go blask. Jak wspomniano wcześniej, większych Gaussianów można dokonać przez próbkowanie w dół, rozmycie i próbkowanie w górę; a próbkowanie w górę można wykonać za pomocą sprzętowego filtrowania dwuliniowego, złożonego w pasmo, które łączy ze sobą warstwy.

Jaggies

Zauważysz, że postrzępienia są nadal widoczne w niektórych obszarach powyższego obrazu. Niestety, rozmycie nie jest bardzo skuteczne w ukrywaniu jaggies, chyba że promień rozmycia jest dość duży. Nie ma łatwego sposobu na wykorzystanie postprocesu, aby pozbyć się jaggies: najlepszym sposobem na ich uniknięcie jest nie renderowanie ich w pierwszej kolejności. :)

Słyszę, że nie możesz używać MSAA ze względu na wydajność, ale może to być inna opcja. W zależności od sposobu renderowania śladów blasku możesz być w stanie nieznacznie zwiększyć ich rozmiar i napisać moduł cieniujący, który zastosuje gradient, aby rozjaśnić kolor w odległości kilku pikseli od krawędzi. To powinno pomóc im wyglądać gładko. Oto shadertoy, który pokazuje opadanie krawędzi o szerokości 1 piksla używane do wygładzania kształtu proceduralnego.


@Nathan_Reed Zastosowałem większość twoich wskazówek, z wyjątkiem tego, że zamiast robić MSAA, które, co dziwne, zrobiło to bez większego trafienia przy 2x. Jeśli miałem pytanie dotyczące dodania kolejnych wyróżnień do bieżącego efektu, czy powinienem edytować pytanie lub zrobić nowe?
J.Doe

@ J.Doe Świetnie, cieszę się, że to działa! Powiedziałbym, że lepiej zadać nowe pytanie o poprawianiu efektu, jeśli masz określony wygląd, którego szukasz.
Nathan Reed,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.