Novidades dos recursos espaciais para a web

Olá. Sou Eddy, da equipe visionOS Safari. Este é um ano marcante para a internet espacial, com novo recursos que vão transformar a experiência na web.

Adicionamos suporte para renderizar modelos 3D estereoscópicos junto com outros conteúdos da web, permitindo a interação com o modelo. Também incluímos suporte para reproduzir mídia imersiva, uma nova classe de mídia que vai além da tela plana.

Adicionamos alguns novos recursos de visualização para desenvolvedores, como ambientes de site. Vou mostrar como você pode adotar esses novos recursos. E também como integrar modelos 3D, apresentar mídia imersiva e fornecer um ambiente à sua página web. Vamos lá. Nas últimas décadas, o elemento de imagem HTML permitiu que desenvolvedores colocassem imagens na web. À medida que entramos na era da computação espacial, descobrimos uma nova maneira de otimizar seu conteúdo da web, permitindo incorporar e exibir modelos 3D na sua página. Este é um novo elemento de modelo HTML. Foi proposto aos órgãos de normalização da web há alguns anos, e agora estamos o disponibilizando por padrão no Safari no visionOS este ano. Com uma marcação simples, seus visitantes agora podem ver modelos 3D incorporados com outros conteúdos da web. Diferente de outras bibliotecas, o elemento de modelo é renderizado de modo esteroscópico, permitindo percepção de profundidade e visualização de diferentes ângulos. Vamos nos aprofundar em muitos aspectos da incorporação de modelos 3D, desde preparar o ativo até renderizá-lo com interações e animações, etc. A primeira etapa para incorporar um modelo 3D é criar o modelo. Agora, com o Safari no visionOS, o elemento de modelo suporta o formato de arquivo USDZ, que é um formato muito usado na indústria de conteúdo 3D. Com as ferramentas existentes, você pode capturar, converter ou criar arquivos USDZ. Você pode capturar um objeto real em um arquivo de modelo de 3D com iPhone. É só baixar o app Reality Composer da App Store para começar. A API Object Capture no iOS permite que os apps capturem e gerem arquivos de modelo de maneira semelhante. Alguns de vocês podem já ter alguns modelos 3D para o caso de uso, mas talvez eles estejam em outros formatos. O macOS tem suporte integrado para converter vários formatos de modelo 3D em USDZ com ferramentas de pré-visualização ou linha de comando. Para usuários avançados, existem softwares de modelagem 3D para criar modelos 3D incríveis, como Blender, Houdini, Maya, Reality Composer Pro e muitos outros. Muitos deles permitem a exportação para USDZ. O ecossistema USD tem muitas ferramentas que você pode utilizar no seu fluxo de trabalho. E você pode saber mais na sessão da WWDC23: "Explorar o ecossistema USD". Se você nunca criou um modelo 3D antes, talvez queira conferir "Conhecer o Reality Composer Pro", também na WWDC23.

Tenha um arquivo USDZ de teste em mãos para experimentar com o elemento de modelo. A forma mais rápida de obter o arquivo USDZ é baixá-lo em developer.apple.com. Alguns deles foram feitos com o Object Capture, enquanto outros, com software de modelagem 3D. Como qualquer ativo da web, mantenha o arquivo pequeno para garantir carregamento rápido. Minha maneira favorita é usar a Pré-visualização no Mac para exportar uma cópia com texturas compactadas. Há outras formas de otimizar seu arquivo, e elas são apresentadas em detalhes na sessão da WWDC24: "Otimizar seus ativos 3D para computação espacial". Com um arquivo de ativos pronto, vamos incorporá-lo na página da web. Use a sintaxe simples para incorporar um modelo. Basta aplicar um arquivo USDZ no atributo source do elemento de modelo. Não se esqueça da tag de fechamento. Como alternativa, coloque o elemento source dentro de um elemento de modelo vazio, como faria com o elemento de imagem.

O elemento de modelo é um visual do DOM e pode ser posicionado onde quiser. O modelo é sempre renderizado atrás da superfície da página. Considere o elemento de modelo uma abertura para um espaço virtual atrás da página, que vive dentro desse espaço. Isso impede que o conteúdo saia da página inesperadamente à medida que o elemento de modelo é rolado para exibição. Por padrão, o navegador dimensionará o modelo para caber dentro dos limites do elemento. Ele faz isso ajustando e centralizando a face x-y da caixa delimitadora do modelo dentro do elemento.

