Las imágenes que aparecen arriba fueron creadas de diferentes formas. La primera fue hecha por la mano de Van Gogh, aplicando capa por capa la pintura. Le tomó horas pintarla. La segunda fue producida en segundos mezclando cuatro matrices de pixeles: una para el cyan, otra para el magenta, otra para el amarillo y otra para el negro.
Este libro trata sobre una técnica computacional revolucionaria, que lleva a las imágenes generadas digitalmente a un nuevo nivel, los fragment shaders. Los fragment shaders te dan un control total sobre los pixeles renderizados en la pantalla, a una super velocidad. Este libro está escrito para creative coders, desarrolladores de videojuegos e ingenieros que tengan alguna experiencia con la programación, un conocimiento básico de álgebra lineal y trigonometría, y que quieran llevar su trabajo a un nuevo y emocionante nivel gráfico.
Este libro te enseñará a integrar shaders en tus proyectos, mejorando la performance y la calidad gráfica. Como los shaders GLSL (OpenGL Shading Language) se pueden compilar y correr en diferentes plataformas, podrás aplicar lo que aprendas aquí en cualquier entorno que use OpenGL, OpenGL ES o WebGL. Este libro se enfoca en el uso de los pixel shaders GLSL.
Primero definiremos qué son los shaders; luego aprenderemos a crear formas procedurales, patrones, texturas y animaciones con ellos. Aprenderás los fundamentos básicos del lenguaje y cómo aplicarlos en escenarios más útiles cómo: el procesamiento de imágenes (operaciones de imagen, convoluciones de matrices, desenfocado, filtros de color, lookup tables y otros efectos) y simulaciones (El juego de la vida de Conway, la reacción-difusión de Gray-Scott, ondas de agua, efecto de acuarela, celdas de Voronoi, etc).
Habrá ejemplos interactivos en cada uno de los capítulos para que puedas jugar con ellos. Cuando modifiques el código, podrás ver al instante los cambios reflejados en la pantalla. Los conceptos expuestos pueden ser abstractos y confusos, por lo que los ejemplos interactivos son esenciales para comprender el material. Este no es un libro sobre OpenGL o webGL. OpenGL/webGL son temas mucho más grandes que GLSL o el uso fragment shaders.
Este no es un libro de matemáticas. A pesar de que cubriremos un número de algoritmos y técnicas que están íntimimante relacionados con el álgebra y la trigonometría, no las explicaremos en profundidad. ¡No mucho!
Qué aprenderás capítulo a capítulo
- Fundamentos de GLSL: cómo escribir y ejecutar fragment shaders, manejo de colores y coordenadas.
- Formas y patrones procedurales: funciones de forma, ruido, fractales y texturas sintetizadas.
- Animación y tiempo: cómo usar uniformes para animar parámetros y lograr movimiento en pantalla.
- Procesamiento de imágenes: convoluciones, desenfoque, filtros y lookup tables para modificar imágenes.
- Simulaciones visuales: El juego de la vida, reacción-difusión, ondas y efectos orgánicos.
- Integración con frameworks: uso práctico en three.js y otros entornos WebGL/OpenGL.
- Técnicas avanzadas: mapas de normales, ray marching, environmental mapping, reflexión y refracción.
Características clave y ventajas
The Book of Shaders es un recurso interactivo, paso a paso diseñado para enseñar a los desarrolladores los fundamentos de la programación de shaders GLSL. El enfoque del libro combina teoría y práctica, con ejemplos interactivos que permiten experimentar con código directamente en el navegador. Interactive Learning: The guide offers live coding examples and hands-on exercises, allowing users to experiment with shader code directly in the browser.
Comprehensive Shader Fundamentals: Learn the essentials of GLSL, covering topics like colors, patterns, lighting, and animation techniques. Practical Application in Three.js: The skills learned from this guide can be applied to three.js projects, making it a valuable resource for adding custom shaders to 3D scenes. Beginner-Friendly: The Book of Shaders is designed to be accessible to beginners, yet deep enough for experienced developers looking to sharpen their shader programming skills.
Por qué usar The Book of Shaders
Esta interactive guide es un recurso esencial para cualquiera que quiera dominar los shaders GLSL y usarlos en proyectos con three.js. The Book of Shaders is an open educational guide that introduces fragment shaders through gradual, visually oriented lessons. Comienza con los fundamentos de los shaders, uniforms y el proceso de ejecución de código GLSL, y progresa hacia técnicas más avanzadas.
Más tarde los capítulos explican funciones de forma, colores, formas geométricas, matrices, patrones, aleatoriedad, ruido y técnicas fractales. El material luego se expande en procesamiento de imagen, simulaciones, iluminación, mapas normales, ray marching, environmental mapping, reflexión y refracción. Interactive examples help readers connect mathematical expressions with rendered results.
Cómo aplicar lo aprendido en proyectos reales
Este libro está escrito para creative coders, desarrolladores de videojuegos e ingenieros que tengan alguna experiencia con la programación, un conocimiento básico de álgebra lineal y trigonometría, y que quieran llevar su trabajo a un nuevo y emocionante nivel gráfico. El enfoque tomado hace que el libro sea perfecto para cualquiera que quiera integrar shaders en su aplicación y aprovechar el poder del framework y del lenguaje de shading correspondiente.
Este libro te enseñará a integrar shaders en tus proyectos, mejorando la performance y la calidad gráfica. Como los shaders GLSL se pueden compilar y correr en diferentes plataformas, podrás aplicar lo que aprendas aquí en cualquier entorno que use OpenGL, OpenGL ES o WebGL. The approach taken throughout The Complete Effect and HLSL Guide makes it the perfect book for anyone who wants to integrate shaders into their application and take advantage of the power of the DirectX effect framework and the HLSL shading language.
Recursos adicionales y formato del libro
Habrá ejemplos interactivos en cada uno de los capítulos para que puedas jugar con ellos. Cuando modifiques el código, podrás ver al instante los cambios reflejados en la pantalla. Los conceptos expuestos pueden ser abstractos y confusos, por lo que los ejemplos interactivos son esenciales para comprender el material.
El libro sirve tanto como manual de enseñanza como de referencia, siendo imprescindible para todo el mundo, desde programadores aficionados hasta desarrolladores profesionales. The Book of Shaders - Interactive GLSL Shader Learning for Three.js ofrece una manera clara y accesible de aprender sobre shaders, enfocándose en técnicas prácticas que pueden aplicarse en proyectos three.js.
Intro to Shaders in THREE.js
Tabla resumen: temas y aplicaciones
| Tema | Aplicación |
|---|---|
| Fundamentos GLSL | Escribir y ejecutar fragment shaders |
| Patrones y ruido | Texturas procedurales, efectos orgánicos |
| Procesamiento de imágenes | Filtros, convoluciones, LUTs |
| Simulaciones | Conway, Gray-Scott, ondas |
| Integración | three.js, WebGL, OpenGL |
| Técnicas avanzadas | Ray marching, reflexión, mapas normales |
El material presentado conecta expresiones matemáticas con resultados renderizados y proporciona ejemplos interactivos para facilitar la comprensión. The Book of Shaders es una guía interactiva, paso a paso que hace accesible el aprendizaje de fragment shaders mediante lecciones visuales y ejemplos prácticos.