WebGL/GLSL – Wie funktioniert ein ShaderToy?

Ich habe Shadertoy herumgeklopft – https://www.shadertoy.com/ – kürzlich, um mehr über OpenGL und insbesondere GLSL zu erfahren.

Soweit ich das bisher verstanden habe, muss der OpenGL-Benutzer zunächst die gesamte zu verwendende Geometrie vorbereiten und den OpenGL-Server konfigurieren (Anzahl der zulässigen Lichter, Texturspeicherung usw.). Sobald dies erledigt ist, muss der Benutzer mindestens ein Vertex-Shader-Programm und ein Fragment-Shader-Programm bereitstellen, bevor ein OpenGL-Programm kompiliert wird.

Wenn ich mir jedoch die Codebeispiele auf Shadertoy ansehe, sehe ich immer nur ein Shader-Programm, und der größte Teil der verwendeten Geometrie scheint direkt in den GLSL-Code geschrieben zu sein.

Wie funktioniert das?

Ich vermute, dass ein Vertex-Shader bereits im Voraus vorbereitet ist und dass der bearbeitbare/Beispiel-Shader nur ein Fragment-Shader ist. Aber das erklärt dann nicht die Geometrie in einigen der komplexeren Beispiele …

Kann jemand erklären, wie Shadertoy funktioniert?

ShaderToy ist ein Tool zum Schreiben von Pixel-Shadern.

Was sind Pixelshader?

Wenn Sie ein Vollbild-Quad rendern, was bedeutet, dass jeder der vier Punkte in einer der vier Ecken des Ansichtsfensters platziert ist, wird der Fragment-Shader für dieses Quad als Pixel-Shader bezeichnet, da Sie sagen könnten, dass jetzt jedes Fragment genau einem entspricht Pixel des Bildschirms. Ein Pixel-Shader ist also ein Fragment-Shader für ein Vollbild-Quad.

Attribute sind also immer gleich und ein Vertex-Shader auch:

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] ]

Und dieses Quad wird als gerendert TRIANGLE_STRIP. Auch statt Einstellung UVs Manche ziehen es ausdrücklich vor, die eingebaute Variable des Fragment-Shaders zu verwenden gl_FragCoorddie dann beispielsweise durch a dividiert wird 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;
}

Und der Fragment-Shader würde dann etwa so aussehen:

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);
}

ShaderToy kann Sie standardmäßig mit ein paar Uniformen versorgen, iResolution (aka uScreenResolution), iGlobalTime, iMouse,… die Sie in Ihrem Pixel-Shader verwenden können.

Um Geometrie direkt in den Fragment-Shader (auch bekannt als Pixel-Shader) zu codieren, verwenden Entwickler etwas namens Raytracing. Das ist ein ziemlich komplexer Bereich der Programmierung, aber kurz gesagt: Sie präsentieren Ihre Geometrie durch einige mathematische Formeln und später im Pixel-Shader, wenn Sie überprüfen möchten, ob ein Pixel Teil Ihrer Geometrie ist, verwenden Sie diese Formel, um diese Informationen abzurufen. Ein bisschen Googlen sollte Ihnen viele Ressourcen geben, um zu lesen, was und wie Raytracer genau gebaut werden, und dies könnte helfen: How to do raytracing in modern OpenGL?

Hoffe das hilft.

ShaderToy zeigt einfaches GLSL an, das so programmiert ist, dass es die gesamte Beleuchtung, Geometrie usw. handhabt, es ist keine Vertex-Geometrie, es sendet das meiste davon, das 3D-Zeug, oder Sie können 2D-Shader usw. ausführen.

Jede Farb- und Raummathematik kann in der GLSL-Sprache programmiert werden. Kombinationen fortschrittlicher Algorithmen erstellen Isoflächen, Formen und projizieren dann Texturen auf Isoflächen, und Raycasting, das Senden imaginärer Linien vom Betrachter in die Ferne, fängt alles ab, was im Weg steht. Es gibt viele Raycasting-Techniken für 3D.

Besuch www.iquilezles.org für eine Vorstellung von den verschiedenen Werkzeugen, die in Shadertoy/Glsl-Grafiken verwendet werden

Es drückt im Grunde nur den GLSL-Pixel-Shader-Quellcode direkt auf die Grafikkarte. Die wahre Magie geschieht in den unglaublich cleveren Algorithmen, mit denen die Leute erstaunliche Effekte wie Ray Marching, Ray Casting und Ray Tracing erzeugen. Am besten schaust du dir ein paar andere Live-GLSL-Sandboxen an wie: http://glsl.heroku.com/ und http://webglplayground.net/. Es erstellt im Grunde ein Fenster, typischerweise zwei Dreiecke, die den Bildschirm darstellen, dann arbeitet der Shader auf jedem Pixel genau wie ein Raytracer.
Ich habe mir diese jetzt schon eine Weile angesehen, und die Algorithmen, die die Leute verwenden, sind überwältigend. Sie müssen sich ernsthaft mit Mathematik beschäftigen und den Quellcode für “Demo-Codierung” nachschlagen, um sich mit ihnen vertraut machen zu können. Viele auf Shader-Spielzeug, einfach umhauen! Zusammenfassend müssen Sie also nur die GLSL-Shader-Codierung und -Algorithmen lernen. Keine einfache Lösung.