Alguns servidores web mais antigos ou CDN podem não reconhecer a extensão USDZ e podem retornar o tipo de conteúdo incorreto no cabeçalho HTTP. Para retornar o tipo de conteúdo correto, talvez seja necessário adicionar uma configuração ao seu servidor web. Aqui estão alguns exemplos de especificação do tipo MIME USDZ para diferentes servidores web. Para obter detalhes, consulte a documentação do software do servidor web específico. Uma parte vital para a criação de um bom site é acomodar todos os visitantes com diferentes dispositivos. Portanto, é importante que você forneça um fallback com compatibilidade retroativa. Para fornecer uma imagem de fallback, coloque-a dentro do elemento de modelo.

Sempre envio uma renderização 2D do meu modelo para que quem usa outros navegadores possa ter uma ideia de como é o objeto. Em vez de uma imagem estática, você pode fornecer uma experiência de visualização 2D usando bibliotecas de terceiros, como Three.js, BabylonJS, model-viewer e outras.

Este é um exemplo que usa a biblioteca model-viewer. Essa biblioteca desenha um modelo em uma tela 2D usando JavaScript. Você pode usá-lo como uma experiência de fallback encapsulando o elemento de modelo ao redor do código do visualizador 2D. Com essa configuração, as pessoas que usam o Safari no visionOS verão o modelo renderizado estereoscopicamente, e as que usam outros navegadores verão uma renderização 2D. Se você tiver algum comportamento de fallback personalizado em mente, poderá usar o JavaScript para detectar se o elemento de modelo é suportado.

Você pode verificar a existência do objeto window.HTMLModelElement. Como lembrete, não é recomendável detectar se o agente do usuário é visionOS Safari. É frágil e pode não funcionar no futuro, quando outros navegadores começarem a suportar o elemento de modelo. Detecte o recurso, e não o agente. Um arquivo USDZ poderia exceder facilmente 10 MB e levaria vários segundos para carregar em redes mais lentas. Talvez você queira saber quando o modelo está totalmente carregado para que possa executar atualizações na interface. Um exemplo comum é o indicador de carregamento.

O elemento de modelo tem uma propriedade ready, que retorna um objeto Promise. Quando o modelo estiver totalmente carregado, a promessa será resolvida. Depois você pode ocultar o indicador de carregamento e mostrar o elemento de modelo. A promessa pronta pode falhar em caso de erro de carregamento, então trate o erro apropriadamente, como oferecendo um botão de nova tentativa. Na minha experiência, fornecer pistas visuais para seus visitantes de que algo está carregando ajuda a mantê-los na página. Agora o modelo está incorporado. É hora de deixá-lo mais bonito no seu site. O elemento de modelo define um espaço virtual para renderizar o modelo interno. Defina a cor do espaço como a mesma cor do conteúdo online ao redor, para que o elemento de modelo combine com a página.

Quando você adiciona um elemento de modelo a uma página, ele é substituído pelo espaço virtual, portanto, as pessoas não verão a cor de plano de fundo original dessa área. Para corrigir isso, defina a cor do espaço virtual usando o atributo CSS de cor de plano de fundo. Ele precisa ser definido no elemento de modelo em si, não nos ancestrais. Se você especificou uma cor de plano de fundo com alfa, ela será convertida em opaca. Para evitar repetir a definição de cor, use uma propriedade customizada do CSS para manter o código mais enxuto. Quando o elemento de modelo se misturar à página, fica muito mais fácil criar.

