Suche
Close this search box.

Shadertoy

Was ist Shadertoy?

Shader­toy ist eine eng­lisch­spra­chi­ge Pro­gram­mier­um­ge­bung für soge­nann­te Shader. Rechts schreibt man ein Pro­gramm in der Spra­che GLSL, das dann direkt auf der Gra­fik­kar­te von der Shader-Kernen der GPU aus­ge­führt wird und links sieht man gleich, was es tut.

Für Pro­gram­mie­rer ist es wirk­lich wie ein Spiel: Schrei­be ein Pro­gramm, was in einer Sand­box läuft. Von außen bekommst du Wer­te für Auf­lö­sung, abge­lau­fe­ne Zeit und die Koor­di­na­te des zu berech­nen­den Frag­ments (Pixels) eines Frames. Die Funk­ti­on soll den Farb­wert die­ses Pixels berech­nen. Und nicht nur den: Die Gra­fik­kar­te führt die­se Funk­ti­on für jedes Pixel eines Frames aus, bis alle Pixel berech­net wur­den und das Frame fer­tig ist. Das pas­siert 60-mal in der Sekunde.

Also geht es um Bil­der­zeu­gung allein mit Mathe­ma­tik und dar­um, sei­ne Erfah­rung und den Code zu tei­len. Das macht wirk­lich Spaß, zumin­dest wenn man sich wie ich an Pro­gram­mie­rung und Mathe­ma­tik erfreu­en kann.

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 werden?

Für den Anfang

Das »Book Of Shaders« setzt hier 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 iq ist eine gute Ein­füh­rung in das Tool Shader­toy und 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. Ich mel­de­te mich als Sven­of­ni­ne dort an.

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 zu berech­nen­den Pixel kon­stant sind und zur 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 soll ja kein Tuto­ri­al sein, 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 beim krea­ti­ven »Shadern«.