Rzeczywistość rozszerzona w internecie

Joe Medley
Joe Medley
GitHub

W Chrome 67 ogłosiliśmy interfejs WebXR Device API do rzeczywistości rozszerzonej (AR) i wirtualnej (VR), ale włączone były tylko funkcje VR. VR to technologia, która działa wyłącznie na podstawie tego, co znajduje się na urządzeniu. Z drugiej strony AR umożliwia renderowanie wirtualnych obiektów w rzeczywistym świecie. Aby umożliwić umieszczanie i śledzenie tych obiektów, dodaliśmy do Chrome Canary interfejs WebXR Hit Test API, czyli nową metodę, która ułatwia umieszczanie obiektów w rzeczywistym świecie.

Gdzie mogę go znaleźć?

W najbliższej przyszłości ten interfejs API będzie dostępny tylko w wersji Canary. Chcemy przedłużyć okres testowania, ponieważ jest to bardzo nowa propozycja interfejsu API i chcemy mieć pewność, że jest on niezawodny i odpowiednio dostosowany do potrzeb programistów.

Oprócz Chrome Canary musisz mieć też:

Dzięki nim możesz zapoznać się z prezentacjami lub wypróbować nasze ćwiczenia Codelab.

To tylko internet

Na tegorocznej konferencji Google I/O zaprezentowaliśmy rzeczywistość rozszerzoną z poprzednią wersją przeglądarki Chrome. W trakcie tych 3 dni wielokrotnie powtarzałem coś zarówno programistom, jak i nieprogramistom. Chciałbym, aby znalazło się to w moim artykule o wirtualnej rzeczywistości w internecie: „To tylko internet”.

„Jakie rozszerzenie do Chrome muszę zainstalować?” „Nie ma rozszerzenia. To tylko internet”.

„Czy potrzebuję specjalnej przeglądarki?” „To tylko internet”.

„Jaką aplikację muszę zainstalować?” „Nie ma specjalnej aplikacji. To tylko internet”.

To może być dla Ciebie oczywiste, ponieważ czytasz to na stronie poświęconej internetowi. Jeśli tworzysz demonstracje za pomocą tego nowego interfejsu API, przygotuj się na to pytanie. Będziesz go często używać.

Jeśli chcesz dowiedzieć się więcej o ogólnych aspektach nowej generacji internetu, w tym o tym, jak wygląda i jak będzie się rozwijać, obejrzyj ten film.

Do czego się przydaje?

Rzeczywistość rozszerzona będzie cennym dodatkiem do wielu istniejących stron internetowych. Może ona na przykład pomóc użytkownikom w nauce w witrynach edukacyjnych i umożliwić potencjalnym kupującym wizualizację produktów w ich domach.

Nasze demonstracje to pokazują. Umożliwiają użytkownikom osadzenie rzeczywistej wielkości obiektu w rzeczywistości. Po umieszczeniu obrazu na wybranej powierzchni pozostaje on w rozmiarze, jaki miałby rozmiar, gdyby znajdował się na niej rzeczywisty element. Użytkownik może też poruszać się wokół niej i zbliżać do niej lub od niej oddalać. Dzięki temu widzowie mogą lepiej zrozumieć, jak dany obiekt wygląda, niż jest to możliwe w przypadku obrazu dwuwymiarowego.

Jeśli nie masz pewności, co mam na myśli, wszystko stanie się jasne, gdy skorzystasz z demo. Jeśli nie masz urządzenia, na którym można uruchomić wersję demonstracyjną, kliknij link do filmu na początku tego artykułu.

Demo i film nie pokazują jednak, jak AR może przekazywać rozmiar rzeczywistego obiektu. Film przedstawia edukacyjną aplikację o nazwie Chacmool, którą stworzyliśmy. Artykuł towarzyszący szczegółowo opisuje tę wersję demonstracyjną. W tej dyskusji ważne jest to, że gdy umieścisz posąg Chacmool w rzeczywistości rozszerzonej, zobaczysz jego rozmiar tak, jakby był on naprawdę w pokoju.

Przykład Chacmool jest edukacyjny, ale równie dobrze może być komercyjny. Wyobraź sobie stronę internetową sklepu z meblami, która umożliwia umieszczenie kanapy w salonie. Aplikacja AR poinformuje Cię, czy sofa pasuje do Twojego pokoju i jak będzie wyglądać w połączeniu z innymi meblami.

Rzut oka, testy trafień i siatówki

Podczas wdrażania rzeczywistości rozszerzonej kluczowym problemem jest umieszczanie obiektów w widoku rzeczywistym. Metoda, która to umożliwia, nazywa się przesyłaniem promieni. Rzucanie promieniem polega na obliczaniu przecięcia promienia wskaźnika z płaszczyzną w świecie rzeczywistym. Takie przecięcie nazywa się trafieniem, a sprawdzenie, czy doszło do trafienia, to test trafienia.

To dobry moment, aby wypróbować nowy przykład kodu w Chrome Canary. Zanim cokolwiek zrobisz, sprawdź, czy masz włączone odpowiednie flagi. Teraz wczytaj przykład i kliknij „Uruchom AR”.

