Dispositivos Suportados

O Needle Engine suporta a especificação completa do WebXR, 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.

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.

¹: Requer a ativação de uma flag do navegador: chrome://flags/#webxr-navigation-permission²: Requer a ativação de um interruptor nas definições de programador ³: Usa Everywhere Actions ou outras abordagens

Exemplos de VR, AR e QuickLook

Visite os nossos Exemplos Needle Engine 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.

Adicionar capacidades VR e AR a uma cena

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.

Capacidades Básicas

1. Ativar AR e VR Adicione um componente WebXR. Opcional: pode definir um avatar personalizado referenciando um Prefab de Avatar. Por predefinição, um DefaultAvatar básico é atribuído.

2. 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.

Multijogador

1. Ativar Rede Adicione um componente SyncedRoom.

2. Ativar Sincronização do Visualizador de Desktop Adicione um componente SyncedCamera.

3. Ativar Chat de Voz Adicione um componente VoIP.

Castle Builder usa tudo o acima para uma experiência sandbox multijogador multiplataforma. — #madebyneedle 💚

Componentes AR Especiais

1. 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.
2. Defina a escala do utilizador para diminuir (< 1) ou aumentar (> 1) o utilizador em relação à cena ao entrar em AR.

Controlar a exibição de objetos para XR

1. 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.

2. 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.

Viajar entre mundos VR

O Needle Engine suporta o estado sessiongranted. Isto permite que os utilizadores atravessem perfeitamente entre aplicações WebXR sem sair de uma sessão imersiva – permanecem em VR ou AR.

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.

Scripting

Leia mais sobre scripting para XR na documentação de scripting XR

Avatares

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.

Componentes Experimentais de Avatar

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.

Exemplo de Avatar Rig com modelo básico de pescoço e restrições de membros

• 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.

Exemplo de hierarquia de Prefab de Avatar

• 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!

Sobreposições de Conteúdo HTML em AR

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>:

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>seu conteúdo para AR e desktop vai aqui</p>
          <p class="only-in-ar">Isto só estará visível em AR</p>
        <div>
    </div>
</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).

Use a classe .ar-session-active para mostrar/ocultar conteúdo específico enquanto estiver em AR. A pseudo-classe :xr-overlay não deve ser usada neste momento porque o seu uso quebra o WebXR Viewer da Mozilla.

.only-in-ar {
  display: none;
}

.ar-session-active .only-in-ar {
  display:initial;
}

É importante notar que o elemento de sobreposição será sempre exibido em ecrã inteiro enquanto estiver em XR, independentemente do estilo que tenha sido aplicado. Se quiser alinhar itens de forma diferente, deve criar um container dentro do elemento class="ar".

Realidade Aumentada e WebXR em iOS

As experiências de Realidade Aumentada em iOS são algo limitadas, devido à Apple atualmente não suportar WebXR em dispositivos iOS.

As Everywhere Actions 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 a documentação para mais informações.

Instrumento Musical – Suporte WebXR e QuickLook

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.

Everywhere Actions e outras opções para AR em iOS

Existem também outras opções para guiar utilizadores de iOS para experiências AR interativas ainda mais capazes:

3. 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 Castle Builder, onde as criações (não a sessão ao vivo) podem ser vistas em AR.

Encryption in Space 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 💚

1. 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 WebXR Viewer da Mozilla para experimentar AR no iOS.

2. 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:

   • AR.js (código aberto)
     • Integração experimental AR.js por FireDragonGameStudio
   • Mind AR (código aberto)
   • 8th Wall (comercial)

Rastreamento de Imagem

O Needle Engine suporta WebXR Image Tracking (Demo ao Vivo) no Android e QuickLook Image Tracking no iOS.

Pode encontrar documentação adicional na secção Everywhere Actions.

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:

• Integração experimental AR.js com Needle Engine por FireDragonGameStudio
• AR.js (código aberto)
• Mind AR (código aberto)

Referências

WebXR Device APIcaniuse: WebXRApple's Preliminary USD Behaviours

Página traduzida automaticamente usando IA