Czym jest WebXR: Kompletny przewodnik po zrozumieniu rozszerzonej rzeczywistości (AR), wirtualnej rzeczywistości (VR) i mieszanej rzeczywistości (MR) w Internecie

Sposób, w jaki poruszamy się po Internecie, robi ogromny krok naprzód: sieć stała się teraz również miejscem wciągających doświadczeń. WebXR to most, który przenosi Wirtualna rzeczywistość (VR) i rozszerzona rzeczywistość (AR) bezpośrednio w przeglądarce, bez uciążliwych instalacji i niekończących się kroków. Jeśli kiedykolwiek pomyślałeś: „To powinno otworzyć się z linkiem”, trafiłeś we właściwe miejsce.

Mówimy o otwartej technologii opracowanej przez W3C, która łączy codzienny JavaScript z czujnikami, kamerami i przeglądarkami XR. Od wypróbowania sofy w salonie po zwiedzanie muzeum w widoku 360° — wszystko może zacząć się od adresu URL.I tak, jest pewien haczyk: standardy, interfejsy API, silniki 3D i szybko rozwijający się ekosystem.

Czym jest WebXR i dlaczego jest to ważne

WebXR to specyfikacja umożliwiająca korzystanie z rozwiązań XR (AR, VR i MR) w sieci. Umożliwia rozpoczęcie sesji immersyjnych bezpośrednio z przeglądarki, z dostępem do funkcji urządzenia, takich jak śledzenie ruchu, kontrolery, dłonie, czujniki i kamery. Krótko mówiąc, przeglądarka staje się „aplikacją XR”.

Standard został opracowany przez W3C i wdrożony przez przeglądarki („klientów”) na każdej platformie. Do renderowania 3D wykorzystywane są interfejsy API, takie jak WebGL i coraz częściej WebGPU; dźwięk przestrzenny jest dostępny za pośrednictwem WebAudio.Oznacza to, że możesz programować w JavaScript/TypeScript i wdrażać na dowolnej stronie internetowej.

Za nagłówkiem kryje się coś kluczowego: WebXR demokratyzuje dostęp do wciągających doświadczeńNie musisz publikować w sklepie ani wymuszać instalacji mobilne i webowe natywny: wystarczy udostępnić link w mediach społecznościowych, kod QR na plakacie lub przycisk na stronie sklepu internetowego.

Rodzaje doświadczeń w WebXR

• AR (rozszerzona rzeczywistość w sieci): nakłada obiekty cyfrowe na świat fizyczny za pomocą kamery urządzenia. Obecnie nowoczesne przeglądarki udostępniają w niektórych środowiskach natywne funkcje rozszerzonej rzeczywistości (AR) za pośrednictwem WebXR, co Poprawia wydajność w porównaniu z bibliotekami śledzącymi działającymi wyłącznie w sieciTypowe przypadki: testowanie produktów pełnowymiarowych, instrukcji interaktywnych lub przewodników turystycznych.
• VR (wirtualna rzeczywistość w sieci): całkowicie zanurza użytkownika w środowisku 3D. Z kompatybilnym zestawem słuchawkowym, Możesz eksplorować światy, symulować szkolenia i oglądać architekturę z poziomu przeglądarki.Interakcja obejmuje kontrolery, dłonie i fizykę otoczenia.
• MR (Mieszana rzeczywistość w sieci):łączy to, co fizyczne i cyfrowe, z dwukierunkową interakcją. Obiekty wirtualne współistnieją z przestrzenią rzeczywistą, otwierając drzwi do aplikacje zwiększające produktywność, edukacja oparta na współpracy oraz gry reagujące na otoczenie.
• Płynne przejścia między AR i VR:Standard pozwala na przechodzenie z jednej sesji do drugiej bez żadnych przerw. Zaczynamy w wirtualnej rzeczywistości, gdzie uczestniczymy w instruktażu, a następnie przechodzimy do rozszerzonej rzeczywistości, aby umieścić obiekt w swoim salonie., w ramach tego samego doświadczenia.

Główne zalety WebXR

