Shadertoy

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.

Descripción general

Una imagen de procedimiento realizada en Shadertoy con campos de distancia, modelada, sombreada, iluminada y renderizada en tiempo real.

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.

Historia

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]​

Características

• 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

Uso

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:

Menciones

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]​

Referencias

1. http://graphics.cs.williams.edu/courses/cs371/f14/reading/shadertoy.pdf
2. «Khronos Releases Final WebGL 1.0 Specification». Khronos Group. 3 de marzo de 2011. Consultado el 2 de junio de 2012. 
3. «Shader Toy». www.iquilezles.org. Archivado desde el original el 30 de junio de 2019. Consultado el 5 de mayo de 2021. 
4. «Inigo Quilez». 
5. «Siggraph 2015 Shadertoy Competition». Archivado desde el original el 10 de septiembre de 2016. Consultado el 5 de mayo de 2021. 
6. «NVidia developer blog». 2016. Consultado el 2 de junio de 2016. 
7. «Shadertoy Competition at Siggraph 2015 . Real-Time Live!». Archivado desde el original el 10 de septiembre de 2016. Consultado el 13 de agosto de 2015. 
8. «Hacker News». ycombinator. Consultado el 31 de agosto de 2020. 
9. «Numerical Methods for Ray Tracing Implicitly Defined Surfaces». Williams College. Archivado desde el original el 6 de septiembre de 2015. Consultado el 25 de septiembre de 2014. 
10. «CS 371». Williams College. 
11. «Real-Time Rendering - Seven Things for August 20, 2015». realtimerendering.com. 2015. Consultado el 20 de agosto de 2015. 

Enlaces externos

• Sitio web oficial