Shadertoy
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 | ||
|---|---|---|
 | ||
| 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 | ||
Descripción general
editar
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
editarShadertoy.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
editar- 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
editarUn 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
editarSe 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
editar- ↑ http://graphics.cs.williams.edu/courses/cs371/f14/reading/shadertoy.pdf
- ↑ «Khronos Releases Final WebGL 1.0 Specification». Khronos Group. 3 de marzo de 2011. Consultado el 2 de junio de 2012.
- ↑ «Shader Toy». www.iquilezles.org. Archivado desde el original el 30 de junio de 2019. Consultado el 5 de mayo de 2021.
- ↑ «Inigo Quilez».
- ↑ «Siggraph 2015 Shadertoy Competition». Archivado desde el original el 10 de septiembre de 2016. Consultado el 5 de mayo de 2021.
- ↑ «NVidia developer blog». 2016. Consultado el 2 de junio de 2016.
- ↑ «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.
- ↑ «Hacker News». ycombinator. Consultado el 31 de agosto de 2020.
- ↑ «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.
- ↑ «CS 371». Williams College.
- ↑ «Real-Time Rendering - Seven Things for August 20, 2015». realtimerendering.com. 2015. Consultado el 20 de agosto de 2015.
Enlaces externos
editar
Datos: Q28134226
