201111Dez

Shader Toy: Interaktive Beispiele für WebGL-Shader

WebGL steckt inzwischen nicht mehr in den Kinderschuhen, sondern erfreut sich immer mehr Akzeptanz. Frameworks, Tutorials und diverse Projekte zeigen schon heute, was mit dem Webstandard möglich ist. Und dennoch gibt es auch ältere Projekte, die schon mit den experimentellen Versionen von WebGL beeindruckende Effekte aufgezeigt haben. Dazu zählt etwa das Shader Toy von Iñigo Quilez, mit dem sich 43 vordefinierte Shader ausprobieren und verändern lassen.

Shader Toy

Bei einem Shader handelt es sich um ein Programm, das durch GLSL (OpenGL Shading Language) Anweisungen an die Grafikkarte übermitteln kann. Damit wird also die GPU direkt angesprochen und hier liegt der eigentliche Vorteil, denn erst dadurch wird Hardwarebeschleunigung möglich. Im Bezug auf WebGL wird dies durch HTML5 bzw. "canvas.getContext('webgl')" realisiert: GLSL-Befehle (so auch die Hauptfunktion "void main()") können an einen Vertex- und einen Fragment-Prozessor übergeben werden, die dann entweder einzelne Eckpunkte (Vertices) oder Fragmente (Pixel) gezielt verändern können. Das Shader Toy macht genau davon Gebrauch und bietet verschiedene Shader, die sowohl zwei- als auch dreidimensional eingesetzt werden können. Die Shader werden als Fragment-Shader ausgeführt, da sie nur Pixel-Transformationen durchführen. Ein Blick auf die anderen Anwendungen und Projekte von Iñigo Quilez lohnt sich, da er sehr interessante Anwendungen in diesem Bereich entwickelt hat.