WebGL
¿3D en tiempo real o un video? La comparación honesta
Quieres que la portada se sienta a algo. Hay dos caminos: filmarlo y reproducir el archivo, o calcularlo en vivo dentro del navegador.
Las agencias casi siempre eligen video, porque es familiar y se ve igual en una presentación. Muchas veces es la respuesta correcta. También es, muchas veces, una forma cara de construir lo peor — y nadie explica el intercambio con honestidad, así que aquí está.
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. El sitio que estás leyendo mueve 110,000 partículas y pesa menos que un segundo de metraje equivalente.
La pregunta que lo decide
¿El usuario necesita cambiar lo que ve?
Si sí, 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 — un video no puede hacerlo, y fingirlo con doce variantes pregrabadas sale peor que construirlo bien.
Si no —si esto es una atmósfera, un plano de apertura, una pieza de marca— usa video. Es más barato, más rápido, y una película bien filmada le gana a una escena WebGL mediocre siempre.
Todo lo demás de la tabla es secundario frente a esa pregunta.
Cuándo el video es de verdad la respuesta
- Personas reales, lugares reales, producto real. Nada le gana a una cámara.
- El contenido cambia por temporada y ya hay un estudio produciendo el metraje.
- Quien va a mantenerlo son diseñadores, no programadores.
- 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 vivos — disponibilidad, inventario, precios
- Lo necesitas en celular sin una descarga de 40 MB
- Hay que actualizarlo seguido, cambiando valores y no volviendo a renderizar
- La diferenciación es el punto, en una categoría donde todos los demás usan banco de imágenes
Ese último es una posición de mercado real y no vanidad. Las estimaciones de la industria ponen la proporción de agencias web con capacidad de WebGL, GLSL y optimización de GPU por debajo del 3%, mientras el mercado de servicios de diseño web 3D ronda los $4.07 mil millones en 2026 y se proyecta a $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
No es el shader. Es el presupuesto de rendimiento.
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 están en un celular.
Lo que exige en la práctica: geometría subida una sola vez en vez de transmitida cuadro por cuadro, animación calculada en la GPU para que el procesador solo actualice unos cuantos números, detección del nivel del dispositivo que reduce la escena en equipos débiles en lugar de tragarse cuadros, y una regla firme: la capa 3D nunca bloquea 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, si el texto es 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 al lado del contenido, no en su lugar.
¿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 va normalmente de $12,000 a $35,000 USD según cuánto shader propio y cuánta producción de modelos incluya. 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 se produce en casa. Los modelos de producto fotorrealistas salen de tu CAD existente o de un modelador, cotizados aparte.
Construimos las dos cosas, y te decimos cuál necesitas. Sitios web 3D y WebGL → · Read this post in English →