WebXR-tasontunnistus: pintojen tunnistamisen ja AR-sijoittelun hallinta globaaleille yleisöille

WebXR tarjoaa tehokkaan tavan luoda vaikuttavia lisätyn todellisuuden (AR) kokemuksia suoraan verkkoselaimissa. Monien AR-sovellusten kulmakivi on tasontunnistus, joka antaa sovelluksellesi kyvyn ymmärtää todellista ympäristöä ja integroida virtuaalista sisältöä saumattomasti. Tämä blogikirjoitus tarjoaa kattavan oppaan WebXR-tasontunnistukseen, keskittyen pintojen tunnistamiseen, AR-sijoittelutekniikoihin ja parhaisiin käytäntöihin, joilla luodaan osallistavia ja suorituskykyisiä kokemuksia, jotka puhuttelevat globaalia yleisöä.

Mitä on WebXR-tasontunnistus?

Tasontunnistus on prosessi, jossa tunnistetaan ja ymmärretään litteitä pintoja käyttäjän fyysisessä ympäristössä laitteen antureiden (tyypillisesti kameran ja liiketunnistimien) avulla. WebXR hyödyntää näitä anturitietoja yhdessä konenäköalgoritmien kanssa paikantaakseen ja seuratakseen vaaka- ja pystysuoria tasoja, kuten lattioita, pöytiä, seiniä ja jopa kattoja.

Kun taso on tunnistettu, WebXR-sovellus voi käyttää tätä tietoa:

• Ankkuroidakseen virtuaalisia objekteja todelliseen maailmaan, jolloin ne näyttävät olevan aidosti läsnä ympäristössä.
• Mahdollistaakseen interaktiivisia kokemuksia, joissa käyttäjät voivat käsitellä virtuaalisia objekteja suhteessa todellisen maailman pintoihin.
• Tarjotakseen realistisen valaistuksen ja varjot havaitun ympäristön perusteella.
• Toteuttaakseen törmäystunnistuksen virtuaalisten objektien ja todellisen maailman pintojen välillä.

Miksi tasontunnistus on tärkeää WebXR:lle?

Tasontunnistus on ratkaisevan tärkeää vaikuttavien ja uskottavien AR-kokemusten luomisessa. Ilman sitä virtuaaliset objektit vain leijuisivat avaruudessa irrallaan käyttäjän ympäristöstä, mikä rikkoisi lisätyn todellisuuden illuusion.

Tunnistamalla ja ymmärtämällä pintoja tarkasti, tasontunnistus mahdollistaa sellaisten AR-sovellusten luomisen, jotka ovat:

• Immersiivisiä: Virtuaaliset objektit tuntuvat olevan aidosti osa todellista maailmaa.
• Interaktiivisia: Käyttäjät voivat olla vuorovaikutuksessa virtuaalisten objektien kanssa luonnollisella ja intuitiivisella tavalla.
• Hyödyllisiä: AR-sovellukset voivat tarjota käytännöllisiä ratkaisuja todellisen maailman ongelmiin, kuten huonekalujen visualisointiin huoneessa tai etäisyyksien mittaamiseen objektien välillä.
• Saavutettavia: WebXR ja tasontunnistus mahdollistavat AR-kokemuksia, jotka ovat saatavilla monilla eri laitteilla ilman, että käyttäjien tarvitsee ladata erillistä sovellusta.

Kuinka WebXR-tasontunnistus toimii

WebXR-tasontunnistus sisältää tyypillisesti seuraavat vaiheet:

1. Tasoseurannan pyytäminen: WebXR-sovellus pyytää pääsyä laitteen AR-ominaisuuksiin, mukaan lukien tasoseurantaan.
2. XRFrame-objektin hankkiminen: Jokaista ruudunpäivitystä kohden sovellus hakee `XRFrame`-objektin, joka tarjoaa tietoa AR-istunnon nykytilasta, mukaan lukien kameran asennon ja tunnistetut tasot.
3. Seurattujen tasojen (TrackedPlanes) kysely: `XRFrame`-objekti sisältää listan `XRPlane`-objekteista, joista jokainen edustaa yhtä tunnistettua tasoa näkymässä.
4. XRPlane-datan analysointi: Jokainen `XRPlane`-objekti antaa tietoa tason:

