Páginas web 3D: cuándo valen la pena y cómo hacer que carguen rápido

La respuesta corta

Una página web 3D vale la pena cuando el tema es espacial o cuando recorrerlo explica algo que una foto no puede: un producto que quieres girar, un lugar, un conjunto de datos, un mundo. No vale la pena cuando solo decora una página que una foto o un video corto explicarían igual de bien. En cualquier caso, la capa 3D tiene un costo real en peso de descarga, batería y accesibilidad, así que la página debe funcionar sin ella y el 3D debe ser una mejora.

Esta guía sale de dos proyectos propios: Janus Observatory, una experiencia en el navegador con diez mundos 3D, y dardo.studio, cuya página de inicio abre con una escena 3D en tiempo real.

Cuándo se justifica el 3D

• La persona necesita ver algo desde varios ángulos: un producto, un edificio, una máquina.
• El espacio es la historia: un mapa, un plano, un recorrido por lugares.
• La interacción explica un sistema más rápido que el texto, como comparar escenarios o explorar datos.
• La experiencia de marca es el producto: lanzamientos, exposiciones y campañas donde la atmósfera importa y la gente espera explorar.

Cuándo no

• La escena 3D repite lo que ya dicen un titular y una imagen.
• La mayoría de visitantes llega desde celulares de gama media con datos móviles y necesita un dato rápido, como un precio, una dirección o un horario.
• Nadie del equipo va a mantener los modelos, el código y las alternativas después del lanzamiento.

¿3D, video o imágenes?

WebGL funciona en todos los navegadores modernos. WebGPU es más nuevo y más rápido para algunos trabajos, pero su soporte todavía varía, así que hay que planear una alternativa. La entrada 3D de dardo.studio intenta primero con WebGPU y pasa a WebGL 2 si no está disponible, mientras que las páginas de servicios, proyectos y contacto son HTML que nunca espera a una escena 3D.

Lo que aprendimos construyendo Janus Observatory

Janus Observatory convierte diez escenarios publicados sobre el futuro de la Tierra en una historia de 17 capítulos, un atlas y un observatorio, con diez mundos low-poly originales y un astrónomo extraterrestre articulado. Corre en el plan gratuito de Cloudflare Workers, que limita el tamaño de la aplicación. El informe de publicación del proyecto, del 27 de septiembre de 2026, registra lo que se hizo para que cargara rápido:

• Comprimir los modelos y conservar una alternativa. Los 59 modelos 3D se sirven como variantes gzip que suman 8,2 MB en lugar de 15,8 MB, un 47,9 % menos de descarga. Los navegadores que no pueden descomprimirlas reciben los archivos originales.
• Decodificar fuera del hilo principal, y luego parar. La decodificación Meshopt corre en un único worker en segundo plano que se apaga tras cinco segundos sin uso.
• Fijar un presupuesto de JavaScript y hacerlo cumplir. El JavaScript inicial pesa 197.059 bytes comprimidos frente a un presupuesto de 256.000, y la publicación lo verifica.
• Vigilar las avalanchas de peticiones. Un bucle de precarga especulativa de Next.js y OpenNext hizo 11.704 peticiones en una traza fallida. La solución fue desactivar la precarga en esos enlaces, y las pruebas ahora exigen cero peticiones especulativas.
• Fijar la resolución en lugar de perseguir cuadros por segundo. Los canvas se dibujan con una densidad de píxeles fija de 1 a 1,5. El informe además retiró una cifra anterior de cuadros por segundo que dependía de bajar la resolución, así que no citamos ninguna.

Hazla funcionar sin 3D

Janus tiene una regla que define todo lo demás: la experiencia principal debe funcionar sin WebGL y sin IA. Los diez escenarios cargan con JavaScript desactivado, los controles funcionan sin WebGL, y la rotación con teclado, el foco visible y el movimiento reducido se construyeron con cada función. Su página de accesibilidad detalla los controles, los equivalentes no visuales y los límites conocidos. El objetivo es el nivel AA de WCAG 2.2, comprobado con pruebas automáticas en Chromium, Firefox y WebKit.

Esa regla también ayuda a Google y a los asistentes de IA: el texto, los nombres y los datos viven en el HTML, no dentro de un canvas.

Lista para una página 3D rápida y accesible

1. Escribe primero la página sin 3D. Si la versión en HTML no se entiende, el 3D no la va a arreglar.
2. Define qué explica el 3D y quita lo que solo está para impresionar.
3. Fija presupuestos de JavaScript, peso de modelos y tamaño de texturas antes de modelar, y verifícalos en cada publicación.
4. Comprime los modelos con herramientas como meshoptimizer, sírvelos en formato glTF y conserva una alternativa sin comprimir si dependes de funciones nuevas del navegador como DecompressionStream.
5. Carga la escena después del contenido, y solo cuando esté por verse.
6. Limita la densidad de píxeles para que las pantallas de alta densidad no dibujen cuatro veces más píxeles.
7. Respeta prefers-reduced-motion, dale a cada interacción un camino con teclado y pon un equivalente en texto junto a cada canvas.
8. Prueba en celulares reales de gama media y en más de un motor de navegador, y después sigue las Core Web Vitals tras el lanzamiento.

Cuánto cuesta

El 3D suma tiempo de modelado, optimización y pruebas al diseño y el desarrollo, y las alternativas son parte del trabajo, no un extra. Cuando lo cotizamos, aparece en el factor "animación a la medida, 3D o datos interactivos" que explicamos en nuestra guía sobre cuánto cuesta una página web en Colombia.

Cómo hace Dardo páginas web 3D

Diseñamos y desarrollamos experiencias 3D con nuestro servicio de sitios web 3D interactivos, y el trabajo más liviano de animación y scroll con desarrollo creativo. Para Hyper construimos una historia 3D guiada por el scroll con React Three Fiber que convierte señales dispersas en un solo perfil de cliente. Si tienes una idea que necesita espacio para entenderse, cuéntanosla.