Playground
Escribe GLSL a la izquierda, míralo a la derecha. Se recompila mientras tecleas y los errores señalan la línea que tienes delante. Nada que instalar, nada que registrar: el enlace de la barra de direcciones siempre guarda lo que hay en el editor.
¿Primera vez? Empieza por la lección 1 y sigue bajando. Cada una es corta, cambia una sola idea y termina con algo para probar. No hace falta entender todo el archivo para cambiar un número.
Siempre disponible
vec2 u_res— ancho y alto en píxelesfloat u_time— segundos desde el iniciovec2 u_mouse— 0..1 sobre el lienzo, suavizadovec4 color— lo que escribes de salida
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)
Todo esto vive en shader/lib.glsl y se antepone a cada shader de este sitio.