• Suunnasta: Onko taso vaaka- vai pystysuora.
• Sijainnista: Tason sijainnista 3D-maailmassa.
• Laajuudesta: Tason leveydestä ja korkeudesta.
• Monikulmiosta: Tunnistetun tason muotoa edustavasta rajamonikulmiosta.
• Viimeisimmästä muutosajasta: Aikaleima, joka kertoo, milloin tason ominaisuuksia on viimeksi päivitetty.

WebXR-tasontunnistuksen API:t ja koodiesimerkit

Katsotaan muutamia koodiesimerkkejä, joissa käytetään JavaScriptiä ja suosittua WebXR-kirjastoa, kuten Three.js:

WebXR-istunnon alustaminen ja tasoseurannan pyytäminen

Ensin sinun on pyydettävä immersiivistä AR-istuntoa ja määritettävä, että haluat seurata tunnistettuja tasoja:

            
async function initXR() {
  if (navigator.xr) {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
      try {
        session = await navigator.xr.requestSession('immersive-ar', { 
          requiredFeatures: ['plane-detection'] 
        });
        // Määritä WebGL-renderöijä ja muut näkymän elementit
      } catch (error) {
        console.error("Virhe XR-istunnon alustamisessa:", error);
      }
    } else {
      console.log('immersive-ar ei tuettu');
    }
  } else {
    console.log('WebXR ei tuettu');
  }
}

            

              
                Copy
              
            
          

XRFrame-objektin ja seurattujen tasojen käsittely

Animaatioluuppisi sisällä sinun tulee käsitellä `XRFrame`-objektia ja käydä läpi tunnistetut tasot:

            
function animate(time, frame) {
  if (frame) {
    const glLayer = session.renderState.baseLayer;
    renderer.render(scene, camera);

    const xrViewerPose = frame.getViewerPose(xrRefSpace);
    if (xrViewerPose) {
      // Päivitä kameran sijainti/kierto xrViewerPose-tietojen perusteella

      const planes = session.getWorldInformation().detectedPlanes;
      if (planes) {
        for (const plane of planes) {
          // Käytä tason tietoja ja päivitä vastaava mesh-objekti näkymässäsi
          updatePlaneMesh(plane);
        }
      }
    }
  }
  session.requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

Mesh-objektin luominen jokaiselle tunnistetulle tasolle

Visualisoidaksesi tunnistetut tasot voit luoda yksinkertaisen mesh-objektin (esim. `THREE.Mesh`) ja päivittää sen geometrian `XRPlane`-objektin laajuuden ja monikulmion perusteella. Saatat tarvita apufunktion, joka muuntaa monikulmion kärkipisteet renderöintimoottorillesi sopivaan geometrian muotoon.

            
function updatePlaneMesh(plane) {
  if (!planeMeshes.has(plane.id)) {
    // Luo uusi mesh-objekti, jos sitä ei ole olemassa
    const geometry = new THREE.PlaneGeometry(plane.width, plane.height);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.userData.plane = plane;

    scene.add(mesh);
    planeMeshes.set(plane.id, mesh);
  } else {
    // Päivitä olemassa olevan mesh-objektin geometria tason laajuuden perusteella.
    const mesh = planeMeshes.get(plane.id);
    const planeGeometry = mesh.geometry;
    planeGeometry.width = plane.width;
    planeGeometry.height = plane.height;
    planeGeometry.needsUpdate = true;

    // Tason sijainti ja suunta.
    const pose = frame.getPose(plane.planeSpace, xrRefSpace);
    mesh.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
    mesh.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
  }


}

            

              
                Copy
              
            
          

AR-sijoittelutekniikat: Virtuaalisten objektien ankkurointi

Kun olet tunnistanut tasoja, voit ankkuroida virtuaalisia objekteja niihin. Tämä tarkoittaa virtuaalisten objektien sijoittamista oikeaan paikkaan ja suuntaan suhteessa tunnistettuun tasoon. Tähän on useita tapoja:

Säteenseuranta (Raycasting)

Säteenseuranta (raycasting) tarkoittaa säteen heittämistä käyttäjän laitteesta (tyypillisesti näytön keskeltä) näkymään. Jos säde leikkaa tunnistetun tason, voit käyttää leikkauspistettä virtuaalisen objektin sijoittamiseen. Tämä antaa käyttäjälle mahdollisuuden napauttaa näyttöä sijoittaakseen objektin halutulle pinnalle.

            
function placeObject(x, y) {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();

  mouse.x = (x / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(y / renderer.domElement.clientHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children, true); // Etsi leikkauspisteitä rekursiivisesti.

  if (intersects.length > 0) {
    // Sijoita objekti leikkauspisteeseen
    const intersection = intersects[0];
    const newObject = createVirtualObject();
    newObject.position.copy(intersection.point);

    // Säädä objektin suuntaa tarpeen mukaan
    newObject.quaternion.copy(camera.quaternion);
    scene.add(newObject);
  }
}

            

              
                Copy
              
            
          

Hit-Test API:n käyttäminen (jos saatavilla)

WebXR Hit-Test API tarjoaa suoremman tavan löytää leikkauspisteitä säteen ja todellisen maailman välillä. Sen avulla voit heittää säteen käyttäjän näkökulmasta ja saada listan `XRHitResult`-objekteista, joista jokainen edustaa leikkauspistettä todellisen maailman pinnan kanssa. Tämä on tehokkaampaa ja tarkempaa kuin pelkästään tunnistettuihin tasoihin luottaminen.

            
async function createHitTestSource() {
  hitTestSource = await session.requestHitTestSource({
    space: xrRefSpace
  });
}

function placeObjectAtHit() {
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const pose = hit.getPose(xrRefSpace);

      // Luo tai päivitä virtuaalinen objekti
      const newObject = createVirtualObject();
      newObject.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
      newObject.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
      scene.add(newObject);
    }
  }
}

            

              
                Copy
              
            
          

