WebXR-syöttölähteet: Ohjainten ja käsiseurannan hallinta immersiivisiä kokemuksia varten

WebXR tarjoaa tehokkaita työkaluja immersiivisten virtuaali- ja lisätyn todellisuuden kokemusten luomiseen suoraan selaimessa. Kriittinen osa mitä tahansa immersiivistä sovellusta on tapa, jolla käyttäjät ovat vuorovaikutuksessa virtuaalimaailman kanssa. WebXR tarjoaa vankan tuen erilaisille syöttölähteille, pääasiassa ohjaimille ja käsiseurannalle. Näiden syöttötapojen hyödyntämisen ymmärtäminen on ratkaisevan tärkeää intuitiivisten ja mukaansatempaavien kokemusten luomiseksi maailmanlaajuiselle yleisölle.

WebXR-syöttölähteiden ymmärtäminen

WebXR:ssä syöttölähde edustaa fyysistä laitetta tai menetelmää, jota käytetään vuorovaikutukseen virtuaaliympäristön kanssa. Nämä syöttölähteet voivat vaihdella yksinkertaisista peliohjainten kaltaisista laitteista kehittyneisiin käsiseurannan järjestelmiin. Jokainen syöttölähde tarjoaa datavirran, jota kehittäjät voivat käyttää objektien ohjaamiseen, näkymässä liikkumiseen ja toimintojen käynnistämiseen XR-kokemuksessa.

Syöttölähteiden tyypit

• Ohjaimet: Fyysisiä laitteita, joissa on painikkeita, ohjaussauvoja, liipaisimia ja kosketuslevyjä, joita käyttäjät pitävät ja käsittelevät. Ohjaimet ovat yleinen ja luotettava syöttötapa VR-kokemuksissa.
• Käsiseuranta: Käyttää kameroita ja tietokonenäköalgoritmeja käyttäjän käsien havaitsemiseen ja seuraamiseen 3D-tilassa. Tämä mahdollistaa luonnollisen ja intuitiivisen vuorovaikutuksen virtuaaliympäristön kanssa.
• Muut syöttölähteet: Vaikka harvinaisempia, WebXR voi tukea myös muita syöttölähteitä, kuten päänseurantaa (käyttäen katseeseen perustuvaa vuorovaikutusta) ja puheentunnistusta.

Ohjainten käyttö WebXR:ssä

Ohjaimet ovat laajalti tuettu ja suhteellisen yksinkertainen syöttölähde WebXR-kehityksessä. Ne tarjoavat tasapainon tarkkuuden ja helppokäyttöisyyden välillä, mikä tekee niistä sopivia monenlaisiin sovelluksiin.

Ohjainten havaitseminen ja käyttäminen

WebXR API tarjoaa tapahtumia, jotka ilmoittavat kehittäjille, kun uusia syöttölähteitä yhdistetään tai irrotetaan. Tapahtuma xr.session.inputsourceschange on ensisijainen tapa havaita muutoksia saatavilla olevissa syöttölähteissä.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // Uusi syöttölähde yhdistetty
  event.added.forEach(inputSource => {
    console.log('New input source:', inputSource);
    // Käsittele uusi syöttölähde
  });

  // Syöttölähde irrotettu
  event.removed.forEach(inputSource => {
    console.log('Input source removed:', inputSource);
    // Käsittele irrotettu syöttölähde
  });
});

            

              
                Copy
              
            
          

Kun syöttölähde on havaittu, voit käyttää sen ominaisuuksia määrittääksesi sen kyvykkyydet ja miten sen kanssa voi olla vuorovaikutuksessa. inputSource.profiles-taulukko sisältää listan standardisoiduista profiileista, jotka kuvaavat ohjaimen asettelua ja toiminnallisuutta. Yleisiä profiileja ovat 'generic-trigger', 'oculus-touch' ja 'google-daydream'.

Ohjaindatan hakeminen

Saadaksesi ohjaimen nykyisen tilan (esim. painikkeiden painallukset, ohjaussauvan asennot, liipaisimen arvot), sinun on käytettävä XRFrame.getControllerState()-metodia. Tämä metodi palauttaa XRInputSourceState-objektin, joka sisältää ohjaimen nykyiset syöttöarvot.

            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; // Ohita käsiseuranta

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Käytä painikkeiden tiloja
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Käsittele painikkeen painamistapahtuma
            console.log('Button pressed:', button);
          }
        }

        // Käytä akselien arvoja (esim. ohjaussauvan asennot)
        for (const axis of inputSourceState.axes) {
          console.log('Axis value:', axis);
          // Käytä akselin arvoa liikkeen tai muiden toimintojen ohjaamiseen
        }

         //Käytä puristustilaa (jos saatavilla)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze pressed");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Ohjainten läsnäolon visualisointi

