El elemento HTML <model> llega a todos los sistemas operativos de Apple

En la WWDC 2026, un ingeniero de Safari colocó un mazo de campamento en 3D sobre la página de producto de un comercio electrónico con una sola etiqueta, <model>, sin ninguna librería de JavaScript, y dejó que los visitantes lo rotaran con el dedo.¹ El elemento que hizo posible eso lleva un tiempo disponible en visionOS. La novedad de 2026 es que el mismo marcado ahora se renderiza en Safari en iPhone, iPad y Mac, y la API de JavaScript que lo rodea maduró. Apple lo dijo sin rodeos: “Fuimos pioneros del elemento Model en visionOS… ¡Ahora el elemento Model llega a iOS, iPadOS y macOS! El mismo marcado, el mismo elemento, funciona en todas las plataformas de Apple.”¹

El recorrido a continuación sigue el camino del 3D listo para usar que plantea la sesión, desde un <img> de respaldo estático hasta la interacción en órbita, las transformaciones programadas, la reproducción de animación pre-renderizada y AR Quick Look. Todo lo que aparece aquí proviene directamente de la sesión 215 de la WWDC 2026.

Resumen

• El elemento <model> debutó antes en visionOS; la WWDC 2026 lo expande a Safari en iOS, iPadOS y macOS, y madura la API de JavaScript que lo rodea.¹
• Un modelo se incrusta como cualquier medio: apunta src a un archivo USDZ, agrega etiquetas <source> con tipos MIME igual que <video>, y anida un <img> dentro como respaldo para los navegadores que todavía no admiten el elemento.¹
• La promesa ready te indica cuándo se cargó un modelo para que puedas quitar un spinner; un bloque catch muestra contenido de respaldo si algo falla.¹
• El atributo stagemode="orbit" ofrece rotación interactiva con un solo atributo; para un control programado, asigna stagemode="none" y maneja entityTransform con una DOMMatrix construida mediante rotateSelf.¹
• La animación pre-renderizada se reproduce con playbackRate más play(), una tasa negativa la ejecuta en reversa, y envolver el modelo en <a rel="ar"> les da a los visitantes de iOS y iPadOS una experiencia completa de AR Quick Look.¹

Lo que realmente se lanzó

Aleksei, del equipo de Safari, presenta la expansión multiplataforma a partir del minuto 0:37.

Aquí importa el encuadre honesto. El elemento <model> no es completamente nuevo. Apple lo lanzó primero en visionOS, donde traía renderizado estereoscópico integrado para que un producto pareciera tener profundidad real en Apple Vision Pro.¹ La WWDC 2026 hace dos cosas sobre esa base: lleva el elemento a Safari en iOS, iPadOS y macOS, de modo que “tu contenido 3D llega a todos los visitantes de Safari, ya sea que estén en un iPhone fuera de casa, en un iPad en la cafetería o en un Mac en su escritorio”, y desarrolla la API de JavaScript que convierte un visor estático en uno interactivo.¹

El argumento frente al estado actual de las cosas es directo. La mayoría del 3D en la web hoy funciona a través de model-viewer, la popular librería de JavaScript. El planteamiento de Apple: el elemento nativo no necesita librería adicional, se renderiza “directamente por la plataforma” y es “un estándar web emergente, así que tu código está preparado para el futuro.”¹ El equipo de Safari de Apple dice que está “contribuyendo activamente a la especificación del modelo en el W3C” e invita a enviar comentarios a través del Immersive Web Community Group.¹ Para los navegadores que todavía no admiten el elemento, la sesión apunta a un polyfill que “reproduce la API de un nuevo estándar mediante JavaScript”, con una salvedad que vale la pena citar: “algunas funciones del elemento no se pueden replicar con un polyfill, como la visualización estereoscópica en plataformas espaciales como Apple Vision Pro.”¹

El formato de contenido es USDZ, “Universal Scene Description, comprimido en un único archivo” que “empaqueta todo lo que necesita un modelo 3D: geometría, materiales, texturas, animaciones.”¹ Safari admite otros formatos, pero la sesión recomienda USDZ para la mejor experiencia.¹ De dónde provienen los recursos es otra cuestión. Apple recomienda un enfoque de Capturar, Convertir, Crear: escanear objetos reales con un iPhone, convertir archivos existentes o construir desde cero en herramientas como Blender.¹ La sesión también señala que existen herramientas generativas en el ecosistema; las apps mencionadas, Tripo3D y Meshy.ai, son servicios de terceros, no productos de Apple.¹

Coloca un modelo en la página

