Lad os lave en Augmented Reality -app til MEMES !: 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

I denne Instructable skal vi lave en augmented reality -app til Android og IOS i Unity3D, der bruger Google API til at søge efter memes. Vi vil bruge Vuforia 's ground plane detection i Unity, så denne mobilapp fungerer for de fleste Android- og IOS -brugere. Brug af Vuforia giver os også mulighed for at have billederne forankret ét sted, så vi kan gå gennem dette billedfelt, og objekterne bliver, hvor de er.

Vi vil også teste den nye IBM Watson API, så vi kan foretage disse søgninger med vores stemme og udnytte deres naturlige sprogbehandling.

Så den dårlige nyhed er, at ingen af disse API'er er helt gratis, men den gode nyhed er, at de begge er gratis at prøve. Googles tilpassede søgning -API giver dig 100 gratis søgninger om dagen, og IBM Watson API giver dig den første måned gratis.

Kort sagt, denne app får vores tale fra mikrofonen i Unity, sender den til IBM Watson -serverne, som sender teksten tilbage til os. Vi tager derefter den tekst og sender den til Google -serverne, der returnerer en liste over billedwebadresser i JSON -form.

Trin 1: Konfigurer IBM Watson SDK i Unity

For at få Watson API i gang skal du først få dine legitimationsoplysninger fra deres websted. Gå til Console.bluemix.net, opret og konto, og log på. Gå til din IBM -konto, og naviger til skystøberier og opret et nyt rum. Gå nu til dit dashboard og klik for at gennemse tjenester, tilføj talen til teksttjenesten, fordi det er det, vi skal bruge. Vælg din region, organisation og plads, og opret projektet. Nu vil du se dine API -legitimationsoplysninger nederst.

Download Unity, hvis du ikke allerede har det, og importer IBM Watson SDK fra aktivbutikken i Unity. Vi kan teste dette ved at oprette et tomt spilobjekt og kalde det IBM Watson og tilføje eksemplet på streaming script. Dette script er allerede indstillet til at optage lyd fra enhed og sende det til Watson -serverne til behandling.

For nu skal vi bare bruge dette eksempel script, fordi vi har meget mere at gøre, men måske næste gang kan vi gå dybere ind i Watson -tingene, fordi jeg gerne vil gøre noget med Vision API.

Trin 2: Test IBM Watson -tekst til tale

Dette script leder efter et UI -tekstobjekt, så lad os oprette en ny UI -knap, dette vil give os den tekst, vi har brug for, vi vil bruge knappen senere. Indstil lærredet til skalering med skærmstørrelse, og tilpas knappen lidt. Forankre det nederst til venstre. Træk teksten ind i den tomme plads. Åbn scriptet, og lad os tilføje vores IBM Watson -legitimationsoplysninger, find hvor "resultsField" -teksten bruges, og indstil den til "alt.transcript", fordi vi vil bruge denne tekst til at søge på google. Nu, før vi kan teste dette, er vi nødt til at lave selve tekststørrelsen dynamisk, så hvad vi siger, vil passe ind i boksen. Gå tilbage til teksten, og indstil den til at passe bedst. Indtast noget tekst for at teste det. Når vi nu klikker på play, bliver vores ord transskriberet til tekst fra Watson Text to Speech API.

Trin 3: Konfigurer Google Custom Search API

Det næste stykke, vi skal gøre, er at få Google brugerdefineret søgning -api konfigureret til brug i Unity. På et højt niveau sender vi en HTTP -anmodning fra Unity til Googles servere, som sender os et svar i JSON -format.

Så gå til opsætningssiden for Google Custom Search JSON API, klik for at få en API -nøgle og oprette en ny app. Hold dette åbent. Nu kan vi gå til kontrolpanelet. Indsæt alt for at webstederne skal søge, navngiv det uanset, og klik på Opret.

Klik på kontrolpanelet og lad os foretage nogle ændringer: vi vil hovedsageligt søge memes og aktivere billedsøgning. Under websteder til søgning skift det til hele internettet. Klik på opdater for at gemme alt.

Find nu google api explorer og gå til brugerdefineret søgning API. Dette giver os mulighed for at formatere det JSON -svar, vi får fra Google. Så indtast hvad som helst til forespørgslen for nu, indsæt dit søgemaskine -id, sæt 1 i for filteret, så vi ikke får dubletter, sæt 10 under num, fordi det er det maksimale antal resultater, vi kan returnere ad gangen, indsæt billede for søgetype, fordi det er alt, hvad vi vil returnere. Sæt 1 til start, og til sidst under felter indsættes "varer/link", fordi vi for hver returneret vare kun vil have billedlinket. Når du nu klikker på eksekver, vil du se, at vi får 10 flotte billedlink tilbage.

Nu skal vi få disse billeder til Unity.

Trin 4: Konfigurer Vuforia i enhed

Lad os få Vuforia til at fungere, så vi kan udnytte deres detektering af jordplan. Gem din aktuelle scene, og gå til byggeindstillingerne. Skift din platform til Android eller IOS, og hvis din on IOS sætter noget ind i bundt -id'en, tilføj et kamera og en beskrivelse af brug af mikrofon. Under XR -indstillinger skal du kontrollere, at Vuforia augmented reality understøttes.

Nu i scenen skal du slette hovedkameraet og tilføje et Vuforia ARCamera. Gå til konfigurationsafsnittet, og skift sporingstilstand til positionel. Fjern markeringen af alle databaser, fordi vi ikke har brug for dem.

