O elemento HTML <model> chega a todos os sistemas operacionais da Apple

Na WWDC 2026, um engenheiro do Safari colocou um martelo de camping 3D em uma página de produto de e-commerce com uma única tag, <model>, sem nenhuma biblioteca JavaScript, e deixou que os visitantes o girassem com o dedo.¹ O elemento que tornou isso possível já estava disponível no visionOS há algum tempo. A novidade de 2026 é que a mesma marcação agora renderiza no Safari no iPhone, no iPad e no Mac, e a API JavaScript ao seu redor amadureceu. A Apple foi direta: “Nós fomos pioneiros no elemento Model no visionOS… Agora o elemento Model chega ao iOS, iPadOS e macOS! A mesma marcação, o mesmo elemento funciona em todas as plataformas da Apple.”¹

O passo a passo abaixo segue o caminho do 3D pronto para usar que a sessão apresenta, desde um fallback estático com <img> até a interação em órbita, transformações via script, reprodução de animação pré-renderizada e AR Quick Look. Tudo aqui vem diretamente da sessão 215 da WWDC 2026.

TL;DR

• O elemento <model> estreou no visionOS primeiro; a WWDC 2026 o expande para o Safari no iOS, iPadOS e macOS e amadurece a API JavaScript ao seu redor.¹
• Um modelo é incorporado como mídia: aponte o src para um arquivo USDZ, adicione tags <source> com tipos MIME como em <video>, e aninhe um <img> dentro como fallback para navegadores que ainda não dão suporte ao elemento.¹
• A promise ready informa quando um modelo terminou de carregar, para que você possa remover um spinner; um bloco catch exibe conteúdo de fallback em caso de falha.¹
• O atributo stagemode="orbit" oferece rotação interativa com um único atributo; para controle via script, defina stagemode="none" e controle o entityTransform com uma DOMMatrix criada via rotateSelf.¹
• A animação pré-renderizada é reproduzida com playbackRate mais play(), uma taxa negativa a executa de trás para frente, e envolver o modelo em <a rel="ar"> entrega aos visitantes de iOS e iPadOS uma experiência completa de AR Quick Look.¹

O que de fato foi lançado

Aleksei, da equipe do Safari, apresenta a expansão multiplataforma a partir dos 0:37.

O enquadramento honesto importa aqui. O elemento <model> não é totalmente novo. A Apple o lançou primeiro no visionOS, onde ele trazia renderização estereoscópica embutida para que um produto pudesse parecer ter profundidade real no Apple Vision Pro.¹ A WWDC 2026 faz duas coisas sobre essa base: leva o elemento para o Safari no iOS, iPadOS e macOS, de modo que “seu conteúdo 3D alcança todos os visitantes do Safari, estejam eles no iPhone em movimento, no iPad na cafeteria ou no Mac em sua mesa”, e desenvolve a API JavaScript que transforma um visualizador estático em um visualizador interativo.¹

O argumento contra o status quo é direto. A maior parte do 3D na web hoje funciona por meio do model-viewer, a popular biblioteca JavaScript. O argumento da Apple: o elemento nativo não precisa de biblioteca extra, renderiza “diretamente pela plataforma” e é “um padrão web emergente, então seu código está preparado para o futuro.”¹ A equipe do Safari da Apple diz estar “contribuindo ativamente para a especificação do model no W3C” e convida ao envio de feedback por meio do Immersive Web Community Group.¹ Para navegadores que ainda não dão suporte ao elemento, a sessão indica um polyfill que “reproduz a API de um novo padrão via JavaScript”, com uma ressalva que vale citar: “alguns recursos do elemento não podem ser implementados via polyfill, como a exibição estereoscópica em plataformas espaciais como o Apple Vision Pro.”¹

O formato de conteúdo é USDZ, “Universal Scene Description, compactado em um único arquivo” que “empacota tudo o que um modelo 3D precisa: geometria, materiais, texturas, animações.”¹ O Safari suporta outros formatos, mas a sessão recomenda USDZ para a melhor experiência.¹ De onde vêm os ativos é uma questão à parte. A Apple recomenda uma abordagem de Capturar, Converter, Criar: escaneando objetos reais com um iPhone, convertendo arquivos existentes ou construindo do zero em ferramentas como o Blender.¹ A sessão também observa que existem ferramentas generativas no ecossistema; os aplicativos citados, Tripo3D e Meshy.ai, são serviços de terceiros, não produtos da Apple.¹

Coloque um modelo na página

