Kaj je WebXR: Popoln vodnik za razumevanje AR, VR in MR na spletu

Način, kako se pomikamo po internetu, je naredil velik korak naprej: splet je zdaj tudi prostor za poglobljene izkušnje. WebXR je most, ki nosi Virtualna resničnost (VR) in obogatene resničnosti (AR) neposredno v brskalnik, brez okornih namestitev ali neskončnih korakov. Če ste kdaj pomislili: »To bi se moralo odpreti s povezavo,« ste prišli na pravo mesto.

Govorimo o odprti tehnologiji, ki jo poganja W3C in povezuje vsakdanji JS s senzorji, kamerami in pregledovalniki XR. Od preizkušanja kavča v dnevni sobi do 360° ogleda muzeja, vse se lahko začne z URL-jem.In ja, obstaja en zalogaj: standardi, API-ji, 3D-motorji in hitro razvijajoči se ekosistem.

Kaj je WebXR in zakaj je pomemben

WebXR je specifikacija, ki omogoča izkušnje XR (AR, VR in MR) na spletu. Omogoča vam začetek poglobljenih sej neposredno iz brskalnika, z dostopom do zmogljivosti naprave, kot so sledenje gibanju, krmilniki, roke, senzorji in kamere. Skratka, brskalnik postane »aplikacija XR«.

Standard je razvil W3C in ga implementirajo brskalniki ("odjemalci") na vsaki platformi. Za 3D-upodabljanje se zanaša na API-je, kot sta WebGL in vse bolj WebGPU; prostorski zvok je na voljo prek WebAudio.To pomeni, da lahko programirate v JavaScriptu/TypeScriptu in ga namestite na katero koli spletno mesto.

Poleg naslova je še nekaj ključnega: WebXR demokratizira dostop do poglobljenih izkušenjNi vam treba objaviti v trgovini ali vsiliti namestitve aplikacije izvorno: preprosto delite povezavo na družbenih omrežjih, QR kodo na plakatu ali gumb na svoji spletni trgovini.

Vrste izkušenj v WebXR

• AR (obogatena resničnost na spletu): s pomočjo kamere naprave prekriva digitalne predmete s fizičnim svetom. Danes sodobni brskalniki v nekaterih okoljih prek WebXR-ja omogočajo izvorne zmogljivosti AR, kar Izboljša delovanje v primerjavi s povsem spletnimi knjižnicami za sledenjeTipični primeri: testiranje izdelkov v polnem obsegu, interaktivna navodila ali turistični vodniki.
• VR (virtualna resničnost na spletu): uporabnika popolnoma potopi v 3D-okolje. Z združljivimi slušalkami, V brskalniku lahko raziskujete svetove, simulirate usposabljanje ali si ogledate arhitekturo.Interakcija zajema krmilnike, roke in okoljsko fiziko.
• MR (Mešana resničnost na spletu): združuje fizično in digitalno z dvosmerno interakcijo. Virtualni objekti sobivajo z resničnim prostorom, odpiranje vrat do aplikacije za produktivnost, sodelovalno izobraževanje in igre, ki se odzivajo na okolje.
• Brezhibni prehodi med AR in VRStandard vam omogoča, da se premikate iz ene seje v drugo brez prekinitev. Začnete v VR za sestanek in skočite v AR, da postavite predmet v svojo dnevno sobo., znotraj iste izkušnje.

Ključne prednosti WebXR-ja

Prava medplatformska

Izkušnje se izvajajo na kateri koli napravi, ki podpira brskalnik: slušalkah, kot sta Meta Quest ali HoloLens, računalnikih, tablicah in mobilnih napravah. Idealno za doseganje velikega občinstva, ne da bi pri tem izgubili dostop do AR in VR.

Pripravljeni na to, kar prihaja

Spletni standardi se razvijajo z novimi napravami. Vaša prostorska spletna aplikacija se lahko izvaja na strojna oprema prihodnost od prvega dne, tudi na novo izdanih platformah.

Neoviran dostop

Samo odprite URL in končali ste. Ni vam treba namestiti ničesar, čeprav lahko "namestite" kot PWA z uporabo funkcije Dodaj na začetni zaslon in storitvenih delavcev za delo brez povezave.

Agilno objavljanje

Spletna stran ni odvisna od urejanja trgovine. Naložite na strežnik, usmerite na domeno in posodobite za vse z uvedbo. Tako preprosto

Deljenje je trivialno

Povezava se deli prek omrežij, oglasov ali QR kode. Skenirate plakat in takoj zaženete AR, brez težav z namestitvijo.

Kako deluje WebXR v notranjosti

Brskalnik izpostavi API naprave WebXR za odpiranje sej (»inline«, »immersive-ar«, »immersive-vr«), poizvedovanje o položajih glave/roke/krmilnika in risanje na zaslonu naprave XR. 3D-scena se običajno upodablja z uporabo WebGL ali WebGPU, prostorski zvok pa se upodablja z uporabo WebAudio.Običajno imate datoteko index.html, JavaScript in 3D-vire.

