AR, VR e um modelo para 3D em HTML

Escondido em algum lugar no Notas de versão do Safari Technology Preview 161 é uma linha aparentemente inócua sobre suporte para um novo elemento e atributo HTML:

Adicionado suporte para <model src> e honra <source type> atributos ([email protegido])

Sempre que vejo menção a algum elemento que não reconheço, minha mente vai direto para Huh! Novo para mim, mas provavelmente uma velha notícia para todos os outros. É má postura, eu sei, como poderia facilmente ser:

• Hmm, parece algum experimento próprio.
• Uau, uma coisa realmente nova!

A verdade é que é meio que os três.

É um conceito em evolução

Tipo, a primeira coisa que soa um tanto oficial que encontrei no <model> não estava na especificação W3C, mas em Repo do WebKit para explicadores. Tudo o que está no README é uma nota gigante de 2021 que “O <model> elemento foi movido para o Immersive Web CG.” Eu estava prestes a pular, mas meu olho pegou o HistoryAndEvolution.md arquivo que tem um bom resumo do contexto inicial no <model> conceito:

A <model> elemento nasceu de um desejo de dar o próximo passo e melhorar a experiência de integração do Safari com iOS Visualização rápida de RA recurso.

Eu tive que olhar para a página inicial da Apple para o AR Quick Look. Sabe aquela novidade que algumas lojas têm onde você pode transpor uma renderização 3D de um produto para sua própria casa usando a câmera do seu celular? É desse tipo de coisa que estamos falando, e A Apple vincula um bom estudo de caso do Metropolitan Museum of Art.

Pelo que entendi deste contexto limitado:

• Solte um <model> elemento no documento.
• Adicione um arquivo de origem externa, por exemplo <model src="assets/example.usdz">.

A proposta original é do Immersive Web Committee Group

essa é a equipe procurando tornar a Realidade Virtual (VR) e a Realidade Aumentada (AR) parte da web. A Apple vinculou seu repo, então dei o salto e fui direto para o explicador. Esta não é a especificação nem nada, mas a proposta original. Uma definição muito melhor do elemento!

O HTML permite a exibição de muitos tipos de mídia por meio de elementos como <img>, <picture>ou <video>, mas não fornece uma maneira declarativa de exibir conteúdo 3D diretamente. A incorporação de conteúdo 3D em uma página é relativamente complicada e depende do script do <canvas> elemento. Acreditamos que é hora de colocar os modelos 3D em pé de igualdade com outros tipos de mídia já suportados.

[...]

O HTML <model> O elemento visa permitir que um site incorpore modelos 3D interativos de maneira tão conveniente quanto qualquer outra mídia visual. Espera-se que os modelos sejam criados por ferramentas de autoria 3D ou gerados dinamicamente, mas servidos como um recurso autônomo pelo servidor.

O exemplo básico junta isso. Realmente parece o <video> or <picture> elementos:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? Não é o tipo de arquivo que normalmente cruza minha mesa. Acho que precisarei revisar esses e quaisquer outros tipos de arquivo que <model> pode apoiar. Novamente, tudo isso é apenas a proposta original.

O rascunho da proposta ainda não foi finalizado

Mas isso faz fornecer um bom esboço de onde as coisas poderiam ir:

• Adicionando um modelo a um documento
• Ativando a interatividade
• Compatível com vários formatos
• Fornecimento de conteúdo alternativo
• Tornando-o acessível

Há muito o que descobrir. A maior parte do que existe são problemas documentados que precisam ser resolvidos. No entanto, lança mais luz sobre <model> como atributos propostos que fazem com que pareça ainda mais como <video> tais como autoplay, controls, loop, muted, poster, etc.

Vai ainda mais longe

A menção mais antiga de modelagem 3D que encontrei foi Post de 2018 de Keith Clark em que ele prototipa um elemento personalizado chamado <x-model>. Ele o descreve como “um espaço reservado que fornece acesso ao DOM e ao CSSOM”, onde o carregamento e a renderização são feitos em três.js.

A ideia de Keith é seguida pela <model-viewer> componente que Joe Medley compartilhou em 2020 (e um subsequente atualizar a isso). Existe até um página inicial para isso e é divertido arrastar Neil Armstrong pelo espaço.

É possivelmente apenas um experimento?

Quero dizer, o rascunho das especificações não foi desenvolvido. A Apple parece disposta a jogar bola graças ao anúncio do Safari TP 161. Isso faz todo o sentido dado quão otimista a Apple está em AR como um todo. (Óculos de maçã, qualquer um?)

O Google parece ter seu pé na porta, embora no lado dos componentes da Web. É fácil ver como pode haver um conflito de interesses entre o que a Apple e o Google desejam do AR na web.

Estas são apenas minhas anotações de tentar grocar tudo. Deve haver muito mais nuances nisso do que o pouco que sei sobre isso até agora. Tenho certeza que alguém mais inteligente pode amarrar um laço mais organizado <model> nos comentários. 😉

E já que estamos falando do Safari Technology Preview, 162 acabou de ser lançado outro dia e permite Aninhamento de CSS e os votos de Sintaxe de cores relativas CSS.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/