O elemento se comporta como as tags de mídia que todo desenvolvedor web já conhece. “Assim como a tag <img> ou a tag <video>, você aponta a tag <model> para um arquivo com o atributo source, e o navegador cuida do resto. Nenhum plugin é necessário.”¹ Você também pode usar uma tag <source> aninhada com um tipo MIME, o mesmo padrão de <video> (a sessão mostra o padrão sem nomear o valor; model/vnd.usdz+zip é o tipo de mídia padrão do USDZ). O fallback é a parte que torna a adoção segura hoje: coloque um <img> dentro do <model>, e versões mais antigas do Safari ou navegadores sem suporte renderizam a imagem em vez do modelo.¹

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

Modelos 3D podem ter “dezenas de megabytes ou mais”, então o carregamento leva tempo.¹ A promise ready é resolvida quando o modelo de fato terminou de carregar e está pronto para ser exibido. Mostre um spinner enquanto você espera, oculte-o quando ready for resolvida, e trate qualquer imprevisto no bloco catch revelando o conteúdo de fallback:

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
}

Um detalhe de renderização confunde as pessoas. O elemento <model> “é renderizado em seu próprio espaço virtual, então ele não vai herdar o fundo da página.”¹ Para combinar com o design da sua página, defina o background-color diretamente no modelo. A sessão acrescenta uma restrição: “o fundo é sempre renderizado opaco; mesmo que você especifique uma cor com transparência, ela será convertida.”¹

Deixe os visitantes explorarem

A interatividade mais barata custa um atributo. Com stagemode="orbit", os visitantes “giram o modelo livremente de um lado para o outro e, se o inclinarem para cima ou para baixo, ele retorna suavemente ao ângulo original.”¹ O modelo também é reescalonado para ficar um pouco menor, de modo que nenhuma parte seja cortada durante a rotação.¹ Para a maioria das páginas de produto, esse único atributo é o recurso inteiro: “o stagemode orbit dá a você 3D interativo com um único atributo.”¹

Quando você precisa de ângulos exatos, controle o modelo a partir do JavaScript. A propriedade entityTransform “permite definir ângulos de visualização exatos via JavaScript.”¹ Para usá-la, desative a órbita primeiro, removendo o atributo stagemode ou definindo-o como "none".¹ A sessão alerta que transformações manuais podem cortar ou ocultar partes do modelo se ele for girado para fora da área visível, então você pode precisar ajustar a posição.¹ Você constrói a orientação com uma DOMMatrix, que “representa a orientação do modelo no espaço 3D”, chama rotateSelf para definir a rotação e então a atribui:

// 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;
});

Atribuir uma transformação muda a visualização instantaneamente. Para suavizar a transição, a sessão anima a rotação com requestAnimationFrame, usando uma duração de animação de 500 milissegundos, “meio segundo, que parece ágil mas suave”, suavizando a rotação ao longo dos frames e atualizando o entityTransform com uma nova DOMMatrix a cada frame.¹ O trade-off honesto, nas próprias palavras da Apple: transformações personalizadas “dão a você controle total, mas exigem trabalho extra: bounding boxes, recorte, código de animação manual.”¹ Recorra às transformações via script quando precisar delas, e apoie-se em stagemode="orbit" quando não precisar.

Reproduza animação pré-renderizada e depois vá para a AR

Os modelos também podem carregar seu próprio movimento. As animações “normalmente são criadas em ferramentas 3D como Blender ou Maya e pré-renderizadas no arquivo USDZ”, e o elemento “reproduz a primeira faixa de animação.”¹ Duas linhas de JavaScript controlam a reprodução: defina playbackRate no modelo e então chame o método play(). Um valor positivo reproduz para frente, um valor negativo a inverte, e a sessão usa 5 e -5 para reprodução mais rápida:

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

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

O último passo tira o produto da tela e o coloca no ambiente. “Envolva o modelo em uma tag <a> com o atributo rel="ar", aponte para o mesmo recurso e, no iOS e iPadOS, seus clientes recebem uma experiência completa de AR Quick Look.”¹

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

No visionOS, o elemento já fazia o 3D “parecer uma parte natural da web”, com renderização estereoscópica que permite aos clientes “tirar o produto da página e examiná-lo como se ele estivesse bem em suas mãos”, e dá vida a ambientes de site imersivos que colocam o visitante dentro de uma cena a partir do Safari.¹

Distribua mais leve

Arquivos locais ficam ótimos; os mesmos arquivos pela internet carregam lentamente. A sessão executa uma ferramenta de linha de comando, usdcrush, no modelo: “sem nenhuma mudança na qualidade, o arquivo passa de 7,9 MB para 1,9 MB”, e as duas versões abertas lado a lado no Safari parecem idênticas.¹ Uma ferramenta complementar, usdrecord, gera uma miniatura ou imagem de fallback diretamente de um arquivo 3D quando você ainda não tem uma, com opções como formato de saída ou renderização a partir de uma câmera personalizada presente no arquivo.¹ Ambas as ferramentas “já estão instaladas no seu Mac” como parte de um conjunto USD maior, e a sessão observa que você pode executar usdrecord via script em um catálogo inteiro.¹ Quanto ao formato em si, a Alliance for OpenUSD publica a especificação completa do USDZ como “uma referência clara e neutra em relação a fornecedores”, junto com ferramentas de conversão.¹

