Inicio Rápido - Realidad Virtual

Como Wonderland Engine está enfocado en WebXR, usar la API de Dispositivo WebXR a través de él es muy conveniente.

En este tutorial, configuraremos los componentes necesarios para las entradas del controlador.

Continuamos donde lo dejamos en Getting Started.

Fundamentos 

Algo de información de fondo, siéntete libre de saltar a Entrada del Controlador, si estás familiarizado con VR y ejecutar Apps WebXR en el Oculus Quest.

Renderizado Estéreo 

Una vez que se ingresa al modo VR después de que el usuario presione el botón “VR” en la parte inferior derecha de la pantalla, Wonderland Engine comienza automáticamente a renderizar en estéreo.

“Estéreo” significa que hay dos vistas renderizadas: una para el ojo izquierdo y otra para el derecho. Lo opuesto es “mono”, que es una vista única.

Al hacer clic en el objeto “Player”, encontrarás la “NonVrCamera” para renderizado mono, y los objetos “EyeLeft” y “EyeRight” para renderizado estéreo.

Entrada de Auriculares 

Para hacer que las vistas sigan la cabeza del usuario, “EyeLeft” y “EyeRight” ya tienen configurados componentes de “input” (de la escena predeterminada). Los componentes de input leen varias formas de poses de entrada y las aplican a los objetos a los que están adjuntos.

Ver en Dispositivos XR 

Para ver en el auricular, necesitas conectar el auricular y reenviar tráfico web a localhost desde el auricular XR a tu PC:

  1. ¡Asegúrate de tener habilitada la “Depuración USB” para tu dispositivo! En dispositivos Android, esto requiere tocar el “Número de compilación” hasta que aparezca la confirmación, luego encuentra las configuraciones de “Depuración USB” y habilítalas.

Dispositivos: Meta Quest 1/2/Pro, Pico Neo 3, Pico 4, HoloLens

  1. Sigue la guía de Chrome sobre cómo depurar dispositivos de manera remota. En caso de que el Oculus Quest no aparezca, necesitas ejecutar adb devices para iniciar el servidor adb. Adb viene con las Android Platform Tools.

  2. Finalmente, reenvía el puerto 8080 siguiendo esta Guía de Reenvío de Puertos de Chrome. De esta manera, puedes acceder a http://localhost:8080/index.html desde el Meta/Pico Browser y evitar la restricción a “https” para WebXR (¡esto solo es posible en “localhost”!).

Dispositivos: Meta Quest 1/2/Pro, Huawei VR, HTC Vive Focus 3, Lynx R1, Pico Neo 3, Pico 4

  1. Abre Firefox Nightly, encuentra el menú en la parte superior derecha, Tools > More Tools > Remote Debugging.

  2. En Wolvic, ve a “Settings > Developer Options > Enable Remote Debugging”.

Evitar el Cable 

Para habilitar “ADB over Wifi”, comienza conectando tu dispositivo vía USB-C a tu PC.

En Meta Quest Developer Hub, puedes habilitar “ADB over Wifi” y desconectar el dispositivo.

Para otros dispositivos, ejecuta los siguientes comandos después de instalar las Android Platform Tools:

1adb devices  # Verificar si tu dispositivo está conectado
2adb tcpip 5555
3adb shell ip addr show wlan0  # Encontrar la dirección IP del dispositivo
4adb connect <ip-address-of-device>:5555
5# Desconectar el cable USB
6adb devices  # Verificar que tu dispositivo aún esté conectado

Entrada del Controlador 

Ahora que nuestra aplicación se ejecuta en el Oculus Quest, nuestro próximo paso será agregar controladores.

Modelos de Controladores 

Descarga quest_controllers.glb, modelos de controlador Oculus Touch v2 de baja poli por Jezza3D, que fueron importados a Blender y exportados como glb con algunas modificaciones en su transformación.

Arrastra y suelta el nuevo archivo en la carpeta de assets. Desde ahí, arrástralos sobre el objeto “Player”.

Inicio Rápido - Realidad Virtual

Componentes 

Agrega un componente de input a cada uno de los controladores y configura el tipo de entrada en hand right y hand left respectivamente.

Inicio Rápido - Realidad Virtual

Después de hacer clic en “Package”, ¡tus controladores deberían ahora ser visibles y moverse en VR!

Resumen 

Crear controles WebXR en Wonderland Engine es muy conveniente.

Desde aquí, puedes comenzar a agregar comportamientos personalizados con tus propios componentes JavaScript.