Ankkurointi tason rajoihin

Voit myös käyttää tason rajaa edustavaa monikulmiota sijoittaaksesi objekteja tunnistetun tason reunoille tai sisäpuolelle. Tämä voi olla hyödyllistä, kun virtuaalisia objekteja sijoitellaan tiettyyn asetelmaan suhteessa tasoon.

WebXR-tasontunnistuksen optimointi globaaleille laitteille

WebXR-sovellusten on toimittava sujuvasti monenlaisilla laitteilla, huippuluokan älypuhelimista tehottomampiin mobiililaitteisiin. Tasontunnistuksen toteutuksen optimointi on ratkaisevan tärkeää hyvän käyttökokemuksen varmistamiseksi eri laitekokoonpanoissa.

Suorituskykyyn liittyvät huomiot

• Rajoita tasojen määrää: Liian monen tason seuraaminen voi olla laskennallisesti raskasta. Harkitse aktiivisesti seurattavien tasojen määrän rajoittamista tai priorisoi käyttäjää lähimpänä olevia tasoja.
• Optimoi tasojen mesh-geometria: Käytä tehokkaita geometriarepresentaatioita tasojen mesh-objekteille. Vältä liiallista yksityiskohtaisuutta tai tarpeettomia kärkipisteitä.
• Käytä WebAssemblyä: Harkitse WebAssemblyn (WASM) käyttöä laskennallisesti intensiivisten tehtävien, kuten tasontunnistusalgoritmien tai omien konenäkörutiinien, toteuttamiseen. WASM voi tarjota merkittäviä suorituskykyparannuksia JavaScriptiin verrattuna.
• Vähennä renderöintikuormaa: Koko näkymän, mukaan lukien virtuaalisten objektien ja tasojen mesh-objektien, renderöinnin optimointi on kriittistä. Käytä tekniikoita, kuten yksityiskohtaisuustasoja (LOD), peittohäivennystä (occlusion culling) ja tekstuurien pakkausta renderöintityömäärän vähentämiseksi.
• Profiloi ja optimoi: Profiloi sovellustasi säännöllisesti selaimen kehittäjätyökaluilla suorituskyvyn pullonkaulojen tunnistamiseksi. Optimoi koodisi profilointitulosten perusteella.