Neste exemplo anterior, ampliei o elemento de modelo sob o painel à direita. Apliquei efeito de vidro fosco no painel, revelando a câmera embaixo em um ângulo, dando uma sensação de camadas. Há várias formas de alcançar o mesmo efeito, e vou mostrar como eu faço isso. Primeiro, vejo se o elemento de modelo se estende atrás do painel usando a posição: absolute. O filtro de fundo dá o efeito de vidro fosco desfocando os pixels do elemento de modelo. O gradiente linear dá um realce especular na borda para uma sensação de profundidade, mantendo o painel em cores claras para facilitar a leitura do texto. Esses são velhos truques de CSS que existem há algum tempo, mas são ótimos quando combinados com o efeito de profundidade do elemento de modelo. A página está ótima agora, mas podemos melhorar o modelo ainda mais ajustando o efeito de iluminação. Aqui, vou aplicar uma iluminação diferente ao mesmo arquivo de modelo. Observe como fica diferente dependendo da iluminação escolhida. Para controlar o efeito de iluminação, use um tipo especial de imagem para definir o ambiente para o modelo, de modo que o modelo reflita as luzes no ambiente. Essa técnica é chamada de iluminação baseada em imagem, ou IBL. A imagem é muitas vezes chamada de arquivo IBL. O arquivo IBL pode parecer distorcido porque está projetando o panorama completo do ambiente em uma imagem plana. Essa projeção esférica achatada, também conhecida como projeção equirretangular, é muito comum para arquivos IBL. Observe que o arquivo IBL não faz parte do USDZ, portanto, deve ser especificado durante a renderização.

Para especificar o IBL para elementos de modelo, use o atributo environmentmap. Se você não fornecer um, o navegador aplicará uma iluminação padrão no modelo. Como o IBL não faz parte do USDZ, quando o arquivo de modelo é usado fora da página da web, ele não obterá o mesmo efeito de iluminação. Isso permite que o app de apresentação aplique a iluminação mais adequada para a experiência de visualização. Considere usar os formatos OpenEXR e Radiance HDR para seu arquivo IBL. Esses dois formatos tornarão os reflexos muito mais realistas, porque representam o nível de brilho em muitas ordens de magnitude. Já um IBL em JPEG parecerá muito plano e sem graça. Com seu modelo pronto e bonito, é hora de permitir que os visitantes interajam com ele. O elemento de modelo oferece suporte a várias interações prontas. Por padrão, pinçar e manter pressionado o elemento de modelo iniciará uma interação de arrastar e soltar. As pessoas podem soltar o modelo em outro app ou em um local vazio para ver o modelo no espaço por meio da Visualização Rápida. Esta é uma maneira fantástica de as pessoas verem o modelo em tamanho real, com efeitos de iluminação realistas. As pessoas podem fixá-lo em uma superfície, girá-lo e ajustar o tamanho. Além de arrastar e soltar, você também pode habilitar pinçar e arrastar o elemento para girar o modelo quando ele for exibido alinhado. Você pode inclinar o modelo para cima e para baixo, e ele redefinirá a inclinação quando soltar.

A rotação alinhada é ativada ao definir stagemode="orbit" no elemento de modelo. A rotação ocorre ao longo do eixo y, e é permitida uma pequena inclinação vertical durante o gesto. O mecanismo de navegação também dimensionará e deslocará o modelo para que ele permaneça atrás da superfície da página durante a rotação. Se esse comportamento de rotação stagemode não for suficiente, você poderá implementar interações personalizadas manualmente. Se quiser mover e orientar o modelo manualmente de maneiras específicas, poderá fazer isso com JavaScript. Você pode controlar o local exato e a orientação para seu modelo dentro do espaço virtual. Para isso, altere a matriz de transformação exposta pelo elemento de modelo.

A matriz de transformação é exposta por meio da propriedade entityTransform. Quando o modelo é carregado, o navegador calcula a transformação necessária para o posicionamento padrão e salva na propriedade entityTransform. A propriedade será preenchida quando a promessa for resolvida.

Vou mostrar um exemplo de personalização do posicionamento do modelo. Aqui, queremos mostrar um link que girará o modelo para a direita. Na função turnRight, leia a matriz de transformação computada do navegador a partir da propriedade entityTransform. Em seguida, aplique uma rotação de 90° ao longo do eixo y usando o método rotateAxisAngle, que é uma API da classe DOMMatrix. 0-1-0 significa o eixo y, e 90 significa girar por 90°. Quando tivermos nossa nova matriz, defina-a novamente para a propriedade entityTransform para que ela entre em vigor. As operações suportadas por uma matriz entityTransform incluem dimensionamento, rotação e translação uniformes. Você receberá um erro se tentar atribuir à entityTransform uma matriz contendo operações não suportadas. A transformação de entidade padrão deve ser suficiente para a maioria dos casos. Mas alguns de vocês podem querer entender a matemática por trás da computação padrão. Para isso, vamos discutir o comportamento de transformação da entidade para uma matriz de identidade.