Prawdziwa wieloplatformowość

Z aplikacji można korzystać na dowolnym urządzeniu obsługującym przeglądarkę: zestawach słuchawkowych, takich jak Meta Quest czy HoloLens, komputerach, tabletach i urządzeniach mobilnych. Idealne rozwiązanie do dotarcia do szerokiego grona odbiorców bez utraty możliwości korzystania z technologii AR i VR.

Przygotowany na to, co nadchodzi

Standardy sieciowe ewoluują wraz z nowymi urządzeniami. Twoja przestrzenna aplikacja internetowa może działać na sprzęt komputerowy przyszłość od pierwszego dnianawet na nowo wydanych platformach.

Dostęp bez tarcia

Wystarczy otworzyć adres URL i gotowe. Nie musisz niczego instalować, choć możesz „zainstalować” aplikację jako PWA korzystając z funkcji Dodaj do ekranu głównego i pracowników serwisowych umożliwiających pracę w trybie offline.

Zwinne publikowanie

Strona internetowa nie jest zależna od kuratorstwa sklepu. Przesłałeś na serwer, wskazałeś domenę i zaktualizowałeś dla wszystkich z wdrożonym. Tak prosty

Dzielenie się jest proste

Link jest udostępniany za pośrednictwem sieci, reklam lub kodów QR. Skanujesz plakat i rozpoczynasz AR na miejscu, bez kłopotów z instalacją.

Jak działa WebXR od środka

Przeglądarka udostępnia interfejs API urządzenia WebXR, umożliwiając otwieranie sesji („inline”, „immersive-ar”, „immersive-vr”), wyszukiwanie pozycji głowy/dłoni/kontrolera i rysowanie na ekranie urządzenia XR. Scena 3D jest zazwyczaj renderowana przy użyciu technologii WebGL lub WebGPU, a dźwięk przestrzenny jest renderowany przy użyciu technologii WebAudio.Zazwyczaj masz plik index.html, JavaScript i zasoby 3D.

W standaryzacji najpierw definiuje się API, a następnie przeglądarki je implementują (czasem za flagami), aby otrzymywać informacje zwrotne. Informację o obsługiwanych wersjach można znaleźć na stronie caniuse.com lub w planach rozwoju poszczególnych przeglądarek..

Zanim zaczniesz kodować, warto wybrać framework. Jeśli chcesz pracować „na metalu”, możesz korzystać z natywnego JavaScript i WebGL/WebGPUJeśli zależy Ci na produktywności, wybierz silniki lub frameworki, które już integrują WebXR.

Biblioteki statusu i śledzenia WebAR

Chociaż WebXR definiuje AR, Wdrożenia śledzenia w rzeczywistości rozszerzonej (AR) historycznie rozwijały się wolniej niż w rzeczywistości wirtualnej (VR)Dlatego biblioteki innych firm (8thwall, zappar, holoLink) są często używane na urządzeniach mobilnych do śledzenia obrazów/znaczników i innych technik.

Jeśli zdecydujesz się na oprogramowanie typu open source, Istnieją alternatywy takie jak MindAR, ARToolkit.js lub AlvaAR dla różnych typów śledzenia. I uwaga: istnieją platformy, które oprócz obsługi WebXR, Oferują własne biblioteki śledzące, które niwelują pewne niedociągnięcia, np. śledzenie obrazów w niektórych przeglądarkach..

SLAM w kontekście WebXR

SLAM (Simultaneous Localization and Mapping) łączy lokalizację i mapowanie w czasie rzeczywistym. Jest podstawą spójnego zakotwiczenia obiektów wirtualnych w świecie fizycznym., wykrywanie płaszczyzn, ścian i elementów otoczenia za pomocą kamery, akcelerometru i żyroskopu.

W środowisku WebXR AR funkcja SLAM pozwala modelowi 3D „pozostać” w miejscu, w którym go umieściłeś. Bez dobrego śledzenia obiekty unoszą się lub tańczą, a magia przestaje działać.Dzięki dobrej integracji SLAM interakcja jest wiarygodna i stabilna.

