Start mit Shadertoy

Shader­toy ist eine Pro­gram­mier­um­ge­bung und Com­mu­ni­ty für Leu­te, die sich wie ich für Mathe­ma­tik und Pro­gram­mie­rung von vir­tu­el­len Wel­ten begeis­tern kön­nen. Dabei kommt die Pro­gram­mier­spra­che GLSL zum Ein­satz, die Spra­che der Grafikprozessoren.

Ich hat­te mich Anfang Dezem­ber 2024 als Nut­zer Sven­of­ni­ne ange­mel­det und ange­fan­gen, allein mit Mathe und Code Echtzeit-Animationen zu programmieren.

Der Reiz dabei ist auch, dass man immer den Quell­text sieht und sich mit ande­ren dar­über aus­zu­tau­schen kann. Es ist erstaun­lich, was man­che da auf den Screen zau­bern.

Was ist Shadertoy?

Shader­toy ist eine eng­lisch­spra­chi­ge Pro­gram­mier­um­ge­bung für soge­nann­te Shader (Schat­tie­rer). Rechts schreibt man ein Pro­gramm in der Spra­che GLSL, das dann beim Drü­cken auf den »►«-Knopf direkt im Brow­ser kom­pi­liert und von den Shader-Prozessoren der Gra­fik­kar­te aus­ge­führt wird. Das, was links so aus­sieht wie ein Video­fens­ter ist tat­säch­lich das Fens­ter in die mit dem Code erschaf­fe­ne Welt, mit den Kon­trol­len über Zeit und Raum dar­un­ter. Rechts gibt es noch Knöp­fe für das Mit­schnei­den als Video, Laut­spre­cher ein/aus und Vollbild.

Doch wie errech­net man anhand der Pixel­ko­or­di­na­te eine Far­be und war­um und vor allem wie kön­nen alle Pixel gleich­zei­tig errech­net wer­den? Dazu habe ich unter https://www.shadertoy.com/view/XXKcR1 ein ein­fach gehal­te­nes Bei­spiel erstellt. Es ist nicht son­der­lich spe­ta­ku­lär, es soll nur zei­gen, wor­um es geht:

mit

 

Die Chall­enge dabei ist, eine Funk­ti­on »mai­nI­mage()« zu schrei­ben, wel­che für eine gege­be­ne Pixel­ko­or­di­na­te (Pixel_XY) und die abge­lau­fe­ne Zeit die Far­be errech­net. Die wird dann »ein­fach« von der Gra­fik­kar­te für alle mög­li­chen Pixel­ko­or­di­na­ten mög­lichst gleich­zei­tig auf­ge­ru­fen und errech­net so recht fix die Farb­wer­te aller Pixel eines Ani­ma­ti­ons­bil­des. Im Ide­al­fall pas­siert das mit der Geschwin­dig­keit der ein­ge­stell­ten Bild­wie­der­hol­ra­te, bei mir sind es 60 Mal pro Sekunde.

Als Pro­gram­mie­rer sitzt man qua­si in die­ser Funk­ti­on mai­nI­mage() drin. Neben den Koor­di­na­ten XY bekommt man von außen noch Lese­zu­griff auf soge­nann­te Uniform-Variablen für Auf­lö­sung, Zeit, Maus­po­si­ti­on u. a. von der Host-Anwendung, wel­che ja für alle Pixel eines Frames gleich sind.

Mein Bei­spiel zeigt einen roten gefüll­ten Kreis an, indem es für jede Pixel­ko­or­di­na­te ent­schei­det, ob sie auf die­sem Kreis liegt oder nicht. Die For­mel in Zei­le 12 errech­net dafür den Abstand zwi­schen Pixel­ko­or­di­na­te und Kreis­mit­te. Ist er klei­ner als der Radi­us, wird 1 zurück­ge­lie­fert, ansons­ten 0.

Der ermit­tel­te Wert wird dann mit allen drei Kom­po­nen­ten der Kreis­far­be (rot, grün, blau) mul­ti­pli­ziert und der Pixel­far­be zuge­wie­sen (Zei­le 18).

Das macht ein Shader: Pixel­ko­or­di­na­te rein, Pixel­far­be raus. Das geschieht dann künst­le­risch gestal­te­ten Wegen vom Betrach­ter aus durch beweg­li­che Distanz­fel­der, Ober­flä­chen mit Tex­tu­ren und Refle­xio­nen in ver­zerr­ten Räu­men. Das kann alles sein, was sich berech­nen lässt. Die Funk­tio­nen für das Rech­nen mit Vek­to­ren, Matrit­zen und Fließ­kom­ma­zah­len sind in den Gra­fik­pro­zes­so­ren direkt ver­drah­tet. Die war­ten drauf!

Das hat mir geholfen

Das »Book Of Shaders« setzt wirk­lich am Anfang an und erklärt in ein­fa­cher Spra­che und Hand­zeich­nun­gen, wie das Gan­ze im Grun­de funk­tio­niert.
Youtube-Video »Lean to Paint with Mathe­ma­tics« von Nut­zer iq ist eine gute Ein­füh­rung in das Tool Shader­toy und Nut­zer FabriceNeyret2 zeigt auf sei­nem Blog Shader­toy Unof­fi­ci­al, was damit alles mög­lich ist. Vor­weg: Gra­fisch ist alles möglich!

Nach­dem etwa eine Woche ver­gan­gen war, ließ mich das The­ma nicht mehr los und es krib­bel­te in den Fin­gern. Das Erzeu­gen von Bil­dern und Ani­ma­tio­nen mit Mathe­ma­tik und Pro­gramm­code war ja schon 2003 mit POV-Ray künst­le­ri­sches Werk­zeug. Anders als mit dem Ray­tra­cer POV-Ray geht es bei Shadern um Echt­zeit­gra­fik, also es müs­sen 60 Bil­der pro Sekun­de ent­ste­hen, nicht eins in Stun­den oder Tagen. Bei­des behält aber trotz­dem in ihrer Ver­schie­den­heit sei­ne Daseinsberechtigung.

Bei den Pro­gram­mier­spra­chen, mit wel­chen ich mich bis­her beschäf­tigt habe, gab es immer Refe­ren­zen der Funk­tio­nen, Varia­blen und Ope­ra­to­ren. Bei Shader­toy hat­te es eine Wei­le gedau­ert, bis ich auf die­ses klei­ne Fra­ge­zei­chen rechts unten am Rand des Text­edi­tors ent­deck­te. Klickt man da drauf, gibt es direkt von Shader­toy das Wich­tigs­te auf einer Seite.

Oben am Edi­tor gibt es die »Shader Inputs«. Das sind soge­nann­te uni­for­me Varia­blen, wel­che für alle Pixel eines Frames kon­stant sind und zur lesen­den Ver­fü­gung stehen.

Es gibt neben den bekann­ten Daten­ty­pen float (Fließkomma-Zahl) und int (Ganz­zahl) noch ver­schie­de­ne Vektor‑, Matrix- und Buffer-Datentypen, die auch auf der Hard­ware der Gra­fik­kar­te unter­stützt werden.

Die­ser Blog-Post ist kein Tuto­ri­al, weil ich da ja selbst ganz am Anfang ste­he und es vie­le Res­sour­cen dafür gibt. Ich ver­su­che, soweit es geht, mei­nen Code zu kom­men­tie­ren und Fra­gen zu beantworten.

Hier sind noch wei­te­re Links zum Thema:

 
Viel­leicht sieht man sich ja auf Shader­toy beim krea­ti­ven »Shadern«.