WebXR-i sisendallikad: Kontrolleri- ja käejälgimise valdamine kaasahaaravate kogemuste loomiseks

WebXR pakub võimsaid tööriistu kaasahaaravate virtuaal- ja liitreaalsuse kogemuste loomiseks otse brauseris. Iga kaasahaarava rakenduse kriitiline aspekt on viis, kuidas kasutajad virtuaalmaailmaga suhtlevad. WebXR pakub tugevat tuge erinevatele sisendallikatele, peamiselt kontrolleritele ja käejälgimisele. Nende sisestusmeetodite kasutamise mõistmine on ülioluline intuitiivsete ja kaasahaaravate kogemuste loomiseks globaalsele publikule.

WebXR-i sisendallikate mõistmine

WebXR-is esindab sisendallikas füüsilist seadet või meetodit, mida kasutatakse virtuaalse keskkonnaga suhtlemiseks. Need sisendallikad võivad ulatuda lihtsatest mängupuldi-laadsetest kontrolleritest kuni keerukate käejälgimissüsteemideni. Iga sisendallikas pakub andmevoogu, mida arendajad saavad kasutada objektide juhtimiseks, stseenis navigeerimiseks ja toimingute käivitamiseks XR-kogemuse raames.

Sisendallikate tüübid

• Kontrollerid: Füüsilised seadmed nuppude, juhtkangide, päästikute ja puuteplaatidega, mida kasutajad hoiavad ja manipuleerivad. Kontrollerid on levinud ja usaldusväärne sisestusmeetod VR-kogemuste jaoks.
• Käejälgimine: Kasutab kaameraid ja arvutinägemise algoritme, et tuvastada ja jälgida kasutaja käsi 3D-ruumis. See võimaldab loomulikke ja intuitiivseid interaktsioone virtuaalse keskkonnaga.
• Muud sisendallikad: Kuigi vähem levinud, võib WebXR toetada ka teisi sisendallikaid, nagu pea jälgimine (kasutades pilgupõhist interaktsiooni) ja häältuvastust.

Kontrolleritega töötamine WebXR-is

Kontrollerid on laialdaselt toetatud ja suhteliselt lihtne sisendallikas WebXR-i arenduseks. Nad pakuvad tasakaalu täpsuse ja kasutuslihtsuse vahel, muutes need sobivaks paljude rakenduste jaoks.

Kontrollerite tuvastamine ja neile juurdepääs

WebXR API pakub sündmusi arendajate teavitamiseks, kui uusi sisendallikaid ühendatakse või lahti ühendatakse. Sündmus xr.session.inputsourceschange on peamine viis olemasolevates sisendallikates toimunud muudatuste tuvastamiseks.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // Uus sisendallikas ühendatud
  event.added.forEach(inputSource => {
    console.log('Uus sisendallikas:', inputSource);
    // Käsitse uut sisendallikat
  });

  // Sisendallikas lahti ühendatud
  event.removed.forEach(inputSource => {
    console.log('Sisendallikas eemaldatud:', inputSource);
    // Käsitse lahtiühendatud sisendallikat
  });
});

            

              
                Copy
              
            
          

Kui sisendallikas on tuvastatud, saate selle omadustele juurde pääseda, et määrata kindlaks selle võimed ja kuidas sellega suhelda. Massiiv inputSource.profiles sisaldab nimekirja standardiseeritud profiilidest, mis kirjeldavad kontrolleri paigutust ja funktsionaalsust. Levinud profiilid hõlmavad 'generic-trigger', 'oculus-touch' ja 'google-daydream'.

Kontrolleri andmete hankimine

Kontrolleri hetkeseisundi (nt nupuvajutused, juhtkangi asendid, päästiku väärtused) saamiseks peate kasutama meetodit XRFrame.getControllerState(). See meetod tagastab objekti XRInputSourceState, mis sisaldab kontrolleri hetke sisendväärtusi.

            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; // Jäta käejälgimine vahele

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Juurdepääs nuppude olekutele
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Käsitse nupuvajutuse sündmust
            console.log('Nupp vajutatud:', button);
          }
        }

        // Juurdepääs telgede väärtustele (nt juhtkangi asendid)
        for (const axis of inputSourceState.axes) {
          console.log('Telje väärtus:', axis);
          // Kasuta telje väärtust liikumise või muude toimingute juhtimiseks
        }

         //Juurdepääs pigistuse olekule (kui on saadaval)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Pigistus on vajutatud");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Kontrolleri olemasolu visualiseerimine

