Aan de slag met Android VR en Google Cardboard panoramische afbeeldingen

Tijdens de Google I / O-conferentie in 2014 introduceerde Google de Cardboard VR-viewer, een goedkoop apparaat gemaakt van karton, dat lenzen en de telefoon van een gebruiker gebruikt om eenvoudige toegang tot virtual reality-apps te bieden. Twee jaar later kondigde Google plannen aan om uit te breiden op dit platform door een duurzamere kijker te verkopen met een controller, bekend als de Daydream View, die is gebouwd volgens hetzelfde concept van het gebruik van een telefoon als de belangrijkste VR-provider. Om meer apps te ontwikkelen die dit platform ondersteunen, heeft Google Cardboard SDK's voor Android (standaard SDK en de NDK), iOS, de Unity-game-engine en de Unreal-game-engine uitgegeven. 

Deze tutorial is de eerste in een korte serie over de Android Cardboard en Daydream SDK. In deze serie laat ik u zien hoe u enkele van de SDK-hulpmiddelen en vooraf gemaakte weergaven gebruikt om eenvoudige functies aan uw apps toe te voegen. Er zijn een verrassend aantal manieren waarop u de Cardboard SDK kunt integreren in uw apps voor games en multimedia! 

Ik zal me concentreren op drie voorbeelden die u op weg helpen in de wereld van VR-ontwikkeling: een fotosfeer-viewer, een 360-videoviewer en een invoerlezer voor de Daydream-controller. We zullen ons concentreren op de fotosfeer-viewer in deze zelfstudie en de andere twee onderwerpen opnieuw bekijken in de volgende lessen.

Download de SDK voor kaarten en voer de voorbeeldprojecten uit

In tegenstelling tot de meeste bibliotheken in Android, is de SDK voor Android Cardboard niet officieel beschikbaar in een externe repository die als afhankelijkheid via Gradle kan worden geïmporteerd. Om het te gebruiken, moet je de Android Cardboard SDK vanuit GitHub naar je computer klonen via Git. 

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

Zodra u de SDK heeft gedownload, laten we beginnen met het uitvoeren van een van de voorverpakte monsters. Selecteer op het startscherm van Android Studio Project importeren. Selecteer vervolgens de hoofdmap voor de SDK die u zojuist hebt gekloond en druk op OK.

Op dit punt hebt u toegang tot alle bibliotheekonderdelen en voorbeelden die beschikbaar zijn in de Cardboard SDK voor Android. U kunt een van de voorbeelden selecteren om op uw apparaat uit te voeren in het vervolgkeuzemenu van de module boven in het venster van Android Studio. Selecteer om te controleren of alles werkt zoals verwacht monsters-sdk-simplepanowidget en klik op de groene Rennen pijl.

Nadat het voorbeeld is gecompileerd en geïnstalleerd, ziet u een informatiescherm over Machu Picchu, compleet met een weergave die rond een fotosfeer draait wanneer u uw Android-apparaat verplaatst.

Nu u de voorbeeldtoepassingen op uw apparaat kunt uitvoeren, gaan we een duik nemen in het maken van nieuwe Android-apps met Cardboard.

Een panoramische viewer maken

Laten we beginnen met het maken van een nieuw Android-project met een minimale SDK-versie van 19 (KitKat). Nadat u de standaardstappen voor het selecteren en maken van een van de app-sjablonen hebt doorlopen, moet u de benodigde bibliotheken voor uw project kopiëren vanuit de SDK voor kaarten bibliotheken map in de hoofdmap van uw project. Kopieer voor dit voorbeeld de volgende mappen: gemeenschappelijk, commonwidget, en panowidget.

Zodra uw bibliotheekbestanden op hun juiste plaats staan, opent u uw project settings.gradle het dossier. U moet deze bibliotheekmodules toevoegen aan uw project via dit bestand.

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

Vervolgens moet u deze bibliotheken raadplegen in uw build.gradle bestand onder de afhankelijkheden knooppunt, waardoor u toegang hebt tot de vooraf gemaakte componenten voor Karton. U moet ook de protocolbuffers van Java, de JavaNano-bibliotheek, een bibliotheek voor het genereren van codes en runtime toevoegen om de beperkte middelen van Android-apparaten te beheren..

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

Nadat je afhankelijkheden zijn ingesteld, open je je project AndroidManifest.xml. Aan de bovenkant van het bestand, binnen de manifesteren knooppunt, moet u de INTERNET en READ_EXTERNAL_STORAGE rechten voor de Cardboard-SDK.

 

Binnen de activiteit knooppunt voor jouw Hoofdactiviteit klasse, voeg een toe categorie naar de intent-filter voor de KARTON viewer.

      

Nu het set-upproces is voltooid, kunnen we ons verdiepen in het leuke gedeelte: de code. In dit project wordt een fotosfeerafbeelding gelezen app / src / main / assets en plaats het in een VrPanoramaView. U kunt een fotosfeerfoto maken via de standaard Android-cameratoepassing en deze in deze map plaatsen. Voor dit voorbeeld zal ik een afbeelding met de naam gebruiken openspace.jpg.

