Desenvolvimento WebXR com JavaScript
Importante
O WebVR está obsoleto e não está disponível nos navegadores atuais, portanto, não deve ser usado para nenhum novo desenvolvimento. Você precisará migrar todas as implementações existentes do WebVR para o WebXR.
O WebXR continua disponível. No entanto, o suporte para WebXR foi descontinuado (sem correções de bugs, atualizações de conteúdo ou suporte técnico) e, portanto, não podemos garantir que os aplicativos continuarão funcionando por um longo período de tempo.
JavaScript é uma das linguagens de programação mais populares do mundo! É simples, leve e amplamente utilizado na Web. Crie experiências de Realidade Misturada mais envolventes aplicando o poder de suas habilidades em JavaScript e Web.
Aplicativos de realidade misturada na Web
Os recursos de Realidade Misturada estão disponíveis na Web por meio do WebXR. Você pode ver o conteúdo de realidade virtual (VR) e realidade aumentada (AR) em um navegador compatível habilitado para WebXR sem instalar mais nenhum software ou plug-in. Você pode usar esse mesmo navegador com um dispositivo físico como o HoloLens 2.
A API do dispositivo WebXR é para acessar dispositivos de realidade virtual (VR) e realidade aumentada (AR), incluindo sensores e monitores montados na cabeça, na Web. A API do dispositivo WebXR está disponível no Microsoft Edge e no Chrome versão 79, e versões posteriores dão suporte ao WebXR como padrão. Você pode verificar o status de suporte mais recente do navegador para WebXR em caniuse.com.
| Recurso WebXR | Disponibilidade |
|---|---|
| API de dispositivo WebXR (w3.org) | Edge 81 na área de trabalho do Windows Edge 91 no HoloLens 2 |
| Módulo de Realidade Aumentada WebXR - Nível 1 (w3.org) | Borda 91. Somente HoloLens 2 |
| Módulo de entrada manual WebXR - Nível 1 (w3.org) | Borda 93. Somente HoloLens 2 |
| Módulo de Âncoras WebXR (immersive-web.github.io) | Borda 93. Somente HoloLens 2 |
| Módulo de teste de acerto WebXR (immersive-web.github.io) | Borda 93. Somente HoloLens 2 |
Visualizando o WebXR
Você pode exibir experiências WebXR no Windows Mixed Reality com os novos navegadores Microsoft Edge e Firefox Reality . Para testar se o navegador é compatível com WebXR, você pode navegar até Exemplos do WebXR no navegador.
O que posso usar para desenvolver experiências imersivas na Web?
A lista a seguir mostra as estruturas e APIs JavaScript para criar experiências imersivas que atualmente dominam o mercado e são amplamente aceitas e adotadas por desenvolvedores JavaScript de realidade misturada:
| Estrutura | Exemplo |
|---|---|
| Babylon.js O Babylon é um mecanismo 3D do JavaScript que facilita o desenvolvimento de conteúdo 3D e de aplicativos imersivos. Antes de começar a usar aplicativos imersivos, recomendamos que você aprenda os conceitos básicos do desenvolvimento Babylon.js. - Aprenda a criar aplicativos 3D com Babylon.js: Primeiros passos - Brinque com exemplos 3D e seu código-fonte usando Babylon.js: Playground - Aprofunde-se no WebXR - Saiba como começar com nossos tutoriais: Crie seu primeiro aplicativo "Hello World!" |
 |
| Cavalete A-frame é uma estrutura JavaScript declarativa que você pode usar para começar a usar a Realidade Virtual na Web. Para saber mais, confira a documentação do A-Frame |
 |
| Three.js Three.js é uma biblioteca 3D popular para criar experiências imersivas. Saiba mais sobre three.js e explore exemplos. |
 |
| WebGL Você pode acessar as APIs do dispositivo WebXR diretamente usando APIs WebGL. WebGL (Web Graphics Library) é uma API JavaScript para renderizar gráficos 3D e 2D interativos de alto desempenho em qualquer navegador da Web compatível sem o uso de plug-ins. |
 |
Confira também
- Especificação da API do dispositivo WebXR
- Documentação da API do dispositivo WebXR
- Exemplos do WebXR
- Immersiveweb.dev
- Usando Babylon.js para criar experiências WebXR
- WebGL API
- API do gamepad e extensões do gamepad
- Windows Mixed Reality e o novo Microsoft Edge
- Manipulando o contexto perdido no WebGL
- Bloqueio de ponto
- boa sorte
- Grupo da comunidade da Web imersiva
- Web imersiva W3C Github