El elemento se comporta como las etiquetas de medios que todo desarrollador web ya conoce. “Igual que la etiqueta <img> o la etiqueta <video>, apuntas la etiqueta <model> a un archivo con el atributo source, y el navegador se encarga del resto. No se requieren plugins.”¹ También puedes usar una etiqueta <source> anidada con un tipo MIME, el mismo patrón que <video> (la sesión muestra el patrón sin nombrar el valor; model/vnd.usdz+zip es el tipo de medio USDZ estándar). El respaldo es lo que hace que adoptarlo sea seguro hoy: coloca un <img> dentro del <model>, y las versiones más antiguas de Safari o los navegadores sin soporte renderizan la imagen en su lugar.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="Mazo de campamento" width="480" height="480">
</model>

Los modelos 3D pueden ocupar “decenas de megabytes o más”, así que cargar lleva tiempo.¹ La promesa ready se resuelve cuando el modelo se cargó de verdad y está listo para mostrarse. Muestra un spinner mientras esperas, ocúltalo cuando ready se resuelva, y maneja cualquier imprevisto en el bloque catch revelando contenido de respaldo:

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

Hay un detalle de renderizado que hace tropezar a la gente. El elemento <model> “se renderiza en su propio espacio virtual, así que no toma el fondo de la página.”¹ Para que coincida con el diseño de tu página, asigna background-color directamente al modelo. La sesión agrega una restricción: “el fondo siempre se renderiza opaco, incluso si especificas un color con transparencia, este se convertirá.”¹

Deja que los visitantes lo exploren

La interactividad más barata cuesta un atributo. Con stagemode="orbit", los visitantes “rotan el modelo libremente de lado a lado y, si lo inclinan hacia arriba o hacia abajo, vuelve suavemente a su ángulo original.”¹ El modelo también se reescala un poco más pequeño para que ninguna parte se recorte durante la rotación.¹ Para la mayoría de las páginas de producto, ese único atributo es toda la función: “el stagemode orbit te da 3D interactivo con un solo atributo.”¹

Cuando necesitas ángulos exactos, maneja el modelo desde JavaScript en su lugar. La propiedad entityTransform “te permite definir ángulos de visualización exactos mediante JavaScript.”¹ Para usarla, primero desactiva orbit: quita el atributo stagemode o asígnale el valor "none".¹ La sesión advierte que las transformaciones manuales pueden recortar u ocultar partes del modelo si lo rotas fuera del área visible, así que tal vez necesites ajustar la posición.¹ Construyes la orientación con una DOMMatrix, que “representa la orientación del modelo en el espacio 3D”, llamas a rotateSelf para definir la rotación y luego la asignas:

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

Asignar una transformación cambia la vista al instante. Para suavizar la transición, la sesión anima la rotación con requestAnimationFrame, usando una duración de animación de 500 milisegundos, “medio segundo, que se siente ágil pero fluido”, suavizando la rotación a lo largo de los fotogramas y actualizando entityTransform con una DOMMatrix nueva en cada fotograma.¹ La compensación honesta, en palabras de la propia Apple: las transformaciones personalizadas “te dan control total, pero requieren trabajo extra: bounding boxes, recorte, código de animación manual.”¹ Recurre a las transformaciones programadas cuando las necesites, y apóyate en stagemode="orbit" cuando no.

Reproduce animación pre-renderizada y luego pasa a AR

Los modelos también pueden traer su propio movimiento. Las animaciones “normalmente se crean en herramientas 3D como Blender o Maya y se pre-renderizan dentro del archivo USDZ”, y el elemento “reproduce la primera pista de animación.”¹ Dos líneas de JavaScript controlan la reproducción: asigna playbackRate al modelo y luego llama a su método play(). Un valor positivo reproduce hacia adelante, un valor negativo lo invierte, y la sesión usa 5 y -5 para una reproducción más rápida:

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

El último paso saca el producto de la pantalla y lo lleva a la habitación. “Envuelve el modelo en una etiqueta <a> con el atributo rel="ar", apunta al mismo recurso, y en iOS y iPadOS tus clientes obtienen una experiencia completa de AR Quick Look.”¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="Mazo de campamento">
  </model>
</a>

En visionOS, el elemento ya hacía que el 3D “se sintiera como una parte natural de la web”, con renderizado estereoscópico que les permite a los clientes “sacar el producto de la página y examinarlo como si lo tuvieran justo entre las manos”, y da vida a entornos web inmersivos que colocan al visitante dentro de una escena desde Safari.¹

Lánzalo más liviano

Los archivos locales se ven muy bien; esos mismos archivos a través de internet cargan lento. La sesión ejecuta una herramienta de línea de comandos, usdcrush, sobre el modelo: “sin cambio en la calidad, el archivo pasa de 7,9 MB a 1,9 MB”, y las dos versiones abiertas lado a lado en Safari se ven idénticas.¹ Una herramienta complementaria, usdrecord, genera una miniatura o imagen de respaldo directamente a partir de un archivo 3D cuando todavía no tienes una, con opciones como el formato de salida o el renderizado desde una cámara personalizada del archivo.¹ Ambas herramientas “ya están instaladas en tu Mac” como parte de un conjunto más amplio de USD, y la sesión señala que puedes ejecutar usdrecord por script sobre un catálogo entero.¹ En cuanto al formato en sí, la Alliance for OpenUSD publica la especificación completa de USDZ como “una referencia clara y neutral respecto a proveedores”, junto con herramientas de conversión.¹

