Introdução à 1.1

Modelos 3D para sua página da web tão facilmente quanto escrever HTML.

Joe Medley

Rob Kochman

Os modelos 3D estão mais relevantes do que nunca. Os varejistas trazem experiências de compra nas lojas para a casa dos clientes. Os museus estão disponibilizando modelos 3D dos artefatos para todos na Web. Infelizmente, pode ser difícil adicionar um modelo 3D a um site de uma forma que proporcione uma ótima experiência ao usuário sem um conhecimento profundo das tecnologias 3D ou recorrer à hospedagem de conteúdo 3D em um site de terceiros. O componente da Web <model-viewer>, lançado no início de 2019, busca tornar a exibição de modelos 3D na Web tão fácil quanto escrever algumas linhas de HTML. Desde então, a equipe tem trabalhado para abordar o feedback e as solicitações da comunidade. O auge desse trabalho foi a <model-viewer> versão 1.0, lançada no início deste ano. Estamos anunciando o lançamento da <model-viewer> 1.1. Leia as notas da versão no GitHub.

O que há de novo desde o ano passado?

A versão 1.1 inclui suporte integrado para realidade aumentada (RA) na Web, melhorias de velocidade e fidelidade e outros recursos solicitados com frequência.

Realidade aumentada

Visualizar um modelo 3D em uma tela em branco é ótimo, mas conseguir visualizá-lo no seu espaço é ainda melhor. Para imagens 3D e RA totalmente dentro do navegador, o Chrome Android oferece suporte à realidade aumentada usando o WebXR .

Quando estiver tudo pronto, adicione um atributo ar à tag <model-viewer> para usá-lo. Outros atributos permitem personalizar a experiência de RA do WebXR, conforme mostrado no exemplo do WebXR em modelviewer.dev (link em inglês). O exemplo de código abaixo mostra como isso pode ficar.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Ele parece com o vídeo incorporado mostrado abaixo do título.

Controles da câmera

<model-viewer> agora oferece controle total sobre a câmera virtual da visualização (a perspectiva do visualizador). Isso inclui o alvo da câmera, a órbita (posição em relação ao modelo) e o campo de visão. Também é possível ativar a rotação automática e definir limites na interação do usuário (por exemplo, campos de visão máximo e mínimo).

Anotações

Também é possível fazer anotações nos modelos usando HTML e CSS. Esse recurso geralmente é usado para "anexar" rótulos a partes do modelo de uma maneira que se move com o modelo conforme ele é manipulado. As anotações são personalizáveis, incluindo a aparência e até que ponto ficam ocultas pelo modelo. As anotações também funcionam em RA.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Consulte a página de documentação de anotações para mais informações.

Editor

A versão 1.1 apresenta e hospeda uma ferramenta de"edição" <model-viewer>, que permite visualizar rapidamente seu modelo, testar diferentes configurações de <model-viewer> (por exemplo, exposição e suavidade da sombra), gerar uma imagem de pôster e receber coordenadas para anotações interativamente.

Melhorias na renderização e no desempenho

A fidelidade de renderização é muito melhorada, especialmente para ambientes de alto alcance dinâmico (HDR). Agora, <model-viewer> também usa um caminho de renderização direta quando apenas um elemento <model-viewer> está na janela de visualização, o que aumenta o desempenho (especialmente no Firefox). Por último, o escalonamento dinâmico da resolução de renderização melhorou significativamente o frame rate. O exemplo abaixo mostra algumas dessas melhorias recentes.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Estabilidade

Como o <model-viewer> está chegando à primeira versão principal, a estabilidade da API é uma prioridade. Portanto, as alterações interruptivas serão evitadas até o lançamento da versão 2.0.

A seguir

A versão 1.0 do <model-viewer> inclui os recursos mais solicitados, mas a equipe ainda não terminou. Mais recursos serão adicionados, assim como melhorias no desempenho, estabilidade, documentação e ferramentas. Se você tiver sugestões, registre um problema no GitHub (link em inglês). Além disso, os PRs são sempre bem-vindos. Siga <model-viewer> no Twitter e confira o chat da comunidade no Spectrum para se manter conectado.