Fuentes de entrada de WebXR: Dominando el seguimiento de mandos y manos para experiencias inmersivas

WebXR ofrece herramientas potentes para crear experiencias inmersivas de realidad virtual y aumentada directamente en el navegador. Un aspecto crítico de cualquier aplicación inmersiva es la forma en que los usuarios interactúan con el mundo virtual. WebXR proporciona un soporte robusto para diversas fuentes de entrada, principalmente mandos y seguimiento de manos. Entender cómo aprovechar estos métodos de entrada es crucial para crear experiencias intuitivas y atractivas para una audiencia global.

Entendiendo las fuentes de entrada de WebXR

En WebXR, una fuente de entrada representa un dispositivo físico o método utilizado para interactuar con el entorno virtual. Estas fuentes de entrada pueden variar desde simples mandos tipo gamepad hasta sofisticados sistemas de seguimiento de manos. Cada fuente de entrada proporciona un flujo de datos que los desarrolladores pueden usar para controlar objetos, navegar por la escena y desencadenar acciones dentro de la experiencia XR.

Tipos de fuentes de entrada

• Mandos: Dispositivos físicos con botones, joysticks, gatillos y paneles táctiles que los usuarios sostienen y manipulan. Los mandos son un método de entrada común y fiable para las experiencias de RV.
• Seguimiento de manos: Utiliza cámaras y algoritmos de visión por computadora para detectar y seguir las manos del usuario en el espacio 3D. Esto permite interacciones naturales e intuitivas con el entorno virtual.
• Otras fuentes de entrada: Aunque menos comunes, WebXR también puede admitir otras fuentes de entrada como el seguimiento de la cabeza (usando interacción basada en la mirada) y el reconocimiento de voz.

Trabajando con mandos en WebXR

Los mandos son una fuente de entrada ampliamente compatible y relativamente sencilla para el desarrollo de WebXR. Ofrecen un equilibrio entre precisión y facilidad de uso, lo que los hace adecuados para una amplia gama de aplicaciones.

Detectar y acceder a los mandos

La API de WebXR proporciona eventos para notificar a los desarrolladores cuando se conectan o desconectan nuevas fuentes de entrada. El evento xr.session.inputsourceschange es la forma principal de detectar cambios en las fuentes de entrada disponibles.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // New input source connected
  event.added.forEach(inputSource => {
    console.log('New input source:', inputSource);
    // Handle the new input source
  });

  // Input source disconnected
  event.removed.forEach(inputSource => {
    console.log('Input source removed:', inputSource);
    // Handle the disconnected input source
  });
});

            

              
                Copy
              
            
          

Una vez que se detecta una fuente de entrada, puede acceder a sus propiedades para determinar sus capacidades y cómo interactuar con ella. El array inputSource.profiles contiene una lista de perfiles estandarizados que describen el diseño y la funcionalidad del mando. Los perfiles comunes incluyen 'generic-trigger', 'oculus-touch' y 'google-daydream'.

Obtener datos del mando

Para obtener el estado actual de un mando (por ejemplo, pulsaciones de botones, posiciones del joystick, valores del gatillo), necesita usar el método XRFrame.getControllerState(). Este método devuelve un objeto XRInputSourceState que contiene los valores de entrada actuales del mando.

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (inputSource.hand) continue; // Skip hand tracking

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Access button states
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Handle button press event
            console.log('Button pressed:', button);
          }
        }

        // Access axes values (e.g., joystick positions)
        for (const axis of inputSourceState.axes) {
          console.log('Axis value:', axis);
          // Use axis value to control movement or other actions
        }

         //Access squeeze state (if available)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze pressed");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualizar la presencia del mando

