Spielplatz

Links GLSL schreiben, rechts zusehen. Es übersetzt beim Tippen, und Fehler zeigen auf die Zeile, die du vor dir hast. Nichts zu installieren, nichts anzumelden — der Link in der Adresszeile hält immer das, was im Feld steht.

Zum ersten Mal hier? Fang bei Lektion 1 an und arbeite dich durch. Jede ist kurz, ändert einen Gedanken und endet mit etwas zum Ausprobieren. Du musst die ganze Datei nicht verstehen, um eine Zahl zu ändern.

Immer da

vec2 u_res — Breite und Höhe in Pixeln
float u_time — Sekunden seit dem Start
vec2 u_mouse — 0..1 über der Fläche, geglättet
vec4 color — was du herausschreibst

1 · Space

vec2 uvCentered()
vec2 uv01()
vec2 mouseCentered()

2 · Soft edges

float pixel(float d)
float softEdge(float d, float radius)
float circle(vec2 p, float radius)
float band(float d, float halfWidth)
float smin(float a, float b, float k)

3 · Colour

vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d)
vec3 palette(float t)
vec3 paletteNTR(float t)

4 · Frequency

float harmonic(float x, int octaves)

5 · Noise

float hash21(vec2 p)
float noise(vec2 p)
float fbm(vec2 p, int octaves)
float fbm(vec2 p)
vec2 warp(vec2 p, float amount, float scale)

6 · Symmetry

vec2 rot(vec2 p, float angle)
vec2 tile(vec2 p, float count)
vec2 mirror(vec2 p)
vec2 polar(vec2 p)
vec2 kaleido(vec2 p, float n)

7 · Light

float vignette(vec2 p, float radius, float softness)
float vignetteFrame(float strength)
float occlusion(float density, float strength)
vec3 fog(vec3 c, vec3 far, float distance, float density)

Alles davon steht in shader/lib.glsl und wird jedem Shader dieser Seite vorangestellt.