Pri standardizaciji je API najprej definiran, nato pa ga brskalniki implementirajo (včasih za zastavicami), da prejmejo povratne informacije. Podporo za različice najdete na spletni strani caniuse.com ali v načrtih za posamezen brskalnik..

Preden začnete s kodiranjem, se splača izbrati ogrodje. Če želite iti "metal", lahko delate z izvornim JavaScriptom in WebGL/WebGPU.Če imate raje produktivnost, se odločite za motorje ali ogrodja, ki že integrirajo WebXR.

Stanje in knjižnice za sledenje WebAR

Čeprav WebXR definira AR, Implementacije sledenja AR so se v preteklosti razvijale počasneje kot VRZato se knjižnice drugih ponudnikov (8thwall, zappar, holoLink) pogosto uporabljajo na mobilnih napravah za sledenje slik/označevalcev in druge tehnike.

Če se odločite za odprtokodno programsko opremo, Obstajajo alternative, kot so MindAR, ARToolkit.js ali AlvaAR. za različne vrste sledenja. In pozor: obstajajo platforme, ki poleg podpore WebXR, Ponujajo lastne knjižnice za sledenje, ki pokrivajo pomanjkljivosti, kot je sledenje slikam v določenih brskalnikih..

SLAM v kontekstu WebXR

SLAM (Simultaneous Localization and Mapping) združuje lokalizacijo in kartiranje v realnem času. Je osnova za koherentno sidranje virtualnih objektov v fizičnem svetu., zaznavanje ravnin, sten in okoljskih značilnosti z uporabo kamere, merilnika pospeška in žiroskopa.

V izkušnji AR z WebXR SLAM omogoča, da 3D-model »ostane« tam, kjer ste ga postavili. Brez dobrega sledenja predmeti lebdijo ali plešejo in čarovnija je pokvarjena.Z dobro integriranim SLAM-om je interakcija verodostojna in stabilna.

Brskalniki in trenutna podpora

Podpora se razlikuje glede na različico in platformo, zato je dobro preveriti posodobljeno dokumentacijo. Chrome je prevzel vodilno vlogo in v svojih novejših različicah integrira WebXR.Firefox in Edge (Chromium) prav tako ponujata podporo, z nekaj niansami, ki so odvisne od sistema in naprave. Prav tako je dobro preveriti združljivost na platformah, kot je Windows Mešana Reality.

V iskalih, brskalnika Meta iskanje ponuja izvorni WebXR, ki omogoča izkušnje navidezne resničnosti in razširjene resničnosti prek spleta. V ekosistemu Apple je Safari na konferenci WWDC23 napovedal napredek in V Apple Vision Pro je podpora za WebXR na voljo za zastavico.; na iPhoneu/iPadu se stanje lahko razlikuje in razvija z vsako izdajo.

ne pozabite, da Združljivost se lahko razlikuje glede na različico in platformoin da starejši ali manj priljubljeni brskalniki morda nimajo podpore ali pa jo imajo omejeno.

Pregled podprtih naprav in strojne opreme

Dokler imate brskalnik z WebXR, obstajajo možnosti. Na namiznih računalnikih veliko slušalk deluje s Chromom, pri čemer SteamVR deluje kot izvajalno okolje OpenXR.Obstajajo tudi izjeme: PSVR/PSVR2 ali HTC Vive Flow ne ponujata WebXR, ker ne ponujata združljivega brskalnika. Če potrebujete navodila za nastavitev za Windows, se posvetujte z Nastavitev slušalk za virtualno resničnost v sistemu Windows.

Od julija 2023 naprave, ki podpirajo brskalnik, vključujejo: Meta Quest (1/2/3/Pro), Rift/Rift S; AppleVision Pro; Microsoft HoloLens 1/2; HTC Vive/Fiocus/Elite XR; Neo Peak; Huawei Navidezna resničnost; Samsung Gear VR/Odyssey; google Karton/Daydream; Varjo VR-1/2/3; ValveIndex; Magic Leap 1/2; Lynx R-1; Lenovo ThinkReality; HP Reverb G2Vedno preverite specifično različico in brskalnik.

Fabricante	Naprava
Meta	Naloga, Naloga 2, Naloga Pro, Naloga 3, Rift, Rift S
Apple	VisionPro
Microsoft	HoloLens 1, HoloLens 2
HTC	Vive Focus 3, Vive Elite XR, Vive, Vive Pro, Vive Pro 2
Pico	Neo 3, 4, 4 Enterprise
Huawei	VR 3DoF, VR 6DoF
Samsung	Gear VR, Odyssey
google	Karton, pogled Daydream
Varjo	VR‑1, VR‑2, VR‑3
Valve	Kazalo
Magic Leap	1 in 2
Lynx	R-1
Lenovo	ThinkReality VRX, A3
HP	Odmev G2

Kjer ni podprtega brskalnika, ne bo WebXR. Če vam slušalke omogočajo namestitev sodobnega brskalnika z API-jem WebXR Device, se možnosti pomnožijo..

Android XR s Chromom: globina, roke in dva zaslona

S prilagajanjem izkušenj za Android XR, ne pozabite, da je upodabljanje stereo (en pogled na oko). Konfigurirati morate dva vidna polja in obravnavati vnos s prednostjo rok, če naprava to raje uporablja.Prav tako spremeni model interakcije v uporabniškem vmesniku in obseg.

// Bucle de frame en una XRSession con WebGL, render estéreo y profundidad
function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const layer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);
  if (!pose) return;

  gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  for (const view of pose.views) {
    const vp = layer.getViewport(view);
    gl.viewport(vp.x, vp.y, vp.width, vp.height);

    // Profundidad estéreo: un mapa por ojo si está disponible
    const depthInfo = frame.getDepthInformation(view);
    if (depthInfo) {
      renderDepthGPU(depthInfo, view, vp);
    }

    renderSceneForView(view);
  }
}

Vidiki, na katere je treba paziti: Za dostop do globine potrebujete veljaven položaj., pose.views vrne en pogled na oko in zanka se izvede dvakrat, cevovod senčil pa mora upoštevati okluzijo/trčenje na podlagi zemljevida globine.

Interakcija z rokami in vnos

Ročni vnos je osnovni element v sistemu Android XR, Chrome pa ga podpira kot privzeti vnos. API za sledenje rok omogoča kretnje, kot so ščipanje, prijemanje ali potiskanje predmetov., z dogodki in sklepi na prst.

V mobilnih slušalkah ali slušalkah s krmilnikom ročni vnos morda ni na voljo ali pa je delno na voljo. Vaša aplikacija bi morala zaznati zmogljivosti in se elegantno preusmeriti na krmilnike ali dotik, ne da bi pri tem prekinili interakcijo.

Dovoljenja in zasebnost

Za odpiranje sej AR/VR so potrebna dovoljenja, kot sta sledenje kamere in 3D-kartiranje, druga dovoljenja (obraz, oči, roke) pa so dodatno zaščitena. Brskalnik zahteva dovoljenje za vsako domeno posebej in si zapomni nastavitve.; če kateri manjka, seja ne bo začela.

Kot pri vsakem spletnem API-ju, dobro obvladuje zavrnitve in uporabniku sporoči, zakaj potrebujete vsako dovoljenje in kaj dobi v zameno.

Primeri uporabe, ki že zelo dobro delujejo

E-trgovina z ARIzdelke prikaže v polni velikosti v prostoru stranke. Zaupanje se poveča, donose pa se zmanjšajo. Če pred nakupom v dnevni sobi vidite naslanjač, ​​je to prelomnica..

Trženje in oglaševanje: kampanje z mini igrami AR in interaktivnimi izkušnjami, ki krepijo prepoznavnost blagovne znamke. Od QR kode v izložbi do filtra, ki »oživi« na ulici.

Industrija in usposabljanje: varne simulacije za usposabljanje, preprečevanje tveganj in kompleksne postopke. Digitalni dvojčki, proizvodne linije in interaktivni kontrolni seznami prihranijo čas in zmanjšujejo število nesreč..

Izobraževanje: abstraktni 3D-koncepti, virtualni laboratoriji in obiski muzejev. Poglobljeno učenje pritegne in si ga bolje zapomnimo.

Arhitektura in nepremičnine: : Pregled 3D-modela s strankami in virtualni ogledi nepremičnin. Bolj informirane odločitve pred gradnjo.

Turizem in kultura360° ogledi, razstave in raziskovanje dediščine od doma ali na kraju samem z AR prekrivnimi elementi. Kulturna dostopnost se dvigne s preprosto povezavo.

PWA: dotik »aplikacije«, ne da bi zapustili splet

PWA daje vaši izkušnji XR videz in občutek izvorne aplikacije. Dodaj na začetni zaslon se odpre v svojem oknu brez vrstice URLin lahko predpomnite vire za delo brez povezave.

S storitvami storitve in predpomnilniškim shranjevanjem prestrežete zahteve in po potrebi odgovorite brez omrežja. To izboljša zakasnitev in prepreči izpade med demonstracijami ali dogodki., kjer povezljivost ni vedno na voljo.

WebGL, WebGL 2 in prehod na WebGPU

WebGL omogoča 2D/3D risanje s pospešenim grafičnim procesorjem v brskalniku, pri čemer se elementi mešajo v DOM. Programi združujejo JavaScript za nadzor in GLSL ES senčilnike za grafični procesor., in ga poganja Khronos.

Skupino WebGL so leta 2009 ustanovili Apple, Google, Mozilla in Opera, različica 1.0 pa je prišla leta 2011. ANGLE je leta 2011 dosegel certifikat OpenGL ES 2.0, kar je izboljšalo prenosljivost.Leta 2012 je Autodesk prenesel aplikacije, kot je AutoCAD 360, na WebGL. WebGL 2, ki je temeljil na OpenGL ES 3.0, je bil leta 2017 ukinjen (Firefox 51, Chrome 56, Opera 43).

Vzporedno s tem si W3C prizadeva WebGPU kot sodoben naslednik z boljšim dostopom do GPU-jaZa WebXR to pomeni bolj kompleksne prizore, napredne materiale in učinkovitejše tehnike upodabljanja.