Ejemplos shaders

Introducción

Aqui podras encontrar muchisima información recolectada a lo largo de los años sobre los shaders. Especificamente los fragment shaders.

F.A.Q - Preguntas Comunes

¿Que es un shader?

Un shader es un programa que se ejecuta directo en la GPU. Se utilizan para calcular el color de cada pixel, manipular vertices y procesar millones de particulas en simultaneo.

¿Que tienen de especial los shaders?

Los shaders tienen una arquitectura de programación particular que aprovecha las ventajas del funcionamiento de la placa de video, esta arquitectura de programación consiste principalmente en el procesamiento paralalelo donde se calcula todos los pixeles, la cantidad de vertices y posiciones de particulas en simultaneo a diferencia de la CPU que es mucho mas potente pero su procesamiento es lineal.

Patricio Gonzales vivo en su libro "the book of shaders" lo compara con la impresora de gutemberg

En este video de los cazadores de mitos podemos ver una ejemplificación visual de como funciona este proceso de paralelo(GPU) vs lineal(CPU).

¿Que tipos de shaders mas comunes existen

  • Fragment shader: Es el tipo de shader principal que veremos en profundidad en este sitio. Este tipo de shader es el que se encarga de calcular cual es el color de cada pixel.
  • Vertex shader: Este tipo de shader se encarga de aplicar transformaciones sobre la posición de los vertices.
  • Compute shader: Este tipo de shaders se utilizan para hacer calculos de millones de elementos en simultaneo, el procesamiento en paralelo lo hace posible. De ahi el termino GPU particles.

Los lenguajes de programación que se utilizan para programa shaders son GLSL o HLSL.

¿Cuales son las plataformas mas comunes en las que se ejecutan ?

Todas las plataformas actuales para manejar gráficos avanzados utilizan shaders. Algunas de estas plataformas pueden ser : processing, p5js , three.js, openframeworks, babylon.js en el caso de glsl y Unity,Unreal Engine en el caso de HLSL. Cada plataforma tiene su manera particular de implementación pero las bases estructurales son las mismas.

¿Cuáles son los usos más comunes de los shaders?

Los shaders se utilizan para dar un acabado gráfico de gran calidad al producto final. Sus usos específicos son generación de materiales dinámicos, filtros de postprocesado, programación de visuales en tiempo real(live coding), efectos visuales de alto nivel.

¿Qué es shader-toy y por qué es tan importante?

Shadertoy es la biblioteca de Alejandría pero de los shaders. En este sitio podremos encontrar un repositorio gigante de shaders de efectos visuales, patrones generativos, postprocesado, fluidos. Aquí podremos encontrar código con el que experimentar y cambiar desde el mismo sitio.

Mail de contacto: julian.d.puppo@gmail.com

Instagram

Tutoriales de Shaders

Hacer click en los siguientes tutoriales para ver los shaders en el editor.

Capítulo 1: Estructura del lenguaje

Capítulo 2: Osciladores

Capítulo 3: Mezcla de colores

Capítulo 4: Formas

Capítulo 5: Operaciones Matriciales : Translate Rotate Scale

Capítulo 6: Subdivisión del espacio

Capítulo 7: Iteración,ciclos y loops

Capítulo 8: Feedback

Capítulo 9: Patrones generativos

Capítulo 10: Fractales

Capítulo 11: Raymarching inicial.

Capítulo 12: Raymarching avanzado : luces.


Agradecimientos a Kali por la colaboración en los capitulos 10,11,12 de raymarching y fractales.

Plataformas para correr shaders:

Editores de código web

Plataformas web que admiten shaders

Plataformas locales que corren shaders:

Herramientas