Lo que los labs agregaron sobre tamaño y carga

Los labs de la WWDC completaron algunos detalles que la sesión dejó abiertos.

Sobre compresión, usdcrush ahora codifica las texturas a AVIF; antes usaba JPEG.² Apple también dijo que está en conversaciones con la Alliance for Open Media sobre un formato apropiado de compresión de mallas.²

Sobre tamaño, el panel no dio límites estrictos, pero sugirió que la máxima calidad visual se ubica alrededor de 10 MB para un modelo en página. Los entornos inmersivos pueden ser legítimamente más grandes.²

Sobre carga, el panel reconoció un vacío: hoy no existe una pseudoclase de CSS para el estado de carga de un modelo, así que la promesa ready que vimos antes es la herramienta para ese trabajo.² El panel también trazó una distinción de dos fases que conviene tener presente: los bytes descargados no son lo mismo que el recurso ya procesado y utilizable.²

Conclusiones clave

Para desarrolladores web: - Agrega <model> hoy con un <img> de respaldo anidado dentro, para que los navegadores sin soporte degraden a una imagen estática y Safari, donde haya soporte, mejore a 3D interactivo automáticamente.¹ - Condiciona la visualización a la promesa ready y maneja los fallos en catch, porque un USDZ de varios megabytes tarda un tiempo real en cargar.¹

Para artistas 3D: - Pre-renderiza tu primera pista de animación dentro del USDZ en Blender o Maya; el elemento la reproduce y expone playbackRate más play() para el control hacia adelante y en reversa.¹ - Ejecuta usdcrush antes de lanzar para reducir el tamaño del archivo sin pérdida visible de calidad, y usdrecord para generar el <img> de respaldo a partir del propio modelo.¹

Para equipos de producto y comercio: - Usa stagemode="orbit" para una rotación interactiva de un solo atributo, y reserva el entityTransform programado para los casos que requieren ángulos exactos o una UI personalizada.¹ - Envuelve el modelo en <a rel="ar"> para que los compradores de iOS y iPadOS puedan colocar el producto en su propio espacio mediante AR Quick Look.¹

Preguntas frecuentes

¿Es completamente nuevo en 2026 el elemento HTML <model>?

No. Apple lanzó el elemento <model> primero en visionOS. La WWDC 2026 lo expande a Safari en iOS, iPadOS y macOS con el mismo marcado, y madura la API de JavaScript que lo rodea (la promesa ready, entityTransform, la reproducción de animación pre-renderizada y <a rel="ar">).¹

¿Cómo agrego un respaldo para los navegadores sin soporte de <model>?

Anida una etiqueta <img> dentro de la etiqueta <model>. Las versiones más antiguas de Safari y los navegadores que todavía no admiten el elemento renderizan la imagen en su lugar, así que los visitantes siguen viendo el producto. También hay un polyfill disponible, aunque algunas funciones, como la visualización estereoscópica de visionOS, no se pueden replicar con un polyfill.¹

¿Qué formato de archivo usa el elemento <model>?

USDZ, Universal Scene Description comprimido en un único archivo que empaqueta geometría, materiales, texturas y animaciones. Safari admite otros formatos, pero Apple recomienda USDZ para la mejor experiencia, y la Alliance for OpenUSD publica la especificación completa.¹

¿Cómo hago que un modelo sea interactivo?

Asigna stagemode="orbit" para una rotación libre de lado a lado con un solo atributo. Para ángulos exactos, asigna stagemode="none", construye una DOMMatrix con rotateSelf y asígnala a la propiedad entityTransform del modelo, animando a lo largo de los fotogramas con requestAnimationFrame si quieres una transición fluida.¹

¿Cómo llevo un modelo web a la realidad aumentada?

Envuelve el <model> en una etiqueta <a> con el atributo rel="ar" apuntando al mismo recurso USDZ. En iOS y iPadOS, eso les da a los visitantes una experiencia completa de AR Quick Look para que puedan colocar el producto en su entorno.¹

El elemento <model> se apoya en la misma base de USD que Apple está impulsando en todas sus plataformas: consulta el nuevo framework USD nativo de Swift de Apple, USDKit, y el contexto espacial en las novedades de visionOS 27. El argumento a favor de una etiqueta en lugar de una librería encaja con la idea más amplia de el manifiesto sin build y HTML es el formato que quieren los agentes. El hub completo de la serie es la Serie del Ecosistema de Apple.

Referencias