Programowanie graficzne replikujące przejście z Chrono Trigger w bramie

Ostatnio zacząłem grać w tę grę, a to naprawdę wzbudziło moje zainteresowanie

Przejście w ruchu można zobaczyć od ~ 12: 08

Wydaje się, że dzieje się tam kilka interesujących matematyki. Wydaje się, że istnieją dwa różne poglądy połączone razem. Niebieskie zmarszczki są renderowane najpierw w tle, a następnie fioletowe fale oscylacyjne wydają się być renderowane w jakiejś pseudo projekcji 3D.

To, jak dokładnie doszli do tego wyniku, jest poza mną, a ciekawość zwyciężyła mnie.

Nie spodziewam się, że wiele osób wiedziałoby, jak to się w szczególności robi, ale jeśli ktoś wykonałby rozbudowane programowanie graficzne, być może mógłby mnie oświecić.

Próbowałem powielić efekt za pomocą modułu cieniującego.

Centrum Shader00: https://www.shadertoy.com/view/XsXSz2

Strony Shader01: https://www.shadertoy.com/view/4sXSz2

:) możesz, jak powiedział Byte56, skonfigurować trzy samoloty. Kamera skierowana w płaszczyznę bezpośrednio do przodu z Shader00, a następnie dwie płaszczyzny z Shader01, być może, jak wspomniał RandyGaul, góra / dół nierównomiernie wyskalowane, aby dać złudzenie głębi.

Uważam, że powinny one dać wystarczający wygląd 3D, aby przekonać.

Oba moduły cieniujące nie są dokładnie takie same, jak w linku do youtube (również są bardziej przybliżone). Jednak wierzę, że te shadery mogą, mam nadzieję, dać ci miejsce do rozpoczęcia budowy własnej wersji.

Samouczek: jak zrobić prosty wzór w paski.

Każdy punkt na płaszczyźnie ma współrzędną. Próba stworzenia efektu cieniowania polega na wizualizacji matematyki 2D na płaszczyźnie. Tutaj przedstawię prosty przykład.

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

Kolor czerwony reprezentuje współrzędną x, a zielony odcień reprezentuje współrzędną y. Na razie chcemy stworzyć najprostszy efekt shadera; pasek. W tym samouczku nie będziemy potrzebować wartości UV.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

Widać, że czerwony odcień staje się intensywniejszy, gdy kieruje się na prawą stronę. Wynika to z faktu, że wartość x współrzędnej rośnie wraz z przejściem na prawą stronę; współrzędna x lewego końca zaczyna się od 0, a współrzędna x prawego końca wynosi 1.

Ponieważ mamy to podstawowe zrozumienie, spróbujmy czegoś „intuicyjnego”

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

Tam masz wzór w paski. Czekaj ... to nie wygląda całkiem dobrze. Tak, to tylko czerwony i czarny. Wzór w paski składa się z więcej niż dwóch sekcji kolorów. Tam...!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

ale co jeśli chcemy zrobić liczbę N pasków?

Próbuję pokazać, że jeśli spróbujesz podejść do programowania shadera z bardziej tradycyjną „logiką” programowania, prawdopodobnie nie uda ci się. Jeśli chodzi o shader, chodzi przede wszystkim o matematykę.

Mówiąc o matematyce, jaki wzór najbardziej przypomina wzór „pasków”? Innymi słowy, jakie jest równanie, które wygląda jak paski? Tak. Y = sin (X). Jednak nasza wartość X wynosi od 0,0 ~ 1,0 Jeśli chcemy użyć Y = sin (X), chcemy, aby nasza wartość x była w zakresie od 0,0 ~ 6,28 (czyli około 2 PI)

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Mamy teraz „pas” pod względem wzoru generowanego przez równanie. Dlaczego powinniśmy przyjąć takie podejście? Może to nie tylko być szybsze, ale także eliminuje potrzebę pisania brzydkich warunków „jeśli”, aby mieć liczbę N pasków. Gdybyśmy chcieli mieć więcej niż jeden pasek, moglibyśmy po prostu rozszerzyć wzór poprzez dalsze zwiększenie maksymalnej wartości X.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Można powiedzieć, że ten moduł cieniujący nie tworzy idealnego paska jak z wczesnego modułu cieniującego, ale tak naprawdę wszystko, co musisz zrobić, to napisać bardziej odpowiednie równanie!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

Weeee ~~~

Dalej: Jak zrobić falisty wzór w paski.