VR & AR (WebXR)

Dispositivos compatibles

Needle Engine es compatible con la especificación completa de WebXR, incluyendo AR y VR. WebXR es un estándar web oficial que trae experiencias inmersivas a la web, con todas las ventajas de la web: sin instalación, sin tienda de apps, sin SDKs necesarios.

Todos los dispositivos con un navegador pueden ejecutar apps hechas con Needle. Si el navegador es compatible con WebXR, tus apps funcionarán automáticamente también en XR, usando nuestros componentes integrados. Esto incluye navegadores de escritorio, navegadores móviles, muchos navegadores en visores de AR/VR, pero también otras tecnologías emergentes como pantallas Looking Glass, gafas inteligentes, y más.

:::tip Soporte AR sin app para iOS vía USDZ/QuickLook Aunque los dispositivos iOS aún no tienen soporte oficial para WebXR, Needle soporta la creación de experiencias AR en iOS usando Everywhere Actions. Consulta la sección de iOS para más detalles. Puedes crear experiencias ricas e interactivas que funcionen sin problemas en AR en dispositivos iOS, incluso con las limitaciones que Apple ha impuesto.

Cuando entras en modo AR en iOS, Needle convertirá automáticamente tu escena a un archivo USDZ, que luego se muestra en AR usando QuickLook de Apple. Se conservarán los objetos, materiales, audio, animación y Everywhere Actions. :::

La siguiente tabla lista algunos de los dispositivos que hemos verificado que funcionan con Needle Engine. Cuando salga un nuevo dispositivo compatible con WebXR, funcionará con tus apps de fábrica. Esta es una de las grandes ventajas de construir con el navegador como plataforma: la compatibilidad no se limita a un conjunto específico de dispositivos o SDKs.

Dispositivo Visor
Navegador
Notas

Apple Vision Pro

✔️ Safari

hand tracking, soporte para transient pointer

Meta Quest 3

✔️ Meta Browser

hand tracking, soporte para sessiongranted1, passthrough, depth sensing, mesh tracking

Meta Quest 3S

✔️ Meta Browser

hand tracking, soporte para sessiongranted1, passthrough, depth sensing, mesh tracking

Meta Quest 2

✔️ Meta Browser

hand tracking, soporte para sessiongranted1, passthrough (blanco y negro)

Meta Quest 1

✔️ Meta Browser

hand tracking, soporte para sessiongranted1

Meta Quest Pro

✔️ Meta Browser

hand tracking, soporte para sessiongranted1, passthrough

Pico Neo 4

✔️ Pico Browser

passthrough, hand tracking2

Pico Neo 3

✔️ Pico Browser

no hand tracking, thumbsticks de controlador invertidos

Oculus Rift 1/2

✔️ Chrome

Valve Index

✔️ Chrome

HTC Vive

✔️ Chrome

Hololens 2

✔️ Edge

hand tracking, soporte para AR y VR (en modo VR, también se renderiza el fondo)

Dispositivo móvil
Navegador
Notas

Android 10+

✔️ Chrome

Android 10+

✔️ Firefox

iOS 15+

(✔️)3 Safari (✔️)3 Chrome

No hay soporte de código completo, pero Everywhere Actions de Needle son compatibles para crear archivos USDZ dinámicos e interactivos.

iOS 15+

✔️ WebXR Viewer

el navegador está algo desactualizado actualmente

Hololens 2

✔️ Edge

Hololens 1

❌

no tiene soporte WebXR

Magic Leap 2

✔️

Magic Leap 1

✔️

dispositivo obsoleto

Otros Dispositivos
Navegador
Notas

Looking Glass Holographic Display

✔️ Chrome

requiere Looking Glass bridge y algo de código personalizado, ver nuestra muestra

Logitech MX Ink

✔️ Meta Browser

soporte oficial, ver documentación

1: Requiere habilitar un flag del navegador: chrome://flags/#webxr-navigation-permission2: Requiere habilitar una opción en los ajustes de Desarrollador3: Usa Everywhere Actions u otros enfoques

Ejemplos de VR, AR y QuickLook

Visita nuestras Needle Engine Samples para probar muchos ejemplos interactivos ahora mismo. O, pruébalo en vivo en tu dispositivo haciendo clic en los botones QR Code (para teléfonos) o Open on Quest (para visores Meta Quest) a continuación.

Añadir capacidades VR y AR a una escena

Las capacidades de AR, VR y networking en Needle Engine están diseñadas para ser modulares. Puedes elegir no soportar ninguna de ellas, o añadir solo características específicas.

Capacidades básicas

  1. Habilitar AR y VR Añade un componente WebXR.Opcional: puedes establecer un avatar personalizado referenciando un Prefab de Avatar. Por defecto, se asigna un DefaultAvatar básico.

  2. Habilitar Teleportation Añade un componente TeleportTarget a las jerarquías de objetos sobre las que se puede teletransportar. Para excluir objetos específicos, establece su layer a IgnoreRaycasting.

