Chrome na Androidzie XR obsługuje WebXR. WebXR to otwarty standard W3C, który udostępnia interfejsy API XR o wysokiej wydajności w obsługiwanych przeglądarkach. Jeśli tworzysz aplikacje internetowe, możesz wzbogacić istniejące witryny o modele 3D lub tworzyć nowe, wciągające środowiska.
Chrome na Androida XR obsługuje te funkcje WebXR:
- Device API
- Moduł AR
- Moduł Gamepads
- Moduł testu trafności
- Wpisywanie ręczne
- Kotwice
- Depth Sensing
- Szacowanie oświetlenia
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ększa to Twoją produktywność i poprawia jakość tworzonych przez Ciebie treści.
- Aby mieć pełną kontrolę nad scenami 3D i tworzyć niestandardowe lub złożone interakcje, zalecamy korzystanie z three.js i babylon.js.
- Do szybkiego tworzenia prototypów lub używania składni podobnej do HTML-a do definiowania scen 3D zalecamy A-Frame i model-viewer.
- Możesz też zapoznać się z większą liczbą platform i przykładowych kodów.
Jeśli wolisz używać natywnego JavaScriptu i WebGL, zapoznaj się z WebXR w GitHubie, aby utworzyć pierwszy eksperyment WebXR.
Dostosowywanie 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 treści WebXR przeznaczone na urządzenia mobilne będą musiały zostać dostosowane z jednego ekranu do dwóch ekranów stereo w Androidzie XR. Treści WebXR przeznaczone na urządzenia mobilne lub istniejące zestawy słuchawkowe mogą wymagać dostosowania kodu wejściowego do sterowania rękami.
Podczas pracy z WebXR na urządzeniu z Androidem 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 umieści wirtualny obiekt w swojej przestrzeni fizycznej, jego skala powinna być dokładna, aby wyglądał tak, jakby naprawdę tam był. 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 Androida XR obsługuje moduł wykrywania głębi w WebXR, który zwiększa możliwości urządzenia w zakresie rozpoznawania wymiarów i konturów otoczenia w rzeczywistym świecie. Informacje o głębi pozwalają tworzyć bardziej wciągające i realistyczne interakcje, które pomagają użytkownikom podejmować świadome decyzje.
W przeciwieństwie do wykrywania głębi na telefonach komórkowych wykrywanie głębi na Androidzie XR jest stereoskopowe i przesyła 2 mapy głębi w czasie rzeczywistym, co umożliwia widzenie obuoczne. 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, musisz zwrócić prawidłową pozycję.
pose.viewszwraca widok dla każdego oka, a odpowiednia pętla for jest uruchamiana 2 razy.
Wyświetlanie głębi w czasie rzeczywistym za pomocą interfejsu WebXR Depth Sensing API. Czerwony kolor oznacza bliższe piksele, a niebieski – dalsze.
Dodawanie interakcji z użyciem rąk w WebXR
Dodanie interakcji z użyciem rąk do aplikacji WebXR zwiększa zaangażowanie użytkowników, ponieważ umożliwia bardziej intuicyjne i wciągające wrażenia.
Sterowanie dłońmi to podstawowy mechanizm interakcji w Androidzie XR. Chrome na Androida XR obsługuje interfejs Hand Input API jako domyślne dane wejściowe. Ten interfejs API umożliwia użytkownikom naturalne wchodzenie w interakcje z wirtualnymi obiektami za pomocą gestów i ruchów rąk, aby chwytać, przesuwać lub manipulować elementami sceny.
Urządzenia takie jak telefony komórkowe lub urządzenia XR sterowane kontrolerem mogą jeszcze nie obsługiwać sterowania dłońmi. Aby prawidłowo obsługiwać sterowanie dłońmi, może być konieczna aktualizacja kodu WebXR. W sesji wciągającej rzeczywistości wirtualnej z użyciem rąk pokazujemy, jak zintegrować śledzenie rąk z projektem WebXR.
Poniższa animacja pokazuje przykład łączenia gestu uszczypnięcia z interfejsem WebXR API, aby pokazać użytkownikowi „wycieranie” powierzchni wirtualnej przestrzeni w celu odsłonięcia okna trybu widoku otoczenia do świata rzeczywistego.
Demonstracja WebXR pokazująca, jak za pomocą gestu zaciśnięcia dłoni można wymazać ekrany, aby zobaczyć rzeczywistość fizyczną.
Uprawnienia w WebXR
Gdy używasz interfejsów WebXR API, które wymagają uprawnień, Chrome wyświetla użytkownikowi prośbę o przyznanie witrynie uprawnień. Wszystkie interfejsy WebXR API wymagają uprawnień do mapowania 3D i śledzenia kamery. Dostęp do śledzonych danych dotyczących twarzy, oczu i dłoni jest również chroniony przez uprawnienia. Jeśli wszystkie wymagane uprawnienia zostaną przyznane, wywołanie navigator.xr.requestSession('immersive-ar', options) zwróci prawidłową sesję WebXR.
Preferencje dotyczące uprawnień wybrane przez użytkownika są zachowywane w przypadku każdej domeny. Dostęp do treści WebXR w innej domenie powoduje, że Chrome ponownie prosi o uprawnienia. Jeśli środowisko WebXR wymaga wielu uprawnień, Chrome wyświetla prośbę o każde z nich po kolei.
Podobnie jak w przypadku wszystkich uprawnień w internecie, należy odpowiednio obsługiwać sytuacje, w których uprawnienia są odrzucane.