Laten we een augmented reality-app maken voor MEMES! - Ajarnpa

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

In deze Instructable gaan we een augmented reality-app maken voor Android en IOS in Unity3D die de Google API gebruikt om naar memes te zoeken. We gaan de grondvlakdetectie van Vuforia gebruiken in Unity, dus deze mobiele app werkt voor de meeste Android- en IOS-gebruikers. Door Vuforia te gebruiken, kunnen we de afbeeldingen ook op één locatie verankeren, zodat we door dit veld met afbeeldingen kunnen lopen en de objecten blijven waar ze zijn.

We gaan ook de nieuwe IBM Watson API testen, zodat we deze zoekopdrachten met onze stem kunnen uitvoeren en gebruik kunnen maken van hun natuurlijke taalverwerking.

Dus het slechte nieuws is dat geen van deze API's helemaal gratis is, maar het goede nieuws is dat ze allebei gratis te proberen zijn. De Google Custom Search API geeft je 100 gratis zoekopdrachten per dag, en de IBM Watson API geeft je de eerste maand gratis.

Kortom, deze app haalt onze spraak uit de microfoon in Unity, stuurt die naar de IBM Watson-servers, die de tekst naar ons terugsturen. We nemen die tekst dan en sturen deze naar de Google-servers die ons een lijst met afbeeldings-URL's in JSON-vorm zullen retourneren.

Stap 1: Stel de IBM Watson SDK in Unity in

Om de Watson API aan de gang te krijgen, moet u eerst uw inloggegevens van hun site halen. Ga naar Console.bluemix.net, maak een account aan en log in. Ga naar je IBM-account en navigeer naar cloud Foundry Orgs en maak een nieuwe ruimte aan. Ga nu naar uw dashboard en klik om door services te bladeren, voeg de spraak-naar-tekstservice toe, want dat is wat we gaan gebruiken. Kies uw regio, organisatie en ruimte en maak het project aan. Nu ziet u uw API-inloggegevens onderaan.

Download Unity als u deze nog niet hebt en importeer de IBM Watson SDK uit de asset store in Unity. We kunnen dit testen door een leeg game-object te maken en het IBM Watson te noemen en het voorbeeld-streamingscript toe te voegen. Dit script is al ingesteld om audio van unity op te nemen en naar de Watson-servers te sturen voor verwerking.

Voor nu gaan we dit voorbeeldscript gebruiken omdat we nog veel meer te doen hebben, maar misschien kunnen we de volgende keer dieper ingaan op de Watson-dingen omdat ik graag iets met de Vision API zou willen doen.

Stap 2: Test IBM Watson tekst-naar-spraak

Dit script is op zoek naar een UI-tekstobject, dus laten we een nieuwe UI-knop maken, dit geeft ons de tekst die we nodig hebben, we zullen de knop later gebruiken. Stel het canvas in op schaal met de schermgrootte en pas de grootte van de knop een beetje aan. Veranker het linksonder. Sleep die tekst naar de lege sleuf. Open het script en laten we onze IBM Watson-referenties toevoegen, zoeken waar de "resultsField" -tekst wordt gebruikt en deze instellen op alleen "alt.transcript" omdat we deze tekst gaan gebruiken om op Google te zoeken. Voordat we dit kunnen testen, moeten we de tekstgrootte zelf dynamisch maken, zodat alles wat we zeggen in het vak past. Ga terug naar de tekst en stel deze zo in dat deze het beste past. Typ wat tekst in om het uit te testen. Als we nu op afspelen klikken, worden onze woorden getranscribeerd naar tekst van de Watson Text to Speech API.

Stap 3: Stel de Google Custom Search API in

Het volgende dat we moeten doen, is de Google Custom Search-api instellen voor gebruik in Unity. Op een hoog niveau zullen we een HTTP-verzoek doen van Unity naar de Google-servers, die ons een antwoord in JSON-indeling zullen retourneren.

Ga dus naar de Google Custom Search JSON API-configuratiepagina, klik om een API-sleutel te krijgen en maak een nieuwe app. Houd dit open. Nu kunnen we naar het configuratiescherm gaan. Voer alles in zodat de sites kunnen zoeken, noem het wat dan ook en klik op maken.

