WebGL
¿3D en tiempo real o un video? La comparación honesta
Quieres que la portada transmita algo. Hay dos caminos: filmarlo y reproducir el archivo, o calcularlo en vivo dentro del navegador.
Las agencias casi siempre eligen video, porque es lo conocido y se ve igual en una presentación. Muchas veces es la respuesta correcta. Y muchas veces también es una forma cara de construir la peor de las dos opciones. Nadie explica con honestidad qué se gana y qué se pierde, así que aquí va.
La comparación
| Video pregrabado | WebGL en tiempo real | |
|---|---|---|
| Responde al usuario | No | Sí: cursor, scroll, clic, inclinación |
| Peso | 5–50 MB por unos segundos | Menos de 300 KB toda la escena |
| Costo de datos en celular | Alto | Bajo |
| Cambiar un color después | Volver a renderizar, exportar y subir | Cambiar un número |
| Cambiar el contenido | Nueva grabación o nuevo render | Cambiar los datos |
| Confiabilidad del autoplay | Bloqueado o silenciado en muchos casos | No aplica |
| Riesgo en Core Web Vitals | Elemento LCP grande, mucha transferencia | Bajo si el canvas no bloquea la primera pintura |
| Costo de construcción | Menor | Mayor |
| Quién le da mantenimiento | Un diseñador de movimiento | Un programador |
La diferencia de peso es la que la gente subestima. Un solo segundo de video en 4K pesa más que un sistema de partículas completo. Nuestra página de inicio mueve 110,000 partículas en computadoras de escritorio y pesa menos que un segundo de metraje equivalente.
La pregunta que lo decide
¿El usuario necesita cambiar lo que ve?
Si es así, necesitas tiempo real. Un configurador de producto, una planta que puedes cortar por piso, la vista desde el piso 26, cualquier cosa donde la respuesta dependa de quién pregunta: eso un video no lo puede hacer. Y fingirlo con doce variantes pregrabadas sale peor que construirlo bien.
Si no (digamos que es una atmósfera, un plano de apertura, una pieza de marca), usa video. Es más barato y más rápido, y una película bien filmada le gana siempre a una escena WebGL mediocre.
Todo lo demás de la tabla es secundario frente a esa pregunta.
Cuándo el video es de verdad la respuesta
- Hay que mostrar personas, lugares o productos reales. Nada le gana a una cámara.
- El contenido cambia por temporada y ya hay un estudio produciendo el metraje.
- Lo van a mantener diseñadores, y no hay programadores en el equipo.
- El presupuesto es chico. Un buen video con poco presupuesto le gana a mal 3D con poco presupuesto, siempre.
Quien te diga que el 3D siempre es la respuesta te está vendiendo 3D.
Cuándo el tiempo real se gana su costo
- El usuario configura, filtra o explora algo
- El estado viene de datos en vivo: disponibilidad, inventario, precios
- Lo necesitas en celular sin una descarga de 40 MB
- Hay que actualizarlo seguido, cambiando valores en vez de volver a renderizar
- La diferenciación es el objetivo, en una categoría donde todos los demás usan video de stock
No descartes ese último punto como vanidad. Es una posición de mercado real. Las estimaciones que hemos visto ponen la proporción de agencias web con capacidad de WebGL, GLSL y optimización de GPU por debajo del 3%, y el mercado de servicios de diseño web 3D en unos $4.07 mil millones en 2026, con una proyección de $16.29 mil millones para 2035. La demanda crece bastante más rápido que la oferta.
La parte que de verdad decide la calidad
Importa más el presupuesto de rendimiento que el shader.
Cualquiera puede poner un modelo girando en una página. Sostener 60 cuadros por segundo en un Android de hace tres años y pasar Core Web Vitals al mismo tiempo (LCP bajo 2.5s, INP bajo 200ms, CLS bajo 0.1) es la ingeniería de verdad, y es donde fallan casi todos los sitios 3D. Cerca del 70% de tus visitantes entran desde un celular.
En la práctica, hay que subir la geometría una sola vez y nunca transmitirla cuadro por cuadro. La animación se calcula en la GPU, así que el procesador solo actualiza unos cuantos números. En equipos débiles, la detección del nivel del dispositivo reduce la escena en lugar de perder cuadros, y hay una regla firme: la capa 3D nunca bloquea ni la primera pintura ni la respuesta al toque.
Y dos cosas que no son opcionales: respetar prefers-reduced-motion y dar un interruptor de
movimiento visible. Una experiencia que marea es una experiencia fallida, por impresionante que
sea el shader.
Preguntas frecuentes
¿El 3D es malo para el SEO? No, siempre que el texto sea HTML real dentro del documento. Los rastreadores y los motores de respuestas nunca deberían tener que ejecutar JavaScript para leer tu contenido. El canvas va junto al contenido y nunca lo reemplaza.
¿Puedo agregar 3D a mi sitio actual? Casi siempre. Una sección WebGL independiente se inserta en una página existente. Revisa primero el presupuesto de rendimiento de esa página: agregar 3D a un sitio ya lento solo lo hace más lento.
¿Cuánto cuesta? El trabajo en tiempo real suele ir de $12,000 a $35,000 USD, según cuánto trabajo de shaders a la medida y de producción de modelos incluya el proyecto. Una sola portada queda en el extremo bajo; un configurador completo, en el alto.
¿Hay que hacer los modelos 3D? La geometría procedural y generada la podemos producir nosotros. Los modelos de producto fotorrealistas salen de tu CAD existente o de un modelador, y se cotizan aparte.
Construimos las dos cosas, y te decimos cuál necesitas. Sitios web 3D y WebGL → · Read this post in English →