VR & AR (WebXR)
Last updated
Last updated
O Needle Engine suporta a especificação completa do , incluindo AR e VR. O WebXR é um padrão web oficial que traz experiências imersivas para a web, com todos os benefícios da web: sem instalação, sem loja de apps, sem SDKs necessários.
Todos os dispositivos com um navegador podem executar aplicações feitas com o Needle. Se o navegador suportar WebXR, as suas aplicações funcionarão automaticamente em XR também, usando os nossos componentes integrados. Isto inclui navegadores de desktop, navegadores móveis, muitos navegadores em headsets AR/VR, mas também outras tecnologias emergentes como ecrãs Looking Glass, óculos inteligentes e muito mais.
:::tip Suporte AR em iOS sem app via USDZ/QuickLook Embora os dispositivos iOS ainda não tenham suporte oficial para WebXR, o Needle suporta a criação de experiências AR em iOS usando . Veja a para mais detalhes. Pode criar experiências ricas e interativas que funcionam perfeitamente em AR em dispositivos iOS, mesmo com as limitações impostas pela Apple.
Quando entra no modo AR no iOS, o Needle converte automaticamente a sua cena para um ficheiro USDZ, que é depois exibido em AR usando o QuickLook da Apple. Objetos, materiais, áudio, animação e Everywhere Actions serão preservados. :::
A tabela seguinte lista alguns dos dispositivos que verificámos que funcionam com o Needle Engine. Quando um novo dispositivo que suporta WebXR for lançado, funcionará com as suas aplicações de imediato. Esta é uma das grandes vantagens de construir com o navegador como plataforma – a compatibilidade não está limitada a um conjunto específico de dispositivos ou SDKs.
Apple Vision Pro
✔️ Safari
rastreamento de mãos, suporte para transient pointer
Meta Quest 3
✔️ Meta Browser
rastreamento de mãos, suporte para sessiongranted1, passthrough, deteção de profundidade, rastreamento de malhas
Meta Quest 3S
✔️ Meta Browser
rastreamento de mãos, suporte para sessiongranted1, passthrough, deteção de profundidade, rastreamento de malhas
Meta Quest 2
✔️ Meta Browser
rastreamento de mãos, suporte para sessiongranted1, passthrough (preto e branco)
Meta Quest 1
✔️ Meta Browser
rastreamento de mãos, suporte para sessiongranted1
Meta Quest Pro
✔️ Meta Browser
rastreamento de mãos, suporte para sessiongranted1, passthrough
Pico Neo 4
✔️ Pico Browser
passthrough, rastreamento de mãos2
Pico Neo 3
✔️ Pico Browser
sem rastreamento de mãos, thumbsticks do controlador invertidos
Oculus Rift 1/2
✔️ Chrome
Valve Index
✔️ Chrome
HTC Vive
✔️ Chrome
Hololens 2
✔️ Edge
rastreamento de mãos, suporte para AR e VR (no modo VR, o fundo também é renderizado)
Android 10+
✔️ Chrome
Android 10+
✔️ Firefox
iOS 15+
(✔️)3 Safari (✔️)3 Chrome
iOS 15+
✔️ WebXR Viewer
o navegador já está um pouco desatualizado
Hololens 2
✔️ Edge
Hololens 1
❌
sem suporte WebXR
Magic Leap 2
✔️
Magic Leap 1
✔️
dispositivo obsoleto
Looking Glass Holographic Display
✔️ Chrome
Logitech MX Ink
✔️ Meta Browser
As capacidades de AR, VR e rede no Needle Engine foram concebidas para serem modulares. Pode optar por não suportar nenhuma delas, ou adicionar apenas funcionalidades específicas.
Ativar Teletransporte
Adicione um componente TeleportTarget a hierarquias de objetos para onde se pode teletransportar.
Para excluir objetos específicos, defina a sua camada para IgnoreRaycasting.
Ativar Rede
Adicione um componente SyncedRoom.
Ativar Sincronização do Visualizador de Desktop
Adicione um componente SyncedCamera.
Ativar Chat de Voz
Adicione um componente VoIP.
:::tip Estrutura da Cena Estes componentes podem estar em qualquer lugar dentro da sua hierarquia. Também podem estar todos no mesmo GameObject, que é um padrão comum. :::
Definir a raiz e escala da sessão AR
Adicione um componente WebARSessionRoot ao seu objeto raiz. Para experiências AR, muitas vezes quer dimensionar a cena para se ajustar ao mundo real.
Defina a escala do utilizador para diminuir (< 1) ou aumentar (> 1) o utilizador em relação à cena ao entrar em AR.
Definir se um objeto está visível no Navegador, AR, VR, Primeira Pessoa, Terceira Pessoa
Adicione um componente XR Flag ao objeto que pretende controlar.
Altere as opções no dropdown conforme necessário. Usos comuns são
ocultar pisos ao entrar em AR
ocultar partes do Avatar em visualizações de Primeira ou Terceira Pessoa. Por exemplo, na visualização em primeira pessoa, uma pessoa não deve ser capaz de ver o modelo da sua própria cabeça.
Atualmente, isto só é suportado no Oculus Quest 1, 2 e 3 no Oculus Browser. Noutras plataformas, os utilizadores serão expulsos da sua sessão imersiva atual e terão de entrar em VR novamente na nova página.
Requer a ativação de uma flag do navegador: chrome://flags/#webxr-navigation-permission
Clicar em objetos para abrir links
Adicione o componente OpenURL que facilita muito a construção de mundos conectados.
Embora atualmente não forneçamos uma integração pronta para sistemas de avatar externos, pode criar avatares específicos para aplicações ou sistemas personalizados.
Criar um Avatar personalizado
Crie um GameObject vazio como raiz do avatar
Adicione um objeto chamado Head e adicione um XRFlag definido para Terceira Pessoa
Adicione objetos chamados HandLeft e HandRight
Adicione os seus gráficos abaixo destes objetos.
Existem vários componentes experimentais para construir Avatares mais expressivos. Neste momento, recomendamos duplicá-los para criar as suas próprias variantes, pois podem ser alterados ou removidos posteriormente.
Cores Aleatórias de Jogador
Como exemplo de personalização de avatar, pode adicionar um componente PlayerColor aos seus renderers.
Esta cor aleatória é sincronizada entre os jogadores.
Rotação de OlhosAvatarEyeLook_Rotation roda GameObjects (olhos) para seguir outros avatares e um alvo aleatório. Este componente é sincronizado entre os jogadores.
Piscar de OlhosAvatarBlink_Simple oculta aleatoriamente GameObjects (olhos) a cada poucos segundos, emulando um piscar de olhos.
Offset ConstraintOffsetConstraint permite deslocar um objeto em relação a outro no espaço do Avatar. Isto permite, por exemplo, que um Corpo siga a Cabeça, mas mantenha a rotação nivelada. Também permite construir modelos simples de pescoço.
Limb ConstraintBasicIKConstraint é uma restrição muito minimalista que utiliza duas transformações e uma dica. Isto é útil para construir cadeias simples de braços ou pernas. Como a rotação não está atualmente implementada corretamente, braços e pernas podem precisar de ser rotacionalmente simétricos para "parecerem bem". É chamado "Basic" por uma razão!
Se quiser exibir conteúdo html diferente consoante o cliente estiver a usar um navegador normal ou AR ou VR, pode simplesmente usar um conjunto de classes html.
Isto é controlado através de classes de elementos HTML. Por exemplo, para fazer com que o conteúdo apareça no desktop e em AR, adicione um <div class="desktop ar"> ... </div> dentro da tag <needle-engine>:
As Sobreposições de Conteúdo são implementadas usando a funcionalidade opcional dom-overlay, que geralmente é suportada em dispositivos AR baseados em ecrã (telefones, tablets).
As experiências de Realidade Aumentada em iOS são algo limitadas, devido à Apple atualmente não suportar WebXR em dispositivos iOS.
:::tip Suporte limitado a código personalizado no QuickLook A Apple impõe fortes limitações quanto ao tipo de conteúdo que pode ser usado no QuickLook. Assim, componentes de script personalizados não podem ser convertidos automaticamente para uso em AR no iOS. Pode adicionar suporte para alguns tipos de código personalizado usando a nossa API Everywhere Actions. :::
Aqui está um exemplo de um instrumento musical que usa Everywhere Actions e, portanto, funciona em navegadores e em AR em dispositivos iOS. Utiliza áudio espacial, animação e interações de toque.
Existem também outras opções para guiar utilizadores de iOS para experiências AR interativas ainda mais capazes:
Usar acesso à câmara e algoritmos personalizados em dispositivos iOS. Pode solicitar acesso à imagem da câmara e executar algoritmos personalizados para determinar a pose do dispositivo. Embora atualmente não forneçamos componentes integrados para isto, aqui estão algumas referências a bibliotecas e frameworks que queremos experimentar no futuro:
Visite chrome://flags no seu navegador Chrome Android
Encontre e ative a opção WebXR Incubations
:::
Sem essa especificação, ainda é possível solicitar acesso à imagem da câmara e executar algoritmos personalizados para determinar a pose do dispositivo. A desvantagem é que os utilizadores terão de aceitar permissões adicionais como o acesso à câmara, e o rastreamento não será tão preciso quanto com as capacidades nativas do dispositivo.
Aqui estão algumas bibliotecas para adicionar rastreamento de imagem baseado no acesso à câmara e algoritmos de visão computacional local:
Página traduzida automaticamente usando IA
Sem suporte completo de código, mas o Needle é suportado para criar ficheiros USDZ dinâmicos e interativos.
requer Looking Glass bridge e algum código personalizado,
oficialmente suportado, ver
1: Requer a ativação de uma flag do navegador: chrome://flags/#webxr-navigation-permission2: Requer a ativação de um interruptor nas definições de programador3: Usa ou
Visite os nossos para experimentar muitos exemplos interativos agora mesmo. Ou, experimente ao vivo no seu dispositivo clicando nos botões QR Code (para telemóveis) ou Abrir no Quest (para headsets Meta Quest) abaixo.
Ativar AR e VR
Adicione um componente WebXR.Opcional: pode definir um avatar personalizado referenciando um .
Por predefinição, um DefaultAvatar básico é atribuído.
usa tudo o acima para uma experiência sandbox multijogador multiplataforma. — #madebyneedle 💚
O Needle Engine suporta o estado . Isto permite que os utilizadores atravessem perfeitamente entre aplicações WebXR sem sair de uma sessão imersiva – permanecem em VR ou AR.
Leia mais sobre scripting para XR na
Exemplo de Avatar Rig com modelo básico de pescoço e restrições de membros
Exemplo de hierarquia de Prefab de Avatar
Use a classe .ar-session-active para mostrar/ocultar conteúdo específico enquanto estiver em AR. A pseudo-classe não deve ser usada neste momento porque o seu uso quebra o WebXR Viewer da Mozilla.
É importante notar que o elemento de sobreposição , independentemente do estilo que tenha sido aplicado. Se quiser alinhar itens de forma diferente, deve criar um container dentro do elemento class="ar".
As do Needle Engine foram concebidas para preencher essa lacuna, trazendo capacidades interativas automáticas para dispositivos iOS em cenas compostas por componentes específicos. Elas suportam um subconjunto da funcionalidade que está disponível em WebXR, por exemplo, áudio espacial, rastreamento de imagem, animações e muito mais. Veja para mais informações.
Exportar conteúdo em tempo real como ficheiros USDZ. Estes ficheiros podem ser exibidos em dispositivos iOS em AR. Quando exportados de cenas com Everywhere Actions, a interatividade é a mesma, mais do que suficiente para configuradores de produtos, experiências narrativas e semelhantes. Um exemplo é o , onde as criações (não a sessão ao vivo) podem ser vistas em AR.
utiliza esta abordagem. Os jogadores podem colaborar para colocar texto na cena nos seus ecrãs e depois ver os resultados em AR no iOS. No Android, também podem interagir diretamente em WebXR. — #madewithneedle por Katja Rempel 💚
Guiar utilizadores para navegadores compatíveis com WebXR no iOS. Dependendo do seu público-alvo, pode guiar utilizadores em iOS para, por exemplo, o da Mozilla para experimentar AR no iOS.
(código aberto)
por FireDragonGameStudio
(código aberto)
(comercial)
O Needle Engine suporta WebXR Image Tracking () no Android e QuickLook Image Tracking no iOS.
Pode encontrar documentação adicional na secção .
:::warning O WebXR Image Tracking ainda está na fase de "draft" e não está geralmente disponível Até agora, os fornecedores de navegadores não conseguiram concordar na API final para o rastreamento de imagem no WebXR. Enquanto a especificação estiver na fase de "draft" (), você e os utilizadores da sua aplicação precisam de seguir estes passos para ativar o WebXR ImageTracking em dispositivos Android:
por FireDragonGameStudio
(código aberto)
(código aberto)
