06 Capítulo 6 · Proyecto Final

Proyecto Final de Shaders

Redactado por

Sebastian V.

Fecha de publicación

05/06/2026

Tiempo de lectura

10 min

Tema

Shaders GLSL

El Arquitecto del Lienzo Digital

Has conquistado el nivel más profundo y técnico del diseño web interactivo. Entendiste cómo engañar a la geometría deformando sus vértices, cómo pintar un millón de píxeles al mismo tiempo usando matemáticas, y cómo usar ruido para simular la vida orgánica de la naturaleza.

Proyecto 1 — El Orbe Procedural

Una esfera hiper-subdividida deformada completamente con ruido Perlin 3D en el Vertex Shader. Los colores de su superficie también son procedurales: responden directamente a cuánto se deformó cada vértice en 3D, creando una sintonía perfecta entre geometría y color.

Proyecto 2 — El Portal Dimensional

Un portal 2D puro usando solo un plano y matemáticas en el Fragment Shader. Sin geometría 3D. Sin texturas externas. Solo coordenadas UV, la función atan() para el ángulo y length() para la distancia, creando anillos que giran y pulsan en el tiempo.

Consejo profesional

Estos dos proyectos resumen los dos grandes poderes de los Shaders: el Vertex Shader transforma la geometría (forma), y el Fragment Shader transforma el color (apariencia). Dominar ambos es dominar la GPU por completo.

Proyecto 1 — El Orbe Procedural

Una esfera deformada con ruido 3D Perlin tanto en vértices como en color. La paleta responde a la intensidad de la deformación física.

> _

// Classic Perlin 3D Noise by Stefan Gustavson
// (Función cnoise completa arriba del main)

uniform float u_time;
varying float vDistortion;

void main() {
  // Deformamos los vértices con ruido 3D
  float noise = cnoise(normal * 2.0 + u_time * 0.5);
  vDistortion = noise;

  // Empujamos cada vértice a lo largo de su normal
  vec3 newPosition = position + normal * (noise * 0.3);

  gl_Position = projectionMatrix * viewMatrix
    * modelMatrix * vec4(newPosition, 1.0);
}

varying float vDistortion;
uniform float u_time;

void main() {
  // Normalizamos la distorsión de -1..1 a 0..1
  float intensity = (vDistortion + 1.0) * 0.5;

  vec3 colorDark = vec3(0.04, 0.06, 0.1);
  vec3 colorBlue = vec3(0.34, 0.69, 0.98);  // 57B0FB
  vec3 colorPink = vec3(0.988, 0.364, 0.490); // FC5D7D

  // Mezclamos colores según cuánto se deformó el vértice
  vec3 mix1 = mix(colorDark, colorBlue, smoothstep(0.0, 0.6, intensity));
  vec3 finalColor = mix(mix1, colorPink, smoothstep(0.5, 1.0, intensity));

  gl_FragColor = vec4(finalColor, 1.0);
}

> _

Arrastra para rotar. Una esfera que respira usando puras matemáticas de ruido 3D.

Proyecto 2 — El Portal Dimensional

Un portal puro en 2D. Solo matemáticas de ángulo y distancia en el Fragment Shader. Cero geometría 3D, cero texturas.

> _

uniform float u_time;
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}

uniform float u_time;
varying vec2 vUv;

void main() {
  // Centramos el origen en (0.5, 0.5)
  vec2 uv = vUv - 0.5;
  
  // Distancia al centro = radio del anillo
  float dist = length(uv);
  
  // Ángulo en el plano 2D
  float angle = atan(uv.y, uv.x);
  
  // Creamos anillos pulsantes con rotación temporal
  float rings = sin(dist * 30.0 - u_time * 3.0 + angle * 3.0);
  rings = smoothstep(0.0, 0.1, rings);
  
  // Colores Genesis Pixel según la distancia al centro
  vec3 colorCore = vec3(0.988, 0.364, 0.490); // Rosa
  vec3 colorEdge = vec3(0.34, 0.69, 0.98);    // Azul
  vec3 color = mix(colorCore, colorEdge, smoothstep(0.0, 0.5, dist));
  
  // Máscara circular para bordes limpios
  float mask = 1.0 - smoothstep(0.45, 0.5, dist);
  
  gl_FragColor = vec4(color * (rings * 0.7 + 0.3), mask);
}

> _

Anillos que giran y pulsan generados con atan(), length() y sin(). Todo procedural.

Desafío final

Combina ambos proyectos y crea la portada de tu portfolio.

01 Modifica el multiplicador del ruido (noise * 0.3) del Orbe para hacerlo más o menos orgánico.

02 Cambia los colores del Orbe usando la paleta de tu propia marca.

03 En el Portal, ajusta la velocidad de rotación (u_time * 3.0) para que gire más rápido.

04 Combina ambos: Coloca el Portal como fondo y el Orbe encima como elemento hero.

Lo que aprendiste en este capítulo

GLSL El lenguaje de la GPU: tipos estrictos, sin console.log, velocidad pura

Vertex Shader Controla la forma moviendo vértices con matemáticas y ruido

Fragment Shader Controla el color de cada píxel con fórmulas matemáticas

Uniforms El puente de datos de JavaScript (CPU) hacia el Shader (GPU)

Varyings Cómo pasar datos calculados del Vertex Shader al Fragment Shader

Coordenadas UV El mapa 2D que envuelve la geometría para aplicar texturas y colores

Ruido Perlin / Simplex Caos orgánico y suave: la base de fuego, agua y materia

u_time El reloj de la GPU: la fuente de toda animación procedural

u_mouse Interactividad reactiva: el cursor como input de datos en tiempo real

onBeforeCompile Hackear materiales de Three.js para preservar luces e inyectar GLSL

Proyecto Final de Shaders

Redactado por

Fecha de publicación

Tiempo de lectura

Tema

El Arquitecto del Lienzo Digital

Proyecto 1 — El Orbe Procedural

Proyecto 2 — El Portal Dimensional

Consejo profesional

Proyecto 1 — El Orbe Procedural

Proyecto 2 — El Portal Dimensional

Desafío final

Lo que aprendiste en este capítulo

Cursos

Comunidad