In het lay-outbestand voor uw Activiteit, Voeg een ... toe VrPanoramaView die je in je app zult gebruiken.

   

Open vervolgens de Hoofdactiviteit klasse. U moet eerst een verwijzing naar uw verkrijgen VrPanoramaView in onCreate (bundel), en dan kunt u uw laden Bitmap erin via de loadPhotoSphere () hulpmethode die we in een moment zullen definiëren.

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

loadPhotoSphere () haalt onze afbeelding terug uit de map met items en laadt deze in de VrPanoramaView met een VrPanoramaView.Options voorwerp. Het is vermeldenswaard dat deze afbeeldingen relatief groot kunnen zijn, dus deze bewerking zou normaal gesproken voorkomen op een achtergrondthread, hoewel deze les alles op de UI-thread zal houden voor de eenvoud.

private void loadPhotoSphere () // Dit kan even duren. Moet doen op een achtergrondthread, maar prima voor het huidige voorbeeld VrPanoramaView.Options options = new VrPanoramaView.Options (); InputStream inputStream = null; AssetManager assetManager = getAssets (); probeer inputStream = assetManager.open ("openspace.jpg"); options.inputType = VrPanoramaView.Options.TYPE_MONO; mVrPanoramaView.loadImageFromBitmap (BitmapFactory.decodeStream (inputStream), opties); inputStream.close ();  catch (IOException e) Log.e ("Tuts +", "Uitzondering in loadPhotoSphere:" + e.getMessage ()); 

Merk op dat voor de VrPanoramaView.Options.inputType waarde die we gebruiken TYPE_MONO. Dit betekent dat de VrPanoramaView verwacht dat een enkel kanaalbeeld wordt weergegeven, terwijl a inputType van TYPE_STEREO_OVER_UNDER zou een afbeelding verwachten die verticaal wordt opgesplitst, waarbij het rechter- en linkeroog respectievelijk de bovenste en onderste helft van dat beeld zien.

Het laatste dat u moet doen, is het maken van het pauze pauzeren en hervatten VrPanoramaView in onPause () en onResume (), en koppel het op de juiste manier los onDestroy ().

@Override beschermde leegte onPause () mVrPanoramaView.pauseRendering (); super.onPause ();  @Override beschermde leegte onResume () super.onResume (); mVrPanoramaView.resumeRendering ();  @Override beschermde leegte onDestroy () mVrPanoramaView.shutdown (); super.onDestroy (); 

Nu we klaar zijn met het instellen van de app, laten we doorgaan en het uitvoeren. Uw app zou uw fotosfeer op het scherm moeten weergeven en u zou uw telefoon moeten kunnen verplaatsen om verschillende delen van de afbeelding te bekijken.

Als u op het pictogram van het karton in de rechter benedenhoek van de Uitzicht, het zal de afbeelding opsplitsen in twee licht gecompenseerde beelden die zichtbaar zijn via een Cardboard- of Daydream-viewer.

Hoewel het niet wordt gebruikt in deze zelfstudie, is het ook de moeite waard op te merken dat de VrPanoramaView kan een accepteren VrPanoramaEventListener object dat uw app op de hoogte zal stellen wanneer een nieuwe afbeelding is gelukt of niet kan worden geladen.

Conclusie

Gefeliciteerd, je hebt je eerste kartonnen app gemaakt, een afbeeldingsviewer voor panoramische en fotosfeerfoto's! Hoewel dit een vereenvoudigd voorbeeld is, biedt het u de basis voor het maken van uw eigen apps om de Cardboard-viewer te gebruiken. Voor een geweldig voorbeeld van een app die dit concept een stap verder brengt, raad ik ten zeerste aan de educatieve app van Google voor Expedities te gebruiken. 

Ik hoop dat je het leuk vond om je tenen in de wereld van VR te dompelen. In de volgende zelfstudie laat ik je zien hoe je 360-graden videobestanden kunt afspelen via de SDK voor kaarten.

Bekijk in de tussentijd een aantal van onze andere Android VR-cursussen en -handleidingen hier op Envato Tuts+.

  • Verken VR met Google Cardboard

    VR (virtual reality) is een opwindende technologie die nieuwe perspectieven belooft van meeslepende ervaring. Met de Google Cardboard SDK voor Android, de ontwikkeling van VR ...
    Sue Smith
    Android
  • Pokémon GO Style Augmented Reality met Vuforia

    Met het virale succes van Pokemon GO heeft iedereen het gehad over augmented reality. In deze tutorial zullen we kijken naar het gebruik van Vuforia voor augmented reality ...
    Tin Megali
    Mobiele ontwikkeling
  • Creëer een Pokémon GO Style Augmented Reality-spel met Vuforia

    In deze tutorial zullen we beginnen met het bouwen van een app met Augmented Reality met Vuforia op Unity 3D. We zullen leren hoe Vuforia te installeren en een AR te ontwikkelen ...
    Tin Megali
    Mobiele ontwikkeling
  • Pokémon GO Style Augmented Reality: Markers

    Onlangs heeft Pokémon Go de wereld stormenderhand veroverd. Een van de meest interessante en boeiende delen van dit spel is het gebruik van augmented reality of AR. AR is ...
    Derek Jensen
    Mobiele app