Guía Introductoria al Lenguaje de
Shaders
Índice
1. Introducción a los Shaders
2. ¿Qué es un Shader?
3. Tipos de Shaders
○ Vertex Shader
○ Fragment Shader (Pixel Shader)
○ Geometry Shader
○ Compute Shader
4. Lenguajes de Shaders
○ GLSL (OpenGL)
○ HLSL (DirectX)
○ Metal Shading Language (Apple)
5. Estructura de un Shader
6. Conceptos Básicos
○ Coordenadas y Espacios
○ Interpolación de Variables
○ Texturas y Samplers
7. Ejemplo Práctico: Shader Básico en GLSL
8. Recursos para Aprender Más
1. Introducción a los Shaders
Los shaders son programas pequeños pero poderosos que se ejecutan en la GPU (Unidad
de Procesamiento Gráfico). Su función principal es manipular gráficos en tiempo real,
permitiendo efectos visuales avanzados como iluminación, sombras, reflejos y mucho más.
Son esenciales en el desarrollo de videojuegos, simulaciones y aplicaciones gráficas.
2. ¿Qué es un Shader?
Un shader es un programa escrito en un lenguaje de sombreado (shading language) que
define cómo se procesan los vértices, píxeles u otros elementos gráficos. Los shaders se
ejecutan en paralelo en la GPU, lo que los hace extremadamente eficientes para tareas
gráficas.
3. Tipos de Shaders
Vertex Shader
● Función: Procesa los vértices de un modelo 3D.
● Tareas comunes:
○ Transformar coordenadas de un espacio a otro (ej: de coordenadas locales a
coordenadas de pantalla).
○ Aplicar animaciones o deformaciones a los vértices.
Fragment Shader (Pixel Shader)
● Función: Calcula el color de cada píxel en la pantalla.
● Tareas comunes:
○ Aplicar texturas.
○ Calcular iluminación y sombras.
○ Crear efectos post-procesamiento.
Geometry Shader
● Función: Genera geometría adicional a partir de los vértices existentes.
● Tareas comunes:
○ Crear partículas.
○ Generar mallas dinámicas.
Compute Shader
● Función: Realiza cálculos generales en la GPU, no necesariamente relacionados
con gráficos.
● Tareas comunes:
○ Simulaciones físicas.
○ Procesamiento de datos en paralelo.
4. Lenguajes de Shaders
GLSL (OpenGL Shading Language)
● Usado en OpenGL y WebGL.
● Sintaxis similar a C.
Ejemplo:
glsl
// Vertex Shader en GLSL
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
● }
HLSL (High-Level Shading Language)
● Usado en DirectX.
● Popular en el desarrollo de juegos para Windows y Xbox.
Ejemplo:
hlsl
// Pixel Shader en HLSL
float4 main(float4 pos : POSITION) : SV_TARGET {
return float4(1.0, 0.0, 0.0, 1.0); // Color rojo
● }
Metal Shading Language
● Usado en aplicaciones para macOS e iOS.
● Optimizado para hardware de Apple.
5. Estructura de un Shader
Un shader típico tiene las siguientes partes:
1. Variables de Entrada: Datos que recibe el shader (ej: posición del vértice,
coordenadas de textura).
2. Variables de Salida: Resultados que produce el shader (ej: color del píxel).
3. Funciones Principales: Punto de entrada del shader (ej: main()).
4. Uniforms: Variables globales que no cambian durante la ejecución del shader (ej:
matrices de transformación).
6. Conceptos Básicos
Coordenadas y Espacios
● Espacio Local: Coordenadas relativas al modelo.
● Espacio Mundial: Coordenadas en el mundo 3D.
● Espacio de Pantalla: Coordenadas 2D en la pantalla.
Interpolación de Variables
● Los valores calculados en el Vertex Shader se interpolan antes de llegar al Fragment
Shader.
● Ejemplo: Colores o coordenadas de textura.
Texturas y Samplers
● Las texturas son imágenes que se aplican a los modelos.
● Los samplers definen cómo se muestran las texturas (ej: filtrado, repetición).
7. Ejemplo Práctico: Shader Básico en GLSL
Vertex Shader
glsl
#version 330 core
layout(location = 0) in vec3 aPos; // Posición del vértice
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main() {
gl_Position = projection * view * model * vec4(aPos, 1.0);
}
Fragment Shader
glsl
#version 330 core
out vec4 FragColor; // Color de salida
void main() {
FragColor = vec4(1.0, 0.5, 0.2, 1.0); // Color naranja
}
