Guía práctica / Web 3D y comercio
Visores 3D en móvil: límites, formatos y pruebas de rendimiento
Un modelo puede abrirse bien en el ordenador y tardar demasiado en el teléfono del cliente. Prepararlo para móvil exige revisar archivo, memoria, visor y experiencia de compra.
Para optimizar un visor 3D móvil, primero identifica dónde se abrirá el archivo. Un componente dentro de la página y una experiencia de realidad aumentada pueden utilizar visores y rutas de carga diferentes.
Que el GLB funcione en tu ordenador no demuestra que el recorrido completo esté resuelto en Android o iPhone.
Límite de subida y objetivo de entrega
Shopify admite archivos 3D mucho mayores que los que conviene descargar al abrir una ficha: su documentación indica un máximo de subida de 500 MB y optimización de modelos que superan 15 MB.
Esa capacidad de ingestión no es un presupuesto de experiencia de usuario. Comprueba el archivo servido finalmente y el comportamiento en dispositivos reales.
Qué distingue Scene Viewer
La documentación de Google separa recomendaciones de rendimiento y restricciones de su visor:
| Aspecto | Referencia de Scene Viewer |
|---|---|
| Archivo | 10 MB recomendados; el validador documenta 15 MB como máximo |
| Triángulos | 100.000 recomendados como límite; propone 30.000–50.000 como rango ideal |
| Materiales | 10 recomendados |
| Texturas | 2048 × 2048 como referencia |
| Esqueleto | 254 articulaciones y cuatro pesos por vértice como límites duros |
| UV | Un conjunto por malla como límite duro |
Son criterios de ese destino, no un estándar para todo el 3D móvil. Usa su validador y verifica las extensiones que admite el recorrido elegido.
Web y AR deben probarse por separado
model-viewer contempla rutas como WebXR, Scene Viewer y Quick Look. La conversión automática a USDZ tiene limitaciones documentadas, entre ellas las animaciones. Si tu entrega depende de una característica concreta, comprueba el archivo que abre realmente cada ruta.
Safari 27 incorpora el elemento <model> en más plataformas de Apple. Es una opción que merece evaluación, pero no sustituye por sí sola una estrategia para todos los navegadores. Lo detallamos en la guía sobre modelos 3D en Safari.
El peso descargado no es toda la memoria
La compresión puede reducir la transferencia sin reducir en la misma proporción la memoria necesaria al mostrar el asset. Por ejemplo, una textura RGBA8 sin compresión de 4096 × 4096 ocupa 64 MiB antes de añadir mipmaps. Es una cuenta de ese formato concreto, no el consumo universal de cualquier textura 4K.
Revisa resolución, cantidad de mapas y formato de GPU, además de geometría. Puedes ampliar el criterio en cómo fijar un presupuesto de polígonos.
Una prueba de aceptación para móvil
Elige dispositivos representativos y prueba con caché vacía y una conexión razonable para tus compradores.
- Mide hasta cuándo aparece la primera imagen útil y cuándo se puede interactuar.
- Gira y amplía el modelo; cambia variantes si las hay.
- Abre AR, revisa escala y materiales y vuelve a la ficha.
- Comprueba que la selección y el carrito siguen correctos.
- Prueba el comportamiento cuando la carga falla o AR no está disponible.
Observa también la página completa. LCP, INP y CLS describen aspectos de carga, respuesta y estabilidad visual; una captura bonita del visor no demuestra una buena experiencia.
Mantén la compra disponible
Muestra una imagen previa, reserva el espacio del visor y explica la carga. Evita que el modelo bloquee las fotos, medidas o controles necesarios para comprar.
Para preparar la entrega, acuerda destinos, dispositivos de prueba y comportamiento alternativo. Si ya tienes un archivo que falla, cuéntanos dónde se abre y qué ocurre.
Fuentes
Revisadas el 20 de septiembre de 2026.
- Shopify: tipos de medios de producto.
- Google: Scene Viewer.
- model-viewer: realidad aumentada.
- WebKit: Safari 27.0.
- Google: Web Vitals.
Comprobado el 20 de septiembre de 2026