ShaderToy po polsku — pierwsze starcie

W Listopadzie 2017 na Wydziale Fizyki i Astronomii UWr zorganizowaliśmy pierwsze wrocławskie warsztaty pisania shaderów w języku GLSL na platformie ShaderToy. Uczestnikami byli głównie studenci naszej Informatyki Stosowanej i Systemów Pomiarowych oraz Fizyki, ale mieliśmy też gości z innych uczelni, a nawet szkół ponadpodstawowych.

Wykład YouTube: https://youtu.be/4E0EmFcTh-0

Narzędzie ShaderToy.com służy, jak wskazuje jego nazwa, do zabawy z programami cieniowania. Jest ono zbudowane dość specyficznie, bo program cieniowania uruchamia się tu dla każdego piksela rysunku który jest przez niego generowany. Dzięki temu, że wszystko działa na karcie graficznej obliczenia są bardzo szybkie i możemy zastosować wiele ciekawych technik do wygenerowania grafiki i animacji zarówno 2D jak i 3D. Co więcej, sprytny programista napisze nawet prostą grę, a jeszcze sprytniejszy wykorzysta dodatkowe bufory i napisze nawet skomplikowaną.. Ale my nie o tym, nas będzie tu motywowało programowanie dla zabawy.. Więcej o motywacji przeczytasz w pierwszej odsłonie tego tekstu: ShaderToy po polsku — demoscena.

Zajmiemy się trzema technikami, które pozwolą początkującym rozpocząć przygodę z ShaderToy.com:

1. Funkcja odległości w 2D
2. Deformacja powierzchni
3. Ray marching.

Omówimy pokrótce wszystkie z nich zaczynając od krótkiego samouczka.

Pierwszy Shader

Aby stworzyć jakiś swój własny shader proszę kliknij “New”, otworzy się taki standardowy template shadera (kod po prawej stronie), a po lewej stronie pojawi się jego treść. Niewiele mówiąc sugeruję zamienić (wkleić to co pomiędzy start i koniec) program w okienku po prawej stronie na:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 vec2 uv = fragCoord.xy / iResolution.xy;
 vec3 col;
 if(uv.y<0.5) col = vec3(1.0,0.0,0.0);
 else col = vec3(1.0,1.0,1.0); 
 fragColor = vec4(col,1); 
}

Następnie należy albo nacisnąć przycisk “Play” na dole okienka z kodem, albo wcisnąć “Lewy Alt + Enter” aby wykonać Shader. Niech efekt będzie niespodzianką — i tu zachęcam do zabawy z parametrami. Wszelkie “0.0” czy “1.0” czy “0.5” pozmieniane w kodzie który pani przekleiła do okienka spowodują pewne zmiany w tym rysunku po lewej stronie.

Technika 1: Funkcja odległości w 2D

…

(chcesz więcej..? napisz: maciej.matyka@gmail.com — nic tak nie pomaga jak email od czytelnika ;)