Vertex Shaders
Redactado por
Sebastian V. Fecha de publicación
29/03/2026
Tiempo de lectura
7 min
Tema
Shaders GLSL
Esculpiendo el espacio
Todo objeto en 3D está formado por puntos llamados Vértices. Una esfera tiene miles de vértices unidos por caras. Un plano tiene cuatro vértices en sus esquinas (o más, si lo subdivides).
El Vertex Shader es un programa que la GPU ejecuta una vez por cada vértice que existe en tu geometría. Su único objetivo en la vida es responder a la pregunta: "¿En qué coordenada exacta de la pantalla 2D del usuario debo dibujar este vértice 3D?".
La Variable Sagrada: gl_Position
Al final de tu Vertex Shader, debes asignar un vec4 a la variable reservada gl_Position. Para llegar ahí, tienes que multiplicar la posición original del vértice (position) por tres matrices mágicas que Three.js nos provee automáticamente:
- modelMatrix: Mueve el vértice desde el "centro de sí mismo" al "centro del mundo" (Scale, Rotation, Position del Mesh).
- viewMatrix: Ajusta esa posición según dónde esté parada la Cámara en el mundo.
- projectionMatrix: Aplica la perspectiva final (hace que lo lejano se vea más pequeño) para aplastar todo en la pantalla 2D.
Magia Procedural
Lo divertido del Vertex Shader es que, antes de multiplicar esas matrices, puedes hackear la variable position original matemáticamente. Por ejemplo, puedes sumar una onda sinusoidal a la posición Z de un plano, creando banderas ondeando al viento o agua realista, todo sin usar CPU.
Consejo profesional
Para deformar una geometría con el Vertex Shader, tu geometría base necesita tener suficientes vértices. Un BoxGeometry por defecto tiene solo 8 esquinas. Si intentas doblarlo por el centro con un Shader, no pasará nada porque no hay vértices en el medio para doblar.
Modificando Vértices
uniform float u_time;
void main() {
// 1. Copiamos la posición original en una variable que podamos modificar
vec3 newPosition = position;
// 2. MAGIA: Movemos el vértice en el eje Z usando una onda Sinusoidal basada en su eje X y el Tiempo
newPosition.z += sin(newPosition.x * 5.0 + u_time) * 0.2;
// 3. Proyección obligatoria de Three.js
vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
vec4 viewPosition = viewMatrix * modelPosition;
vec4 projectedPosition = projectionMatrix * viewPosition;
// 4. Salida
gl_Position = projectedPosition;
}Una esfera deformada usando puras matemáticas en el Vertex Shader.
Errores comunes
Practica lo aprendido
Domina las formas tridimensionales.