360 VR-app in 10 minuten met Unity - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Hoe bouwen we deze app?

In tegenstelling tot gewone video met een rechthoekig frame, heeft 360-video de vorm van een bol. We moeten dus eerst een bolvormig scherm maken om onze 360-video op te projecteren. De speler (of kijker) bevindt zich in deze bol en kan de video in elke richting bekijken. De onderstaande stappen zouden u het gevoel moeten geven dat u uw eigen wijzigingen kunt aanbrengen, door uit te leggen hoe het allemaal onder de motorkap werkt. Voor stapsgewijze instructies

Stap 1: Wat je nodig hebt

Een Android-telefoon met een gyroscoop om hoofdbewegingen te detecteren, draaiend op KitKat of een nieuwer besturingssysteem.

Een kartonnen koptelefoon. Als je er geen hebt, kun je er veel vinden op Amazon voor minder dan 10 dollar.

Unity3D, een platformonafhankelijke game-engine, die u op uw computer moet installeren, versie 5.6 of nieuwer. We zullen deze software gebruiken om ons hele project te bouwen.

De GoogleVR SDK voor Unity, die u vooraf kunt downloaden.

Een 360-video. Maak er een met een 360-camera of je kunt 360-video's vinden op YouTube, Facebook of elke 360-videowebsite

Stap 2: Bouw een bol

Laten we eerst een nieuw Unity-project openen als je helemaal opnieuw begint (of een nieuwe scène als je de 360-videospeler in een bestaand project wilt integreren). Beschouw een scène als een niveau van een videogame en een project als een vol spel.

Voeg daarna een bol-object toe aan de scène, geplaatst in het midden (positie = 0, 0, 0), met een straal van 50 (schaal = 50, 50, 50). De positie van de camera moet ook worden ingesteld op 0, 0, 0. De camera is de ogen van de speler/kijker, dus we willen hem in het midden van de bol. Als je het ergens anders zou plaatsen, zou de video er vervormd uitzien. Zodra de camera in de bol is geplaatst, is deze niet meer zichtbaar in de scène. Geen zorgen, daar is een verklaring voor! Inderdaad, de meeste game-engines geven standaard niet de binnenkant van 3D-objecten weer. Dit komt omdat we ze zelden hoeven te zien, het zou een verspilling van middelen zijn om ze weer te geven. We zullen dat hierna oplossen.

Stap 3: Draai de normalen van de bol om

In ons geval moeten we onze Bol van binnenuit zien. Dat is het hele punt van de app, dus we gaan hem binnenstebuiten keren.

In Unity zijn bollen niet echt bollen (wat? Er is altijd tegen ons gelogen!), Het zijn polygonen gemaakt met duizenden kleine, kleine facetten. De buitenzijden van de facetten zijn zichtbaar, maar niet de binnenzijden. Om die reden gaan we een programma maken om deze kleine facetten als pannenkoeken om te draaien. In de 3D-geometrie noemen we deze transformatie "omgekeerde normalen" of "flipping normals". We gebruiken een programma met de naam Shader, dat we toepassen op het materiaal van de bol. Materialen bepalen het uiterlijk van objecten in Unity. Shaders zijn kleine scripts die de kleur van elke gerenderde pixel berekenen op basis van belichting en informatie uit hun materialen. Creëer daarom een nieuw materiaal voor de bol en vervolgens een nieuwe arcering die op dit materiaal wordt toegepast. We moeten aangepaste code voor de Shader schrijven … maar wees niet bang, je kunt de onderstaande code kopiëren en plakken:

Klik op deze link voor codelink:

Deze kleine Shader gaat elke pixel van de bol binnenstebuiten keren. Nu verschijnt onze Bol als een grote witte bal, van binnenuit bekeken, in onze Scène. De volgende stap is om van deze witte bol een videospeler te maken.

Stap 4: Projecteer uw 360-video in de bol

Hier moet je een 360 mp4-video bij de hand hebben. Importeer het in het project en sleep het vervolgens naar de Sphere. En dat is wanneer de magie gebeurt: een 'Video Player'-component verschijnt en boem, de video is klaar om af te spelen. Je kunt spelen met de instellingen zoals loops en audio. Het ondersteunt ook streaming!

Stap 5: Google Cardboard instellen?

In deze stap zorgen we ervoor dat de ervaring echt meeslepend aanvoelt. Daarom willen we het in een VR-headset bekijken, hier een Google Cardboard.

