Introducción a GLSL
Redactado por
Sebastian V. Fecha de publicación
25/03/2026
Tiempo de lectura
8 min
Tema
Shaders GLSL
Un nuevo idioma: GLSL
Los Shaders no se escriben en JavaScript. Se escriben en GLSL (OpenGL Shading Language). Es un lenguaje muy parecido a C. Es fuertemente tipado, estricto y no perdona errores. Si olvidas un punto y coma (;), la pantalla se quedará negra.
Tipos de Datos (El casting estricto)
En JS puedes sumar 1 + 1.5 y no pasa nada. En GLSL, eso es un crimen que colapsa el programa. Tienes que ser explícito.
int: Números enteros (ej.1,2)float: Números decimales (ej.1.0,2.5). Importante: Siempre pon el.0aunque sea un número cerrado.vec2: Un vector de 2 dimensiones (x, y). Se usa para posiciones 2D o coordenadas UV.vec3: Un vector de 3 dimensiones (x, y, z) o (r, g, b). Se usa para colores y posiciones 3D.vec4: (x, y, z, w) o (r, g, b, a). El clásico para colores con opacidad (Alpha).
Swizzling: Magia con vectores
GLSL tiene un atajo maravilloso llamado "Swizzling". Si tienes un color vec3 miColor = vec3(1.0, 0.0, 0.5);, puedes acceder a sus canales usando .rgb o .xyz.
Puedes extraer partes y mezclarlas como piezas de Lego: vec2 rojoYVerde = miColor.rg; o incluso invertirlas: vec3 invertido = miColor.bgr;.
La función main()
Todo shader GLSL DEBE tener una función llamada void main() { ... }. Es la puerta de entrada, lo primero que la GPU ejecutará. La palabra "void" significa que esta función no devuelve ningún valor con "return", sino que asigna un valor a una variable global especial (como gl_FragColor).
Consejo profesional
Acostúmbrate a pensar en rangos normalizados. En diseño web estamos acostumbrados a RGB(255, 255, 255). En GLSL, los colores van de 0.0 a 1.0. El blanco es vec3(1.0, 1.0, 1.0) y el negro vec3(0.0, 0.0, 0.0).
Sintaxis GLSL
// Comentarios igual que en JS
void main() {
// Casting estricto
float a = 1.0;
float b = 2.0;
float c = a + b;
// Declaración de un vector de color (RGB)
vec3 colorPurpura = vec3(0.6, 0.2, 1.0);
// Convertirlo a vec4 añadiendo la opacidad (Alpha de 1.0)
vec4 colorFinal = vec4(colorPurpura, 1.0);
// Variable global de salida obligatoria en Fragment Shaders
gl_FragColor = colorFinal;
}El resultado de este Fragment Shader simple es un bloque de color sólido.
Errores comunes
Practica lo aprendido
Habla el idioma de la GPU.