Introductie van Vuforia voor eenheid voor het creëren van applicaties met augmented reality

Wat je gaat creëren

Deze tutorial gaat behandelen hoe een eenvoudige augmented reality-applicatie met Vuforia SDK op Unity kan worden geïmplementeerd. Gedurende de tutorial zul je leren hoe je een scène kunt genereren die compatibel is met Vuforia en hoe je verschillende scripts kunt implementeren, inclusief ray-tracing, om te kunnen communiceren met het object in de scène.

Een ontwikkelaarsaccount maken

Voordat u begint, moet u zich registreren voor een Vuforia-ontwikkelaarsaccount. Ga naar de Vuforia Developer Portal om een ​​account aan te maken.

Zodra u uw account hebt aangemaakt, is het tijd om het Unity-pakket van Vuforia te downloaden. Ga naar de downloadpagina en download het specifieke pakket voor Unity.

Een beelddoel maken

Een beelddoel is vereist om de camera van een apparaat een referentie te laten herkennen en te volgen. De oriëntatie en werkelijke grootte van de doelafbeelding hebben direct invloed op dezelfde kenmerken van de over elkaar heen geplaatste afbeeldingen.

Elke afbeelding kan worden toegewezen als een doel. De kenmerken van de doelafbeelding bepalen echter op effectieve wijze hoe goed het doelwit wordt gevolgd. In deze zelfstudie gaan we een online tool gebruiken om doelgerichte doelafbeeldingen te genereren. Genereer een afbeeldingstarget met behulp van de Augmented Reality Marker Generator online tool en sla de afbeelding op uw computer op.

De Unity-scène voorbereiden

Vuforia-pakket

Maak een nieuw 3D-eenheidsproject en dubbelklik vervolgens op het Unity-pakket dat u voor Vuforia hebt gedownload. Dit zal het volgende venster vragen. Klik Allemaal om alle inhoud van het pakket te selecteren en druk vervolgens op Importeren. Hiermee importeert u alle benodigde hulpmiddelen voor de AR-toepassing.

Beeld doel

De volgende stap is het importeren van de beelddoelbestanden. Om de beelddoelbestanden te verkrijgen, moeten we de Vuforia-ontwikkelaarspagina gebruiken.

Ga naar de Vuforia Developer Portal en meld u aan bij uw account. Onder de Ontwikkelen tab, je ziet het Target Manager. Eerst moet je een database toevoegen. Gebruik de aangewezen knop en voeg een database toe. 

Geef uw database een naam zoals u wilt en selecteer Apparaat als het type.

Nu zijn we klaar om een ​​doel toe te voegen in deze database. Klik op de Target toevoegen knop, en het volgende venster verschijnt. Het type moet worden geselecteerd als Enkele afbeelding in ons geval. Selecteer het beelddoel dat we hebben gegenereerd met behulp van de online tool. Als je problemen ondervindt bij het uploaden van het bestand, probeer het dan te converteren naar JPG-bestandsindeling en opnieuw te uploaden.

Breedte is een cruciale parameter. Dit moet overeenkomen met de werkelijke grootte van de doelafbeelding die u uiteindelijk op papier afdrukt. Ik heb de breedte ingesteld op 40. Er is geen eenheid omdat deze overeenkomt met de eenheid van uw scène.

Zodra u het doel in uw database hebt toegevoegd, beoordeelt Vuforia uw doel. Met de doelbeeldgenerator die we hebben gebruikt, zijn de functies hoog en daarom krijgt het 5 sterren, wat betekent dat het voor Vuforia gemakkelijk is om dit doel te herkennen en te volgen.

Nu moet je deze database downloaden. Om dit te doen, druk op de Database downloaden knop en selecteer Unity Editor als het ontwikkelingsplatform.

Nadat u de database hebt gedownload, dubbelklikt u erop en importeert u alle inhoud naar de Unity-scène waaraan we werken.

ARCamera Object

