Ta strona została przetłumaczona przez Cloud Translation API.

Krótkie wprowadzenie do Google Cardboard na iOS

Z tego przewodnika dowiesz się, jak za pomocą pakietu SDK Cardboard na iOS utworzyć własny Doświadczenia VR.

Za pomocą pakietu SDK Cardboard możesz zamienić smartfona w platformę VR. Smartfon mogą wyświetlać sceny 3D z renderowaniem stereoskopowym, śledzić ruchy głowy i reagować na nie, wchodzą w interakcję z aplikacjami, wykrywając, kiedy użytkownik naciśnie przycisk na goglach.

Na początek użyj HelloCardboard – gry demonstracyjnej, która przedstawia główne funkcje pakietu SDK Cardboard. W grze użytkownicy rozglądają się dookoła wirtualnego świata, aby znaleźć i zbierać obiektów. Pokazuje on, jak:

Konfigurowanie środowiska programistycznego
Pobierz i utwórz aplikację w wersji demonstracyjnej
Zeskanuj kod QR gogli Cardboard, aby zapisać jego parametry
Śledzenie ruchów głowy użytkownika
Renderuj obrazy stereoskopowe, ustawiając odpowiednie zniekształcenia dla każdego oka

Konfigurowanie środowiska programistycznego

Wymagania sprzętowe:

iPhone z systemem iOS 12.0 lub nowszym
Gogle gogli Cardboard

Wymagania dotyczące oprogramowania:

Xcode 12.5 lub nowsza wersja
CocoaPods w wersji 1.9 lub nowszej

Pobierz i utwórz aplikację w wersji demonstracyjnej

Pakiet SDK Cardboard korzysta z gotowych buforów protokołów. Pliki źródłowe w C++. Instrukcje tworzenia plików źródłowych od zera znajdziesz tutaj.

Sklonuj pakiet SDK Cardboard i aplikację demonstracyjną Hello Cardboard z GitHuba przez uruchamianie tego polecenia:
```
git clone https://github.com/googlevr/cardboard.git
```
Zainstaluj zależność buforów protokołu w projekcie Xcode, uruchamiając to polecenie w katalogu głównym repozytorium:
```
pod install
```
Otwórz obszar roboczy Cardboard (Cardboard.xcworkspace) w Xcode.
Zmień identyfikator pakietu aplikacji, aby móc podpisać aplikację ze swoim zespołem.
Kliknij SDK > Etapy kompilacji > Połącz plik binarny z bibliotekami
1. Usuń z listy libPods-sdk.a, zaznaczając tę pozycję i klikając „-” Przycisk
2. Dodaj libProtobuf-C++.a do listy, klikając przycisk „+” i wybierając go. Jeśli pojawi się komunikat sugerujący użycie XCFramework, kliknij „Add mimo to”.
Kliknij Wykonaj.

Zeskanuj kod QR

Aby zapisać parametry urządzenia, zeskanuj kod QR goglami Cardboard:

Wypróbuj wersję demonstracyjną

W HelloCardboard możesz wyszukiwać i zbierać kule geodezyjne w przestrzeni 3D.

Aby znaleźć i zebrać kulę:

Poruszaj głową w dowolnym kierunku, aż zobaczysz pływającą kulę.
Patrz prosto w sferę. Powoduje to zmianę koloru.
Naciśnij przycisk gogli Cardboard, aby zebrać dane w całej sferze.

Konfigurowanie urządzenia

Gdy użytkownik kliknie ikonę koła zębatego, aby przełączyć gogle Cardboard, didTapSwitchButton jest wywoływana w HelloCardboardOverlayView.

- (void)didTapSwitchButton:(id)sender {
  if ([self.delegate respondsToSelector:@selector(didTapBackButton)]) {
    [self.delegate didChangeViewerProfile];
  }
  self.settingsBackgroundView.hidden = YES;
}

Wywołuje to zdarzenie CardboardQrCode_scanQrCodeAndSaveDeviceParams, co spowoduje otwarcie w oknie, w którym należy zeskanować kod QR widza. Gdy użytkownik zeskanuje kod QR, Parametry zniekształcenia są aktualizowane.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

- (void)didChangeViewerProfile {
  [self pauseCardboard];
  [self switchViewer];
  [self resumeCardboard];
}

Monitorowanie ruchów głowy

Utwórz tracker aktywności

Tracker głowy jest tworzony raz w metodzie viewDidLoad HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

Wstrzymaj i wznów tracker na głowie

Metody pauseCardboard i resumeCardboard w funkcji HelloCardboardViewController zajęcia ma na celu wstrzymanie i wznowienie działania trackera, . resumeCardboard ustawia również flagę _updateParams, która powoduje, że parametry urządzenia, które mają zostać zaktualizowane w następnym wywołaniu rysowania.

- (void)pauseCardboard {
  self.paused = true;
  CardboardHeadTracker_pause(_cardboardHeadTracker);
}

- (void)resumeCardboard {
  // Parameters may have changed.
  _updateParams = YES;

  // Check for device parameters existence in app storage. If they're missing,
  // we must scan a Cardboard QR code and save the obtained parameters.
  uint8_t *buffer;
  int size;
  CardboardQrCode_getSavedDeviceParams(&buffer, &size);
  if (size == 0) {
    [self switchViewer];
  }
  CardboardQrCode_destroy(buffer);

  CardboardHeadTracker_resume(_cardboardHeadTracker);
  self.paused = false;
}

Zniekształcenie obiektywu