Se você definir a transformação de entidade como uma matriz de identidade, ela alinhará a origem do USDZ ao ponto central do elemento de modelo. Lembre-se, o modelo só é renderizado dentro do espaço atrás da superfície da página. Assim, todas as peças que se estendam para frente serão cortadas. Além disso, ele renderiza de tal forma que 1 cm no USDZ é exatamente igual a 1 cm no CSS, ou seja, 38 px em CSS. No visionOS, a janela do Safari aumenta quando está mais longe do usuário. Portanto, quando o modelo é exibido na página da web, não há relação entre as unidades usadas no arquivo USDZ e as unidades físicas no mundo real. Para mostrar seu objeto no tamanho físico real, a melhor forma é permitir que as pessoas o arrastem para fora da página e visualize na Visualização Rápida, como mostramos antes. A propriedade entityTransform pode ser usada de formas muito criativas. Neste exemplo anterior, ele amplia várias partes do modelo conforme passamos por diferentes recursos desta câmera. E, para movimentá-lo, você pode até mesmo animar a tela da câmera para abrir e fechar usando animações de modelo. Vamos ver como. O formato USDZ suporta a definição de animações dentro do próprio arquivo e é um recurso aceito por todas as principais ferramentas de criação. Alguns arquivos USDZ contêm várias faixas de animações também. O elemento de modelo oferece suporte à reprodução da primeira faixa de animação definida no USDZ. Para animações de loop simples, você pode usar os atributos loop e reprodução automática. Se você quiser controlar a animação manualmente, poderá usar os métodos play e pause no elemento de modelo. Pode determinar se a animação está sendo reproduzida usando a propriedade paused. Essas APIs podem parecer familiares porque na verdade são as mesmas do elemento de vídeo.

Para casos mais complexos, você pode usar o software de modelagem 3D para criar uma linha do tempo para o modelo, animando entre diferentes estados. No meu arquivo de modelo da câmera, primeiro animo a abertura e o fechamento do flash, seguido pela tela da câmera. As informações de animação são armazenadas no USDZ. Ao colocar um modelo animado no elemento de modelo, você poderá saltar para qualquer ponto na linha do tempo usando a propriedade currentTime. Por exemplo, se eu quiser abrir o flash na câmera, basta definir a propriedade currentTime como 1. Lembre-se de que a unidade para a propriedade currentTime é segundos. Da mesma forma, se eu quiser abrir a tela, basta defini-la como 3. Veja como o modelo é atualizado instantaneamente sem qualquer animação implícita. Isso permite que você pule para registros de data e hora descontínuos para obter um efeito específico. Você pode criar experiências interessantes conectando a propriedade currentTime com algumas interações.

Aqui, há um controle deslizante com um intervalo de valores entre 2 e 3. Ele vai abranger a parte da linha do tempo onde a tela é aberta. Adiciono um eventListener para observar a alteração do valor do controle deslizante. E, quando isso acontece, defino a hora atual para o valor dele. Dessa forma, meus visitantes podem usar o controle deslizante para controlar a posição da tela. Você pode estender essa ideia para outras interações, como rolar uma página ou um evento de arrastar personalizado. Também pode combinar currentTime e entityTransform de maneiras criativas. No exemplo da página da câmera, a animação é impulsionada por um temporizador. As partes individuais são animadas usando a propriedade currentTime, enquanto o movimento da câmera é animado usando a propriedade entityTransform. A página já está ótima, mas ainda dá para deixá-la melhor adicionando um toque pessoal, como permitir que as pessoas gravem algo no produto. Mas não é possível saber qual texto colocar no modelo USDZ com antecedência. É aí que os modelos gerados dinamicamente entram em ação. Se o seu caso exigir a exibição de um modelo que depende da entrada do usuário no tempo de execução, pode usar JavaScript para gerar programaticamente um USDZ no navegador e exibi-lo dentro do elemento.

