WebXR Input-kilder: Mestring af Controller- og Håndsporing for Fordybende Oplevelser

WebXR tilbyder kraftfulde værktøjer til at skabe fordybende virtual og augmented reality-oplevelser direkte i browseren. Et kritisk aspekt af enhver fordybende applikation er den måde, hvorpå brugere interagerer med den virtuelle verden. WebXR giver robust understøttelse for forskellige input-kilder, primært controllere og håndsporing. At forstå, hvordan man udnytter disse inputmetoder, er afgørende for at skabe intuitive og engagerende oplevelser for et globalt publikum.

Forståelse af WebXR Input-kilder

I WebXR repræsenterer en input-kilde en fysisk enhed eller metode, der bruges til at interagere med det virtuelle miljø. Disse input-kilder kan spænde fra simple gamepad-lignende controllere til sofistikerede håndsporingssystemer. Hver input-kilde leverer en strøm af data, som udviklere kan bruge til at styre objekter, navigere i scenen og udløse handlinger inden for XR-oplevelsen.

Typer af Input-kilder

• Controllere: Fysiske enheder med knapper, joysticks, triggers og touchpads, som brugere holder og manipulerer. Controllere er en almindelig og pålidelig inputmetode til VR-oplevelser.
• Håndsporing: Bruger kameraer og computer vision-algoritmer til at detektere og spore brugerens hænder i 3D-rum. Dette giver mulighed for naturlige og intuitive interaktioner med det virtuelle miljø.
• Andre Input-kilder: Selvom det er mindre almindeligt, kan WebXR også understøtte andre input-kilder som hovedsporing (ved hjælp af blikbaseret interaktion) og stemmegenkendelse.

Arbejde med Controllere i WebXR

Controllere er en bredt understøttet og relativt ligetil input-kilde til WebXR-udvikling. De tilbyder en balance mellem præcision og brugervenlighed, hvilket gør dem velegnede til en bred vifte af applikationer.

Detektering og Adgang til Controllere

WebXR API'en giver hændelser (events), der underretter udviklere, når nye input-kilder tilsluttes eller frakobles. xr.session.inputsourceschange-hændelsen er den primære måde at opdage ændringer i tilgængelige input-kilder.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // Ny inputkilde tilsluttet
  event.added.forEach(inputSource => {
    console.log('New input source:', inputSource);
    // Håndter den nye inputkilde
  });

  // Inputkilde frakoblet
  event.removed.forEach(inputSource => {
    console.log('Input source removed:', inputSource);
    // Håndter den frakoblede inputkilde
  });
});

            

              
                Copy
              
            
          

Når en input-kilde er detekteret, kan du få adgang til dens egenskaber for at bestemme dens kapabiliteter, og hvordan du interagerer med den. inputSource.profiles-arrayet indeholder en liste over standardiserede profiler, der beskriver controllerens layout og funktionalitet. Almindelige profiler inkluderer 'generic-trigger', 'oculus-touch' og 'google-daydream'.

Hentning af Controller-data

For at få den aktuelle tilstand af en controller (f.eks. knaptryk, joystick-positioner, trigger-værdier), skal du bruge XRFrame.getControllerState()-metoden. Denne metode returnerer et XRInputSourceState-objekt, der indeholder controllerens aktuelle input-værdier.

            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; // Spring håndsporing over

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Få adgang til knappernes status
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Håndter knaptryk-hændelse
            console.log('Button pressed:', button);
          }
        }

        // Få adgang til akseværdier (f.eks. joystick-positioner)
        for (const axis of inputSourceState.axes) {
          console.log('Axis value:', axis);
          // Brug akseværdi til at styre bevægelse eller andre handlinger
        }

         //Få adgang til squeeze-status (hvis tilgængelig)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze pressed");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualisering af Controllerens Tilstedeværelse