Multijugador

  1. Habilitar Networking Añade un componente SyncedRoom.

  2. Habilitar Desktop Viewer Sync Añade un componente SyncedCamera.

  3. Habilitar Voice Chat Añade un componente VoIP.

:::tip Estructura de escena Estos componentes pueden estar en cualquier lugar dentro de tu jerarquía. También pueden estar todos en el mismo GameObject, lo cual es un patrón común. :::

Castle Builder usa todo lo anterior para una experiencia sandbox multijugador multiplataforma. — #madebyneedle 💚

Componentes AR especiales

  1. Definir la raíz y escala de la sesión AR Añade un componente WebARSessionRoot a tu objeto root. Para experiencias AR, a menudo quieres escalar la escena para que se ajuste al mundo real.

  2. Define la user scale para encoger (< 1) o ampliar (> 1) al usuario en relación con la escena al entrar en AR.

Controlar la visualización de objetos para XR

  1. Definir si un objeto es visible en Browser, AR, VR, First Person, Third Person Añade un componente XR Flag al objeto que quieres controlar.

  2. Cambia las opciones en el desplegable según sea necesario. Los casos de uso comunes son

    • ocultar suelos al entrar en AR

    • ocultar partes del Avatar en vistas en Primera o Tercera Persona. Por ejemplo, en vista en primera persona, una persona no debería poder ver su propio modelo de cabeza.

Viajar entre mundos VR

Needle Engine es compatible con el estado sessiongranted. Esto permite a los usuarios navegar sin problemas entre aplicaciones WebXR sin salir de una sesión inmersiva: permanecen en VR o AR.

Actualmente, esto solo es compatible con Oculus Quest 1, 2 y 3 en el Navegador de Oculus. En otras plataformas, los usuarios serán expulsados de su sesión inmersiva actual y tendrán que volver a entrar en VR en la nueva página. Requiere habilitar un flag del navegador: chrome://flags/#webxr-navigation-permission

  • Haz clic en objetos para abrir enlaces Añade el componente OpenURL que facilita mucho la construcción de mundos conectados.

Scripting

Lee más sobre scripting para XR en la documentación de scripting XR

Avatares

Aunque actualmente no ofrecemos una integración lista para usar de sistemas de avatares externos, puedes crear avatares o sistemas personalizados específicos de la aplicación.

  • Crear un Avatar personalizado

    • Crea un GameObject vacío como root del avatar

    • Añade un objeto llamado Head y añade un XRFlag configurado en Third Person

    • Añade objetos llamados HandLeft y HandRight

    • Añade tus gráficos debajo de estos objetos.

Componentes de Avatar Experimentales

Hay una serie de componentes experimentales para construir Avatares más expresivos. En este punto, recomendamos duplicarlos para hacer tus propias variantes, ya que pueden ser cambiados o eliminados más adelante.

Ejemplo de Rig de Avatar con modelo de cuello básico y constraints de extremidades

  • Random Player Colors Como ejemplo de personalización de avatar, puedes añadir un componente PlayerColor a tus renderers. Este color aleatorio se sincroniza entre jugadores.

  • Eye RotationAvatarEyeLook_Rotation rota GameObjects (ojos) para seguir a otros avatares y a un target aleatorio. Este componente se sincroniza entre jugadores.

  • Eye BlinkingAvatarBlink_Simple oculta GameObjects (ojos) aleatoriamente cada pocos segundos, emulando un parpadeo.

    Ejemplo de jerarquía de Prefab de Avatar

  • Offset ConstraintOffsetConstraint permite desplazar un objeto en relación con otro en el espacio del Avatar. Esto permite, por ejemplo, que un Cuerpo siga a la Cabeza pero mantenga la rotación nivelada. También permite construir modelos de cuello simples.

  • Limb ConstraintBasicIKConstraint es un constraint muy minimalista que toma dos transforms y un hint. Esto es útil para construir cadenas de brazos o piernas simples. Como la rotación no está implementada correctamente actualmente, los brazos y las piernas pueden necesitar ser rotacionalmente simétricos para "verse bien". ¡Se llama "Basic" por una razón!

Superposiciones de contenido HTML en AR

Si quieres mostrar contenido html diferente dependiendo de si el cliente está usando un navegador regular o usando AR o VR, puedes usar un conjunto de clases html. Esto se controla a través de clases de elementos HTML. Por ejemplo, para que el contenido aparezca en escritorio y en AR, añade un <div class="desktop ar"> ... </div> dentro de la etiqueta <needle-engine>:

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>tu contenido para AR y escritorio va aquí</p>
          <p class="only-in-ar">Esto solo será visible en AR</p>
        <div>
    </div>