Przeglądarki i bieżąca obsługa

Zakres wsparcia różni się w zależności od wersji i platformy, dlatego warto sprawdzać, czy dostępna jest aktualna dokumentacja. Przeglądarka Chrome wysunęła się na prowadzenie i w swoich najnowszych wersjach zintegrowała WebXR.Firefox i Edge (Chromium) również oferują wsparcie, choć jego dostępność może się różnić w zależności od systemu i urządzenia. Warto również sprawdzić kompatybilność na platformach takich jak Windows Mixed Reality.

W wizjerach, przeglądarka Meta zadanie oferuje natywny WebXR, ułatwiając korzystanie z VR i AR z poziomu sieci. W ekosystemie Apple, Safari ogłosiło postępy podczas konferencji WWDC23 i W Apple Vision Pro obsługa WebXR jest dostępna za flagą.; na iPhone/iPadzie status może być różny i ewoluować z każdą nową wersją.

Zapamiętaj Zgodność może się różnić w zależności od wersji i platformyi że starsze lub mniejszościowe przeglądarki mogą nie mieć wsparcia lub jego obsługa może być ograniczona.

Przegląd obsługiwanych urządzeń i sprzętu

Jeśli masz przeglądarkę obsługującą WebXR, masz kilka opcji. Na komputerach stacjonarnych wiele zestawów słuchawkowych współpracuje z przeglądarką Chrome, wykorzystując SteamVR jako środowisko uruchomieniowe OpenXR.Istnieją również wyjątki: PSVR/PSVR2 lub HTC Vive Flow nie oferują WebXR, ponieważ nie udostępniają kompatybilnej przeglądarki. Jeśli potrzebujesz instrukcji konfiguracji, Windows, zapoznaj się z Konfigurowanie zestawów słuchawkowych rzeczywistości wirtualnej w systemie Windows.

Od lipca 2023 r. urządzenia z włączoną przeglądarką obejmują: 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 Cardboard/Daydream; Varjo VR-1/2/3; ValveIndex; Magic Leap 1/2; Lynx R-1; Lenovo ThinkReality; HP Reverb G2Zawsze sprawdzaj konkretną wersję i przeglądarkę.

Fabricante	urządzenie
Meta	Zadanie, Zadanie 2, Zadanie Pro, Zadanie 3, Szczelina, Szczelina S
Jabłko	Wizja 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	Karton, widok Daydream
Varjo	VR‑1, VR‑2, VR‑3
Valve	wskaźnik
magia Leap	1 i 2
Ryś	R‑1
Lenovo	ThinkReality VRX, A3
HP	Pogłos G2

Jeśli nie ma obsługiwanej przeglądarki, nie będzie WebXR. Jeśli Twój zestaw słuchawkowy pozwala na zainstalowanie nowoczesnej przeglądarki z interfejsem API WebXR Device, możliwości stają się jeszcze większe..

Android XR z Chrome: głębia, dłonie i dwa ekrany

Dostosowując doświadczenia do Androida XRpamiętaj, że render jest stereoskopowy (jeden widok na jedno oko). Musisz skonfigurować dwa okna podglądu i obsłużyć wprowadzanie danych priorytetowo, jeśli urządzenie tak woli.Zmienia również model interakcji w interfejsie użytkownika i skalę.

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

Aspekty, o które należy zadbać: Aby uzyskać głębię, potrzebna jest prawidłowa poza.pose.views zwraca jeden widok na oko, a pętla wykonuje się dwukrotnie, a potok shaderów musi uwzględniać okluzję/kolizje na podstawie mapy głębi.

Interakcja z rękami i wprowadzanie danych

Wprowadzanie danych ręcznie jest podstawą systemu Android XR, a przeglądarka Chrome obsługuje je jako domyślne wprowadzanie danych. Interfejs API śledzenia dłoni umożliwia wykonywanie gestów, takich jak szczypanie, chwytanie lub pchanie obiektów., z wydarzeniami i stawami na palec.