Es esencial proporcionar retroalimentación visual al usuario para indicar la presencia y posición de sus mandos en el mundo virtual. Puede lograr esto creando modelos 3D de los mandos y actualizando sus posiciones y orientaciones según la pose del mando.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Skip hand tracking
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Update the controller model's position and rotation
        controllerModel.position.set(gripPose.transform.position.x, gripPose.transform.position.y, gripPose.transform.position.z);
        controllerModel.quaternion.set(gripPose.transform.orientation.x, gripPose.transform.orientation.y, gripPose.transform.orientation.z, gripPose.transform.orientation.w);
    }
}

            

              
                Copy
              
            
          

Ejemplo: Interacción basada en mandos – Teletransportación

Un caso de uso común para los mandos es la teletransportación, que permite a los usuarios moverse rápidamente dentro del entorno virtual. Aquí hay un ejemplo simplificado de cómo implementar la teletransportación usando el gatillo de un mando:

            // Check if the trigger button is pressed
if (inputSourceState.buttons[0].pressed) {
  // Perform teleportation logic
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

Aprovechando el poder del seguimiento de manos en WebXR

El seguimiento de manos ofrece un método de interacción más natural e intuitivo en comparación con los mandos. Permite a los usuarios manipular directamente objetos virtuales, hacer gestos e interactuar con el entorno usando sus propias manos.

Habilitar el seguimiento de manos

El seguimiento de manos requiere solicitar la característica opcional 'hand-tracking' al crear la sesión de WebXR.

            navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: [],
  optionalFeatures: ['hand-tracking']
}).then(session => {
  xrSession = session;
  // ...
});

            

              
                Copy
              
            
          

Acceder a los datos de la mano

Una vez que el seguimiento de manos está habilitado, puede acceder a los datos de la mano a través de la propiedad inputSource.hand. Esta propiedad devuelve un objeto XRHand, que representa la mano del usuario. El objeto XRHand proporciona acceso a las posiciones y orientaciones de las articulaciones de la mano, como las yemas de los dedos, los nudillos y la palma.

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (!inputSource.hand) continue; // Skip controllers

      // Get the XRHand object
      const hand = inputSource.hand;

      // Iterate through the joints of the hand
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Get the pose of the joint
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Access the joint's position and orientation
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Update the position and rotation of a 3D model representing the joint
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualizar la presencia de la mano

Similar a los mandos, es crucial proporcionar retroalimentación visual al usuario para representar sus manos en el mundo virtual. Puede lograr esto creando modelos 3D de la mano y actualizando sus posiciones y orientaciones según los datos del seguimiento de manos. Alternativamente, puede usar visualizaciones más simples como esferas o cubos para representar las posiciones de las articulaciones.

Ejemplo: Interacción basada en manos – Agarrar objetos

Uno de los casos de uso más comunes e intuitivos para el seguimiento de manos es agarrar y manipular objetos virtuales. Aquí hay un ejemplo simplificado de cómo implementar el agarre de objetos usando el seguimiento de manos:

            // Check if a finger is close to an object
if (distanceBetweenFingerAndObject < threshold) {
  // Grab the object
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Attach the object to the hand
}

