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.
