Shadertoy.com
Información general
Tipo de programa	software
Autor	Inigo Quilez & Pol Jeremias
Información técnica
Programado en	GLSL
Versiones
Última versión estable	Release 0.8.3 (3 de marzo de 2016)
Enlaces
Sitio web oficial
[editar datos en Wikidata]

Shadertoy.com es una comunidad en línea de para múltiples navegadores, así como una herramienta para crear y compartir sombreadores a través de WebGL, que se utiliza tanto para aprender como para enseñar gráficos por computadora en 3D en un navegador web.

Shadertoy.com es una comunidad y plataforma en línea para profesionales de gráficos^[1]​ y entusiastas que comparten, aprenden y experimentan con técnicas de renderizado y arte procedimental a través del código en lenguaje GLSL. Hay más de 31 mil aportes públicos a mediados de 2019 provenientes de miles de usuarios. WebGL^[2]​ permite a Shadertoy acceder a la potencia de cálculo de la GPU para generar arte procedimental, animación, modelos, iluminación, lógica basada en estados y sonido.

Shadertoy.com fue creado por Pol Jeremias e Inigo Quilez en enero de 2013 y se puso en línea en febrero del mismo año.

Las raíces del esfuerzo se encuentran en la sección "Shadertoy" de Iñigo^[3]​ 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 de procedimientos. Este contenido fue donado por 18 autores de la Demoscene, los cuales mostraron animaciones avanzadas en tiempo real e interactivas nunca antes vistas en la Web, como metaballs raymarched, 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 de Shadertoy que seguiría la tradición de la página original de Shadertoy con su recurso con sabor a demoscene y gráficos en tiempo real con limitaciones de tamaño. contenido, pero agregaría características sociales y comunitarias y adoptaría una actitud de código abierto.

La página salió con el editor en vivo, reproducción en tiempo real, capacidades de navegación y búsqueda, 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. A lo largo 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 pases.

Hay más de 31 mil contribuciones en total de miles de usuarios, varios de los cuales están referenciados en artículos académicos. Shadertoy también organiza concursos y eventos anuales para su comunidad, como el Concurso Siggraph 2015 Shadertoy.^[5]​

• Edición: editor con resaltado de sintaxis, con retroalimentación visual inmediata
• Social: comentar sobre los shadertoys, votar (dar me gusta)
• Compartir: enlaces permanentes, incrustadas en otros sitios web, uso compartido de sombreadores privados
• Representación: historial y multipass basados en búfer de punto flotante
• Entradas de medios: micrófono, cámara web, teclado, mouse, VR HMD, soundcloud, video, texturas

Un ejemplo de una animación de procedimiento creada en Shadertoy podría ser el siguiente túnel cuadrado:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  // input: pixel coordinates
  vec2 p = (-iResolution.xy + 2.0*fragCoord)/iResolution.y;

  // angle of each pixel to the center of the screen
  float a = atan(p.y,p.x);
  
  // modified distance metric
  float r = pow( pow(p.x*p.x,4.0) + pow(p.y*p.y,4.0), 1.0/8.0 );
  
  // index texture by (animated inverse) radius and angle
  vec2 uv = vec2( 1.0/r + 0.2*iTime, a );

  // pattern: cosines
  float f = cos(12.0*uv.x)*cos(6.0*uv.y);

  // color fetch: palette
  vec3 col = 0.5 + 0.5*sin( 3.1416*f + vec3(0.0,0.5,1.0) );
  
  // lighting: darken at the center  
  col = col*r;
  
  // output: pixel color
  fragColor = vec4( col, 1.0 );
}

El código anterior genera la siguiente imagen:

Se hace referencia a Shadertoy.com en varias fuentes:

• Blog de desarrolladores de NVidia, junio de 2016, anuncio del concurso Shadertoy 2016.^[6]​
• Siggraph Real-Time Live!, 2015, un proyecto interactivo de visualización de sonido.^[7]​
• Hacker News, 2014, Shadertoy agrega música procesal generada por GPU en el navegador.^[8]​
• Métodos numéricos para el trazado de rayos de superficies definidas implícitamente,^[9]​
• Curso CS 371 en Williams College, 2014, Inspiración para CS 371^[10]​
• Representación en tiempo real, agosto de 2015, siete cosas para el 20 de agosto de 2015.^[11]​

• Sitio web oficial