Guide de démarrage rapide pour Google Cardboard pour iOS

Ce guide explique comment utiliser le SDK Cardboard pour iOS afin de créer vos propres expériences de réalité virtuelle (RV).

Vous pouvez utiliser le SDK Cardboard pour transformer un smartphone en plate-forme de réalité virtuelle. Un smartphone peut afficher des scènes 3D avec rendu stéréoscopique, suivre les mouvements de la tête et y réagir, et interagir avec des applications en détectant quand l'utilisateur appuie sur le bouton de la visionneuse.

Pour commencer, utilisez HelloCardboard, un jeu de démonstration qui présente les principales fonctionnalités du SDK Cardboard. Dans ce jeu, les utilisateurs parcourent un monde virtuel pour trouver et collecter des objets. Il vous explique comment:

  • Configurer l'environnement de développement
  • Télécharger et créer l'application de démonstration
  • Scannez le code QR d'une visionneuse Cardboard pour enregistrer ses paramètres
  • Suivre les mouvements de la tête de l'utilisateur
  • Réglez la distorsion adaptée à chaque œil pour le rendu d'images stéréoscopiques

Configurer l'environnement de développement

Configuration matérielle requise:

Configuration logicielle requise:

Télécharger et créer l'application de démonstration

Le SDK Cardboard est créé à l'aide de fichiers sources C++ précompilés de Protocol Buffers. Pour découvrir les étapes à suivre pour compiler entièrement les fichiers sources, consultez cette page.

  1. Clonez le SDK Cardboard et l'application de démonstration Hello Cardboard à partir de GitHub en exécutant la commande suivante:

    git clone https://github.com/googlevr/cardboard.git

  2. Installez la dépendance Protocol Buffers dans le projet Xcode en exécutant la commande suivante à la racine du dépôt:

    pod install

  3. Ouvrez l'espace de travail Carton (Cardboard.xcworkspace) dans Xcode.

  4. Modifiez l'ID du bundle de l'application afin de pouvoir signer l'application avec votre équipe.

  5. Accédez à SDK > Build Phases > Link Binary With libraries (SDK > Phases de compilation > Associer le binaire avec les bibliothèques).

    1. Supprimez libPods-sdk.a de la liste en le sélectionnant et en cliquant sur le bouton "-".
    2. Ajoutez libProtobuf-C++.a à la liste en cliquant sur le bouton "+" et en le sélectionnant. Si un message suggérant d'utiliser un XCFramework s'affiche, cliquez sur "Add Anyway" (Ajouter quand même).

  6. Cliquez sur Exécuter.

Scanner le code QR

Pour enregistrer les paramètres de l'appareil, scannez le code QR avec la visionneuse Cardboard:

Essayer la version de démonstration

Dans HelloCardboard, vous allez rechercher et collecter des sphères géodésiques dans l'espace 3D.

Pour trouver et collecter une sphère:

  1. Bougez la tête dans n'importe quelle direction jusqu'à voir une sphère flottante.

  2. Regardez directement la sphère. Elle change alors de couleur.

  3. Appuyez sur le bouton de la visionneuse Cardboard pour "collecter" la sphère.

Configurer l'appareil

Lorsque l'utilisateur appuie sur l'icône en forme de roue dentée pour changer de visionneuse Carton, la méthode didTapSwitchButton est appelée dans HelloCardboardOverlayView.

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

Cette opération appelle CardboardQrCode_scanQrCodeAndSaveDeviceParams, qui ouvre la fenêtre permettant de scanner le code QR du lecteur. Lorsque l'utilisateur scanne le code QR, les paramètres de distorsion de l'appareil sont mis à jour.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Suivi des mouvements de la tête

Créer un moniteur de tête

Le suivi des mouvements de la tête est créé une fois dans la méthode viewDidLoad de HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

Mettre en pause et réactiver le suivi des mouvements de la tête

Les méthodes pauseCardboard et resumeCardboard de la classe HelloCardboardViewController suspendent et réactivent le suivi principal, respectivement. resumeCardboard définit également l'indicateur _updateParams, qui entraîne la mise à jour des paramètres de l'appareil dans l'appel de dessin suivant.

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

Distorsion de l'objectif

Chaque fois que Carton scanne un nouveau code QR, le code suivant lit les paramètres enregistrés et les utilise pour créer l'objet de distorsion de l'objectif, qui applique la distorsion optique appropriée au contenu rendu:

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

Affichage

Voici ce que vous devez faire pour rendre du contenu dans Carton:

  • Créer des textures
  • Obtenir des matrices de vue et de projection pour les yeux gauche et droit
  • Créer le moteur de rendu et définir le maillage de distorsion
  • Le rendu de chaque image

Créer des textures

Le contenu est dessiné sur une texture, qui est divisée en sections pour l'œil gauche et l'œil droit. Ces sections sont initialisées dans _leftEyeTexture et _rightEyeTexture, respectivement. L'application exemple utilise une seule texture pour les deux yeux, mais il est également possible de créer une texture distincte pour chaque œil.

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

Ces textures sont transmises en tant que paramètres à CardboardDistortionRenderer_renderEyeToDisplay.

Obtenir les matrices de vue et de projection pour l'œil gauche et l'œil droit

Tout d'abord, récupérez les matrices des yeux pour les yeux gauche et droit:

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

Ensuite, récupérez les maillages de distorsion pour chacun des yeux et transmettez-les au moteur de rendu de distorsion:

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

Créer le moteur de rendu et définir le maillage de distorsion approprié

Le moteur de rendu ne doit être initialisé qu'une seule fois. Une fois le moteur de rendu créé, définissez le nouveau maillage de distorsion pour les yeux gauche et droit en fonction des valeurs de maillage renvoyées par la fonction CardboardLensDistortion_getDistortionMesh.

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

Afficher le contenu

Récupérez l'orientation actuelle de la tête à partir de CardboardHeadTracker_getPose:

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

Utilisez l'orientation actuelle de la tête avec les matrices de vue et de projection pour composer une matrice de projection de vue, puis utilisez-les pour afficher le contenu du monde pour chacun des yeux:

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

Utilisez CardboardDistortionRenderer_renderEyeToDisplay pour appliquer la correction de distorsion au contenu et afficher ce dernier à l'écran.

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