</needle-engine>

Las Superposiciones de Contenido se implementan usando la característica opcional dom-overlay, que generalmente es compatible con dispositivos AR basados en pantalla (teléfonos, tabletas).

Usa la clase .ar-session-active para mostrar/ocultar contenido específico mientras estás en AR. La :xr-overlay pseudo class no debería usarse en este momento porque su uso rompe el WebXR Viewer de Mozilla.

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

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

Vale la pena señalar que el elemento overlay siempre se mostrará a pantalla completa mientras se esté en XR, independientemente del estilo aplicado. Si quieres alinear elementos de forma diferente, debes crear un container dentro del elemento class="ar".

Realidad Aumentada y WebXR en iOS

Las experiencias de Realidad Aumentada en iOS son algo limitadas, debido a que Apple actualmente no soporta WebXR en dispositivos iOS.

Las Everywhere Actions de Needle Engine están diseñadas para llenar esa brecha, trayendo capacidades interactivas automáticas a dispositivos iOS para escenas compuestas por componentes específicos. Soportan un subconjunto de la funcionalidad disponible en WebXR, por ejemplo spatial audio, image tracking, animaciones, y más. Consulta la documentación para más información.

:::tip Soporte limitado de código personalizado en QuickLook Apple tiene fuertes limitaciones sobre qué tipo de contenido puede usarse en QuickLook. Por lo tanto, los componentes de script personalizados no pueden convertirse automáticamente para su uso en AR en iOS. Puedes añadir soporte para algunos tipos de código personalizado usando nuestra API de Everywhere Actions. :::

Instrumento Musical – Soporte WebXR y QuickLook

Aquí hay un ejemplo de un instrumento musical que usa Everywhere Actions y por lo tanto funciona en navegadores y en AR en dispositivos iOS. Utiliza spatial audio, animación e interacciones de toque.

Everywhere Actions y otras opciones para AR en iOS

También hay otras opciones para guiar a los usuarios de iOS hacia experiencias AR interactivas aún más capaces:

  1. Exportar contenido sobre la marcha como archivos USDZ. Estos archivos pueden mostrarse en dispositivos iOS en AR. Cuando se exportan desde escenas con Everywhere Actions, la interactividad es la misma, más que suficiente para configuradores de productos, experiencias narrativas y similares. Un ejemplo es Castle Builder donde las creaciones (no la sesión en vivo) pueden verse en AR.

Encryption in Space utiliza este enfoque. Los jugadores pueden colocar texto colaborativamente en la escena en sus pantallas y luego ver los resultados en AR en iOS. En Android, también pueden interactuar directamente en WebXR. — #madewithneedle por Katja Rempel 💚

  1. Guiar a los usuarios hacia navegadores compatibles con WebXR en iOS. Dependiendo de tu audiencia objetivo, puedes guiar a los usuarios en iOS hacia, por ejemplo, el WebXR Viewer de Mozilla para experimentar AR en iOS.

  2. Usar acceso a la cámara y algoritmos personalizados en dispositivos iOS. Se puede solicitar acceso a la imagen de la cámara y ejecutar algoritmos personalizados para determinar la pose del dispositivo. Aunque actualmente no proporcionamos componentes integrados para esto, aquí hay algunas referencias a bibliotecas y frameworks que queremos probar en el futuro:

Image Tracking

Needle Engine soporta WebXR Image Tracking (Live Demo) en Android y QuickLook Image Tracking en iOS.

Puedes encontrar documentación adicional en la sección Everywhere Actions.

:::warning WebXR Image Tracking todavía está en fase de "borrador" y no está generalmente disponible Hasta ahora, los proveedores de navegadores no han podido ponerse de acuerdo sobre la API final de image tracking para WebXR. Mientras la especificación esté en fase de "borrador" (Marker Tracking Explainer), tú y los usuarios de tu app necesitaréis seguir estos pasos para habilitar WebXR ImageTracking en dispositivos Android:

  1. Visita chrome://flags en tu navegador Chrome de Android

  2. Encuentra y habilita la opción WebXR Incubations :::

Sin esa especificación, aún se puede solicitar acceso a la imagen de la cámara y ejecutar algoritmos personalizados para determinar la pose del dispositivo. La desventaja es que los usuarios tendrán que aceptar permisos adicionales como el acceso a la cámara, y el tracking no será tan preciso como con las capacidades nativas del dispositivo.

Aquí tienes algunas bibliotecas para añadir image tracking basado en el acceso a la cámara y algoritmos de visión por computadora locales:

Referencias

WebXR Device APIcaniuse: WebXRApple's Preliminary USD Behaviours

Página traducida automáticamente con IA

PreviousvisionNextblender

Last updated