We beginnen met het toevoegen van het ARCamera-object van Vuforia aan onze scène. Om dit te doen, volgt u gewoon de Activa> Vuforia> Prefabs map en voeg het ARCamera-object toe door naar de scène te slepen en neer te zetten.

Selecteer het ARCamera-object en onder de Inspecteur tab, je ziet het App licentie sleutel sectie. Deze licentiesleutel wordt verkregen via de ontwikkelaarportal van Vuforia.

Log in op uw Vuforia-account op de ontwikkelaarportal en onder de Ontwikkelen tab, vindt u de Licentie Manager sectie. Klik op de Licentiecode toevoegen knop. Selecteer op de volgende pagina Ontwikkeling als het projecttype en definieer een toepassingsnaam voor uw project. Deze naam is niet cruciaal en u kunt deze later wijzigen als u dat wilt.

Raken volgende, en bevestig vervolgens uw licentiesleutel op de volgende pagina.

Selecteer de licentie die u zojuist hebt gemaakt. Het zal de licentiesleutel onthullen die we moeten kopiëren en plakken naar het ARCamera-object. Kopieer deze licentie en plak deze in de App licentie sleutel sectie onder de ARCamera-instellingen.

Onder Databaselaadgedrag, controleer de Laad ARdemo Database keuze. Zodra je het aanvinkt, wordt een andere optie genoemd Activeren zal er direct onder verschijnen. Selecteer deze optie ook.

De ARdemo deel van de Laad ARdemo Database optie hangt af van hoe u uw database heeft genoemd.

Afbeelding Doelobject

Het tweede object dat we in onze scène nodig hebben, is het Beeld doel voorwerp.

Onder de Activa> Vuforia> Prefabs map, vindt u ook het "ImageTarget" -object. Voeg dit object toe aan uw scène en selecteer het om de opties te onthullen.

Onder de Afbeelding doelgedrag sectie, zult u de Database keuze. Selecteer uw database in het vervolgkeuzemenu en selecteer het specifieke afbeeldingsdoel dat u aan het afbeeldingsdoel wilt toewijzen uit het vervolgkeuzemenu van het "Afbeelding doel". Als u meerdere afbeeldingsdoelen voor één database hebt, worden deze allemaal hier weergegeven.

De parameters voor breedte en hoogte worden automatisch ingesteld, afhankelijk van de waarde die u hebt toegewezen bij het maken van de afbeeldingsdoelen in de ontwikkelaarportal van Vuforia.

Augmenting Graphics

De volgende stap is om de afbeeldingen te maken en deze aan het beelddoel te koppelen. U kunt een GameObject maken of u kunt uw eigen 3D-model importeren in Unity en het gebruiken. In deze tutorial gaan we voor de eenvoud een eenvoudig 3D-kubusobject gebruiken.

Voeg een kubusobject toe aan de scène zoals weergegeven in de volgende afbeelding.

Stel de x, y en z parameters in voor de Schaal optie onder Transformeren naar 40, zodat het overeenkomt met de grootte van het beelddoel dat we hebben gegenereerd.

Als u een andere breedtewaarde instelt voor uw afbeeldingsdoel bij het genereren in de ontwikkelaarportal, gebruikt u de waarde die u hebt geselecteerd om de volledige grootte van het afbeeldingsdoel te evenaren.

De laatste stap om onze AR-app te laten werken, is door het kubusobject in te stellen als het onderliggende element van het afbeeldingsdoel. Sleep hiervoor het kubusobject en zet het neer op het imageTarget-object onder het hiërarchisch menu.

De uiteindelijke toestand van de scène zou als volgt moeten zijn:

Raak nu de Spelen knop om uw toepassing uit te voeren. Het gebruikt je webcam. Haal de doelafbeelding afgedrukt of open deze vanaf je telefoon zodat Vuforia deze via je webcam kan detecteren. Ik deed de laatste en opende het doelbeeld van mijn telefoon. 

Hier is de feitelijke schermafbeelding van het uitzicht op de webcam. U kunt zien dat het kubusobject de hele doelafbeelding omvat, omdat we de waarden voor de schaalfactor hebben vergeleken voor zowel het 3D-object als de doelafbeelding.

