WebGL/GLSL - jak działa Shader?
I ' ve been knocking around Shadertoy - https://www.shadertoy.com/ - Ostatnio, chcąc dowiedzieć się więcej o OpenGL i GLSL w szczególności.
Z tego co do tej pory Rozumiem, użytkownik OpenGL musi najpierw przygotować całą geometrię do użycia i skonfigurować serwer OpenGL (ilość dozwolonych świateł, przechowywanie tekstur itp.). Gdy to zrobisz, użytkownik musi dostarczyć co najmniej jeden program do cieniowania wierzchołków i JEDEN program do cieniowania fragmentów przed programem OpenGL kompilacji.
Jednak, kiedy patrzę na próbki kodu w Shader, widzę tylko JEDEN program shader, a większość użytej geometrii wydaje się być zapisana bezpośrednio w kodzie GLSL.
Jak to działa?
Domyślam się, że vertex shader jest już przygotowany z góry i że edytowalny/sample shader jest tylko fragment shader. Ale to nie wyjaśnia geometrii w niektórych bardziej złożonych przykładach...
Czy ktos moze wyjasnic jak Shadertoy działa?
4 answers
[11]}ShaderToy jest narzędziem do pisania shaderów pikseli.
Czym są shadery pikseli?
Jeśli wyrenderujesz pełnoekranowy kwadrat, co oznacza, że każdy z czterech punktów jest umieszczony w jednym z czterech rogów widoku, wtedy fragment shader dla tego kwadratu nazywa się Pixel shader, ponieważ można powiedzieć, że teraz każdy fragment odpowiada dokładnie jednemu pikselowi ekranu. Tak więc pixel shader to fragment shader dla pełnoekranowego quada.
Więc atrybuty są zawsze takie same i tak jest wierzchołkiem:
positions = [ [-1,1], [1,1], [-1,-1], [1,-1] ]
uv = [ [0.0, 0.0], [1.0, 0.0], [0.0, 1.0], [1.0, 1.0] ]
I ten quad jest renderowany jako TRIANGLE_STRIP.
Ponadto, zamiast jawnie ustawiać UVs, niektórzy wolą używać wbudowanej zmiennej fragment shader gl_FragCoord, która jest następnie dzielona przez, na przykład, uniform vec2 uScreenResolution.
Vertex shader:
attribute vec2 aPos;
attribute vec2 aUV;
varying vec2 vUV;
void main() {
gl_Position = vec4(aPos, 0.0, 1.0);
vUV = aUV;
}
I fragment shader wyglądałby wtedy mniej więcej tak:
uniform vec2 uScreenResolution;
varying vec2 vUV;
void main() {
// vUV is equal to gl_FragCoord/uScreenResolution
// do some pixel shader related work
gl_FragColor = vec3(someColor);
}
iResolution (aka uScreenResolution), iGlobalTime, iMouse,... które możesz wykorzystać w swoim pikselu shader.
Do kodowania geometrii bezpośrednio do modułu fragment shader (aka pixel shader), programista używa czegoś, co nazywa się ray-tracing. Jest to dość złożony obszar programowania, ale w skrócie: Prezentujesz swoją geometrię za pomocą niektórych formuł matematycznych, a później w pixel shader, gdy chcesz sprawdzić, czy jakiś piksel jest częścią twojej geometrii, używasz tej formuły, aby pobrać te informacje. Trochę Google-ing powinno dać Ci mnóstwo zasobów, aby przeczytać, co i jak Ray tracers są zbudowany dokładnie, a to może pomóc: Jak zrobić ray tracing w nowoczesnym OpenGL?
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:41
ShaderToy wyświetla prosty GLSL, który jest zaprogramowany do obsługi całego oświetlenia, geometrii itp., to nie geometria wierzchołków, to raycasting większość, rzeczy 3D, lub można zrobić shadery 2D, itp.
W języku GLSL można zaprogramować dowolną matematykę kolorów i przestrzeni. Kombinacje zaawansowanych algorytmów sprawia, że izosurfaces, kształty, a następnie tekstury projekt na izosurfaces i raycasting, wysyłając wyimaginowane linie od widza na odległość, przechwytuje wszystko na drodze, istnieje wiele techniki raycastingu dla 3D.
Visit www.iquilezles.org dla idei różnych narzędzi używanych w grafice shadertoy / glsl
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-29 21:24:51
To po prostu wciskanie kodu źródłowego GLSL pixel shader bezpośrednio na kartę graficzną.Prawdziwa magia dzieje się w niesamowicie sprytnych algorytmach, których ludzie używają do tworzenia niesamowitych efektów, takich jak Ray marching, Ray casting, ray tracing. najlepiej rzucić okiem na inne piaskownice Live GLSL typu: http://glsl.heroku.com/ i http://webglplayground.net/.
Jego zasadniczo tworząc okno zazwyczaj dwa trójkąty, które reprezentują ekran, a następnie shader działa na każdy piksel jak Ray tracer.
Patrzyłem na nie od jakiegoś czasu, a algorytmy, których ludzie używają, są oszałamiające, będziesz potrzebował poważnych matematycznych kotletów i poszukaj kodu źródłowego "demo coding", aby móc je ogarnąć. Wielu na Shader toy, po prostu rozwal swój umysł !
Podsumowując, wystarczy nauczyć się kodowania i algorytmów GLSL shader. Nie ma łatwego rozwiązania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-18 18:31:53
Tradycyjnie w grafice komputerowej geometria jest tworzona przy użyciu wierzchołków i renderowana przy użyciu jakiejś formy materiałów (np. tekstur z oświetleniem). W GLSL shader wierzchołków przetwarza wierzchołki, a Shader fragmentów (pikseli) przetwarza materiały.
Ale nie jest to jedyny sposób definiowania kształtów. Podobnie jak tekstura może być zdefiniowana proceduralnie( zamiast szukać jej tekstur), kształt może być zdefiniowany proceduralnie (zamiast szukać jej geometrii).
Tak, podobnie dzięki ray tracingowi cieniowanie fragmentów jest w stanie tworzyć kształty bez określania ich geometrii przez wierzchołki.
Jest jeszcze więcej sposobów definiowania kształtów. Dane głośności (voxels), krzywe powierzchni i tak dalej. Tekst grafiki komputerowej powinien obejmować niektóre z nich.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-14 13:41:28