Diese Seite wurde von der Cloud Translation API übersetzt.

Kurzanleitung für Google Cardboard für iOS

In diesem Leitfaden erfährst du, wie du mit dem Cardboard SDK for iOS deine eigenen Virtual-Reality-Erlebnisse erstellen kannst.

Mit dem Cardboard SDK kannst du ein Smartphone in eine VR-Plattform verwandeln. Ein Smartphone kann 3D-Szenen mit stereoskopischem Rendering anzeigen, Kopfbewegungen verfolgen und darauf reagieren und mit Apps interagieren, indem es erkennt, wann der Nutzer auf die Schaltfläche des Betrachters drückt.

Verwende zunächst HelloCardboard, ein Demospiel, in dem die wichtigsten Funktionen des Cardboard SDK demonstriert werden. Im Spiel sehen sich Nutzer in einer virtuellen Welt um, um Objekte zu finden und zu sammeln. Sie erfahren, wie Sie:

Entwicklungsumgebung einrichten
Demo-App herunterladen und erstellen
QR-Code eines Cardboard scannen, um dessen Parameter zu speichern
Die Kopfbewegungen der Nutzenden erfassen
Stereoskopische Bilder rendern, indem die korrekte Verzerrung für jedes Auge festgelegt wird

Entwicklungsumgebung einrichten

Hardwareanforderungen:

iPhone mit iOS 12.0 oder höher
Cardboard-Brille

Softwareanforderungen:

Xcode 12.5 oder höher
CocoaPods 1.9 oder höher

Demo-App herunterladen und erstellen

Das Cardboard SDK wird mithilfe von vorkompilierten Protocol Buffers C++-Quelldateien erstellt. Hier finden Sie eine Anleitung dazu, wie Sie die Quelldateien neu erstellen.

Klonen Sie das Cardboard SDK und die Hello Cardboard-Demo-App aus GitHub mit dem folgenden Befehl:
```
git clone https://github.com/googlevr/cardboard.git
```
Installieren Sie die Protokollzwischenspeicher-Abhängigkeit im Xcode-Projekt, indem Sie den folgenden Befehl im Repository-Stammverzeichnis ausführen:
```
pod install
```
Öffne den Cardboard-Arbeitsbereich (Cardboard.xcworkspace) in Xcode.
Ändern Sie die Bundle-ID der App, damit Sie die App mit Ihrem Team signieren können.
Gehen Sie zu SDK > Build-Phasen > Binär mit Bibliotheken verknüpfen.
1. Entfernen Sie libPods-sdk.a aus der Liste, indem Sie den Eintrag auswählen und auf die Schaltfläche „-“ klicken.
2. Sie können libProtobuf-C++.a zur Liste hinzufügen, indem Sie auf die Schaltfläche „+“ klicken und den Eintrag auswählen. Falls eine Meldung mit der Empfehlung angezeigt wird, ein XCFramework zu verwenden, klicken Sie auf „Trotzdem hinzufügen“.
Klicken Sie auf Ausführen.

Scanne den QR-Code.

Scanne zum Speichern der Geräteparameter den QR-Code auf der Cardboard-Brille:

Zur Demo

In HelloCardboard suchen und sammeln Sie geodätische Kugeln im 3D-Raum.

So finden und erfassen Sie eine Kugel:

Bewegen Sie Ihren Kopf in eine beliebige Richtung, bis Sie eine schwebende Kugel sehen.
Blicken Sie direkt in die Kugel. Dadurch ändert es die Farbe.
Drücken Sie die Taste des Cardboard, um die Kugel einzusammeln.

Gerät konfigurieren

Wenn der Nutzer auf das Zahnradsymbol tippt, um das Cardboard zu wechseln, wird die Methode didTapSwitchButton in HelloCardboardOverlayView aufgerufen.

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

Dadurch wird CardboardQrCode_scanQrCodeAndSaveDeviceParams aufgerufen und das Fenster zum Scannen des QR-Codes des Betrachters wird geöffnet. Wenn der Nutzer den QR-Code scannt, werden die Verzerrungsparameter des Geräts aktualisiert.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Erfassung von Kopfbewegungen

Head Tracker erstellen

Der Head-Tracker wird einmal in der Methode viewDidLoad von HelloCardboardViewController erstellt:

_cardboardHeadTracker = CardboardHeadTracker_create();

Head Tracker pausieren und fortsetzen

Die Methoden pauseCardboard und resumeCardboard in der Klasse HelloCardboardViewController pausieren bzw. setzen den Head-Tracker fort. Außerdem legt resumeCardboard das Flag _updateParams fest, wodurch die Geräteparameter beim nächsten Zeichenaufruf aktualisiert werden.

- (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;
}

Objektivverzeichnung

Jedes Mal, wenn Cardboard einen neuen QR-Code scannt, liest der folgende Code die gespeicherten Parameter aus und verwendet sie, um das Objekt zur Objektivverzeichnung zu erstellen. Dadurch wird die richtige Objektivverzeichnung auf den gerenderten Inhalt angewendet:

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));

Rendering

Das Rendern von Inhalten in Cardboard umfasst die folgenden Schritte:

Texturen erstellen
Ansichts- und Projektionsmatrizen für das linke und rechte Auge abrufen
Renderer erstellen und Verzerrungsnetz festlegen
Frames rendern

Texturen erstellen

Der Inhalt wird auf eine Textur gezeichnet, die für das linke und rechte Auge in Abschnitte unterteilt ist. Diese Abschnitte werden in _leftEyeTexture bzw. _rightEyeTexture initialisiert. Die Beispielanwendung verwendet eine einzelne Textur für beide Augen, aber es ist auch möglich, eine separate Textur für jedes Auge zu erstellen.

// 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");

Diese Texturen werden als Parameter an CardboardDistortionRenderer_renderEyeToDisplay übergeben.

Ansichts- und Projektionsmatrizen für linkes und rechtes Auge abrufen

Rufen Sie zuerst die Augenmatrizen für das linke und das rechte Auge ab:

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]);

Rufen Sie als Nächstes die Verzerrungsmaschen für jedes der Augen ab und übergeben Sie sie an den Verzerrungs-Renderer:

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

Renderer erstellen und das richtige Verzerrungsnetz festlegen

Der Renderer muss nur einmal initialisiert werden. Legen Sie nach dem Erstellen des Renderers das neue Verzerrungsnetz für das linke und rechte Auge gemäß den Mesh-Werten fest, die von der Funktion CardboardLensDistortion_getDistortionMesh zurückgegeben werden.

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

Inhalt rendern

Rufen Sie die aktuelle Kopfausrichtung von CardboardHeadTracker_getPose ab:

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

Verwenden Sie die aktuelle Kopfausrichtung mit den Ansichts- und Projektionsmatrizen, um eine Ansichtsprojektionsmatrix zu erstellen, die Sie dann verwenden, um den Weltinhalt für jedes der Augen zu rendern:

// 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]));

Verwenden Sie CardboardDistortionRenderer_renderEyeToDisplay, um die Verzerrungskorrektur auf den Inhalt anzuwenden und ihn auf dem Bildschirm zu rendern.

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