Det er essentielt at give visuel feedback til brugeren for at indikere tilstedeværelsen og positionen af deres controllere i den virtuelle verden. Du kan opnå dette ved at skabe 3D-modeller af controllerne og opdatere deres positioner og orienteringer baseret på controllerens pose.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Spring håndsporing over
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Opdater controller-modellens position og 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
              
            
          

Eksempel: Controller-baseret Interaktion – Teleportering

Et almindeligt anvendelsesområde for controllere er teleportering, som giver brugerne mulighed for at bevæge sig hurtigt i det virtuelle miljø. Her er et forenklet eksempel på, hvordan man implementerer teleportering ved hjælp af en controller-trigger:

            // Tjek om trigger-knappen er trykket ned
if (inputSourceState.buttons[0].pressed) {
  // Udfør teleporteringslogik
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

Udnyt Kraften i Håndsporing i WebXR

Håndsporing tilbyder en mere naturlig og intuitiv interaktionsmetode sammenlignet med controllere. Det giver brugerne mulighed for direkte at manipulere virtuelle objekter, lave gestusser og interagere med miljøet ved hjælp af deres egne hænder.

Aktivering af Håndsporing

Håndsporing kræver, at man anmoder om 'hand-tracking' som en valgfri funktion (optional feature), når man opretter WebXR-sessionen.

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

            

              
                Copy
              
            
          

Adgang til Hånddata

Når håndsporing er aktiveret, kan du få adgang til hånddataene via inputSource.hand-egenskaben. Denne egenskab returnerer et XRHand-objekt, som repræsenterer brugerens hånd. XRHand-objektet giver adgang til positioner og orienteringer af leddene i hånden, såsom fingerspidser, knoer og håndflade.

            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; // Spring controllere over

      // Hent XRHand-objektet
      const hand = inputSource.hand;

      // Gennemgå håndens led
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Hent leddets pose
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Få adgang til leddets position og orientering
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Opdater position og rotation for en 3D-model, der repræsenterer leddet
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualisering af Håndens Tilstedeværelse

Ligesom med controllere er det afgørende at give visuel feedback til brugeren for at repræsentere deres hænder i den virtuelle verden. Du kan opnå dette ved at skabe 3D-modeller af hånden og opdatere deres positioner og orienteringer baseret på håndsporingsdata. Alternativt kan du bruge simplere visualiseringer som kugler eller kuber til at repræsentere leddenes positioner.

Eksempel: Håndbaseret Interaktion – At gribe Objekter

En af de mest almindelige og intuitive anvendelser af håndsporing er at gribe og manipulere virtuelle objekter. Her er et forenklet eksempel på, hvordan man implementerer objektgreb ved hjælp af håndsporing:

            // Tjek om en finger er tæt på et objekt
if (distanceBetweenFingerAndObject < threshold) {
  // Grib objektet
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Fastgør objektet til hånden
}

// Når fingeren bevæger sig væk fra objektet
if (distanceBetweenFingerAndObject > threshold) {
  // Slip objektet
  grabbedObject.parent = null; // Frigør objektet fra hånden
  // Anvend hastighed på objektet baseret på håndens bevægelse
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

Bedste Praksis for Udvikling af WebXR Input

For at skabe fængslende og brugervenlige WebXR-oplevelser er det vigtigt at følge disse bedste praksisser:

• Giv klar visuel feedback: Giv altid visuel feedback til brugeren for at indikere tilstedeværelsen og status for deres inputenheder (controllere eller hænder).
• Prioriter intuitive interaktioner: Design interaktioner, der føles naturlige og intuitive for brugeren. Overvej at bruge håndsporing til opgaver, der involverer direkte manipulation, og controllere til opgaver, der kræver mere præcision eller komplekse kontroller.
• Optimer for ydeevne: Håndsporing og controller-input kan være krævende for ydeevnen. Optimer din kode for at minimere forsinkelse og sikre en jævn og responsiv oplevelse. Overvej at bruge teknikker som object pooling og LOD (Level of Detail) for at forbedre ydeevnen.
• Håndter input-hændelser effektivt: Undgå at udføre dyre operationer direkte i input-hændelsesbehandlerne. I stedet kan du sætte input-hændelserne i kø og behandle dem i en separat tråd eller ved hjælp af requestAnimationFrame for at undgå at blokere den primære renderingstråd.
• Understøt flere input-kilder: Sørg for fallback-mekanismer for brugere, der ikke har adgang til håndsporing eller specifikke controllertyper. Overvej at lade brugerne skifte mellem forskellige inputmetoder baseret på deres præferencer og tilgængeligt hardware.
• Tilgængelighed: Design din XR-oplevelse med tilgængelighed for øje. Sørg for alternative inputmetoder for brugere med handicap, såsom stemmestyring eller blikbaseret interaktion. Sørg for, at alle interaktioner kommunikeres tydeligt gennem visuelle og auditive signaler.

Globale Overvejelser for Input-design

Når man designer WebXR-oplevelser for et globalt publikum, er det vigtigt at overveje kulturelle forskelle og tilgængelighedskrav. Her er nogle nøglefaktorer at huske på:

• Kulturelle forskelle i gestusgenkendelse: Gestusser kan have forskellige betydninger i forskellige kulturer. Undgå at bruge gestusser, der kan være stødende eller fejlfortolkes i visse regioner. Overvej at tilbyde alternative interaktionsmetoder eller at lade brugerne tilpasse gestus-mappinger. For eksempel er en tommelfinger op-gestus positiv i mange vestlige kulturer, men kan være stødende i dele af Mellemøsten og Sydamerika.
• Variationer i håndstørrelse og -form: Håndsporingsalgoritmer skal muligvis tilpasses for at imødekomme variationer i håndstørrelse og -form på tværs af forskellige befolkninger. Tilbyd kalibreringsmuligheder, så brugerne kan finjustere håndsporingen til deres specifikke håndkarakteristika.
• Sprog og lokalisering: Sørg for, at alle tekst- og lydsignaler er korrekt lokaliseret til forskellige sprog. Overvej at bruge ikonbaserede grænseflader for at minimere behovet for tekstlokalisering.
• Tilgængelighed for brugere med handicap: Design din XR-oplevelse med tilgængelighed for øje fra starten. Sørg for alternative inputmetoder for brugere med handicap, såsom stemmestyring, blikbaseret interaktion eller kontakt-adgang (switch access). Sørg for, at alle interaktioner kommunikeres tydeligt gennem visuelle og auditive signaler. Overvej at tilbyde muligheder for at tilpasse størrelsen og farven på tekst og ikoner for at forbedre synligheden.
• Tilgængelighed og pris på hardware: Vær opmærksom på tilgængeligheden og prisen på XR-hardware i forskellige regioner. Design din oplevelse, så den er kompatibel med en række enheder, herunder billigere mobile VR-headsets og smartphones med augmented reality.

Konklusion

At mestre WebXR input-kilder, herunder controllere og håndsporing, er afgørende for at skabe fængslende og intuitive fordybende oplevelser. Ved at forstå kapabiliteterne for hver inputmetode og følge bedste praksis for interaktionsdesign kan du skabe XR-applikationer, der er engagerende, tilgængelige og underholdende for et globalt publikum. Efterhånden som WebXR-teknologien fortsætter med at udvikle sig, kan vi forvente at se endnu mere sofistikerede inputmetoder opstå, hvilket yderligere udvisker grænserne mellem den fysiske og den virtuelle verden.

Ved at være opmærksom på detaljerne i brugerinteraktion og inkorporere disse bedste praksisser kan udviklere skabe WebXR-oplevelser, der er virkelig fordybende, intuitive og tilgængelige for brugere over hele verden. Fremtiden for XR er lys, og med fokus på gennemtænkt og brugercentreret design kan vi frigøre det fulde potentiale i denne transformative teknologi.