Desarrollo de WebXR con JavaScript

Artículo
02/18/2025

Importante

WebVR está en desuso y no está disponible en los exploradores actuales, por lo que no debe usarse para ningún desarrollo nuevo. Tendrá que migrar las implementaciones de WebVR existentes a WebXR.

WebXR sigue estando disponible. Sin embargo, se interrumpe la compatibilidad con WebXR (sin correcciones de errores, actualizaciones de contenido ni soporte técnico) y, por lo tanto, no podemos garantizar que las aplicaciones seguirán funcionando durante un período de tiempo prolongado.

JavaScript es uno de los lenguajes de programación más populares del mundo. Es simple, ligero y ampliamente utilizado en la Web. Cree experiencias de Mixed Reality más atractivas aplicando la eficacia de sus aptitudes de JavaScript y Web.

Mixed Reality aplicaciones en la web

Mixed Reality características están disponibles en la Web a través de WebXR. Puede ver contenido de realidad virtual (VR) y realidad aumentada (AR) en un explorador compatible habilitado para WebXR sin instalar más software o complementos. Puede usar ese mismo explorador con un dispositivo físico como el HoloLens 2.

La API de dispositivos WebXR es para acceder a dispositivos de realidad virtual (VR) y realidad aumentada (AR), incluidos sensores y pantallas montadas en la cabeza, en la Web. La API de dispositivo WebXR está disponible en Microsoft Edge y Chrome, versión 79, y las versiones posteriores admiten WebXR de forma predeterminada. Puede comprobar el estado de compatibilidad del explorador más reciente para WebXR en caniuse.com.

Característica WebXR	Disponibilidad
API de dispositivo WebXR (w3.org)	Edge 81 en Windows Desktop Edge 91 en HoloLens 2
Módulo de realidad aumentada de WebXR: nivel 1 (w3.org)	Borde 91. solo HoloLens 2
Módulo de entrada manual WebXR: nivel 1 (w3.org)	Borde 93. solo HoloLens 2
Módulo WebXR Anchors (immersive-web.github.io)	Borde 93. solo HoloLens 2
Módulo de prueba de aciertos de WebXR (immersive-web.github.io)	Borde 93. solo HoloLens 2

Visualización de WebXR

Puede ver las experiencias de WebXR en Windows Mixed Reality con los nuevos exploradores Microsoft Edge y Firefox Reality. Para probar si el explorador admite WebXR, puede ir a Ejemplos de WebXR en el explorador.

¿Qué puedo usar para desarrollar experiencias web inmersivas?

En la lista siguiente se muestran los marcos de JavaScript y las API para crear experiencias envolventes que actualmente dominan el mercado y que son ampliamente aceptadas y adoptadas por desarrolladores de JavaScript de realidad mixta:

Marco	Ejemplo
Babylon.js Babylon es un motor 3D de JavaScript que facilita el desarrollo de contenido 3D y aplicaciones envolventes. Antes de empezar a trabajar con aplicaciones inmersivas, se recomienda aprender los conceptos básicos de Babylon.js desarrollo. - Aprenda a crear aplicaciones 3D con Babylon.js: Introducción - Reproducir con ejemplos 3D y su código fuente mediante Babylon.js: Playground - Profundizar más en WebXR - Obtenga información sobre cómo empezar a trabajar con nuestros tutoriales: Crear su primera aplicación "Hola mundo!".
A-Frame A-frame es un marco de JavaScript declarativo que puede usar para empezar a trabajar con Virtual Reality en la Web. Para más información, consulte la documentación de A-Frame.
Three.js Three.js es una popular biblioteca 3D para crear experiencias envolventes. Obtenga más información sobre three.js y explore ejemplos.
WebGL Puede acceder directamente a las API de dispositivo WebXR mediante las API de WebGL. WebGL (Biblioteca de gráficos web) es una API de JavaScript para representar gráficos 3D y 2D interactivos de alto rendimiento en cualquier explorador web compatible sin el uso de complementos.