Monialustainen yhteensopivuus

• Ominaisuuksien tunnistus: Käytä ominaisuuksien tunnistusta tarkistaaksesi, tukeeko laite tasontunnistusta, ennen kuin yrität käyttää sitä. Tarjoa varamekanismeja tai vaihtoehtoisia kokemuksia laitteille, jotka eivät tue tasontunnistusta.
• ARCore ja ARKit: WebXR-toteutukset perustuvat tyypillisesti taustalla oleviin AR-kehyksiin, kuten ARCore (Android) ja ARKit (iOS). Ole tietoinen näiden kehysten välisten tasontunnistuskykyjen ja suorituskyvyn eroista.
• Laitekohtaiset optimoinnit: Harkitse laitekohtaisten optimointien toteuttamista hyödyntääksesi eri laitteiden ainutlaatuisia ominaisuuksia.

Saavutettavuuteen liittyvät huomiot

On olennaista tehdä WebXR AR -kokemuksista saavutettavia vammaisille käyttäjille. Tasontunnistuksen osalta harkitse seuraavia asioita:

• Visuaalinen palaute: Anna selkeää visuaalista palautetta, kun taso tunnistetaan, esimerkiksi korostamalla taso erottuvalla värillä tai kuviolla. Tämä voi auttaa heikkonäköisiä käyttäjiä ymmärtämään ympäristöä.
• Auditiivinen palaute: Anna auditiivista palautetta, joka ilmaisee tason tunnistamisen, kuten äänitehoste tai sanallinen kuvaus tason suunnasta ja koosta.
• Vaihtoehtoiset syöttötavat: Tarjoa vaihtoehtoisia syöttötapoja virtuaalisten objektien sijoittamiseen, kuten äänikomennot tai näppäimistösyöttö, kosketuseleiden lisäksi.
• Säädettävä sijoittelu: Salli käyttäjien säätää virtuaalisten objektien sijaintia ja suuntaa vastaamaan heidän yksilöllisiä tarpeitaan ja mieltymyksiään.

Parhaat käytännöt globaaliin WebXR-tasontunnistuksen kehitykseen

WebXR-tasontunnistussovellusten kehittäminen globaalille yleisölle vaatii kulttuurierojen, kielituen ja vaihtelevien laiteominaisuuksien huolellista harkintaa. Tässä on joitakin parhaita käytäntöjä:

• Lokalisointi: Lokalisoi sovelluksesi teksti- ja äänisisältö tukemaan eri kieliä. Käytä eri alueille sopivia päivämäärä- ja numeromuotoja.
• Kulttuurinen herkkyys: Ole tietoinen kulttuurieroista siinä, miten käyttäjät kokevat AR-kokemukset ja ovat vuorovaikutuksessa niiden kanssa. Vältä kulttuurisesti herkkien symbolien tai kuvien käyttämistä.
• Saavutettavuus: Noudata saavutettavuusohjeita varmistaaksesi, että sovelluksesi on vammaisten henkilöiden käytettävissä.
• Suorituskyvyn optimointi: Optimoi sovelluksesi suorituskyky varmistaaksesi, että se toimii sujuvasti monenlaisilla laitteilla.
• Testaus: Testaa sovelluksesi perusteellisesti eri laitteilla ja eri ympäristöissä ongelmien tunnistamiseksi ja korjaamiseksi. Harkitse käyttäjien ottamista mukaan testausprosessiin eri alueilta ja kulttuuritaustoista.
• Yksityisyys: Viesti käyttäjille selkeästi, miten heidän tietojaan käytetään, ja varmista, että noudatat asiaankuuluvia tietosuojasäännöksiä.
• Anna selkeät ohjeet: Anna selkeät ja ytimekkäät ohjeet sovelluksen käyttöön, ottaen huomioon erilaiset teknisen osaamisen tasot.

