Rzeczywistość rozszerzona w internecie

Jan Kowalski
Joe Medley

W Chrome 67 ogłosiliśmy wprowadzenie interfejsu WebXR Device API do obsługi zarówno rzeczywistości rozszerzonej (AR), jak i wirtualnej (VR), ale włączone były tylko funkcje rzeczywistości wirtualnej. Rzeczywistość wirtualna zależy wyłącznie od tego, co ma komputer. Natomiast AR umożliwia renderowanie wirtualnych obiektów w świecie rzeczywistym. Aby umożliwić umieszczanie i śledzenie tych obiektów, dodaliśmy do Chrome Canary interfejs WebXR Hit Test API – nową metodę, która ułatwia realistyczne obiekty miejsc kodu internetowego.

Gdzie mogę go znaleźć?

W najbliższej przyszłości ten interfejs API ma pozostać w wersji Canary. Chcielibyśmy wydłużać okres testowania, ponieważ jest to zupełnie nowa propozycja interfejsu API i chcemy mieć pewność, że będzie ona zarówno skuteczna, jak i odpowiednia dla deweloperów.

Oprócz Chrome Canary będą Ci też potrzebne:

Możesz wtedy zapoznać się z wersjami demonstracyjnymi lub wypróbować nasze ćwiczenia z programowania.

To tylko internet

Na tegorocznym zamówieniu reklamowym Google zaprezentowaliśmy rzeczywistość rozszerzoną za pomocą wczesnej wersji Chrome. W ciągu tych trzech dni wielokrotnie publikowałem to zarówno w przypadku deweloperów, jak i innych pracowników. Żałuję, że nie wiem, kiedy umieścić go w moim przydatnym artykule 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”.

Może to być dla Ciebie oczywiste, ponieważ czytasz te informacje w witrynie internetowej. Jeśli tworzysz prezentacje z wykorzystaniem nowego interfejsu API, przygotuj się do tego pytania. Dużo dasz radę.

A skoro już o zamówienie reklamowe chcesz dowiedzieć się więcej o wciągającej sieci, obejrzyj ten film.

Do czego służy?

Rzeczywistość rozszerzona będzie cennym uzupełnieniem wielu istniejących stron internetowych. Może na przykład pomóc w zdobywaniu wiedzy w witrynach edukacyjnych, a potencjalnym kupującym – wizualizowaniu przedmiotów znajdujących się w ich domu podczas zakupów.

Ilustrują to nasze prezentacje. Dzięki nim użytkownicy mogą zobaczyć obiekt w rzeczywistych rozmiarach. Po umieszczeniu obraz pozostaje na wybranej powierzchni i wygląda na taki sam rozmiar, jaki byłby stosowany na danej powierzchni, oraz umożliwia użytkownikowi przesuwanie się wokół niej (a także bliższe lub oddalanie jej od niej). Dzięki temu widzowie mogą lepiej zrozumieć dany obiekt, niż przy użyciu obrazu dwuwymiarowego.

Jeśli nie będziecie pewni, co to wszystko mam na myśli, zrozumiecie to po użyciu wersji demonstracyjnych. Jeśli nie masz urządzenia, na którym można uruchomić wersję demonstracyjną, obejrzyj link do filmu u góry tego artykułu.

Nie ma tu informacji o tym, jak AR może oddać rozmiar rzeczywistego obiektu. Ten film pokazuje edukacyjną demonstrację o nazwie Chacmool. W artykule towarzyszącym znajdziesz szczegółowe informacje na temat tej wersji demonstracyjnej. Ważne jest, by umieścić posąg Chacmoola w rzeczywistości rozszerzonej i pokazać jego rozmiar, jakby był faktycznie w pomieszczeniu.

Chacmool ma charakter edukacyjny, ale równie dobrze można uznać go za komercyjny. Wyobraź sobie sklep meblowy, na którym możesz ustawić kanapę w swoim salonie. Aplikacja AR pokaże Ci, czy kanapa pasuje do Twojego pomieszczenia i jak będzie wyglądać obok innych mebli.

Rzuca Ray, testy trafień i siatki

Głównym problemem do rozwiązania podczas wdrażania rzeczywistości rozszerzonej jest umieszczanie obiektów w widoku z rzeczywistości wirtualnej. Metoda nosi nazwę przesyłania promieni. Rzutowanie promienia polega na obliczaniu przecięcia między promieniem wskazującym a płaszczyzną w świecie rzeczywistym. Takie skrzyżowanie jest nazywane działaniem, a określenie, czy trafienie wystąpiło, jest testem trafień.

To dobry moment, aby wypróbować nowy przykładowy kod w Chrome Canary. Zanim cokolwiek zrobisz, dokładnie sprawdź, czy masz włączone odpowiednie flagi. Teraz wczytaj próbkę i kliknij „Uruchom AR”.

Zwróć uwagę na kilka rzeczy. Po pierwsze miernik prędkości, który być może rozpoznasz w innych interaktywnych próbkach, pokazuje 30 klatek na sekundę, a nie 60. Jest to szybkość, z jaką strona internetowa otrzymuje obrazy z kamery.

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