Interaction Scripts

Tot nu toe hebben we een eenvoudige AR-toepassing ontwikkeld die onze doelafbeelding herkent en bijhoudt en de aangewezen 3D-afbeeldingen weergeeft. Voor een complete AR-toepassing moeten we echter ook in staat zijn om met de objecten te interageren, waardoor de realiteit wordt vergroot.

Hiervoor moeten we kunnen detecteren waar we hebben geklikt of aangeraakt in het geval van een mobiel apparaat. We doen dit door een ray-tracer te implementeren.

Maak eerst een map met de naam "scripts" onder Middelen om alles georganiseerd te houden. We gaan onze scriptbestanden opslaan in deze map. Maak vervolgens een C # Script-bestand in deze map. Noem het "rayTracer". Benoemen is belangrijk vanwege het feit dat de volgende code moet overeenkomen met deze specifieke bestandsnaam. Als u liever een andere naam gebruikt voor uw scriptbestand, moet u de verstrekte code dienovereenkomstig wijzigen.

Ray-Tracer Script

Kopieer en plak de volgende code in het C # Script-bestand dat u zojuist hebt gemaakt en genaamd "rayTracer".

gebruikmakend van UnityEngine; met behulp van System.Collections; met behulp van System.Collections.Generic; public class rayTracer: MonoBehaviour private lijst touchList = nieuwe lijst(); privé GameObject [] touchPrev; privé Raycast Hit hit; void Update () #if UNITY_EDITOR if (Input.GetMouseButton (0) || Input.GetMouseButtonDown (0) || Input.GetMouseButtonUp (0)) touchPrev = new GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); Ray-ray = Camera.main.ScreenPointToRay (Input.mousePosition); //Debug.DrawRay(ray.origin, ray.direction * 10000, Color.green, 10, false); if (Physics.Raycast (ray, out hit)) GameObject recipient = hit.transform.gameObject; touchList.Add (ontvanger); if (Input.GetMouseButtonDown (0)) recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);  if (Input.GetMouseButtonUp (0)) recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);  if (Input.GetMouseButton (0)) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);  foreach (GameObject g in touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  #endif if (Input.touchCount> 0) touchPrev = nieuw GameObject [touchList.Count]; touchList.CopyTo (touchPrev); touchList.Clear (); foreach (Touch touch in Input.touches) Ray ray = Camera.main.ScreenPointToRay (touch.position); if (Physics.Raycast (ray, out hit)) GameObject recipient = hit.transform.gameObject; touchList.Add (ontvanger); if (touch.phase == TouchPhase.Began) recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Ended) recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Stationary || touch.phase == TouchPhase.Moved) recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);  if (touch.phase == TouchPhase.Canceled) recipient.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  foreach (GameObject g in touchPrev) if (! touchList.Contains (g)) g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);  

Dit script detecteert zowel muisklikken als u werkt aan de Unity-editor en invoer aanraakt als u uw toepassing hebt geïmplementeerd op een mobiel apparaat met een aanraakscherm.

Nadat u uw rayTracer-script hebt gemaakt, moet u het activeren door het toe te wijzen aan een van de objecten in de scène. Ik selecteerde het ARCamera-object en voegde de rayTracer-scripts toe als een component met behulp van de Component toevoegen knop onder de Inspecteur tab.

Object materiaal

Nu gaan we een object toewijzen aan ons Kubus-object en de kleur van het materiaal wijzigen in interactie met de kubus.

Onder Middelen, maak een materiaal en noem het zoals je wilt.

Wijs dit materiaal nu toe door het kubusobject te slepen en neer te zetten.

Interaction Script

Maak een nieuw C # -script onder de map scripts en noem deze "interactie".

Kopieer de volgende C # -code naar uw "interactie" -scriptbestand en voeg dit scriptbestand toe aan het kubusobject als een component, net zoals we deden met het "rayTracer" -scriptbestand. Deze keer zou het echter een onderdeel van het kubusobject moeten zijn - dit is belangrijk om alleen met het kubusobject te kunnen werken.