On oluline pakkuda kasutajale visuaalset tagasisidet, et näidata nende kontrollerite olemasolu ja asukohta virtuaalmaailmas. Seda saate saavutada, luues kontrollerite 3D-mudeleid ja uuendades nende asukohti ja orientatsioone kontrolleri asendi põhjal.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Jäta käejälgimine vahele
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Uuenda kontrolleri mudeli asukohta ja pööret
        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
              
            
          

Näide: Kontrolleripõhine interaktsioon – teleportatsioon

Levinud kasutusjuht kontrollerite jaoks on teleportatsioon, mis võimaldab kasutajatel kiiresti virtuaalses keskkonnas liikuda. Siin on lihtsustatud näide, kuidas teleportatsiooni rakendada, kasutades kontrolleri päästikut:

            // Kontrolli, kas päästikunupp on vajutatud
if (inputSourceState.buttons[0].pressed) {
  // Teosta teleportatsiooni loogika
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

Käejälgimise võimsuse rakendamine WebXR-is

Käejälgimine pakub kontrolleritega võrreldes loomulikumat ja intuitiivsemat interaktsioonimeetodit. See võimaldab kasutajatel otse manipuleerida virtuaalsete objektidega, teha žeste ja suhelda keskkonnaga, kasutades oma käsi.

Käejälgimise lubamine

Käejälgimine nõuab 'hand-tracking' valikulise funktsiooni taotlemist WebXR-i seansi loomisel.

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

            

              
                Copy
              
            
          

Käeandmetele juurdepääs

Kui käejälgimine on lubatud, pääsete käeandmetele juurde omaduse inputSource.hand kaudu. See omadus tagastab objekti XRHand, mis esindab kasutaja kätt. Objekt XRHand annab juurdepääsu käe liigeste, nagu sõrmeotste, sõrmenukkide ja peopesa, asenditele ja orientatsioonidele.

            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; // Jäta kontrollerid vahele

      // Hangi XRHand objekt
      const hand = inputSource.hand;

      // Korda läbi käe liigeste
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Hangi liigese asend
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Juurdepääs liigese asukohale ja orientatsioonile
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Uuenda liigest esindava 3D-mudeli asukohta ja pööret
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Käe olemasolu visualiseerimine

Sarnaselt kontrolleritele on oluline pakkuda kasutajale visuaalset tagasisidet, et esindada nende käsi virtuaalmaailmas. Seda saate saavutada, luues käe 3D-mudeleid ja uuendades nende asukohti ja orientatsioone käejälgimisandmete põhjal. Alternatiivina võite kasutada lihtsamaid visualiseerimisi, nagu sfäärid või kuubikud, et esindada liigeste asukohti.

Näide: Käepõhine interaktsioon – objektide haaramine

Üks levinumaid ja intuitiivsemaid kasutusjuhte käejälgimisel on virtuaalsete objektide haaramine ja nendega manipuleerimine. Siin on lihtsustatud näide, kuidas objekti haaramist rakendada, kasutades käejälgimist:

            // Kontrolli, kas sõrm on objekti lähedal
if (distanceBetweenFingerAndObject < threshold) {
  // Haara objekt
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Kinnita objekt käe külge
}

// Kui sõrm liigub objektist eemale
if (distanceBetweenFingerAndObject > threshold) {
  // Vabasta objekt
  grabbedObject.parent = null; // Eemalda objekt käe küljest
  // Rakenda objektile kiirus vastavalt käe liikumisele
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

Parimad praktikad WebXR-i sisendite arendamisel

Kaasahaaravate ja kasutajasõbralike WebXR-kogemuste loomiseks on oluline järgida neid parimaid praktikaid:

• Pakkuge selget visuaalset tagasisidet: Pakkuge kasutajale alati visuaalset tagasisidet, et näidata nende sisendseadmete (kontrollerid või käed) olemasolu ja olekut.
• Eelistage intuitiivseid interaktsioone: Disainige interaktsioone, mis tunduvad kasutajale loomulikud ja intuitiivsed. Kaaluge käejälgimise kasutamist ülesannete jaoks, mis hõlmavad otsest manipuleerimist, ja kontrollereid ülesannete jaoks, mis nõuavad suuremat täpsust või keerukamaid juhtnuppe.
• Optimeerige jõudlust: Käejälgimine ja kontrolleri sisend võivad olla jõudlust nõudvad. Optimeerige oma koodi, et minimeerida viivitust ja tagada sujuv ja reageeriv kogemus. Kaaluge tehnikate, nagu objektide koondamine (object pooling) ja LOD (Level of Detail), kasutamist jõudluse parandamiseks.
• Käsitlege sisendsündmusi tõhusalt: Vältige kulukate operatsioonide teostamist otse sisendsündmuste käsitlejates. Selle asemel pange sisendsündmused järjekorda ja töödelge neid eraldi lõimes või kasutades requestAnimationFrame'i, et vältida peamise renderduslõime blokeerimist.
• Toetage mitut sisendallikat: Pakkuge varumehhanisme kasutajatele, kellel pole juurdepääsu käejälgimisele või teatud tüüpi kontrolleritele. Kaaluge kasutajatel võimalust vahetada erinevate sisestusmeetodite vahel vastavalt nende eelistustele ja olemasolevale riistvarale.
• Juurdepääsetavus: Disainige oma XR-kogemus juurdepääsetavust silmas pidades. Pakkuge alternatiivseid sisestusmeetodeid puuetega kasutajatele, nagu hääljuhtimine või pilgupõhine interaktsioon. Veenduge, et kõik interaktsioonid oleksid selgelt edastatud visuaalsete ja heliliste vihjete kaudu.

Globaalsed kaalutlused sisendite disainimisel

Disainides WebXR-kogemusi globaalsele publikule, on oluline arvestada kultuuriliste erinevuste ja juurdepääsetavuse nõuetega. Siin on mõned olulised tegurid, mida meeles pidada:

• Kultuurilised erinevused žestituvastuses: Žestidel võib olla erinevates kultuurides erinev tähendus. Vältige žestide kasutamist, mis võivad teatud piirkondades olla solvavad või valesti tõlgendatavad. Kaaluge alternatiivsete interaktsioonimeetodite pakkumist või kasutajatel žestide vastenduste kohandamise lubamist. Näiteks pöial püsti žest on paljudes lääne kultuurides positiivne, kuid võib olla solvav mõnes Lähis-Ida ja Lõuna-Ameerika osas.
• Käe suuruse ja kuju variatsioonid: Käejälgimisalgoritme võib olla vaja kohandada, et arvestada käe suuruse ja kuju variatsioonidega erinevates populatsioonides. Pakkuge kalibreerimisvõimalusi, et kasutajad saaksid käejälgimist oma konkreetsetele käeomadustele peenhäälestada.
• Keel ja lokaliseerimine: Veenduge, et kogu tekst ja helivihjed oleksid erinevate keelte jaoks korralikult lokaliseeritud. Kaaluge ikoonipõhiste liideste kasutamist, et minimeerida vajadust teksti lokaliseerimiseks.
• Juurdepääsetavus puuetega kasutajatele: Disainige oma XR-kogemus juurdepääsetavust silmas pidades juba algusest peale. Pakkuge alternatiivseid sisestusmeetodeid puuetega kasutajatele, nagu hääljuhtimine, pilgupõhine interaktsioon või lülitijuurdepääs. Veenduge, et kõik interaktsioonid oleksid selgelt edastatud visuaalsete ja heliliste vihjete kaudu. Kaaluge võimaluste pakkumist teksti ja ikoonide suuruse ja värvi kohandamiseks nähtavuse parandamiseks.
• Riistvara saadavus ja maksumus: Olge teadlik XR-riistvara saadavusest ja maksumusest erinevates piirkondades. Disainige oma kogemus nii, et see ühilduks laia valiku seadmetega, sealhulgas odavamate mobiilsete VR-peakomplektide ja liitreaalsust toetavate nutitelefonidega.

Kokkuvõte

WebXR-i sisendallikate, sealhulgas kontrollerite ja käejälgimise valdamine on oluline kaasahaaravate ja intuitiivsete elamuste loomiseks. Mõistes iga sisestusmeetodi võimekust ja järgides interaktsioonidisaini parimaid praktikaid, saate luua XR-rakendusi, mis on kaasahaaravad, juurdepääsetavad ja nauditavad globaalsele publikule. Kuna WebXR-tehnoloogia areneb edasi, võime oodata veelgi keerukamate sisestusmeetodite tekkimist, mis hägustavad veelgi füüsilise ja virtuaalse maailma vahelisi piire.

Pöörates tähelepanu kasutaja interaktsiooni detailidele ja kaasates neid parimaid praktikaid, saavad arendajad luua WebXR-kogemusi, mis on tõeliselt kaasahaaravad, intuitiivsed ja juurdepääsetavad kasutajatele kogu maailmas. XR-i tulevik on helge ja keskendudes läbimõeldud ja kasutajakesksele disainile, saame avada selle transformatiivse tehnoloogia täieliku potentsiaali.