Tilføj nu en flyfinder, og vi er nødt til at tilsidesætte dens standardadfærd, fordi vi kun ønsker at implementere grundplanstadiet én gang, så vi kan finde scriptet Deploy Stage once på Vuforia -webstedet. Bring det script ind i Unity, og læg det på flyfinderen, og fjern det gamle script, der var der. Skift tilstand til interaktiv, og sørg for, at funktionen "OnInteractiveHitTest" bliver kaldt til denne Unity -begivenhed. Mens vi er her, lad os sætte den knap, vi tidligere lavede til aktiv, når vi har fundet jordplanet, og sæt dens standardtilstand til inaktiv. Sæt nu et jordfly ind i scenen, og skift det til midtluft, fordi vi vil have alle billederne flydende i luften. Træk dette jordplan ind i den tomme plads på flyfinderen.

Trin 5: Opret en præfabrikeret billede

Inden vi begynder at sammensætte alle disse brikker, skal vi oprette et præfabrikeret spilobjekt, som vi kan instantiere hver gang et billede indlæses. Så opret et tomt spilobjekt under jordplanstadiet og kald det "picPrefab". Opret en quad som barn af det, og skaler den med 2, drej dens y med 180 grader, så forældrenes fremadgående vektor, der vises som en blå pil, er fronten på quad.

Opret et nyt script kaldet "PictureBehavior" og tilføj det til vores picPrefab.

Træk nu dette billede præfabrikeret ind i din aktivmappe, og det er det, vi skal lægge hvert billede på.

Vores "PictureBehavior" script skal se sådan ud:

ved hjælp af System. Collections;

ved hjælp af System. Collections. Generic; ved hjælp af UnityEngine; offentlig klasse PictureBehavior: MonoBehaviour {public Renderer quadRenderer; privat Vector3 ønsketPosition; void Start () {// se på kameratransform. LookAt (Camera.main.transform); Vector3 wantedAngle = ny Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (ønsketAngle); // kraft til luft ønsketPosition = transform.localPosition; transform.localPosition += ny Vector3 (0, 20, 0); } ugyldig opdatering () {transform.localPosition = Vector3. Lerp (transform.localPosition, ønsketPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = ny WWW (url); udbytte afkast www; quadRenderer.material.mainTexture = www.texture; }}

Trin 6: Opret et script til Google API

Lad os nu trække referencen til quad -rendereren fra vores "picPrefab".

Vi har kun to scripts tilbage at lave, så lad os oprette et C# script kaldet GoogleService.cs og PictureFactroy.cs.

Indsæt denne kode i "GoogleService", der sender vores anmodning:

ved hjælp af System. Collections;

ved hjælp af System. Collections. Generic; ved hjælp af UnityEngine; ved hjælp af UnityEngine. UI; public class GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "SÆT API NØGLE HER !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); streng forespørgsel = buttonText.text; forespørgsel = WWW. EscapeURL (forespørgsel + "memes"); // slet gamle billeder pictureFactory. DeleteOldPictures (); // gem kamera fremad vektor, så vi kan bevæge os rundt, mens objekter placeres Vector3 cameraForward = Camera.main.transform.forward; // vi kan kun få 10 resultater ad gangen, så vi skal gå igennem og gemme vores fremskridt ved at ændre startnummeret efter hver 10 int rowNum = 1; for (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + forespørgsel + "& cx = 011535004225295624669%3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = " + i +" & fields = items%2Flink & key = " + API_KEY; WWW www = ny WWW (url); udbytte afkast www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } return return new WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Liste ParseResponse (strengtekst) {Liste urlList = ny Liste (); string urls = text. Split ('\ n'); foreach (strenglinje i webadresser) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // filtrering efter png eller jpg ser ikke ud til at fungere fra Google, så vi gør det her: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} returner urlList; }}

Trin 7: Opret vores billedfabrik

Inde i PictureFactory.cs sætter denne kode til at oprette alle vores billeder og indlæser deres teksturer fra en URL.

ved hjælp af System. Collections;

ved hjælp af System. Collections. Generic; ved hjælp af UnityEngine; offentlig klasse PictureFactory: MonoBehaviour {public GameObject picPrefab; offentlig 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 center = Camera.main.transform.position; foreach (string url in urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum ++; }} Vector3 GetPosition (int picNum, int rowNum, Vector3 camForward) {Vector3 pos = Vector3.zero; hvis (picNum <= 5) {pos = camForward + ny Vector3 (picNum * -3, 0, rowNum * 3.5f); } ellers {pos = camForward + ny Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } returpos; }}

Trin 8: Vi er færdige

Opret tomt gameobject kaldet GoogleService og sæt "GoogleSerivice" scriptet på det.

Træk "PictureFactory" -scriptet ind på jorden -plan -scenen, fordi alle vores billeder vil blive oprettet som børn af dette spilobjekt.

Træk de relevante referencer ind i inspektøren, gør det samme for google -tjenesten.

Den sidste ting, vi skal gøre, er at sikre, at vores "GetPictures" -funktion bliver kaldt. Så lad os gå til "onClick" -hændelsen på vores knap og kalde det derfra.

Nu kan vi klikke på play og teste dette. Sørg for at aktivere jordplanstadiet og knappen. Sig et ord, og klik på knappen for at udføre søgningen på den tekst!

For at få denne app til din telefon skal du slutte den til og gå til Fil-> Byg indstillinger. Hit bygge og køre!

Lad mig vide i kommentarerne, hvis du har spørgsmål!