Desenvolvimento WebXR com JavaScript
JavaScript é uma das linguagens de programação mais populares do mundo! É simples, leve e amplamente utilizado na Web. Aproveite o poder de suas habilidades em JavaScript e Web para criar experiências de Realidade Mista mais envolventes.
Aplicações de realidade mista na web
Os recursos de Realidade Mista estão disponíveis na Web através do WebXR. Você pode ver conteúdo de realidade virtual (VR) e realidade aumentada (AR) em um navegador compatível habilitado para WebXR sem instalar nenhum software ou plug-in adicional. 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 de dispositivo WebXR está disponível no Microsoft Edge e Chrome versão 79, e versões posteriores oferecem suporte ao WebXR como padrão. Você pode verificar o status de suporte mais recente do navegador para WebXR em caniuse.com.
Observação
O WebVR foi preterido 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.
| 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. Hololens 2 apenas |
| Módulo de Entrada Manual WebXR - Nível 1 (w3.org) | Borda 93. Hololens 2 apenas |
| Módulo de âncoras WebXR (immersive-web.github.io) | Borda 93. Hololens 2 apenas |
| Módulo de teste de sucesso WebXR (immersive-web.github.io) | Borda 93. Hololens 2 apenas |
Exibindo WebXR
Você pode ver as experiências WebXR no Windows Mixed Reality com os novos navegadores Microsoft Edge e Firefox Reality . Para testar se o seu navegador suporta WebXR, você pode navegar até WebXR Samples no seu navegador.
O que posso usar para desenvolver experiências imersivas na Web?
A lista a seguir mostra as estruturas e APIs JavaScript para a criação de experiências imersivas que atualmente dominam o mercado e são amplamente aceitas e adotadas por desenvolvedores JavaScript de realidade mista:
| 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 construir aplicativos 3D com Babylon.js: Introdução - 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 de dispositivo WebXR diretamente usando APIs WebGL. WebGL (Web Graphics Library) é uma API JavaScript para renderizar gráficos 3D e 2D interativos de alto desempenho dentro de qualquer navegador da Web compatível sem o uso de plug-ins. |
 |
Confira também
- Especificação da API de dispositivo WebXR
- Documentação da API de dispositivo WebXR
- Exemplos de 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
- Pointerlock
- glTF
- Grupo de comunidade web imersivo
- Web W3C Github imersivo