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:
- iPhone fonctionnant sous iOS 12.0 ou version ultérieure
- Visionneuse cardboard
Configuration logicielle requise:
- Xcode 12.5 ou version ultérieure
- CocoaPods 1.9 ou version ultérieure
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.
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
Installez la dépendance Protocol Buffers dans le projet Xcode en exécutant la commande suivante à la racine du dépôt:
pod install
Ouvrez l'espace de travail Carton (
Cardboard.xcworkspace
) dans Xcode.Modifiez l'ID du bundle de l'application afin de pouvoir signer l'application avec votre équipe.
Accédez à SDK > Build Phases > Link Binary With libraries (SDK > Phases de compilation > Associer le binaire avec les bibliothèques).
- Supprimez
libPods-sdk.a
de la liste en le sélectionnant et en cliquant sur le bouton "-". - 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).
- Supprimez
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:
Bougez la tête dans n'importe quelle direction jusqu'à voir une sphère flottante.
Regardez directement la sphère. Elle change alors de couleur.
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);