Commencez avec Android VR et Google Cardboard Images panoramiques

Lors de la conférence Google I / O 2014, Google a présenté le visualiseur Cardboard VR, un dispositif peu coûteux en carton qui utilise des objectifs et le téléphone d'un utilisateur pour fournir un accès simple aux applications de réalité virtuelle. Deux ans plus tard, Google annonçait son intention d'étendre cette plate-forme en vendant une visionneuse plus durable dotée d'un contrôleur, baptisée Daydream View, construite selon le même principe d'utilisation d'un téléphone en tant que principal fournisseur de réalité virtuelle. Afin de développer davantage d'applications développées prenant en charge cette plate-forme, Google a publié les SDK en carton pour Android (SDK standard et le NDK), iOS, le moteur de jeu Unity et le moteur de jeu Unreal.. 

Ce tutoriel est le premier d'une courte série sur Android Cardboard et Daydream SDK. Dans cette série, je vais vous montrer comment utiliser certains des outils du SDK et des vues prédéfinies pour ajouter des fonctionnalités simples à vos applications. Il existe un nombre surprenant de façons d’intégrer le SDK en carton dans vos applications pour jeux et multimédia.! 

Je vais me concentrer sur trois exemples qui vous initieront au monde du développement de la réalité virtuelle: une visionneuse photosphere, une visionneuse vidéo 360 et un lecteur d'entrée pour le contrôleur Daydream. Nous allons nous concentrer sur le visualiseur photosphere dans ce didacticiel et revenir sur les deux autres sujets des leçons suivantes..

Téléchargez le SDK en carton et lancez les exemples de projets

Contrairement à la plupart des bibliothèques sous Android, le SDK Cardboard Android n'est pas officiellement disponible dans un référentiel distant pouvant être importé en tant que dépendance via Gradle. Pour pouvoir l'utiliser, vous devrez cloner le SDK Android Cardboard de GitHub sur votre ordinateur via Git.. 

Clone git https://github.com/googlevr/gvr-android-sdk.git

Une fois que vous avez téléchargé le SDK, commençons par exécuter l’un des exemples préemballés. Sur l’écran de lancement d’Android Studio, sélectionnez Projet d'importation. Ensuite, sélectionnez le dossier racine du SDK que vous venez de cloner et appuyez sur D'accord.

À ce stade, vous aurez accès à tous les composants de la bibliothèque et aux exemples disponibles dans Cardboard SDK pour Android. Vous pouvez sélectionner l'un des exemples à exécuter sur votre appareil dans le menu déroulant du module en haut de la fenêtre d'Android Studio. Pour vous assurer que tout fonctionne comme prévu, sélectionnez samples-sdk-simplepanowidget et cliquez sur le vert Courir flèche.

Une fois que l'échantillon a été compilé et installé, vous devriez voir un écran d'information sur le Machu Picchu, avec une vue qui tourne autour d'une photosphère lorsque vous déplacez votre appareil Android..

Maintenant que vous pouvez exécuter les exemples d'applications sur votre appareil, passons à la création de nouvelles applications Android compatibles avec le carton.

Création d'un visualiseur panoramique

Commençons par créer un nouveau projet Android avec une version minimale de 19 du SDK (KitKat). Une fois que vous avez suivi les étapes standard de sélection et de création d’un des modèles d’application, vous devez copier les bibliothèques nécessaires à votre projet à partir du SDK en carton. les bibliothèques répertoire dans le dossier racine de votre projet. Pour cet exemple, copiez les dossiers suivants: commun, commonwidget, et panowidget.

Une fois que vos fichiers de bibliothèque sont à leur place, ouvrez le dossier de votre projet. paramètres.gradle fichier. Vous devrez ajouter ces modules de bibliothèque à votre projet via ce fichier..

include ': app', ": common", "commonwidget", "panowidget"

Ensuite, vous devrez référencer ces bibliothèques dans votre build.gradle déposer sous le les dépendances nœud, vous permettant d’accéder aux composants préconfigurés pour Cardboard. Vous devrez également ajouter la bibliothèque JavaNano, protocole tampon de Google, qui est une bibliothèque de génération de code et d'exécution permettant de gérer les ressources limitées des appareils Android..

dependencies compile fileTree (dir: 'libs', include: ['* .jar']) testCompile 'junit: junit: 4.12' compiler 'com.android.support:appcompat-v7:25.0.0' compiler le projet (': common ') compile projet (': commonwidget ') compile projet (': panowidget ') compile' com.google.protobuf.nano: protobuf-javanano: 3.0.0-alpha-7 '

Une fois vos dépendances configurées, ouvrez le dossier de votre projet. AndroidManifest.xml. En haut du fichier, au sein de la manifeste noeud, vous devrez ajouter le L'INTERNET et READ_EXTERNAL_STORAGE autorisations pour le SDK en carton.

 

Dans le activité noeud pour votre Activité principale classe, ajouter un Catégorie au filtre d'intention pour le PAPIER CARTON téléspectateur.

      

Maintenant que le processus d'installation est terminé, nous pouvons creuser dans la partie amusante: le code. Ce projet lira une image photosphère de app / src / main / assets et placez-le dans un VrPanoramaView. Vous pouvez prendre une image photosphère via l'application de caméra Android standard et la placer dans ce répertoire. Pour cet exemple, je vais utiliser une image nommée openspace.jpg.