gebruikmakend van UnityEngine; met behulp van System.Collections; public class interaction: MonoBehaviour public static Color defaultColor; openbare statische kleur geselecteerdKleur; openbare statische Materiaalmat; void Start () mat = GetComponent ().materiaal; mat.SetFloat ("_ Mode", 2); mat.SetInt ("_ SrcBlend", (int) UnityEngine.Rendering.BlendMode.SrcAlpha); mat.SetInt ("_ DstBlend", (int) UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha); mat.SetInt ("_ ZWrite", 0); mat.DisableKeyword ( "_ ALPHATEST_ON"); mat.EnableKeyword ( "_ ALPHABLEND_ON"); mat.DisableKeyword ( "_ ALPHAPREMULTIPLY_ON"); mat.renderQueue = 3000; defaultColor = nieuwe Color32 (255, 255, 255, 255); selectedColor = nieuwe Color32 (255, 0, 0, 255); mat.color = defaultColor;  void touchBegan () mat.color = selectedColor;  void touchEnded () mat.color = defaultColor;  void touchStay () mat.color = selectedColor;  void touchExit () mat.color = defaultColor; 

In dit "interactie" -script verwijzen we naar het materiaal van het kubusobject als "mat".

We hebben twee verschillende materiële objecten met de naam gemaakt defaultColor en selectedColor. defaultColor is geselecteerd om wit te zijn, zoals de RGBA-parameters aangeven, welke zijn (255, 255, 255, 255).

We initialiseren de materiaalkleur van het kubusobject als defaultColor op de volgende regel:

mat.color = defaultColor;

We hebben vier verschillende functies voor vier verschillende staten:

  • touchBegan () wordt aangeroepen op het moment dat u het object aanraakt.
  • touchEnded () wordt gebeld als je je vinger loslaat.
  • touchStay () wordt meteen genoemd nadat je het object hebt aangeraakt - deze functie volgt touchBegan (). Als u in deze functies andere kleuren toewijst aan uw materiaal, ziet u dus waarschijnlijk niet de kleur die is toegewezen in de touchStay () functie, aangezien dit het allereerste moment is waarop de aanraking wordt herkend.
  • touchExit () wordt aangeroepen wanneer u uw vinger uit het oppervlak van het kubusobject sleept, in plaats van uw vinger los te laten, die de touchEnded () functie zoals hierboven uitgelegd.

Als we in onze code het kubusobject aanraken, wijzen we het selectedColor bezwaar tegen mat.color, welke de kleur is van het materiaal van ons kubusobject.

Door de. Toe te wijzen selectedColor binnen de touchStay () functie, zorgen we ervoor dat de kleur van het kubusobject gelijk is aan selectedColor zolang we onze vinger op het kubusobject houden. Als we onze vinger loslaten of het uit het kubusobject slepen, wijzen we het toe  defaultColor naar de kleurparameter van het materiaal door de touchEnded () of touchExit () functies in overeenstemming met de actie die we hebben ondernomen.

Voer nu het project uit en klik op het kubusobject zodra de doelafbeelding wordt herkend en het kubusobject is verschenen. Het moet weer rood en wit worden wanneer je je klik loslaat of het uit het oppervlak van het kubusobject beweegt.

Je kunt met verschillende kleuren experimenteren om de vier verschillende acties grondig te doorgronden.

Conclusie

In deze zelfstudie hebben we samen met de ontwikkelaarportal een introductie van de Vuforia SDK voor Unity doorgenomen en hebben we gezien hoe we een doelafbeelding en een toepasselijke licentiesleutel kunnen genereren. 

Daarbovenop hebben we aangepaste scriptbestanden gegenereerd om te kunnen communiceren met de augmented graphics. Deze zelfstudie is slechts een inleiding waarmee u Vuforia met Unity kunt gaan gebruiken en uw eigen AR-toepassingen kunt maken.