Skip to content

Latest commit

 

History

History
176 lines (132 loc) · 2.89 KB

File metadata and controls

176 lines (132 loc) · 2.89 KB
# Capítulo 6 – Shaders

## Lección 1 – ¿Qué son los Shaders?

* Introducción a los shaders.
* Qué problemas resuelven.
* Diferencia entre CSS, Three.js y Shaders.
* Cómo trabaja la GPU.
* Casos de uso reales.
* Ejemplos visuales.
* Errores comunes.
* Ejercicio práctico.

---

## Lección 2 – Introducción a GLSL

* Qué es GLSL.
* Sintaxis básica.
* Variables.
* Tipos de datos.
* Funciones.
* Estructura de un shader.
* Ejercicio práctico.

---

## Lección 3 – Vertex Shaders

* Qué es un Vertex Shader.
* Manipulación de vértices.
* Posición de objetos.
* Transformaciones básicas.
* Movimiento de geometrías.
* Casos reales.
* Ejercicio práctico.

---

## Lección 4 – Fragment Shaders

* Qué es un Fragment Shader.
* Colorear píxeles.
* Generación de colores.
* Gradientes.
* Efectos visuales básicos.
* Ejercicio práctico.

---

## Lección 5 – Uniforms

* Qué son los Uniforms.
* Compartir datos con shaders.
* Tiempo (`uTime`).
* Resolución (`uResolution`).
* Interactividad.
* Casos reales.
* Ejercicio práctico.

---

## Lección 6 – Varyings

* Qué son los Varyings.
* Comunicación entre shaders.
* Paso de información.
* Coordenadas UV.
* Casos prácticos.
* Ejercicio práctico.

---

## Lección 7 – Coordenadas UV

* Qué son las UV.
* Mapeado de texturas.
* Espacio UV.
* Distorsión de imágenes.
* Casos reales.
* Ejercicio práctico.

---

## Lección 8 – Colores y Gradientes

* Manipulación avanzada de color.
* RGB.
* Mezcla de colores.
* Gradientes procedurales.
* Efectos modernos.
* Ejercicio práctico.

---

## Lección 9 – Ruido Procedural

* Qué es el ruido procedural.
* Random.
* Noise.
* Patrones dinámicos.
* Generación orgánica.
* Casos reales.
* Ejercicio práctico.

---

## Lección 10 – Distorsiones

* Distorsión de geometrías.
* Distorsión de texturas.
* Ondas.
* Efectos líquidos.
* Casos reales.
* Ejercicio práctico.

---

## Lección 11 – Shaders Reactivos al Mouse

* Capturar posición del cursor.
* Interacciones visuales.
* Hover avanzado.
* Efectos dinámicos.
* Experiencias inmersivas.
* Ejercicio práctico.

---

## Lección 12 – Shaders Animados

* Animaciones con tiempo.
* Uso de `uTime`.
* Movimiento procedural.
* Loops infinitos.
* Efectos fluidos.
* Ejercicio práctico.

---

## Lección 13 – Efectos Visuales Avanzados

* Glow.
* Distorsión cromática.
* Efecto holográfico.
* Efecto neón.
* Efectos futuristas.
* Casos reales.
* Ejercicio práctico.

---

## Lección 14 – Integración con Three.js

* ShaderMaterial.
* Uniforms en Three.js.
* Geometrías personalizadas.
* Optimización.
* Casos reales.
* Ejercicio práctico.

---

## Lección 15 – Proyecto Final de Shaders

* Fondo procedural animado.
* Efectos reactivos al mouse.
* Distorsión dinámica.
* Gradientes avanzados.
* Integración con Three.js.
* Optimización de GPU.
* Buenas prácticas.
* Portfolio ready.
* Desafío final.