Klik op het configuratiescherm en laten we enkele wijzigingen aanbrengen: we willen voornamelijk zoeken in memes en zoeken naar afbeeldingen inschakelen. Schakel onder sites om te zoeken dat naar het hele web. Klik op bijwerken om alles op te slaan.

Zoek nu de Google API Explorer en ga naar de aangepaste zoek-API. Hierdoor kunnen we het JSON-antwoord dat we van Google krijgen opmaken. Dus voer voor nu alles in voor de zoekopdracht, plak in je zoekmachine-ID, vul 1 in voor het filter zodat we geen duplicaten krijgen, vul 10 in onder num want dat is het maximale aantal resultaten dat we tegelijk kunnen retourneren, plaats in afbeelding voor zoektype, want dat is alles wat we willen terugkeren. Zet 1 in om te beginnen, en tot slot onder velden "items/link" omdat we voor elk geretourneerd item alleen de afbeeldingslink willen. Als u nu op uitvoeren klikt, ziet u dat we 10 mooie afbeeldingslinks terugkrijgen.

Nu moeten we deze foto's in Unity krijgen.

Stap 4: Stel Vuforia in Unity in

Laten we Vuforia aan het werk krijgen, zodat we hun grondvlakdetectie kunnen gebruiken. Sla je huidige scène op en ga naar de build-instellingen. Schakel uw platform over naar Android of IOS en als u op IOS iets invoert voor de bundel-ID, voeg dan een beschrijving van het camera- en microfoongebruik toe. Controleer onder XR-instellingen Vuforia augmented reality ondersteund.

Verwijder nu in de scène de hoofdcamera en voeg een Vuforia ARCamera toe. Ga naar het configuratiegedeelte en verander de volgmodus in positioneel. Schakel alle databases uit, want we hebben ze niet nodig.

Voeg nu een vliegtuigzoeker toe en we moeten het standaardgedrag overschrijven omdat we de grondvlakfase slechts één keer willen implementeren, dus laten we het script Deploy Stage once op de Vuforia-website vinden. Breng dat script naar Unity en plaats het op de vliegtuigzoeker, waarbij het oude script dat daar was verwijderd wordt. Wijzig de modus in interactief en zorg ervoor dat de functie "OnInteractiveHitTest" wordt aangeroepen op die Unity-gebeurtenis. Terwijl we hier zijn, laten we de knop die we eerder hebben gemaakt op actief zetten zodra we het grondvlak hebben gevonden, de standaardstatus op inactief zetten. Plaats nu een grondvliegtuig in de scène en verander het in midden in de lucht omdat we willen dat alle foto's in de lucht zweven. Sleep dit grondvlak in de lege gleuf op de vliegtuigzoeker.

Stap 5: Maak een prefab afbeelding

Voordat we al deze stukjes samenvoegen, moeten we een geprefabriceerd spelobject maken dat we kunnen instantiëren telkens wanneer een afbeelding wordt geladen. Maak dus een leeg spelobject onder het grondvlakpodium en noem het "picPrefab". Maak een quad als een kind daarvan en schaal deze met 2, draai de y 180 graden zodat de voorwaartse vector van de ouders, die wordt weergegeven als een blauwe pijl, de voorkant van de quad is.

Maak een nieuw script met de naam "PictureBehavior" en voeg het toe aan onze picPrefab.

Sleep deze foto nu prefab naar je activamap en dit is waar we elke foto op gaan zetten.

Ons "PictureBehavior"-script zou er als volgt uit moeten zien:

met behulp van System. Collections;

