Tworzenie aplikacji internetowych na Androida XR

Obsługiwane urządzenia XR
Ten przewodnik pomoże Ci tworzyć rozwiązania na te typy urządzeń XR.
Więcej informacji o typach urządzeń z XR →
Gogle XR
Przewodowe okulary XR
Więcej informacji o typach urządzeń z XR →

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

Chrome na Androidzie 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 przykłady WebXR.

Wymaganie wstępne: wybierz platformę WebXR

Zanim zaczniesz tworzyć aplikację, musisz wybrać odpowiednią platformę WebXR. Znacznie zwiększy to Twoją produktywność i poprawi jakość tworzonych przez Ciebie rozwiązań.

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

Dostosowanie do Androida XR

Jeśli masz już rozwiązania WebXR działające na innych urządzeniach, może być konieczne zaktualizowanie kodu, aby prawidłowo obsługiwać WebXR na Androidzie XR. Na przykład rozwiązania WebXR przeznaczone na urządzenia mobilne będą musiały zostać dostosowane z jednego ekranu do 2 ekranów stereoskopowych w Androidzie XR. Rozwiązania WebXR przeznaczone na urządzenia mobilne lub istniejące gogle mogą wymagać dostosowania kodu wejściowego, aby obsługiwać sterowanie dłońmi.

Podczas pracy z WebXR na Androidzie XR może być konieczne zaktualizowanie kodu, aby uwzględnić fakt, że są 2 ekrany – po jednym na każde oko.

Zapewnianie poczucia głębi w WebXR

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

Chrome na Androidzie XR obsługuje moduł Depth Sensing w WebXR, który zwiększa zdolność urządzenia do postrzegania wymiarów i konturów otoczenia w świecie rzeczywistym. Te informacje o głębi pozwalają tworzyć bardziej wciągające i realistyczne interakcje, co pomaga użytkownikom podejmować świadome decyzje.

W przeciwieństwie do wykrywania głębi w telefonach komórkowych, wykrywanie głębi w Androidzie XR jest stereoskopowe i przesyła w czasie rzeczywistym 2 mapy głębi na potrzeby widzenia obuocznego. Może być konieczne zaktualizowanie kodu WebXR, aby prawidłowo obsługiwać stereoskopowe klatki głębi.

Poniższy przykład renderuje informacje o głębi stereoskopowo:

// 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 o głębi, trzeba zwrócić prawidłową pozę.
  • pose.views zwraca widok dla każdego oka, a odpowiadająca mu pętla for jest wykonywana 2 razy.

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

Dodawanie interakcji z dłońmi w WebXR

Dodanie interakcji z dłońmi do aplikacji WebXR zwiększa zaangażowanie użytkowników, umożliwiając bardziej intuicyjne i wciągające rozwiązania.

Sterowanie dłońmi to podstawowy mechanizm interakcji w Androidzie XR. Chrome na Androidzie XR obsługuje interfejs Hand Input API jako domyślny sposób sterowania. Ten interfejs API umożliwia użytkownikom naturalne interakcje z wirtualnymi obiektami za pomocą gestów i ruchów dłoni, aby chwytać, przesuwać lub manipulować elementami na scenie.

Urządzenia takie jak telefony komórkowe lub urządzenia XR oparte na kontrolerach mogą jeszcze nie obsługiwać sterowania dłońmi. Może być konieczne zaktualizowanie kodu WebXR, aby prawidłowo obsługiwać sterowanie dłońmi. Sesja wciągającej rzeczywistości wirtualnej z dłońmi pokazuje, jak zintegrować śledzenie dłoni z projektem WebXR.

Poniższa animacja pokazuje przykład łączenia uszczypnięcia z interfejsem WebXR API, aby pokazać użytkownikowi „wycieranie” powierzchni wirtualnej przestrzeni w celu odsłonięcia okna do świata rzeczywistego.

Demonstracja WebXR użycia uszczypnięcia dłoni do wycierania ekranów w celu zobaczenia rzeczywistości fizycznej.

Uprawnienia w WebXR

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

Preferencje uprawnień wybrane przez użytkownika są zachowywane w każdej domenie. Gdy użytkownik uzyskuje dostęp do rozwiązania WebXR w innej domenie, Chrome ponownie prosi o uprawnienia. Jeśli rozwiązanie WebXR wymaga wielu uprawnień, Chrome prosi o każde z nich osobno.

Podobnie jak w przypadku wszystkich uprawnień w internecie, należy prawidłowo obsługiwać sytuacje, w których uprawnienia są odmawiane.