Three.js é uma eficiente biblioteca JavaScript que permite criar modelos de 3D programaticamente. Three.js é um assunto complexo, por isso não vamos discutir os detalhes hoje. De forma geral, você tem um objeto THREE.Scene que contém o modelo criado proceduralmente. Então, vamos supor que você já tenha um objeto de cena bem trabalhado. Three.js vem com um módulo USDZExporter que você pode importar. Depois, pode usar o método parseAsync para gerar o blob de dados para o arquivo USDZ completo da cena modelo. Pode criar um URL de objeto apontando para o blob de dados gerado usando o método URL.createObjectURL. Agora que você tem o URL do objeto, pode defini-lo como o atributo source do elemento de modelo, e ela começará a renderizar. Com essa técnica, você não precisa mais depender apenas de arquivos USDZ estáticos preparados offline.

Pode adicionar personalizações aos modelos com base nas entradas de dados dos visitantes, como adicionar o nome a um produto ou alterar a cor do texto.

O legal disso é que o modelo ainda pode ser arrastado e visualizado no espaço das pessoas.

Há muito mais APIs suportadas pelo elemento de modelo. Hoje falamos apenas de algumas. O restante delas pode ser útil à medida que você adota modelos nas suas páginas da web.

Saiba mais sobre o elemento de modelo na página de documentação do MDN e a proposta do elemento de modelo no site do W3C. Você pode encontrar as URLs nos links relacionados a esta sessão. Vamos falar sobre outra categoria de conteúdo, a mídia imersiva. No ano passado, apresentamos maneiras de exibir fotos panorâmicas e espaciais do seu site. Estamos ampliando o suporte para vídeo espacial, vídeo 180°, 360° e ultra-angular, bem como Apple Immersive Video. Também temos algumas atualizações para apresentar fotos panorâmicas e espaciais. Com o iPhone 15 Pro ou posterior, você pode capturar vídeos espaciais diretamente do app da câmera, e eles podem ser vistos espacialmente no app Fotos do Apple Vision Pro. Agora, com o visionOS, há suporte para três tipos de mídia imersiva: vídeos 180°, 360° e ultra-angular. Esses tipos de mídia vão além de uma superfície plana, envolvendo o usuário para proporcionar uma experiência imersiva. Agora há suporte para exibição de Apple Immersive Video, com vídeo estéreo em alta resolução calibrado com precisão para cada lente da câmera que o capturou. Saiba mais sobre esses novos tipos de mídia na sessão da WWDC deste ano, "Explorar experiências de vídeo para o visionOS".

Quando um arquivo de mídia imersivo é incorporado na página, como este vídeo de 360°, ele é renderizado como vídeo 2D. Para que as pessoas o vejam de forma imersiva, exiba o vídeo em tela cheia, e ele envolverá o usuário com a projeção correta. O player em tela cheia também suporta conteúdo estereoscópico, que geralmente é encontrado nos formatos de Apple Immersive Video e 180°. Talvez você já tenha capturado alguma mídia imersiva antes. Agora é o melhor momento para mostrá-las no seu site. Você pode incorporar todos esses tipos de mídia no site usando o elemento de vídeo existente. Não há nenhum novo elemento ou atributo envolvido. Também pode usar HTTP Live Streaming para exibir ativos de vídeo grandes como de costume. Para mídias 180°, 360° e ultra-angular, o arquivo deve seguir o APMP, o Apple Projected Media Profile, que contém metadados extras para descrever a projeção da mídia. Para saber como converter sua mídia existente para APMP, confira a sessão da WWDC deste ano: "Saiba mais sobre o Apple Projected Media Profile". Para saber mais sobre Apple Immersive Video, confira "Saiba mais sobre as tecnologias de Apple Immersive Video". Aqui está um exemplo de APMP ultra-angular. Os metadados capturam os parâmetros da câmera que foram usados durante a gravação. O visionOS apresentará a mídia em uma forma que alinhará cada pixel ao local pretendido, resultando na projeção correta durante a reprodução. Observe como as linhas retas ficarão retas mesmo nas bordas quando exibidas em tela cheia. Esse é o poder do APNP. Os controles padrão para o elemento de vídeo permitem abrir a tela cheia. Você também pode inserir programaticamente a tela cheia usando a API requestfFullScreen do JavaScript. Essa é exatamente a mesma API que você usaria para apresentar fotos panorâmicas e espaciais da sua página da web. Para o panorama, agora você pode fornecer diferentes fontes para o mesmo elemento de imagem, para exibir uma miniatura adequada antes de ir para tela cheia. No modo em tela cheia, a variante mais ampla será usada.

