Oglądałem trochę Rocket League i zauważyłem, że były animowane naklejki i koła.
.
Chciałbym zaimplementować coś podobnego do efektów na powyższym obrazku.
Jak miałbym pisać o Unity Shaderze, aby uzyskać efekt koła?
Nie wiem dużo o Shaderach, ale czy mogę edytować standardowy Unity Shader, aby uzyskać efekt animacji?
_Time
zmienną, którą można dodać do współrzędnych tekstury w module cieniującym (wierzchołek), aby uzyskać tanie efekty przewijania. Efekt sześciokąta również byłby prosty. Jeśli edytujesz pytanie, aby podświetlić tylko jeden efekt i pytasz „jak zaimplementuję to w module cieniującym Unity”, prawdopodobnie możemy ci pomóc. Pamiętaj, aby określić, czy moduł cieniujący musi reagować na oświetlenie / cieniowanie, ponieważ ma to wpływ na sposób jego pisania.Odpowiedzi:
Zbuduję to w kilku warstwach, abyś mógł zobaczyć, jak to się łączy.
Zacznij od utworzenia nowego modułu cieniującego w Unity, wybierając
Create --> Shader --> Unlit
albo z menu Zasoby, albo z menu kontekstowego prawym przyciskiem myszy w oknie projektu.W górnym bloku dodamy
_ScrollSpeeds
parametr kontrolujący szybkość ruchu tekstury w każdym kierunku:To ujawnia nową 4-komponentową właściwość float w inspektorze materiałów, z przyjazną nazwą „Prędkości przewijania” (podobnie do dodawania
public
lubSerialized
zmiennej doMonoBehaviour
skryptu)Następnie użyjemy tej zmiennej w module cieniującym wierzchołek do przesunięcia współrzędnych tekstury (
o.uv
), dodając tylko dwa wiersze do domyślnego modułu cieniującego:Uderz to w quad (z uroczą swobodną teksturą żyrafy autorstwa Kenneya ), a otrzymasz:
Aby uzyskać przewijanie tekstury na zewnątrz w pierścieniu, możemy po prostu użyć siatki podzielonej jak pajęczyna, ze współrzędną UV v zwiększającą się od środka na zewnątrz. Ale to da same artefakty w kształcie piły. Zamiast tego pokażę, jak możemy obliczyć nasze promieniowanie UV na fragment.
Jest to nieco bardziej kosztowne, zarówno z powodu operacji wyzwalania i długości (które są droższe niż podstawowa matematyka) oraz ponieważ nie jest tak wydajne przewidywanie i buforowanie danych tekstur w sprzęcie podczas obliczania texcoordów na fragment, w porównaniu do samej interpolacji między wierzchołkami. Ale taki mały efekt specjalny nie jest nadmierny.
To daje nam coś takiego (tutaj zwiększyłem parametry kafelków w materiale, aby było wyraźniej, co się dzieje - owinięcie tylko jednego powtórzenia płytki wokół koła wygląda na zniekształcone i dziwne)
Wreszcie, aby zabarwić teksturę przewijanym gradientem, możemy po prostu dodać gradient jako drugą teksturę i pomnożyć je razem.
Najpierw dodajemy nowy parametr tekstury u góry:
I zadeklaruj to w naszym bloku CGPROGRAM, aby moduł cieniujący CG mógł to zobaczyć:
Następnie zaktualizuj nasz moduł cieniujący fragmenty, aby używał obu tekstur:
A teraz nasza żyrafa robi się naprawdę trippy:
Przy nieco bardziej artystycznym doborze tekstur i szybkości przewijania może to dać efekt podobny do pokazanego w pytaniu.
W wersji, którą pokazałem powyżej, możesz zauważyć dwa małe artefakty:
Twarze w pobliżu środka koła stają się rozciągnięte / chude / spiczaste, a następnie, gdy poruszają się na zewnątrz, stają się zgniecione / szerokie.
To zniekształcenie występuje, ponieważ mamy stałą liczbę twarzy na obwodzie, ale obwód, który obejmują, powiększa się wraz ze wzrostem promienia, a ich wysokość pozostaje taka sama.
Możemy to naprawić poprzez ponowne mapowanie pionowego komponentu próbki tekstury, aby podążać za krzywą logarytmiczną, więc powtórzenia tekstury są bardziej oddalone od siebie, gdy promień się zwiększa, i bliżej siebie w kierunku środka. (W rzeczywistości daje to nam nieskończony regres coraz mniejszych żyraf ...)
W środkowej lewej części kwadratu znajduje się rząd jednego lub dwóch rozmytych pikseli.
Dzieje się tak, ponieważ GPU patrzy na dwie sąsiednie współrzędne próbki tekstury, aby dowiedzieć się, jakiego filtrowania użyć. Gdy próbki są blisko siebie, tekst jest wyświetlany jako duży / zamknięty i pokazuje najbardziej szczegółowy poziom mip. Kiedy próbki są daleko od siebie, domyślamy się, że musimy pokazywać teksturę z niewielkim powiększeniem lub z dużej odległości, i pobiera próbki z mniejszej / rozmytej mipmapy, aby upewnić się, że nie otrzymamy błyszczących artefaktów aliasingowych.
Problem jest tutaj, jesteśmy w punkcie zawinięcia we współrzędnych biegunowych, od -180 do 180 stopni. Próbujemy więc z bardzo podobnych punktów w naszej powtarzalnej przestrzeni tekstur, nawet jeśli ich współrzędne numeryczne sprawiają, że wyglądają, jakby były daleko od siebie. Możemy więc dostarczyć własne wektory gradientu próbkowania, aby to skorygować.
Oto wersja z następującymi poprawkami:
źródło
tex2Dgrad
naprawia artefakt filtrowania, w którym kąt zawija się od -pi do + pi (to jest cienka linia rozmytych pikseli po lewej stronie). Oto