Glosario de Animaciones 3D en la Web

Tipo de luz que ilumina globalmente todos los objetos de la escena por igual, sin una dirección específica.

Plano de recorte de una cámara 3D que define desde qué distancia mínima y hasta qué distancia máxima se renderiza la escena.

Shader especializado en WebGPU diseñado para cálculos matemáticos masivos en la GPU, no necesariamente ligados al renderizado de píxeles.

Función matemática que controla la tasa de cambio de una animación, permitiendo efectos de aceleración, desaceleración, rebote o elasticidad.

Código que se ejecuta en la GPU para determinar el color y las propiedades visuales de cada píxel individual de un objeto.

Política de renderizado de React Three Fiber que decide si la escena se redibuja continuamente o solo cuando hay cambios.

Volumen visible de una cámara 3D. Todo lo que queda fuera de ese espacio no se llega a renderizar.

La estructura matemática de un objeto 3D, definida por sus vértices, caras y aristas (ej. Caja, Esfera, Cilindro).

Formatos de archivo estándar para modelos 3D en la web, optimizados para una carga rápida y soporte de geometrías, materiales y animaciones.

Biblioteca de JavaScript de alto rendimiento utilizada para crear animaciones fluidas y complejas mediante líneas de tiempo (Timelines).

Mapa de alto rango dinámico usado como entorno de iluminación para aportar reflejos y luz ambiental más creíbles en una escena 3D.

Un lienzo que combina múltiples imágenes horizontalmente, permitiendo rotar una única malla (como un cilindro) para mostrar diferentes contenidos sin interrupciones.

Objeto de Three.js que permite dibujar muchas copias de una misma geometría y material de forma mucho más eficiente que creando meshes independientes.

Función de React Three Fiber que solicita un nuevo render cuando trabajas en modo bajo demanda.

Define la apariencia visual de una geometría, incluyendo su color, textura, opacidad y cómo reacciona ante la luz.

El objeto final que se añade a una escena; es la combinación de una geometría y un material.

Framework de React que permite renderizado del lado del servidor (SSR) y generación de sitios estáticos, utilizado como base para aplicaciones web 3D rápidas.

Cámara que simula la visión humana, donde los objetos más lejanos parecen más pequeños que los cercanos.

Renderizador de React para Three.js que permite declarar escenas 3D como componentes y gestionar su estructura con mentalidad React.

Plugin de GSAP que sincroniza animaciones con el scroll y permite técnicas como scrub, pinning y narrativa por secciones.

Característica de ScrollTrigger que vincula el progreso de la animación directamente a la posición de la barra de desplazamiento.

Material de Three.js que permite definir shaders personalizados para controlar cómo se dibuja una superficie en la GPU.

Lenguaje de sombreado unificado de Three.js que permite crear materiales y efectos compatibles con WebGL y WebGPU simultáneamente.

Variable global enviada desde JavaScript a un shader para controlar valores como progreso, radio, distorsión o intensidad de un efecto.

Código de shader que procesa la posición y atributos de cada punto (vértice) en una geometría 3D.

Componente de Drei que permite organizar varias vistas dentro de un mismo canvas, útil para layouts complejos y control de rendimiento.

API gráfica moderna que ofrece acceso más eficiente a la GPU que WebGL y abre la puerta a pipelines y shaders más potentes.

Renderizador de Three.js orientado a la API WebGPU, pensado para aprovechar un pipeline más moderno y potente que el de WebGL.

El lenguaje de sombreado nativo para la API WebGPU, diseñado para ser más eficiente y moderno que el GLSL de WebGL.

Librería ligera de estado para React muy útil para separar estado de carga, UI y escena sin crear una arquitectura innecesariamente pesada.