Wersja demonstracyjna testu działania AR

Kolejną rzeczą, która powinna być widoczna, jest obraz słonecznika. Rusza się i przyciąga do powierzchni takich jak podłoga czy blat stołu. Jeśli dotkniesz ekranu, umieszczony na niej słonecznik, a nowy słonecznik będzie się przemieszczać razem z urządzeniem.

Obraz, który porusza się razem z urządzeniem i próbuje zablokować się na powierzchniach, jest nazywany siatką siatkową. Siatka siatkowa to tymczasowy obraz, który pomaga umieścić obiekt w rzeczywistości rozszerzonej. W tej wersji siatka siatka jest kopią obrazu do umieszczenia. Ale nie musi. Na przykład w wersji demonstracyjnej Chacmool jest to prostokątne pole, które ma w przybliżeniu taki sam kształt jak podstawa umieszczonego obiektu.

aż do kodu

Wersja demonstracyjna Chacmool pokazuje, jak AR może wyglądać w aplikacji produkcyjnej. Na szczęście w repozytorium z przykładami WebXR jest znacznie prostsza wersja demonstracyjna. Mój przykładowy kod pochodzi z prezentacji testu trafień AR w tym repozytorium. Lubię upraszczać przykłady kodu, żeby pomóc Ci zrozumieć, co się dzieje.

Podstawy uruchamiania sesji AR i uruchamiania pętli renderowania są takie same w przypadku rzeczywistości rozszerzonej. Jeśli nie wiesz, przeczytaj mój poprzedni artykuł. Mówiąc dokładniej, udział w sesji AR wygląda prawie tak samo jak włączenie do sesji magicznego okna VR. Podobnie jak w przypadku magicznego okna, typ sesji musi być niepełny, a rama pliku referencyjnego musi być ustawiona na 'eye-level'.

Nowy interfejs API

Teraz pokażę, jak korzystać z nowego interfejsu API. Pamiętaj, że w AR siatka celownicza próbuje znaleźć powierzchnię, zanim zostanie w niej umiejscowiona. Odbywa się to za pomocą testu trafień. Aby przeprowadzić test, wywołaj metodę XRSession.requestHitTest(). Wygląda on następująco:

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

Trzy argumenty tej metody reprezentują rzut promienia. Rzut promienia jest zdefiniowany przez dwa punkty na promienie (origin i direction), gdzie są one obliczane na podstawie wartości (frameOfReference). Punkt początkowy i kierunek są wektorami 3D. Niezależnie od tego, jaką wartość prześlesz, zostaną one znormalizowane (przeliczone) na długość 1.

Poruszanie siatką

Gdy poruszasz urządzeniem, siatka ta musi się przemieszczać razem z nim, próbując znaleźć miejsce, w którym można umieścić obiekt. Oznacza to, że trzeba ponownie zarysować siatkę w każdej klatce.

Zacznij od wywołania zwrotnego requestAnimationFrame(). Tak jak w rzeczywistości wirtualnej, potrzebna jest sesja i pozycja.

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 wykonaniu sesji i przyjęciu pozycji ustal, gdzie pada promień. Przykładowy kod korzysta z biblioteki matematycznej gl-matrix. Ale matryca gl-matrix nie jest wymagana. Ważne jest, żeby wiedzieć, co jest liczone na podstawie pozycji urządzenia. Pobierz położenie urządzenia z pliku XRPose.poseModalMatrix. Z promieniem w ręku 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ż nie jest to tak oczywiste w przykładzie testu działania, wciąż musisz zapętlić widoki, aby narysować scenę. Rysowanie odbywa się za pomocą interfejsów API WebGL. Możesz to zrobić, jeśli masz naprawdę ambitne cele. Zalecamy jednak korzystanie z schematu. W rzeczywistych próbkach w internecie używamy wersji utworzonej specjalnie na potrzeby wersji demonstracyjnych o nazwie Cottontail, a Three.js obsługuje WebXR od maja.

Umieszczanie obiektu

Gdy użytkownik kliknie ekran, w AR zostanie umieszczony obiekt. W tym celu używasz zdarzenia select. Na tym etapie ważne jest, aby wiedzieć, gdzie go umieścić. Ponieważ ruchoma siatka to stałe źródło testów trafień, najprostszym sposobem na umieszczenie obiektu jest narysowanie go w tym miejscu podczas ostatniego testu trafień. Jeśli musisz, załóżmy, że masz uzasadniony powód, by nie pokazywać siatki, w wybranym zdarzeniu możesz wywołać requestHitTest(), jak pokazano w przykładzie.

Podsumowanie

Aby to sobie zaradzić, najlepiej jest zapoznać się z przykładowym kodem lub wypróbować ćwiczenie z programowania. Mam nadzieję, że podane przeze mnie informacje były wystarczające, aby zrozumieć oba te kwestie.

Nie skończyliśmy tworzyć wciągających internetowych interfejsów API. To dopiero początek. Będziemy tu publikować nowe artykuły.