W przypadku zestawów słuchawkowych mobilnych lub zestawów słuchawkowych skoncentrowanych na kontrolerze, ręczne wprowadzanie danych może być niedostępne lub dostępne częściowo. Twoja aplikacja powinna wykrywać możliwości i płynnie przełączać się na kontrolery lub dotyk, bez przerywania interakcji.

Uprawnienia i prywatność

Aby rozpocząć sesję AR/VR, wymagane są uprawnienia, takie jak śledzenie kamery i mapowanie 3D, a inne (twarz, oczy, dłonie) są dodatkowo chronione. Przeglądarka żąda uprawnień dla danej domeny i zapamiętuje preferencje; jeśli któregokolwiek z nich brakuje, sesja się nie rozpocznie.

Podobnie jak w przypadku każdego interfejsu API sieciowego, dobrze radzi sobie z odmowami i przekazuje użytkownikowi informację, dlaczego potrzebne są poszczególne uprawnienia i co użytkownik otrzyma w zamian.

Przykłady zastosowań, które już działają bardzo dobrze

E-commerce z AR:Wyświetla produkty w pełnej skali w przestrzeni klienta. Zaufanie rośnie, a zwroty maleją. Zobaczenie fotela w swoim salonie przed zakupem może być przełomowe..

Marketing i reklama:kampanie z minigrami AR i interaktywnymi doświadczeniami, które zwiększają rozpoznawalność marki. Od kodu QR w witrynie sklepowej do filtra, który „ożywa” na ulicy.

Przemysł i szkolenia:bezpieczne symulacje do celów szkoleniowych, zapobiegania ryzyku i skomplikowanych procedur. Cyfrowe bliźniaki, linie produkcyjne i interaktywne listy kontrolne oszczędzają czas i zapobiegają wypadkom..

Edukacja:abstrakcyjne koncepcje 3D, wirtualne laboratoria i wizyty w muzeach. Nauka immersyjna angażuje i jest lepiej zapamiętywana.

Architektura i nieruchomości:: Przegląd modeli 3D z klientami i wirtualne wycieczki po nieruchomościach. Bardziej świadome decyzje przed budową.

Turystyka i kultura:Wycieczki 360°, wystawy i zabytki zwiedzane w domu lub na miejscu dzięki nakładkom AR. Dostępność kulturowa wzrasta dzięki prostemu linkowi.

PWA: dotyk „aplikacji” bez opuszczania sieci

Dzięki aplikacji PWA Twoje środowisko XR będzie wyglądać i działać jak aplikacja natywna. Opcja Dodaj do ekranu głównego otwiera się w osobnym oknie bez paska adresu URLi możesz buforować zasoby, aby pracować w trybie offline.

Dzięki pracownikom usług i usłudze Cache Storage możesz przechwytywać żądania i w razie potrzeby odpowiadać bez użycia sieci. Zmniejsza to opóźnienia i zapobiega przerwom w transmisji podczas demonstracji lub wydarzeń., gdzie łączność nie zawsze jest dostępna.

WebGL, WebGL 2 i przejście na WebGPU

WebGL umożliwia przyspieszane przez GPU rysowanie 2D/3D w przeglądarce, wtapiając elementy w DOM. Programy łączą w sobie JavaScript do sterowania i shadery GLSL ES do GPU.i jest zasilany przez Khronos.

Grupa WebGL została założona w 2009 roku przez Apple, Google, Mozillę i Operę, a wersja 1.0 ukazała się w 2011 roku. W 2011 roku ANGLE uzyskało certyfikat OpenGL ES 2.0, co poprawiło przenośnośćW 2012 roku Autodesk przeniósł aplikacje takie jak AutoCAD 360 do WebGL. WebGL 2, oparty na OpenGL ES 3.0, został wycofany w 2017 roku (Firefox 51, Chrome 56, Opera 43).

Równocześnie W3C naciska WebGPU jako nowoczesny następca z lepszym dostępem do GPUW przypadku WebXR oznacza to bardziej złożone sceny, zaawansowane materiały i wydajniejsze techniki renderowania.