Shadertoy heißt “SPIELZEUG” aus einem Grund. Es ist im Grunde ein Puzzle. Gegeben sei nur eine Funktion, der als Eingabe die aktuelle Pixelposition mitgeteilt wird, schreibe eine Funktion, die ein Bild erzeugt.

Die Website richtet WebGL ein, um ein einzelnes Quad (Rechteck) zu zeichnen, und lässt Sie dann eine Funktion bereitstellen, die das aktuelle Pixel, als das gerendert wird, weitergibt fragCoord. Sie verwenden das dann, um einige Farben zu berechnen.

Zum Beispiel, wenn Sie dies getan haben

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec4 red = vec4(1, 0, 0, 1);
    vec4 green = vec4(0, 1, 0, 1);
    fragColor = mix(red, green, sin(fragCoord.x / 10.0) * 0.5 + 0.5);
}

Sie würden solche roten und grünen Streifen bekommen

https://www.shadertoy.com/view/3l2cRz

Shadertoy bietet einige andere Eingaben. Am gebräuchlichsten ist die Auflösung, die als gerendert wird iResolution. Wenn Sie die teilen fragCoord durch iResolution dann erhalten Sie Werte, die von 0 bis 1 auf der gesamten Leinwand und von 0 bis 1 nach unten gehen, sodass Sie Ihre Funktionsauflösung problemlos unabhängig machen können.

Dadurch können wir so eine Ellipse in der Mitte zeichnen

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // uv goes from 0 to 1 across and up the canvas
    vec2 uv = fragCoord / iResolution.xy;
    
    vec4 red = vec4(1, 0, 0, 1);
    vec4 green = vec4(0, 1, 0, 1);

    float distanceFromCenter = distance(uv, vec2(0.5));
    fragColor = mix(red, green, step(0.25, distanceFromCenter));
}

was produziert

Die zweithäufigste Eingabe ist iTime in Sekunden, die Sie die animierten Parameter in Ihrer Funktion im Laufe der Zeit verwenden können.

Wenn Sie also mit diesen Eingaben genug Mathematik anwenden, können Sie ein unglaubliches Bild wie zum Beispiel erstellen dieser Shadertoy-Shader erzeugt dieses Bild

Was erstaunlich ist, dass jemand die Mathematik herausgefunden hat, die erforderlich ist, um dieses Bild zu erzeugen, wenn nur die oben erwähnte Eingabe gegeben ist.

Viele der erstaunlichsten Shader von Shadertoy verwenden eine Technik namens Ray Marching und etwas Mathematik namens “signed distance fields”, über die Sie lesen können hier

Aber ich denke, es ist wichtig, darauf hinzuweisen, dass es zwar viele coole Dinge gibt, die man von Shadertoy-Shadern lernen kann, aber viele von ihnen gelten nur für dieses “Puzzle” von “Wie erstelle ich ein schönes Bild mit nur einer Funktion, deren Eingabe a ist Pixelposition und deren Ausgabe eine einzelne Farbe ist”. Sie antworten nicht “wie soll ich Shader für eine performante App schreiben”.

Vergleichen Sie mit dem Delfin oben zu diesem Schnellbootspiel

https://www.youtube.com/watch?v=7v9gZK9HqqI

Der Delphin-Shadertoy-Shader läuft im Vollbildmodus auf meiner NVidia GeForce GT 750 mit etwa 2 Bildern pro Sekunde, während das Speedboat-Spiel mit 60 fps läuft. Der Grund, warum das Spiel schnell läuft, ist, dass es traditionellere Techniken verwendet, um Formen mit projizierten Dreiecken zu zeichnen. Selbst eine NVidia 1060 GTX kann diesen Delphin-Shader im Vollbildmodus nur mit etwa 10 Bildern pro Sekunde ausführen.

Traditionell wird in der Computergrafik Geometrie unter Verwendung von Scheitelpunkten erstellt und unter Verwendung irgendeiner Form von Materialien (z. B. Texturen mit Beleuchtung) gerendert. In GLSL verarbeitet der Vertex-Shader die Vertices und der Fragment (Pixel)-Shader verarbeitet die Materialien.

Aber das ist nicht die einzige Möglichkeit, Formen zu definieren. So wie eine Textur prozedural definiert werden könnte (anstatt ihre Texel nachzuschlagen), könnte eine Form prozedural definiert werden (anstatt ihre Geometrie nachzuschlagen).

Ähnlich wie beim Raytracing sind diese Fragment-Shader also in der Lage, Formen zu erstellen, ohne dass ihre Geometrie durch Scheitelpunkte definiert wird.

Es gibt noch mehr Möglichkeiten, Formen zu definieren. B. Volumendaten (Voxel), Oberflächenkurven und so weiter. Ein Computergrafik-Text sollte einige davon abdecken.