Za każdym razem, gdy Cardboard skanuje nowy kod QR, ten kod odczytuje zapisane parametry. i używa ich do utworzenia obiektu zniekształcenia w obiektywie, który stosuje odpowiednie zniekształcenia. do wyrenderowanej treści:

CardboardQrCode_getSavedDeviceParams(&encodedDeviceParams, &size);

// Create CardboardLensDistortion.
CardboardLensDistortion_destroy(_cardboardLensDistortion);
_cardboardLensDistortion =
    CardboardLensDistortion_create(encodedDeviceParams, size, width, height);

// Initialize HelloCardboardRenderer.
_renderer.reset(new cardboard::hello_cardboard::HelloCardboardRenderer(
      _cardboardLensDistortion, _cardboardHeadTracker, width, height));

renderowanie,

Renderowanie treści w aplikacji Cardboard obejmuje:

Tworzenie tekstur
Pobieranie matryc obrazu i rzutu dla lewej i prawej gałki ocznej
Tworzenie mechanizmu renderowania i konfigurowanie siatki zniekształceń
Renderowanie każdej klatki

Tworzenie tekstur

Zawartość jest rysowana na teksturze, która jest podzielona na sekcje dla lewego i prawego oka. Te sekcje są zainicjowane odpowiednio w _leftEyeTexture i _rightEyeTexture. W przykładowej aplikacji oba oczy wykorzystują jedną teksturę, ale można też utworzyć tekstury dla każdego oka.

// Generate texture to render left and right eyes.
glGenTextures(1, &_eyeTexture);
glBindTexture(GL_TEXTURE_2D, _eyeTexture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, _width, _height, 0, GL_RGB, GL_UNSIGNED_BYTE, 0);

_leftEyeTexture.texture = _eyeTexture;
_leftEyeTexture.left_u = 0;
_leftEyeTexture.right_u = 0.5;
_leftEyeTexture.top_v = 1;
_leftEyeTexture.bottom_v = 0;

_rightEyeTexture.texture = _eyeTexture;
_rightEyeTexture.left_u = 0.5;
_rightEyeTexture.right_u = 1;
_rightEyeTexture.top_v = 1;
_rightEyeTexture.bottom_v = 0;
CheckGLError("Create Eye textures");

Te tekstury są przekazywane jako parametry do funkcji CardboardDistortionRenderer_renderEyeToDisplay.

Pobierz macierze obrazu i projekcji dla lewego i prawego oka

Najpierw pobierz macierze dla lewego i prawego oka:

CardboardLensDistortion_getEyeFromHeadMatrix(_lensDistortion, kLeft, _eyeMatrices[kLeft]);
CardboardLensDistortion_getEyeFromHeadMatrix(_lensDistortion, kRight, _eyeMatrices[kRight]);
CardboardLensDistortion_getProjectionMatrix(_lensDistortion, kLeft, kZNear, kZFar,
                                            _projMatrices[kLeft]);
CardboardLensDistortion_getProjectionMatrix(_lensDistortion, kRight, kZNear, kZFar,
                                            _projMatrices[kRight]);

Następnie pobierz siatki zniekształceń dla każdego oka i przekaż je do mechanizmu renderowania zniekształceń:

CardboardLensDistortion_getDistortionMesh(_lensDistortion, kLeft, &leftMesh);
CardboardLensDistortion_getDistortionMesh(_lensDistortion, kRight, &rightMesh);

Tworzenie mechanizmu renderowania i ustawianie prawidłowej siatki zniekształceń

Mechanizm renderowania wystarczy zainicjować tylko raz. Po utworzeniu mechanizmu renderowania ustaw nowy dla lewego i prawego oka zgodnie z wartościami siatki zwróconymi przez CardboardLensDistortion_getDistortionMesh.

_distortionRenderer = CardboardOpenGlEs2DistortionRenderer_create();
CardboardDistortionRenderer_setMesh(_distortionRenderer, &leftMesh, kLeft);
CardboardDistortionRenderer_setMesh(_distortionRenderer, &rightMesh, kRight);

Renderowanie treści

Pobierz bieżącą orientację głowicy z CardboardHeadTracker_getPose:

CardboardHeadTracker_getPose(_headTracker, targetTime, position, orientation);
_headView =
    GLKMatrix4Multiply(GLKMatrix4MakeTranslation(position[0], position[1], position[2]),
                       GLKMatrix4MakeWithQuaternion(GLKQuaternionMakeWithArray(orientation)));

Aby utworzyć widok, użyj bieżącej orientacji głowy z matrycami widoku i projekcji. i używać ich do wyświetlania treści świata dla każdego oczu:

// Draw left eye.
glViewport(0, 0, _width / 2.0, _height);
glScissor(0, 0, _width / 2.0, _height);
DrawWorld(_leftEyeViewPose, GLKMatrix4MakeWithArray(_projMatrices[kLeft]));

// Draw right eye.
glViewport(_width / 2.0, 0, _width / 2.0, _height);
glScissor(_width / 2.0, 0, _width / 2.0, _height);
DrawWorld(_rightEyeViewPose, GLKMatrix4MakeWithArray(_projMatrices[kRight]));

Aby zastosować zniekształcenie, użyj funkcji CardboardDistortionRenderer_renderEyeToDisplay poprawienie treści i wyświetlenie jej na ekranie.

CardboardDistortionRenderer_renderEyeToDisplay(_distortionRenderer, renderTarget, /*x=*/0,
                                               /*y=*/0, _width, _height, &_leftEyeTexture,
                                               &_rightEyeTexture);