Zwróć uwagę na kilka kwestii. Po pierwsze, licznik prędkości, który możesz kojarzyć z innych próbek obrazu panoramicznego, pokazuje 30 klatek na sekundę zamiast 60. Jest to szybkość, z jaką strona internetowa otrzymuje obrazy z aparatu.

AR działa z prędkością 30 klatek na sekundę

Demonstracja testu skuteczności AR

Drugą rzeczą, którą warto zauważyć, jest obraz słońca. Przesuwa się ona wraz z Tobą i przykleja się do powierzchni, takich jak podłoga czy blat stołu. Jeśli klikniesz ekran, na powierzchni pojawi się słonecznia, a nowa słonecznia będzie się poruszać wraz z urządzeniem.

Obraz poruszający się wraz z urządzeniem, który próbuje zablokować się na różnych powierzchniach, nazywamy siatką. Siatka to tymczasowy obraz, który pomaga umieszczać obiekty w rzeczywistości rozszerzonej. W tym pokazie siatka jest kopią obrazu, który ma zostać umieszczony. Nie musi tak być. W przypadku demonstracji Chacmool jest to prostokąt o przybliżonym kształcie podstawy umieszczanego obiektu.

Do kodu

Demonstracja Chacmool pokazuje, jak AR może wyglądać w produkcyjnej aplikacji. Na szczęście w repozytorium przykładów WebXR jest znacznie prostsze demo. Mój przykładowy kod pochodzi z demo AR Hit Test w tym repozytorium. Pamiętaj, że lubię upraszczać przykłady kodu, aby ułatwić Ci zrozumienie, co się dzieje.

Podstawowe zasady wchodzenia w sesję AR i uruchamiania pętli renderowania są takie same w przypadku AR i VR. Jeśli nie wiesz, jak to zrobić, przeczytaj mój poprzedni artykuł. Wchodząc w tryb AR i uruchamiając sesję AR, działasz prawie tak samo jak w sesji okna magicznego w VR. Podobnie jak w przypadku okna magicznego, typ sesji musi być niepełny, a typ ramki odniesienia musi być 'eye-level'.

Nowy interfejs API

Pokażę teraz, jak korzystać z nowego interfejsu API. Pamiętaj, że w AR celownik próbuje znaleźć powierzchnię przed umieszczeniem obiektu. Można to zrobić za pomocą testu skuteczności. Aby przeprowadzić test trafień, wywołaj XRSession.requestHitTest(). Wygląda on następująco:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Trzy argumenty tej metody reprezentują rzutowanie promieni. Wyświetlenie promienia jest zdefiniowane przez 2 punkty na promieniu (origin i direction), a te punkty są obliczane na podstawie (frameOfReference). Początek i kierunek to wektory 3D. Niezależnie od przesłanej wartości, zostanie ona znormalizowana (przekształcona) do długości 1.

Przesuwanie siatki

Gdy przenosisz urządzenie, siatka musi się poruszać razem z nim, aby znaleźć miejsce, w którym można umieścić obiekt. Oznacza to, że siatka musi być narysowana na nowo w każdej klatce.

Zacznij od wywołania zwrotnego requestAnimationFrame(). Podobnie jak w świecie VR potrzebujesz sesji i pozycji.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Po zakończeniu sesji i ustaleniu pozycji ustal, gdzie pada promień. Przykładowy kod korzysta z biblioteki matematycznej gl-matrix. Nie jest ona jednak wymagana. Ważne jest, aby wiedzieć, co się oblicza i że wyniki są oparte na pozycji urządzenia. Pobierz pozycję urządzenia z: XRPose.poseModalMatrix. Gdy masz już w ręku wiązkę promieniowania, zadzwoń pod numer requestHitTest().

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Chociaż w przykładzie testu uderzenia nie jest to tak oczywiste, nadal musisz przechodzić przez widoki, aby narysować scenę. Rysowanie odbywa się przy użyciu interfejsów API WebGL. Możesz to zrobić, jeśli jesteś naprawdę ambitny. Zalecamy jednak użycie frameworka. Przykłady obrazu w 3D wykorzystują bibliotekę stworzoną specjalnie na potrzeby tych demonstracji o nazwie Cottontail. Od maja biblioteka Three.js obsługuje WebXR.

Umieszczanie obiektu

Gdy użytkownik kliknie ekran, obiekt zostanie umieszczony w rozszerzonej rzeczywistości. W tym celu użyj zdarzenia select. Ważne jest, aby wiedzieć, gdzie go umieścić. Ponieważ ruchoma siatka celowania zapewnia stały zasób testów uderzeń, najprostszym sposobem umieszczenia obiektu jest narysowanie go w miejscu siatki celowania w ostatnim teście uderzenia. Jeśli chcesz, aby nie wyświetlać siatki celowniczej, możesz wywołać funkcję requestHitTest() w wybranym zdarzeniu tak jak w tym przykładzie.

Podsumowanie

Najlepszym sposobem na opanowanie tej techniki jest zapoznanie się z przykładowym kodem lub skorzystanie z ćwiczenia Codelab. Mam nadzieję, że podane przeze mnie informacje pomogą Ci zrozumieć oba te pojęcia.

Nie skończyliśmy jeszcze tworzenia interfejsów API dla immersywnej sieci. W miarę postępów będziemy publikować tu nowe artykuły.