We gaan een "stereoscopische" weergave maken (het scherm wordt in tweeën gesplitst, met enkele fisheye-effecten aan beide zijden - één kant voor elk oog), met behulp van de GoogleVR SDK. Het fisheye-effect op elk oog, gecombineerd met de vervorming van de plastic lenzen van de Cardboard, geeft je de illusie van diepte en onderdompeling.

Om de GoogleVR SDK aan ons project toe te voegen, download en importeer je de plug-in, waarna we een aantal Android-instellingen aanpassen:

• Ga naar het bovenste balkmenu > Bestand > Build-instellingen. Voeg uw open scène toe als deze nog niet is toegevoegd en selecteer vervolgens Android in de lijst met ondersteunde platforms.
• Klik op Wissel van platform. De eerste keer dat u de overstap maakt, duurt het even.
• Klik op Spelersinstellingen. Onderdelen verschijnen in het deelvenster Instructeur.

In de Instructeur Spelersinstellingen, onder het gedeelte 'Overige instellingen':

• Controleer Virtual Reality Ondersteund. Selecteer onder Virtual Reality SDK's het pictogram + en selecteer vervolgens Karton om het aan de lijst toe te voegen.
• Voer een pakketnaam in het veld Bundel-ID in (bijvoorbeeld com.uwdomein.demo360). Het moet uniek zijn en wordt gebruikt om onze app te onderscheiden van anderen in de Google Play Store.
• Stel het vervolgkeuzemenu Minimum API-niveau in op "Android 4.4 'Kit Kat' (API-niveau 19)".

Neem daarna het 'GvrViewerMain'-element uit de GoogleVR\Prefabs-map in de Projectbrowser en sleep het naar de scène. Geef het in het infovenster dezelfde positie als het midden van de bol - (0, 0, 0).

De prefab GvrViewerMain regelt alle instellingen van de VR-modus, zoals het aanpassen van het scherm aan de Cardboard-lenzen. Het communiceert ook met de gyroscoop van je telefoon om je hoofdbewegingen te volgen. Als je je hoofd draait, draaien de camera en wat je ziet ook in de 360-videospeler. Nu kun je alle kanten op kijken als de video aan staat en het scherm in tweeën is gesplitst, zodat beide lenzen van de Cardboard erin passen.

Stap 6: Voer de app uit op Android?

Als laatste stap draaien we de app op een Android-telefoon en delen we deze met vrienden! Er zijn twee manieren om dat te doen: Ga terug naar Bestand > Instellingen maken. U kunt een Android-telefoon met een USB-kabel op uw computer aansluiten en op Build & Run klikken. Hiermee wordt de app rechtstreeks op uw telefoon geïnstalleerd. De andere optie is om op Alleen bouwen te klikken. Dit installeert het niet op een telefoon, maar genereert in plaats daarvan een APK-bestand. Je kunt de APK per e-mail delen met iedereen die het meesterwerk dat je zojuist hebt gebouwd, wil proberen. Ze moeten dubbeltikken op de APK-bijlage om deze op hun telefoons te installeren. Tijdens het bouwproces wordt u mogelijk gevraagd om de root-map van Android SDK te selecteren. Als dat het geval is, downloadt u de Android SDK en selecteert u vervolgens de maplocatie. Start de app, stop je telefoon in een Cardboard-headset, je bent klaar om te gaan! Je kunt de video vervangen door alles in 360-formaat en thuis VR 360-onderdompeling ervaren.

Verder gaan

Gefeliciteerd, je hebt een 360-video-app gemaakt en je bent nog maar één stap verwijderd van het maken van een VR-video-app! Hoewel de termen vaak hetzelfde worden gebruikt, definiëren 360 en VR twee verschillende ervaringen: 360-video wordt vanuit alle hoeken opgenomen, met een speciale camera of een combinatie van meerdere. De gebruiker kan in elke gewenste richting kijken, maar er is geen interactiviteit in de ervaring. VR verwijst meestal naar een door de computer gegenereerde omgeving waarin de gebruiker wordt ondergedompeld. Het is een interactieve ervaring: de speler kan zich verplaatsen en objecten besturen, naast het kijken in alle richtingen.

Stap 7:

Je nieuwe app kan als startpunt dienen om een rijkere VR-ervaring op te bouwen. Unity heeft tal van functies die u kunt gebruiken, zoals het toevoegen van 3D-elementen of coole deeltjeseffecten ✨ om uw video te overlappen en te verbeteren, of het toevoegen van enkele interactieve elementen.

Stap 8: Geen stappenscript (optioneel)

Je kunt ook een volledige 3D-omgeving in de 360-videospeler plaatsen en deze als skybox gebruiken. De gebruiker kan navigeren in het landschap met behulp van dit handige wandelscript.