Para fotos espaciais, a API requestFullscreen funciona da mesma maneira. A foto espacial será renderizada como uma imagem 2D plana quando for exibida em linha e renderizará espacialmente quando em tela cheia. Por experiência própria, sempre tenho que comunicar aos visitantes que esta imagem em particular é espacial e que devem tocar nela para ver sua verdadeira beleza. Isso vai ser mais fácil no futuro com o novo atributo, controls, que foi adicionado como um recurso de visualização para desenvolvedores, no visionOS 2.4. O atributo controls adiciona um selo de foto espacial, indicando que essa imagem é uma foto espacial. Junto com o botão de tela cheia, os visitantes podem facilmente visualizar a versão espacial da imagem, sem que você tenha que escrever uma única linha de JavaScript. Assim como todos os recursos de visualização para desenvolvedores, esse recurso precisa ser ativado. Para isso, acesse Ajustes > Apps > Safari > Avançados > Sinalizadores de Recursos e ative a API Spatial Image Controls. Aqui, vamos também habilitar o outro atributo, Website environments, como falaremos a seguir. O Website environments é um novo recurso de visualização para desenvolvedores que lançamos este ano para permitir que os sites forneçam um ambiente virtual para os visitantes. Veja como funciona. Esta página de exemplo especificou um USDZ como o ambiente, e as pessoas podem optar por exibir o ambiente no menu de página, mantendo Safari e o site em exibição. Elas podem usar a Digital Crown para mergulhar totalmente no ambiente sem distrações. Esta é uma forma fantástica de levar seu site para além dos limites da janela do navegador.

Para fornecer um ambiente, use um elemento de link especificando rel=spatial-backdrop. Em seguida, use o atributo href para apontar o arquivo USDZ do ambiente. Assim como modelos 3D, você pode usar o atributo environmentmap para fornecer um IBL personalizado para o USDZ. Com um ambiente bem trabalhado, seus visitantes sentirão como se realmente estivessem nesse local, como um restaurante, submarino ou masmorra. Como se trata de uma visualização para desenvolvedores, você precisará ativar o recurso em Ajustes para experimentá-lo. A marcação pode mudar no futuro conforme os padrões da web mudam. A Apple está liderando o desenvolvimento desse recurso, e seu feedback ajudará a moldar o futuro dele. Para saber mais sobre como criar um ambiente personalizado, confira "Criar ambientes personalizados para apps imersivos no visionOS" na WWDC24. Hoje, falamos sobre os novos recursos espaciais para web. Falamos sobre o novo elemento de modelo HTML, e o suporte dele a interações, iluminação personalizada e posicionamento manual. Usando o elemento de vídeo existente, você pode exibir várias novas mídias imersivas diretamente no seu site. Você também teve uma prévia de como seriam os ambientes de site no futuro.

Para ajudá-lo a começar, adicionamos alguns exemplos de uso do elemento de modelo em webkit.org. Não há melhor maneira de experimentá-lo do que vê-lo em ação no Apple Vision Pro. Quando se sentir preparado, adicione os modelos de 3D à sua página da web, quando apropriado. Proporcione aos seus visitantes uma nova experiência. Se o seu site já exibe vídeos, agora é o melhor momento para começar a incluir mídia imersiva. Adoraríamos ouvir seu feedback sobre a adição de ambientes personalizados. Além da internet espacial, há muito outros novos recursos para a web, que você pode aprender mais na sessão "Novidades no Safari e WebKit" deste ano.

Você pode registrar relatos de bugs e solicitações de recursos para tecnologia web em bugs.webkit.org, o rastreador de problemas para WebKit. Para registrar problemas sobre a interface do Safari, visionOS ou outras plataformas da Apple, acesse feedbackassistant.apple.com. Queremos ver todas as coisas incríveis que você vai criar com essas novas tecnologias. Obrigado. Tenha uma ótima WWDC.