Dans le fichier de mise en page de votre Activité, ajouter un VrPanoramaView que vous utiliserez dans votre application.

   

Ensuite, ouvrez le Activité principale classe. Vous devrez d’abord obtenir une référence à votre VrPanoramaView dans onCreate (Bundle), et alors vous pouvez charger votre Bitmap en elle via le loadPhotoSphere () méthode d'assistance que nous définirons dans un instant.

VrPanoramaView privé mVrPanoramaView; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); mVrPanoramaView = (VrPanoramaView) findViewById (R.id.pano_view); loadPhotoSphere (); 

loadPhotoSphere () récupère notre image du dossier des actifs et le charge dans le VrPanoramaView avec un VrPanoramaView.Options objet. Il convient de noter que ces images peuvent être relativement volumineuses. Cette opération est donc normalement effectuée sur un fil d’arrière-plan, bien que cette leçon conserve tout sur le fil de l’interface utilisateur pour plus de simplicité.

private void loadPhotoSphere () // Cela peut prendre un certain temps. Devrait être fait sur un fil d’arrière-plan, mais bon pour l’exemple en cours VrPanoramaView.Options options = new VrPanoramaView.Options (); InputStream inputStream = null; AssetManager assetManager = getAssets (); try inputStream = assetManager.open ("openspace.jpg"); options.inputType = VrPanoramaView.Options.TYPE_MONO; mVrPanoramaView.loadImageFromBitmap (BitmapFactory.decodeStream (inputStream), options); inputStream.close ();  catch (IOException e) Log.e ("Tuts +", "Exception dans loadPhotoSphere:" + e.getMessage ()); 

Notez que pour le VrPanoramaView.Options.inputType valeur, nous utilisons TYPE_MONO. Cela signifie que le VrPanoramaView s'attend à ce qu'une image à un seul canal s'affiche, alors qu'un type d'entrée de TYPE_STEREO_OVER_UNDER on s'attendrait à une image scindée verticalement, l'œil droit et l'œil gauche voyant respectivement les moitiés supérieure et inférieure de cette image.

La dernière chose à faire est de suspendre et de reprendre le rendu du résultat. VrPanoramaView dans onPause () et pour résumer(), ainsi que le déconnecter correctement onDestroy ().

@Override protected void onPause () mVrPanoramaView.pauseRendering (); super.onPause ();  @Override protected void onResume () super.onResume (); mVrPanoramaView.resumeRendering ();  @Override protected void onDestroy () mVrPanoramaView.shutdown (); super.onDestroy (); 

Maintenant que nous avons fini de configurer l'application, allons-y et exécutons-la. Votre application doit afficher votre photosphère à l'écran et vous devez pouvoir déplacer votre téléphone pour afficher différentes parties de l'image..

Si vous appuyez sur l’icône en carton dans le coin inférieur droit de la Vue, il divisera l'image en deux images légèrement décalées pouvant être vues à travers une visionneuse Cardboard ou Daydream.

Bien que cela ne soit pas utilisé dans ce tutoriel, il convient également de noter que le VrPanoramaView peut accepter un VrPanoramaEventListener objet qui avertira votre application lorsqu'une nouvelle image a réussi ou échoué au chargement.

Conclusion

Félicitations! Vous avez créé votre première application en carton, une visionneuse d'images panoramique et photosphère! Bien qu’il s’agisse d’un exemple simplifié, il vous donne les bases de la création de vos propres applications pour utiliser la visionneuse Cardboard. Pour un exemple étonnant d'application qui va encore plus loin avec ce concept, je recommande vivement l'application éducative Expeditions de Google.. 

J'espère que vous avez apprécié plonger vos pieds dans le monde de la réalité virtuelle. Dans le prochain tutoriel, je vais vous montrer comment lire des fichiers vidéo à 360 degrés via le SDK en carton..

En attendant, découvrez certains de nos autres cours et tutoriels Android VR, ici sur Envato Tuts+.

  • Explorez VR avec Google Cardboard

    La réalité virtuelle est une technologie passionnante qui promet de nouvelles perspectives d’expérience immersive. Avec le Google Cardboard SDK pour Android, développez VR…
    Sue Smith
    Android
  • Pokémon GO Style Réalité Augmentée Avec Vuforia

    Avec le succès viral de Pokemon GO, tout le monde parle de réalité augmentée. Dans ce tutoriel, nous verrons comment utiliser Vuforia pour la réalité augmentée…
    Tin Megali
    Développement mobile
  • Créez un jeu de réalité augmentée de style Pokémon GO avec Vuforia

    Dans ce tutoriel, nous allons commencer à créer une application avec la réalité augmentée à l'aide de Vuforia sur Unity 3D. Nous allons apprendre à configurer Vuforia et commencer à développer un AR…
    Tin Megali
    Développement mobile
  • Pokémon GO Style Réalité Augmentée: Marqueurs

    Récemment, Pokémon Go a conquis le monde. L’une des parties les plus intéressantes et attrayantes de ce jeu est l’utilisation de la réalité augmentée, ou RA. AR est…
    Derek Jensen
    Application mobile