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 ()
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/
- 1
- 11
- 2018
- 2021
- 3d
- Renderização 3D
- 7
- 9
- 98
- a
- Sobre
- sobre isso
- Acesso
- endereçando
- visa
- Todos os Produtos
- permite
- já
- e
- Anúncio
- qualquer um
- Apple
- AR
- Armstrong
- por aí
- atributos
- aumentado
- Realidade Aumentada
- realidade aumentada (ar)
- autoria
- em caminho duplo
- bola
- basic
- Acreditar
- Melhor
- entre
- nascido
- Bullish
- chamado
- Câmera
- casas
- estudo de caso
- apanhados
- cor
- comentários
- comitê
- comparativamente
- componente
- componentes
- conceito
- conflito
- conteúdo
- contexto
- poderia
- criado
- Atravessar
- personalizadas
- Dev
- diretamente
- Ecrã
- documento
- DOM
- não
- Porta
- down
- rascunho
- Cedo
- facilmente
- elementos
- permite
- etc.
- Mesmo
- todos
- tudo
- evolução
- exemplo
- esperado
- vasta experiência
- experimentar
- externo
- olho
- Característica
- Figura
- Envie o
- Arquivos
- Primeiro nome
- seguido
- Pé
- encontrado
- da
- de 2021
- Diversão
- gerado
- gigante
- GitHub
- dado
- Go
- vai
- altura
- Início
- Como funciona o dobrador de carta de canal
- Contudo
- HTML
- HTTPS
- EU VOU
- idéia
- imersiva
- melhorar
- in
- integração
- interativo
- interesse
- questões
- IT
- JOE
- saltar
- Saber
- leve
- Limitado
- Line
- ligado
- Links
- pequeno
- carregamento
- olhar
- procurando
- OLHARES
- lote
- macrumores
- moldadas
- fazer
- FAZ
- maneira
- muitos
- Mídia
- apenas
- poder
- mente
- modelo
- modelos
- mais
- a maioria
- múltiplo
- museu
- você merece...
- Novo
- notícias
- Próximo
- Notas
- Nuança
- Velho
- original
- Outros
- próprio
- parte
- telefone
- espaço reservado
- platão
- Inteligência de Dados Platão
- PlatãoData
- Jogar
- pobre
- visualização
- provavelmente
- Produto
- proposta
- proposto
- protegido
- protótipos
- fornecer
- fornece
- Pullover
- colocar
- Links
- Realidade
- reconhecer
- liberar
- liberado
- representação
- recurso
- Safári
- parece
- sentido
- compartilhado
- lado
- mais inteligente
- So
- até aqui
- alguns
- Alguém
- um pouco
- algum lugar
- fonte
- Espaço
- autônoma
- Passo
- lojas
- direto
- Estudo
- subseqüente
- tal
- ajuda
- Suportado
- Tire
- falando
- Tecnologia
- A
- deles
- coisa
- coisas
- três
- Através da
- GRAVATA
- tempo
- para
- juntos
- ferramentas
- Total
- verdadeiro
- tipos
- tipicamente
- compreender
- Virtual
- A realidade virtual
- mídia visual
- vr
- W3
- web
- componentes da web
- webkit
- Site
- O Quê
- qual
- enquanto
- disposto
- dentro
- Vocês
- investimentos
- zefirnet