// When the finger moves away from the object
if (distanceBetweenFingerAndObject > threshold) {
  // Release the object
  grabbedObject.parent = null; // Detach the object from the hand
  // Apply velocity to the object based on the hand's movement
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

Mejores prácticas para el desarrollo de entradas en WebXR

Para crear experiencias de WebXR atractivas y fáciles de usar, es importante seguir estas mejores prácticas:

• Proporcione retroalimentación visual clara: Siempre proporcione retroalimentación visual al usuario para indicar la presencia y el estado de sus dispositivos de entrada (mandos o manos).
• Priorice las interacciones intuitivas: Diseñe interacciones que se sientan naturales e intuitivas para el usuario. Considere usar el seguimiento de manos para tareas que implican manipulación directa y los mandos para tareas que requieren más precisión o controles complejos.
• Optimice para el rendimiento: El seguimiento de manos y la entrada de mandos pueden consumir mucho rendimiento. Optimice su código para minimizar el retraso y garantizar una experiencia fluida y receptiva. Considere usar técnicas como el pooling de objetos y LOD (Nivel de Detalle) para mejorar el rendimiento.
• Maneje los eventos de entrada de manera eficiente: Evite realizar operaciones costosas directamente en los manejadores de eventos de entrada. En su lugar, encole los eventos de entrada y procéselos en un hilo separado o usando requestAnimationFrame para evitar bloquear el hilo de renderizado principal.
• Soporte múltiples fuentes de entrada: Proporcione mecanismos de respaldo para los usuarios que no tienen acceso al seguimiento de manos o a tipos de mandos específicos. Considere permitir a los usuarios cambiar entre diferentes métodos de entrada según sus preferencias y el hardware disponible.
• Accesibilidad: Diseñe su experiencia XR con la accesibilidad en mente. Proporcione métodos de entrada alternativos para usuarios con discapacidades, como control por voz o interacción basada en la mirada. Asegúrese de que todas las interacciones se comuniquen claramente a través de señales visuales y auditivas.

Consideraciones globales para el diseño de entradas

Al diseñar experiencias de WebXR para una audiencia global, es importante considerar las diferencias culturales y los requisitos de accesibilidad. Aquí hay algunos factores clave a tener en cuenta:

• Diferencias culturales en el reconocimiento de gestos: Los gestos pueden tener diferentes significados en diferentes culturas. Evite usar gestos que puedan ser ofensivos o malinterpretados en ciertas regiones. Considere proporcionar métodos de interacción alternativos o permitir a los usuarios personalizar los mapeos de gestos. Por ejemplo, el gesto del pulgar hacia arriba es positivo en muchas culturas occidentales, pero puede ser ofensivo en algunas partes de Oriente Medio y Sudamérica.
• Variaciones en el tamaño y la forma de la mano: Es posible que los algoritmos de seguimiento de manos necesiten adaptarse para acomodar las variaciones en el tamaño y la forma de la mano en diferentes poblaciones. Proporcione opciones de calibración para permitir a los usuarios ajustar el seguimiento de manos a las características específicas de sus manos.
• Idioma y localización: Asegúrese de que todo el texto y las señales de audio estén debidamente localizados para diferentes idiomas. Considere usar interfaces basadas en iconos para minimizar la necesidad de localización de texto.
• Accesibilidad para usuarios con discapacidades: Diseñe su experiencia XR con la accesibilidad en mente desde el principio. Proporcione métodos de entrada alternativos para usuarios con discapacidades, como control por voz, interacción basada en la mirada o acceso por interruptor. Asegúrese de que todas las interacciones se comuniquen claramente a través de señales visuales y auditivas. Considere proporcionar opciones para personalizar el tamaño y el color del texto y los iconos para mejorar la visibilidad.
• Disponibilidad y coste del hardware: Tenga en cuenta la disponibilidad y el coste del hardware XR en diferentes regiones. Diseñe su experiencia para que sea compatible con una gama de dispositivos, incluidos los visores de RV móviles de gama baja y los teléfonos inteligentes con capacidad de realidad aumentada.

Conclusión

Dominar las fuentes de entrada de WebXR, incluyendo mandos y seguimiento de manos, es esencial para crear experiencias inmersivas atractivas e intuitivas. Al comprender las capacidades de cada método de entrada y seguir las mejores prácticas para el diseño de interacción, puede crear aplicaciones XR que sean atractivas, accesibles y agradables para una audiencia global. A medida que la tecnología WebXR continúa evolucionando, podemos esperar ver surgir métodos de entrada aún más sofisticados, desdibujando aún más las líneas entre el mundo físico y el virtual.

Al prestar atención a los detalles de la interacción del usuario e incorporar estas mejores prácticas, los desarrolladores pueden crear experiencias de WebXR que son verdaderamente inmersivas, intuitivas y accesibles para usuarios de todo el mundo. El futuro de la XR es brillante, y con un enfoque en un diseño reflexivo y centrado en el usuario, podemos desbloquear todo el potencial de esta tecnología transformadora.