Shadertoy es una comunidad en línea y una herramienta para crear y compartir sombreadores a través de WebGL , que se utiliza tanto para aprender como para enseñar gráficos de computadora 3D en un navegador web .
Shadertoy es una comunidad y plataforma en línea para profesionales, académicos [1] y entusiastas de los gráficos por computadora que comparten, aprenden y experimentan con técnicas de renderizado y arte procedimental a través del código GLSL . Hay más de 52 mil contribuciones públicas a mediados de 2021 provenientes de miles de usuarios. WebGL [2] permite a Shadertoy acceder a la potencia computacional de la GPU para generar arte procedimental , animación, modelos, iluminación, lógica basada en estados y sonido.
Shadertoy fue creado por Pol Jeremias e Inigo Quilez en enero de 2013 y salió a la venta en febrero del mismo año.
Las raíces de este esfuerzo se encuentran en la sección "Shadertoy" [3] de Inigo en su sitio web educativo sobre gráficos por computadora. [4] Con la llegada de la implementación inicial de WebGL por parte de Firefox de Mozilla en 2009, Quilez creó el primer entorno de codificación en vivo en línea y un repositorio curado de sombreadores procedimentales. Este contenido fue donado por 18 autores de Demoscene y mostró animaciones interactivas y en tiempo real avanzadas nunca antes vistas en la Web, como metabolas con rayos, fractales y efectos de túnel.
Después de haber trabajado juntos en varios proyectos de renderizado en tiempo real durante años, en diciembre de 2012 Quilez y Pol decidieron crear un nuevo sitio Shadertoy que seguiría la tradición de la página Shadertoy original con su contenido de gráficos en tiempo real con recursos y tamaño limitados con sabor a demoscene, pero agregaría características sociales y comunitarias y adoptaría una actitud de código abierto.
La página se lanzó con un editor en vivo, reproducción en tiempo real, capacidades de navegación y búsqueda, y funciones de etiquetado y comentarios. En cuanto al contenido, Shadertoy proporcionó un conjunto fijo y limitado de texturas para que sus usuarios las utilizaran de manera creativa. Con el paso de los años, Shadertoy agregó funciones adicionales, como compatibilidad con entrada de micrófono y cámara web, video, música, renderizado de realidad virtual y renderizado de múltiples pasadas.
En total, hay más de 31 mil contribuciones de miles de usuarios, muchas de las cuales se mencionan en artículos académicos. Shadertoy también organiza competiciones y eventos anuales para que disfrute su comunidad, como la Competencia Shadertoy Siggraph 2015 [5]
Un ejemplo de animación procedimental creada en Shadertoy podría ser el siguiente túnel cuadrado:
void mainImage ( out vec4 fragColor , in vec2 fragCoord ) { // entrada : coordenadas de píxeles vec2 p = ( - iResolution.xy + 2.0 * fragCoord ) / iResolution.y ; // ángulo de cada píxel con respecto al centro de la pantalla float a = atan ( p . y , p . x ); // métrica de distancia modificada float r = pow ( pow ( p . x * p . x , 4.0 ) + pow ( p . y * p . y , 4.0 ), 1.0 / 8.0 ); // textura de índice por radio (inverso animado) y ángulo vec2 uv = vec2 ( 1.0 / r + 0.2 * iTime , a ); // patrón: cosenos float f = cos ( 12.0 * uv . x ) * cos ( 6.0 * uv . y ); // obtención de color: paleta vec3 col = 0.5 + 0.5 * sin ( 3.1416 * f + vec3 ( 0.0 , 0.5 , 1.0 )); // iluminación: oscurecer en el centro col = col * r ; // salida: color del píxel fragColor = vec4 ( col , 1.0 ); } El código anterior genera la siguiente imagen:
Se hace referencia a Shadertoy en varias fuentes: