Hvad er WebXR: Den komplette guide til at forstå AR, VR og MR på nettet

Den måde, vi navigerer på internettet, tager et kæmpe spring fremad: internettet er nu også et sted for fordybende oplevelser. WebXR er broen, der bærer Virtual Reality (VR) og Augmented Reality (AR) direkte til browseren, uden besværlige installationer eller endeløse trin. Hvis du nogensinde har tænkt: "Dette burde åbne med et link", er du kommet til det rette sted.

Vi taler om en åben teknologi drevet af W3C, der forbinder hverdagens JS med XR-sensorer, kameraer og seere. Fra at afprøve en sofa i din stue til at opleve et museum i 360°, kan alt starte med en URL.Og ja, der er en hage: standarder, API'er, 3D-motorer og et økosystem i hastig udvikling.

Hvad er WebXR, og hvorfor er det vigtigt

WebXR er den specifikation, der muliggør XR-oplevelser (AR, VR og MR) på nettet. Giver dig mulighed for at starte fordybende sessioner direkte fra din browser, med adgang til enhedsfunktioner som bevægelsessporing, controllere, hænder, sensorer og kameraer. Kort sagt bliver browseren en "XR-app".

Standarden er udviklet af W3C og implementeret af browsere ("klienter") på hver platform. Til 3D-rendering er det afhængigt af API'er som WebGL og i stigende grad WebGPU; spatial lyd er tilgængelig via WebAudio.Det betyder, at du kan programmere i JavaScript/TypeScript og implementere det på ethvert websted.

Ud over overskriften er der noget vigtigt: WebXR demokratiserer adgang til fordybende oplevelserDu behøver ikke at udgive i en butik eller gennemtvinge installation apps native: del blot et link på sociale medier, en QR-kode på en plakat eller en knap på din e-handelsside.

Typer af oplevelser i WebXR

• AR (Augmented Reality på nettet): lægger digitale objekter oven på den fysiske verden ved hjælp af enhedens kamera. I dag eksponerer moderne browsere native AR-funktioner via WebXR i nogle miljøer, hvilket Forbedrer ydeevnen sammenlignet med rent webbaserede sporingsbibliotekerTypiske tilfælde: test af produkter i fuld skala, interaktive instruktioner eller turistguider.
• VR (Virtual Reality på nettet): fordyber brugeren fuldstændigt i et 3D-miljø. Med et kompatibelt headset, Du kan udforske verdener, simulere træning eller se arkitektur fra browseren.Interaktion omfatter controllere, hænder og miljøfysik.
• MR (Mixed Reality på nettet)kombinerer fysisk og digitalt med tovejsinteraktion. Virtuelle objekter sameksisterer med virkeligt rum, åbner døren til produktivitetsapps, kollaborativ uddannelse og spil, der reagerer på miljøet.
• Problemfri overgange mellem AR og VRStandarden giver dig mulighed for at gå fra én session til en anden uden afbrydelser. Du starter i VR for en briefing og hopper ind i AR for at placere et objekt i din stue., inden for den samme oplevelse.

Vigtigste fordele ved WebXR

Ægte cross-platform

Oplevelserne kører på enhver browseraktiveret enhed: headsets som Meta Quest eller HoloLens, computere, tablets og mobilenheder. Ideel til at nå ud til et stort publikum uden at miste adgangen til AR og VR.

Forberedt på hvad der kommer

Webstandarder udvikler sig med nye enheder. Din spatiale webapp kan køre på hardware fremtiden fra dag ét, selv på nyligt udgivne platforme.

Friktionsfri adgang

Bare åbn en URL, og så er du færdig. Du behøver ikke at installere noget, selvom du kan "installere" som en PWA. bruger Føj til startskærm og servicemedarbejdere til at arbejde offline.

Agil publicering

Hjemmesiden er ikke afhængig af butikskuratering. Du uploader til serveren, peger på domænet og opdaterer for alle med en deployment. Så simpelt

Deling er trivielt

Et link deles via netværk, annoncer eller QR. Du scanner en plakat og starter en AR på stedet, uden installationsbesvær.

Sådan fungerer WebXR indeni

Browseren eksponerer WebXR Device API'en for åbne sessioner ("inline", "immersive-ar", "immersive-vr"), forespørger på hoved-/hånd-/controller-positurer og tegner på XR-enhedens skærm. 3D-scenen gengives typisk ved hjælp af WebGL eller WebGPU, og rumlig lyd gengives ved hjælp af WebAudio.Du har normalt en index.html, dit JavaScript og 3D-ressourcer.

I standardisering defineres API'et først, og derefter implementerer browsere det (nogle gange bag flag) for at modtage feedback. Versionssupport kan findes på caniuse.com eller i køreplanerne for hver browser..

Før du begynder at skrive kode, betaler det sig at vælge et framework. Hvis du vil gå "metal", kan du arbejde med native JavaScript og WebGL/WebGPUHvis du foretrækker produktivitet, så vælg søgemaskiner eller frameworks, der allerede integrerer WebXR.

WebAR-status og sporingsbiblioteker

Selvom WebXR definerer AR, Implementeringer af AR-sporing har historisk set udviklet sig langsommere end VRDerfor bruges tredjepartsbiblioteker (8thwall, zappar, holoLink) ofte på mobile enheder til sporing af billeder/markører og andre teknikker.

Hvis du vælger open source, Der findes alternativer som MindAR, ARToolkit.js eller AlvaAR til forskellige typer sporing. Og pas på: der findes platforme, der udover at understøtte WebXR, De stiller deres egne sporingsbiblioteker til rådighed for at dække mangler såsom billedsporing i visse browsere..

SLAM i WebXR-kontekst

SLAM (Simultaneous Localization and Mapping) kombinerer lokalisering og kortlægning i realtid. Det er grundlaget for at forankre virtuelle objekter sammenhængende i den fysiske verden., detektering af fly, vægge og miljømæssige elementer ved hjælp af kameraet, accelerometeret og gyroskopet.

I en WebXR AR-oplevelse tillader SLAM en 3D-model at "blive", hvor du placerede den. Uden god sporing svæver eller danser objekter, og magien er brudt.Med SLAM velintegreret er interaktionen troværdig og stabil.

Browsere og aktuel support

Support varierer afhængigt af version og platform, så det er en god idé at tjekke for opdateret dokumentation. Chrome har ført an i processen og integrerer WebXR i sine seneste versioner.Firefox og Edge (Chromium) tilbyder også support, med nuancer afhængigt af system og enhed. Det er også en god idé at tjekke kompatibilitet på platforme som f.eks. Windows blandet virkelighed.

I søgere, browseren af Meta-quest tilbyder native WebXR, der muliggør VR- og AR-oplevelser fra nettet. I Apple-økosystemet annoncerede Safari forbedringer på WWDC23 og I Apple Vision Pro er WebXR-understøttelse tilgængelig bag et flag.; på iPhone/iPad kan statussen variere og udvikle sig med hver udgivelse.

Husk Kompatibilitet kan variere afhængigt af version og platform, og at ældre eller mindretalsbrowsere muligvis mangler eller har begrænset understøttelse.

Oversigt over understøttede enheder og hardware

Så længe du har en browser med WebXR, er der muligheder. På computere fungerer mange headsets med Chrome ved hjælp af SteamVR som OpenXR-kørselstid.Der er også undtagelser: PSVR/PSVR2 eller HTC Vive Flow tilbyder ikke WebXR, fordi de ikke eksponerer en kompatibel browser. Hvis du har brug for en opsætningsvejledning til Windows, konsulter Opsætning af virtual reality-headset på Windows.

Fra juli 2023 omfatter browseraktiverede enheder: Meta Quest (1/2/3/Pro), Rift/Rift S; AppleVision Pro; Microsoft HoloLens 1/2; HTC Vive/FIocus/Elite XR; Neo Peak; Huawei VR; Samsung Gear VR/Odyssey; Google Pap/Daydream; Varjo VR-1/2/3; ValveIndex; Magic Leap 1/2; Lynx R-1; Lenovo ThinkReality; HP Reverb G2Tjek altid den specifikke version og browser.

Fabricante	enhed
Meta	Quest, Quest 2, Quest Pro, Quest 3, Rift, Rift S
Apple	vision pro
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	Pap, Daydream View
Varjo	VR-1, VR-2, VR-3
Valve	Indeks
Magic Leap	1 og 2
Lynx	R‑1
Lenovo	ThinkReality VRX, A3
HP	Rumklang G2

Hvor der ikke er en understøttet browser, vil der ikke være WebXR. Hvis dit headset tillader dig at installere en moderne browser med WebXR Device API, bliver mulighederne mangedoblet..

Android XR med Chrome: Dybde, hænder og to skærme

Ved at tilpasse oplevelser til Android XR, husk at gengivelsen er stereo (én visning pr. øje). Du skal konfigurere to visningsporte og håndtere håndprioriteret input, hvis enheden foretrækker det.Det ændrer også interaktionsmodellen i brugergrænsefladen og skalaen.

// 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);
  }
}

Aspekter at tage hånd om: Du skal bruge en gyldig positur for at få adgang til dybde., pose.views returnerer én visning pr. øje, og løkken kører to gange, og shader-pipelinen skal tage højde for okklusion/kollision baseret på dybdekortet.

Interaktion med hænder og input

Manuel input er en fast bestanddel af Android XR, og Chrome understøtter det som standardinput. Håndsporings-API'en tillader bevægelser som at knibe, gribe eller skubbe objekter., med begivenheder og led pr. finger.

På mobile headsets eller headsets med controllere kan manuel input være utilgængelig eller delvist tilgængelig. Din app skal registrere funktioner og elegant nedgradere til controllere eller touchuden at afbryde interaktionen.

Tilladelser og privatliv

Åbning af AR/VR-sessioner kræver tilladelser såsom kamerasporing og 3D-kortlægning, og andre (ansigt, øjne, hænder) er yderligere beskyttet. Browseren anmoder om tilladelse pr. domæne og husker præferencen; hvis nogen mangler, starter sessionen ikke.

Som med enhver web-API, håndterer afslag godt og kommunikerer til brugeren, hvorfor du har brug for hver tilladelse, og hvad de får til gengæld.

Brugsscenarier, der allerede fungerer rigtig godt

E-handel med ARViser produkter i fuld skala i kundens lokaler. Tilliden stiger, og returneringen falder. At se en lænestol i sin stue, før man køber den, er game changer..

Marketing og Reklame: kampagner med AR-minispil og interaktive oplevelser, der øger brandgenkendelse. Fra en QR-kode i et butiksvindue til et filter, der "kommer til live" på gaden.

Industri og uddannelseSikre simuleringer til træning, risikoforebyggelse og komplekse procedurer. Digitale tvillinger, produktionslinjer og interaktive tjeklister sparer tid og ulykker..

Uddannelseabstrakte 3D-koncepter, virtuelle laboratorier og museumsbesøg. Fordybende læring engagerer og huskes bedre.

Arkitektur og ejendomme: : Gennemgang af 3D-modeller med kunder og virtuelle ture af ejendomme. Mere informerede beslutninger inden byggeri.

Turisme og kultur360°-ture, udstillinger og kulturarv udforsket hjemmefra eller på stedet med AR-overlays. Kulturel tilgængelighed stiger med et simpelt link.

PWA: "app"-berøringen uden at forlade internettet

En PWA giver din XR-oplevelse udseendet og følelsen af ​​en native app. Tilføj til startskærm åbner i sit eget vindue uden URL-linje, og du kan cache ressourcer for at arbejde offline.

Med service workers og cache storage opfanger du anmodninger og svarer uden et netværk, hvis det er nødvendigt. Dette forbedrer latenstiden og forhindrer frafald under demoer eller events., hvor der ikke altid er forbindelse til rådighed.

WebGL, WebGL 2 og overgangen til WebGPU

WebGL muliggør GPU-accelereret 2D/3D-tegning i browseren og blander elementer ind i DOM'en. Programmerne kombinerer JavaScript til kontrol og GLSL ES shaders til GPU'en., og er drevet af Khronos.

WebGL-gruppen blev grundlagt i 2009 af Apple, Google, Mozilla og Opera, og version 1.0 kom i 2011. ANGLE opnåede OpenGL ES 2.0-certificering i 2011, hvilket forbedrede portabiliteten.I 2012 porterede Autodesk apps som AutoCAD 360 til WebGL. WebGL 2, baseret på OpenGL ES 3.0, blev udgået i 2017 (Firefox 51, Chrome 56, Opera 43).

Parallelt hermed presser W3C på WebGPU som en moderne efterfølger med bedre GPU-adgangFor WebXR betyder det mere komplekse scener, avancerede materialer og mere effektive renderingsteknikker.