Esimerkkejä WebXR-tasontunnistussovelluksista

WebXR-tasontunnistusta voidaan käyttää monenlaisten AR-sovellusten luomiseen, mukaan lukien:

• Huonekalujen visualisointi: Antaa käyttäjien visualisoida, miltä huonekalut näyttäisivät heidän kodeissaan ennen ostopäätöstä. IKEA Place on tunnettu esimerkki.
• Pelaaminen: Luo immersiivisiä AR-pelikokemuksia, joissa virtuaaliset hahmot ja esineet ovat vuorovaikutuksessa todellisen maailman kanssa.
• Koulutus: Tarjoaa interaktiivisia oppimiskokemuksia, joissa opiskelijat voivat tutkia 3D-malleja ja simulaatioita omassa ympäristössään. Esimerkiksi aurinkokunnan visualisointi pöydällä.
• Teolliset sovellukset: Mahdollistaa työntekijöiden visualisoida ohjeita, piirustuksia ja muuta tietoa suoraan heidän näkökentässään, mikä parantaa tehokkuutta ja tarkkuutta.
• Vähittäiskauppa: Antaa asiakkaiden sovittaa virtuaalisia vaatteita tai asusteita ennen niiden ostamista. Sephora Virtual Artist on hyvä esimerkki.
• Mittaustyökalut: Antaa käyttäjien mitata etäisyyksiä ja alueita todellisessa maailmassa mobiililaitteillaan.

WebXR-tasontunnistuksen tulevaisuus

WebXR-tasontunnistus on nopeasti kehittyvä ala. Laitteiden tehon kasvaessa ja konenäköalgoritmien parantuessa voimme odottaa näkevämme tulevaisuudessa entistä tarkempia ja vankempia tasontunnistusominaisuuksia. Joitakin mahdollisia tulevaisuuden kehityssuuntia ovat:

• Parannettu tasontunnistuksen tarkkuus: Tarkempi ja vankempi tasontunnistus jopa haastavissa ympäristöissä.
• Semanttinen ymmärrys: Kyky ymmärtää tunnistettujen tasojen semanttinen merkitys, kuten erottaa erityyppiset pinnat toisistaan (esim. puu, metalli, lasi).
• Näkymän rekonstruktio: Kyky luoda 3D-malli koko ympäristöstä, ei vain litteistä pinnoista.
• Tekoälypohjainen tasontunnistus: Tekoälyn ja koneoppimisen hyödyntäminen tasontunnistuksen suorituskyvyn ja tarkkuuden parantamiseksi.
• Integrointi pilvipalveluihin: Integrointi pilvipalveluihin mahdollistaa yhteistyöhön perustuvia AR-kokemuksia ja jaettuja virtuaalitiloja.

Yhteenveto

WebXR-tasontunnistus on tehokas teknologia, joka mahdollistaa immersiivisten ja interaktiivisten AR-kokemusten luomisen suoraan verkkoselaimissa. Hallitsemalla pintojen tunnistamisen ja AR-sijoittelutekniikat kehittäjät voivat luoda vaikuttavia sovelluksia, jotka puhuttelevat globaalia yleisöä. Ottamalla huomioon suorituskyvyn optimoinnin, saavutettavuuden ja kulttuurisen herkkyyden voit varmistaa, että WebXR-sovelluksesi ovat käyttökelpoisia ja nautittavia ihmisille ympäri maailmaa.

WebXR-teknologian kehittyessä tasontunnistuksella on yhä tärkeämpi rooli lisätyn todellisuuden tulevaisuuden muovaamisessa. Jatka kokeilemista, pysy uteliaana ja jatka WebXR:n mahdollisuuksien rajojen rikkomista!