Nuestra propia página de inicio es uno. En computadoras de escritorio mueve 110,000 partículas (34,000 en celulares), calculadas en vivo en tu tarjeta gráfica, y pasan por ocho formas mientras te desplazas. No hay ningún video. Mueve el cursor y las partículas se apartan.

Esa es la propuesta. También es el portafolio.

Qué es esto realmente

3D en tiempo real sobre la web abierta, hecho con WebGL, three.js y shaders GLSL propios. Funciona en cualquier navegador moderno sin complementos ni apps, y no hay nada que instalar. Abres una dirección web y se mueve.

Trabajos típicos:

Configuradores de producto donde el cliente gira la pieza y la modifica
Experiencias de marca que se despliegan a medida que bajas por la página
Visualizaciones de datos y procesos con una dimensión espacial real
Portadas que le dan a una página web sensación de lugar

Qué implica el trabajo

El 3D en tiempo real combina programación de shaders, análisis de GPU, optimización de recursos y diseño de interacción espacial. En el portafolio se ve ese trabajo en proyectos reales. Elegimos la técnica según lo que el visitante necesita entender o controlar.

Elegir entre video y WebGL

Decisión	Video	WebGL en tiempo real
Secuencia fija	Útil para una secuencia dirigida	Sirve cuando la escena también necesita interacción
Control del cliente	Reproducción de una secuencia preparada	Responde a elecciones, movimiento o configuración
Tamaño de descarga	Depende de duración, codificación y resolución	Depende de modelos, texturas, código y compresión
Trabajo del dispositivo	Decodificar y reproducir	Renderizado continuo; necesita rendimiento y alternativas

Ningún medio es automáticamente más liviano ni mejor. Un prototipo y un presupuesto de recursos ayudan a decidir cuál conviene para cada experiencia.

El rendimiento es lo difícil, y es lo que hacemos

Cualquiera puede poner un modelo girando en una página. Mantener 60 cuadros por segundo en un Android de hace tres años y pasar Core Web Vitals al mismo tiempo es la ingeniería de verdad.

En la práctica, eso significa geometría instanciada, animación calculada en la GPU para que el procesador nunca toque las matemáticas de cada partícula, agrupación agresiva de llamadas de dibujo y detección del nivel del dispositivo para bajar la cantidad de partículas en equipos débiles. También tenemos una regla firme: la capa 3D nunca bloquea la primera pintura ni la respuesta al toque.

Este sitio trae un interruptor de movimiento y respeta prefers-reduced-motion, porque una experiencia que marea a alguien ya fracasó.

Cuánto cuesta

Los proyectos 3D y WebGL van normalmente de $12,000 a $35,000 USD, según cuánto shader propio y cuánta producción de modelos incluyan. Una sola portada 3D dentro de un sitio convencional queda en el extremo bajo, y un configurador completo con modelos a la medida, en el alto. Ve precios.

Preguntas frecuentes

¿Funciona en celulares? Sí, y tiene que funcionar. Construimos con un sistema de niveles de dispositivo que reduce la escena en GPU débiles para no perder cuadros. Si un teléfono no puede moverla bien, recibe una versión más ligera que sigue funcionando.

¿Es malo para el SEO? No como lo construimos nosotros. Todo el texto de este sitio es HTML real dentro del documento, así que los buscadores y los motores de respuesta con IA lo leen sin ejecutar una sola línea de JavaScript. La capa 3D es un <canvas> que va al lado del contenido y no reemplaza nada de él.

¿Y la accesibilidad? El canvas está marcado aria-hidden y todo el contenido se puede leer y navegar sin él. El movimiento respeta prefers-reduced-motion, y hay un interruptor de movimiento a la vista. Un sitio 3D que solo sirve para un tipo de cuerpo es un sitio roto.

¿Ustedes hacen los modelos 3D? Hacemos en casa la geometría procedural y generada. Para modelos de producto realistas trabajamos con el CAD que ya tienes o sumamos a un modelador, y eso se cotiza aparte para que veas el costo.

¿Se puede añadir a un sitio que ya tengo? Casi siempre sí. Una sección WebGL independiente se puede insertar en una página existente. Revisamos primero el presupuesto de rendimiento de esa página, porque agregar 3D a un sitio que ya es lento solo lo hace más lento.

Sitios web 3D y WebGL