Tworzenie aplikacji z wykorzystaniem WebXR

Chrome na Androida XR obsługuje WebXR. WebXR to otwarty standard opracowany przez W3C, który udostępnia interfejsy XR o wysokiej wydajności obsługiwanym przez przeglądarki. Jeśli tworzysz treści na potrzeby internetu, możesz ulepszać istniejące witryny za pomocą modeli 3D lub tworzyć nowe wciągające treści.

Chrome na Androida XR obsługuje te funkcje WebXR:

Aby zobaczyć WebXR w działaniu, uruchom Chrome na urządzeniu z Androidem XR lub emulatorze Androida XR i przejrzyj oficjalne próbki WebXR.

Warunek wstępny: wybierz framework WebXR

Zanim zaczniesz tworzyć aplikację, musisz wybrać odpowiedni framework WebXR. Dzięki temu znacznie zwiększysz swoją produktywność i poprawisz jakość tworzonych przez siebie wrażeń.

Jeśli wolisz używać natywnego JavaScriptu i WebGL, zapoznaj się z WebXR na GitHubie, aby utworzyć swój pierwszy eksperyment WebXR.

Dostosowywanie do Androida XR

Jeśli masz już treści WebXR działające na innych urządzeniach, konieczne może być zaktualizowanie kodu, aby zapewnić prawidłową obsługę WebXR na Androidzie XR. Na przykład w przypadku doświadczeń WebXR na urządzeniach mobilnych trzeba będzie przekształcić jeden ekran w dwa stereoskopowe ekrany w Androidzie XR. W przypadku doświadczeń WebXR kierowanych na urządzenia mobilne lub dotychczasowe zestawy słuchawkowe może być konieczne dostosowanie kodu wejściowego do korzystania z ręki.

Podczas pracy z WebXR na Androidzie XR może być konieczne zaktualizowanie kodu, aby uwzględnić fakt, że są 2 ekrany – jeden dla każdego oka.

Zapewnienie głębi w WebXR

Gdy użytkownik umieszcza wirtualny obiekt w swojej przestrzeni fizycznej, jego skala powinna być prawidłowa, aby wyglądał tak, jakby naprawdę tam pasował. Na przykład w aplikacji do zakupu mebli użytkownicy muszą mieć pewność, że wirtualny fotel będzie idealnie pasował do ich salonu.

Chrome na Androida XR obsługuje moduł wykrywania głębi w WebXR, który zwiększa zdolność urządzenia do postrzegania wymiarów i konturów rzeczywistego otoczenia. Te szczegółowe informacje umożliwiają tworzenie bardziej realistycznych i wciągających interakcji, które pomagają użytkownikom podejmować świadome decyzje.

W odróżnieniu od czujników głębi na telefonach komórkowych czujniki głębi w Androidzie XR są stereoskopowe i przesyłają 2 mapy głębi w czasie rzeczywistym, aby zapewnić widzowi widzenie obuoczne. Aby prawidłowo obsługiwać ramki głębi stereo, konieczna może być aktualizacja kodu WebXR.

W tym przykładzie informacje o głębi są renderowane w stereoskopie:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Najważniejsze informacje o kodzie

  • Aby uzyskać dostęp do danych głębi, musisz zwrócić prawidłową pozę.
  • pose.views zwraca widok dla każdego oka, a odpowiadająca mu pętla for jest wykonywana dwukrotnie.

Wizualizacja głębi w czasie rzeczywistym za pomocą interfejsu WebXR Depth Sensing API. Czerwony kolor wskazuje bliższe piksele, a niebieski – dalsze.

Dodawanie interakcji z rękami w WebXR

Dodanie interakcji z rękami do aplikacji WebXR zwiększa zaangażowanie użytkowników, zapewniając bardziej intuicyjne i wciągające wrażenia.

W Androidzie XR głównym mechanizmem interakcji jest wprowadzanie danych za pomocą rąk. Chrome na Androida XR obsługuje interfejs Hand Input API jako domyślne wejście. Ten interfejs API umożliwia użytkownikom naturalne interakcje z obiektami wirtualnymi. Za pomocą gestów i ruchu dłoni można chwytać, przesuwać i manipulować elementami w scenie.

Urządzenia takie jak telefony komórkowe czy urządzenia XR oparte na kontrolerze mogą nie obsługiwać jeszcze sterowania za pomocą rąk. Konieczna może być aktualizacja kodu WebXR, aby poprawnie obsługiwać dane wejściowe z ręki. Sesja wciągającej rzeczywistości rozszerzonej z wykorzystaniem rąk pokazuje, jak zintegrować śledzenie rąk z projektem WebXR.

Poniższa animacja pokazuje przykład połączenia funkcji zbliżania z WebXR API, aby pokazać, jak użytkownik „wyciera” powierzchnię wirtualnej przestrzeni, odsłaniając okno przejścia do świata rzeczywistego.

Demonstracja WebXR polegająca na użyciu dłoni do wymazywania ekranów, aby zobaczyć rzeczywistość fizyczną.

Uprawnienia w WebXR

Gdy używasz interfejsów WebXR, które wymagają uprawnień, Chrome prosi użytkownika o przyznanie uprawnień stronie. Wszystkie interfejsy API WebXR wymagają uprawnień do mapowania 3D i śledzenia kamery. Dostęp do danych o śledzeniu twarzy, oczu i dłoni jest również chroniony przez uprawnienia. Jeśli wszystkie wymagane uprawnienia są przyznane, wywołanie navigator.xr.requestSession('immersive-ar', options) zwraca prawidłową sesję WebXR.

Uprawnienia wybrane przez użytkownika są zachowywane w przypadku każdej domeny. Gdy uzyskujesz dostęp do WebXR w innej domenie, Chrome ponownie prosi o przyznanie uprawnień. Jeśli funkcja WebXR wymaga wielu uprawnień, Chrome wyświetla prośbę o każde z nich osobno.

Podobnie jak w przypadku wszystkich uprawnień w internecie, musisz odpowiednio reagować na sytuacje, gdy użytkownik odmówi udzielenia uprawnień.