met behulp van System. Collections. Generic; met behulp van UnityEngine; openbare klasse PictureBehavior: MonoBehaviour { public Renderer quadRenderer; privé Vector3 gewenstPositie; void Start () { // kijk naar camera transform. LookAt (Camera.main.transform); Vector3 gewensteAngle = nieuwe Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (gewenste hoek); //kracht in de lucht wantedPosition = transform.localPosition; transform.localPosition += nieuwe Vector3 (0, 20, 0); } void Update(){ transform.localPosition = Vector3. Lerp (transform.localPosition, wantedPosition, Time.deltaTime * 4f); } public void LoadImage(string url){ StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL(string url){ WWW www = nieuwe WWW(url); rendement rendement www; quadRenderer.material.mainTexture = www.texture; } }

Stap 6: Maak een script voor de Google API

Laten we nu de verwijzing naar de quad-renderer uit onze "picPrefab" slepen.

We hoeven nog maar twee scripts te maken, dus laten we een C#-script maken met de naam GoogleService.cs en PictureFactroy.cs.

Plak in "GoogleService" deze code die ons verzoek doet:

met behulp van System. Collections;

met behulp van System. Collections. Generic; met behulp van UnityEngine; met behulp van UnityEngin. UI; openbare klasse GoogleService: MonoBehaviour { public PictureFactory pictureFactory; openbare TekstknopTekst; private const string API_KEY = "PUT API KEY HIER!!!!!"; public void GetPictures(){ StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine(){ buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; query = WWW. EscapeURL (query + "memes"); //verwijder oude afbeeldingen pictureFactory. DeleteOldPictures(); //sla camera forward vector op zodat we kunnen bewegen terwijl objecten worden geplaatst Vector3 cameraForward = Camera.main.transform.forward; // we kunnen slechts 10 resultaten tegelijk krijgen, dus we moeten doorlopen en onze voortgang opslaan door het startnummer te wijzigen na elke 10 int rowNum = 1; for (int i = 1; i <= 60; i += 10) { string url = "https://www.googleapis.com/customsearch/v1?q=" + query + "&cx=011535004225295624669%3Afeb1gwic6bs&filter=1&num =10&searchType=image&start=" + i + "&fields=items%2Flink&key=" + API_KEY; WWW www = nieuw WWW (url); rendement rendement www; pictureFactory. CreateImages (ParseResponse(www.text), rowNum, cameraForward); rijNum++; } opbrengst rendement nieuwe WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Lijst ParseResponse (string tekst) { Lijst urlList = nieuwe lijst (); string urls = tekst. Split ('\n'); foreach (stringregel in url's) { if (line. Contains("link")){ string url = line. Substring (12, line. Length-13); //filteren op png of jpg lijkt niet te werken vanuit Google, dus doen we het hier: if (url. Contains (".jpg") || url. Contains (".png")) { urlList. Add (url); } } } retourneert urlLijst; } }

Stap 7: Creëer onze fotofabriek

Inside PictureFactory.cs plaats deze code om al onze afbeeldingen te maken en laadt hun texturen van een URL.

met behulp van System. Collections;

met behulp van System. Collections. Generic; met behulp van UnityEngine; openbare klasse PictureFactory: MonoBehaviour { public GameObject picPrefab; openbare GoogleService googleService; public void DeleteOldPictures(){ if (transform.childCount > 0) { foreach (Transform child in this.transform) { Destroy (child.gameObject); } } } public void CreateImages(ListurlList, int resultNum, Vector3 camForward){ int picNum = 1; Vector3 midden = Camera.hoofd.transform.positie; foreach (string url in urlList) { Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiëren (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum++; } } Vector3 GetPosition(int picNum, int rowNum, Vector3 camForward){ Vector3 pos = Vector3.zero; if (picNum <= 5) { pos = camForward + nieuwe Vector3 (picNum * -3, 0, rowNum * 3.5f); } else { pos = camForward + nieuwe Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } retour pos; } }

Stap 8: We zijn klaar

Maak een leeg gameobject met de naam GoogleService en plaats het script "GoogleSerivice" erop.

Sleep het "PictureFactory"-script naar het grondvlak, want al onze afbeeldingen zullen worden gemaakt als kinderen van dit spelobject.

Sleep de juiste verwijzingen in het infovenster, doe hetzelfde voor de Google-service.

Het laatste wat we zouden moeten doen is ervoor zorgen dat onze "GetPictures"-functie wordt aangeroepen. Dus laten we naar de "onClick"-gebeurtenis van onze knop gaan en het vanaf daar bellen.

Nu kunnen we op afspelen klikken en dit testen. Zorg ervoor dat u het grondvlak en de knop inschakelt. Zeg een woord en klik op de knop om de zoekopdracht op die tekst uit te voeren!

Om deze app nu op je telefoon te krijgen, sluit je hem aan en ga je naar Bestand-> Instellingen bouwen. Druk op bouwen en rennen!

Laat het me weten in de comments als je vragen hebt!