Un recorrido completo por el mundo de los fragment shaders
Desde los fundamentos del lenguaje hasta raymarching avanzado y fractales
Aqui podras encontrar muchisima informacion recolectada a lo largo de los anos sobre los shaders. Especificamente los fragment shaders.
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.
Los shaders tienen una arquitectura de programacion particular que aprovecha las ventajas del funcionamiento de la placa de video, esta arquitectura de programacion 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 ejemplificacion visual de como funciona este proceso de paralelo(GPU) vs lineal(CPU).
Los lenguajes de programacion que se utilizan para programa shaders son GLSL o HLSL.
Todas las plataformas actuales para manejar graficos 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 implementacion pero las bases estructurales son las mismas.
Los shaders se utilizan para dar un acabado grafico de gran calidad al producto final. Sus usos especificos son generacion de materiales dinamicos, filtros de postprocesado, programacion de visuales en tiempo real (live coding), efectos visuales de alto nivel.
Shadertoy es la biblioteca de Alejandria pero de los shaders. En este sitio podremos encontrar un repositorio gigante de shaders de efectos visuales, patrones generativos, postprocesado, fluidos. Aqui podremos encontrar codigo con el que experimentar y cambiar desde el mismo sitio.
Hacer click en los siguientes tutoriales para ver los shaders en el editor. Cada link abre el shader en el JP Shader Editor con el codigo GLSL listo para explorar y modificar.
Los fundamentos esenciales de GLSL. Aprendemos la funcion main(), el tipo vec4 para definir colores, como crear variables, definir funciones propias y entender el sistema de coordenadas cartesianas que usa la GPU para dibujar cada pixel.
El poder de las funciones periodicas en GLSL. Usamos sin() para generar ondas, creamos senoidales, controlamos la frecuencia en el tiempo, mezclamos ondas y exploramos patrones de ondas anidadas para crear movimiento fluido y organico.
Dominamos el arte del color en shaders. Aprendemos la funcion mix() para interpolar colores, convertimos entre espacios de color HSB y RGB, creamos animaciones con transiciones de color, y exploramos operaciones de multiplicacion, suma y cambio de fase para lograr paletas dinamicas.
De pixeles a geometria. Aprendemos a obtener radio y angulo desde coordenadas, usamos step() y smoothstep() para dibujar circulos nitidos y suavizados, creamos poligonos regulares, aplicamos movimiento a las formas, y trabajamos con bordes y colores multiples en una misma figura.
Transformaciones geometricas en el espacio 2D. Aplicamos matrices de translacion, rotacion y escalado a nuestras formas, y las combinamos para crear composiciones complejas con multiples poligonos que se mueven, giran y cambian de tamano.
Multiplicamos nuestro lienzo. Usamos la funcion fract() para subdividir el espacio UV en celdas repetidas, creamos patrones basados en grillas, combinamos distintas subdivisiones y generamos poligonos que se repiten a lo largo de toda la pantalla.
El poder de la repeticion en GPU. Usamos bucles for para crear patrones radiales, iteramos sobre subdivisiones del espacio, aplicamos color basado en el indice de iteracion, y exploramos tecnicas como la suma acumulativa visual y el trabajo con indices pares e impares.
El shader como procesador de imagenes. Aprendemos a cargar texturas en buffers, samplear pixeles con texture2D(), rotar colores en espacio HSL, aplicar deteccion de bordes con kernels, simular iluminacion 3D sobre una textura, crear efectos caleidoscopicos con simetria radial, desenfoque radial para efectos de movimiento, y visualizacion de audio sincronizada con BPM. Bases fundamentales para postprocesado, efectos visuales, VJing y manipulacion de imagenes en tiempo real.
El tiempo como material. Implementamos buffers de feedback para que cada frame se construya sobre el anterior, mezclamos el resultado actual con el historico, aplicamos transformaciones a las UVs del feedback, y controlamos el limite y decaimiento para crear trails y efectos de persistencia visual.
Combinamos todo lo aprendido para crear patrones visuales generativos. Usamos ruido, funciones periodicas, subdivision del espacio y operaciones de color para generar composiciones organicas y complejas que evolucionan en el tiempo.
La geometria infinita en tu GPU. Implementamos sistemas de funciones iteradas (IFS) con operadores como boxfold, ballfold y cosinfold. Aprendemos orbit traps para colorear los fractales, rotamos canales RGB segun la dinamica del sistema, y aplicamos funciones seno y conversion HSV para lograr acabados visuales impactantes.
Renderizado 3D sin poligonos. Implementamos el algoritmo de raymarching desde cero: definimos funciones de distancia (SDF) para esferas y cubos, combinamos objetos con operaciones booleanas (union, interseccion, resta), aplicamos deformaciones, y aprendemos tecnicas de sombras, niebla y camaras para crear escenas 3D completas.
Iluminacion y proyeccion de sombras en 3D. Implementamos point lights con calculo de normales, proyectamos sombras en tiempo real, creamos un arbol fractal 3D con sombras, y desarrollamos un tunel con seguimiento de camara que demuestra todo el poder del raymarching.
Agradecimientos a Kali por la colaboracion en los capitulos 11, 12 y 13 de raymarching y fractales.