O que os labs acrescentaram sobre tamanho e carregamento

Os labs da WWDC preencheram alguns detalhes que a sessão deixou em aberto.

Sobre compressão, o usdcrush agora codifica texturas em AVIF; antes ele usava JPEG.² A Apple também disse estar em conversas com a Alliance for Open Media sobre um formato adequado de compressão de malha.²

Sobre tamanho, o painel não deu limites rígidos, mas sugeriu que a qualidade visual máxima fica em torno de 10 MB para um modelo na página. Ambientes imersivos podem ser legitimamente maiores.²

Sobre carregamento, o painel reconheceu uma lacuna: não há hoje uma pseudoclasse CSS para o estado de carregamento de um modelo, então a promise ready apresentada antes é a ferramenta para essa tarefa.² O painel também traçou uma distinção em duas fases que vale ter em mente: bytes baixados não é o mesmo que o recurso estar processado e utilizável.²

Principais conclusões

Para desenvolvedores web: - Adicione <model> hoje com um fallback <img> aninhado dentro, para que navegadores sem suporte recorram a uma imagem estática e o Safari com suporte faça o upgrade para 3D interativo automaticamente.¹ - Condicione a exibição à promise ready e trate as falhas no catch, porque um USDZ de vários megabytes leva tempo real para carregar.¹

Para artistas 3D: - Pré-renderize sua primeira faixa de animação no USDZ no Blender ou Maya; o elemento a reproduz e expõe playbackRate mais play() para controle para frente e para trás.¹ - Execute o usdcrush antes de distribuir para reduzir o tamanho do arquivo sem perda de qualidade visível, e o usdrecord para gerar o fallback <img> a partir do próprio modelo.¹

Para times de produto e e-commerce: - Use stagemode="orbit" para rotação interativa de um atributo, e reserve o entityTransform via script para casos que exijam ângulos exatos ou UI personalizada.¹ - Envolva o modelo em <a rel="ar"> para que compradores de iOS e iPadOS possam posicionar o produto em seu próprio espaço por meio do AR Quick Look.¹

FAQ

O elemento HTML <model> é totalmente novo em 2026?

Não. A Apple lançou o elemento <model> primeiro no visionOS. A WWDC 2026 o expande para o Safari no iOS, iPadOS e macOS com a mesma marcação, e amadurece a API JavaScript ao seu redor (a promise ready, o entityTransform, a reprodução de animação pré-renderizada e o <a rel="ar">).¹

Como adiciono um fallback para navegadores sem suporte ao <model>?

Aninhe uma tag <img> dentro da tag <model>. Versões mais antigas do Safari e navegadores que ainda não dão suporte ao elemento renderizam a imagem em vez do modelo, então os visitantes ainda veem o produto. Um polyfill também está disponível, embora alguns recursos como a exibição estereoscópica do visionOS não possam ser implementados via polyfill.¹

Qual formato de arquivo o elemento <model> usa?

USDZ, Universal Scene Description compactado em um único arquivo que empacota geometria, materiais, texturas e animações. O Safari suporta outros formatos, mas a Apple recomenda USDZ para a melhor experiência, e a Alliance for OpenUSD publica a especificação completa.¹

Como torno um modelo interativo?

Defina stagemode="orbit" para rotação livre de um lado para o outro com um único atributo. Para ângulos exatos, defina stagemode="none", construa uma DOMMatrix com rotateSelf e a atribua à propriedade entityTransform do modelo, animando ao longo dos frames com requestAnimationFrame se você quiser uma transição suave.¹

Como levo um modelo da web para a realidade aumentada?

Envolva o <model> em uma tag <a> com o atributo rel="ar" apontando para o mesmo recurso USDZ. No iOS e iPadOS, isso dá aos visitantes uma experiência completa de AR Quick Look para que possam posicionar o produto em seu ambiente.¹

O elemento <model> se apoia na mesma base USD que a Apple está impulsionando em todas as suas plataformas: veja o novo framework USD nativo em Swift da Apple, USDKit, e o contexto espacial em o que há de novo no visionOS 27. O argumento a favor de uma tag em vez de uma biblioteca se encaixa no argumento mais amplo de o manifesto no-build e HTML é o formato que os agentes querem. O hub completo da série é a Série Ecossistema Apple.

Referências