On olennaista antaa käyttäjälle visuaalista palautetta ohjainten läsnäolosta ja sijainnista virtuaalimaailmassa. Voit saavuttaa tämän luomalla 3D-malleja ohjaimista ja päivittämällä niiden sijainteja ja suuntauksia ohjaimen asennon perusteella.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Ohita käsiseuranta
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Päivitä ohjainmallin sijainti ja rotaatio
        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
              
            
          

Esimerkki: Ohjainpohjainen vuorovaikutus – Teleportaatio

Yleinen käyttötapaus ohjaimille on teleportaatio, joka antaa käyttäjien liikkua nopeasti virtuaaliympäristössä. Tässä on yksinkertaistettu esimerkki teleportaation toteuttamisesta ohjaimen liipaisimella:

            // Tarkista, onko liipaisinta painettu
if (inputSourceState.buttons[0].pressed) {
  // Suorita teleportaatiologiikka
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

Käsiseurannan voiman hyödyntäminen WebXR:ssä

Käsiseuranta tarjoaa luonnollisemman ja intuitiivisemman vuorovaikutusmenetelmän ohjaimiin verrattuna. Se antaa käyttäjien suoraan käsitellä virtuaalisia objekteja, tehdä eleitä ja olla vuorovaikutuksessa ympäristön kanssa omilla käsillään.

Käsiseurannan käyttöönotto

Käsiseuranta vaatii 'hand-tracking'-valinnaisominaisuuden pyytämistä WebXR-istuntoa luotaessa.

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

            

              
                Copy
              
            
          

Käsiseurannan datan käyttö

Kun käsiseuranta on otettu käyttöön, voit käyttää käsidataa inputSource.hand-ominaisuuden kautta. Tämä ominaisuus palauttaa XRHand-objektin, joka edustaa käyttäjän kättä. XRHand-objekti tarjoaa pääsyn käden nivelten, kuten sormenpäiden, rystysten ja kämmenen, sijainteihin ja suuntauksiin.

            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; // Ohita ohjaimet

      // Hae XRHand-objekti
      const hand = inputSource.hand;

      // Käy läpi käden nivelet
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Hae nivelen asento
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Käytä nivelen sijaintia ja suuntausta
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Päivitä niveltä edustavan 3D-mallin sijainti ja rotaatio
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Käsien läsnäolon visualisointi

Kuten ohjaintenkin kohdalla, on ratkaisevan tärkeää antaa käyttäjälle visuaalista palautetta heidän käsiensä esittämiseksi virtuaalimaailmassa. Voit saavuttaa tämän luomalla kädestä 3D-malleja ja päivittämällä niiden sijainteja ja suuntauksia käsiseurannan datan perusteella. Vaihtoehtoisesti voit käyttää yksinkertaisempia visualisointeja, kuten palloja tai kuutioita, esittämään nivelten sijainteja.

Esimerkki: Käsipohjainen vuorovaikutus – Objekteihin tarttuminen

Yksi yleisimmistä ja intuitiivisimmista käyttötapauksista käsiseurannalle on virtuaalisiin objekteihin tarttuminen ja niiden käsittely. Tässä on yksinkertaistettu esimerkki objektin tarttumisen toteuttamisesta käsiseurannalla:

            // Tarkista, onko sormi lähellä objektia
if (distanceBetweenFingerAndObject < threshold) {
  // Tartu objektiin
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Kiinnitä objekti käteen
}

// Kun sormi liikkuu pois objektin luota
if (distanceBetweenFingerAndObject > threshold) {
  // Vapauta objekti
  grabbedObject.parent = null; // Irrota objekti kädestä
  // Aseta objektille nopeus käden liikkeen perusteella
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

WebXR-syöttölaitteiden kehityksen parhaat käytännöt

Luodaksesi mukaansatempaavia ja käyttäjäystävällisiä WebXR-kokemuksia on tärkeää noudattaa näitä parhaita käytäntöjä:

• Anna selkeää visuaalista palautetta: Anna aina käyttäjälle visuaalista palautetta ilmaistaksesi heidän syöttölaitteidensa (ohjainten tai käsien) läsnäolon ja tilan.
• Priorisoi intuitiivisia vuorovaikutuksia: Suunnittele vuorovaikutuksia, jotka tuntuvat käyttäjälle luonnollisilta ja intuitiivisilta. Harkitse käsiseurannan käyttöä tehtävissä, jotka vaativat suoraa käsittelyä, ja ohjaimia tehtävissä, jotka vaativat enemmän tarkkuutta tai monimutkaisempia ohjaimia.
• Optimoi suorituskykyä: Käsiseuranta ja ohjainsyötteet voivat olla suorituskykyä vaativia. Optimoi koodisi minimoidaksesi viiveen ja varmistaaksesi sujuvan ja reagoivan kokemuksen. Harkitse tekniikoita, kuten objektien yhdistämistä (object pooling) ja LOD (Level of Detail), suorituskyvyn parantamiseksi.
• Käsittele syötetapahtumat tehokkaasti: Vältä suorittamasta raskaita operaatioita suoraan syötetapahtumien käsittelijöissä. Sen sijaan aseta syötetapahtumat jonoon ja käsittele ne erillisessä säikeessä tai käyttämällä requestAnimationFrame-funktiota päärenderöintisäikeen tukkeutumisen välttämiseksi.
• Tue useita syöttölähteitä: Tarjoa varamekanismeja käyttäjille, joilla ei ole pääsyä käsiseurantaan tai tietyntyyppisiin ohjaimiin. Harkitse mahdollisuutta antaa käyttäjien vaihtaa eri syöttötapojen välillä mieltymystensä ja saatavilla olevan laitteiston mukaan.
• Saavutettavuus: Suunnittele XR-kokemuksesi saavutettavuus mielessä. Tarjoa vaihtoehtoisia syöttötapoja vammaisille käyttäjille, kuten ääniohjaus tai katseeseen perustuva vuorovaikutus. Varmista, että kaikki vuorovaikutukset viestitään selkeästi visuaalisilla ja äänellisillä vihjeillä.

Globaalit näkökohdat syöttölaitteiden suunnittelussa

Kun suunnitellaan WebXR-kokemuksia maailmanlaajuiselle yleisölle, on tärkeää ottaa huomioon kulttuurierot ja saavutettavuusvaatimukset. Tässä on joitakin keskeisiä tekijöitä, jotka kannattaa pitää mielessä:

• Kulttuurierot eleiden tunnistamisessa: Eleillä voi olla eri merkityksiä eri kulttuureissa. Vältä sellaisten eleiden käyttöä, jotka saattavat olla loukkaavia tai väärin tulkittuja tietyillä alueilla. Harkitse vaihtoehtoisten vuorovaikutusmenetelmien tarjoamista tai anna käyttäjien mukauttaa elekartoituksia. Esimerkiksi peukalo ylös -ele on positiivinen monissa länsimaisissa kulttuureissa, mutta se voi olla loukkaava joissakin osissa Lähi-itää ja Etelä-Amerikkaa.
• Käsien koon ja muodon vaihtelut: Käsiseuranta-algoritmeja saattaa joutua mukauttamaan vastaamaan eri väestöryhmien käsien koon ja muodon vaihteluita. Tarjoa kalibrointivaihtoehtoja, jotta käyttäjät voivat hienosäätää käsiseurantaa omien käsiensä ominaisuuksien mukaan.
• Kieli ja lokalisointi: Varmista, että kaikki teksti- ja äänivihjeet on lokalisoitu oikein eri kielille. Harkitse ikonipohjaisten käyttöliittymien käyttöä minimoidaksesi tekstin lokalisoinnin tarpeen.
• Saavutettavuus vammaisille käyttäjille: Suunnittele XR-kokemuksesi saavutettavuus mielessä alusta alkaen. Tarjoa vaihtoehtoisia syöttötapoja vammaisille käyttäjille, kuten ääniohjaus, katseeseen perustuva vuorovaikutus tai kytkinohjaus. Varmista, että kaikki vuorovaikutukset viestitään selkeästi visuaalisilla ja äänellisillä vihjeillä. Harkitse vaihtoehtojen tarjoamista tekstin ja ikonien koon ja värin mukauttamiseksi näkyvyyden parantamiseksi.
• Laitteiston saatavuus ja hinta: Ole tietoinen XR-laitteiston saatavuudesta ja hinnasta eri alueilla. Suunnittele kokemuksesi yhteensopivaksi useiden laitteiden kanssa, mukaan lukien edullisemmat mobiili-VR-lasit ja lisätyn todellisuuden mahdollistavat älypuhelimet.

Johtopäätös

WebXR-syöttölähteiden, mukaan lukien ohjainten ja käsiseurannan, hallitseminen on olennaista mukaansatempaavien ja intuitiivisten immersiivisten kokemusten luomisessa. Ymmärtämällä kunkin syöttötavan ominaisuudet ja noudattamalla vuorovaikutussuunnittelun parhaita käytäntöjä voit luoda XR-sovelluksia, jotka ovat kiinnostavia, saavutettavia ja nautinnollisia maailmanlaajuiselle yleisölle. WebXR-teknologian kehittyessä voimme odottaa näkevämme yhä kehittyneempiä syöttötapoja, jotka hämärtävät entisestään fyysisen ja virtuaalisen maailman välistä rajaa.

Kiinnittämällä huomiota käyttäjävuorovaikutuksen yksityiskohtiin ja sisällyttämällä nämä parhaat käytännöt, kehittäjät voivat luoda WebXR-kokemuksia, jotka ovat todella immersiivisiä, intuitiivisia ja saavutettavissa käyttäjille maailmanlaajuisesti. XR:n tulevaisuus on valoisa, ja keskittymällä harkittuun ja käyttäjäkeskeiseen suunnitteluun voimme avata tämän mullistavan teknologian koko potentiaalin.