Hinahayaan Gumawa ng isang Augmented Reality App para sa MEMES !: 8 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Sa Instructable na ito gagawa kami ng isang augmented reality app para sa Android at IOS sa Unity3D na gumagamit ng Google API upang maghanap ng mga meme. Gagamitin namin ang pagtuklas ng eroplano ng Vuforia sa Unity kaya gagana ang mobile app na ito para sa karamihan ng mga gumagamit ng Android at IOS. Papayagan din kami ng paggamit ng Vuforia na naka-angkla ang mga larawan sa isang lokasyon upang makapaglakad kami sa larangang ito ng mga larawan at mananatili ang mga bagay kung nasaan sila.

Susubukan din namin ang pagsubok ng bagong IBM Watson API upang magawa namin ang mga paghahanap na ito gamit ang aming boses at magamit ang kanilang natural na pagproseso ng wika.

Kaya't ang masamang balita ay alinman sa mga API na ito ay libre, ngunit ang magandang balita ay pareho silang malayang subukan. Nagbibigay sa iyo ang Google custom na search API ng 100 libreng mga paghahanap bawat araw, at binibigyan ka ng IBM Watson API ng libreng buwan ng unang buwan.

Sa madaling salita, makukuha ng app na ito ang aming pagsasalita mula sa mikropono sa Unity, ipadala iyon sa mga server ng IBM Watson, na ibabalik sa amin ang teksto. Dadalhin namin ang teksto na iyon at ipadala ito sa mga server ng Google na magbabalik sa amin ng isang listahan ng mga URL ng imahe sa form na JSON.

Hakbang 1: I-set up ang IBM Watson SDK sa Unity

Upang mapunta ang Watson API kailangan mo munang makuha ang iyong mga kredensyal mula sa kanilang site. Pumunta sa Console.bluemix.net, lumikha at account, at mag-log in. Pumunta sa iyong IBM account at mag-navigate sa cloud foundry Orgs at lumikha ng isang bagong puwang. Pumunta ngayon sa iyong dashboard at mag-click upang mag-browse ng mga serbisyo, idagdag ang pagsasalita sa serbisyo sa text dahil iyon ang gagamitin namin. Piliin ang iyong rehiyon, samahan, at puwang at likhain ang proyekto. Ngayon makikita mo ang iyong mga kredensyal sa API sa ibaba.

Mag-download ng Unity kung wala ka pa nito at i-import ang IBM Watson SDK mula sa store ng asset sa Unity. Maaari naming subukan ito sa pamamagitan ng paglikha ng isang walang laman na object ng laro at tawagan itong IBM Watson at idagdag ang halimbawa ng script ng streaming. Ang script na ito ay naka-set na upang mag-record ng audio mula sa pagkakaisa at ipadala ito sa mga server ng Watson para sa pagproseso.

Sa ngayon gagamitin lamang namin ang halimbawang script na ito sapagkat marami pa kaming dapat gawin ngunit marahil sa susunod ay mas malalim pa kaming makapasok sa mga bagay-bagay sa Watson dahil gusto kong gumawa ng isang bagay sa Vision API.

Hakbang 2: Subukan ang Teksto ng Watson ng IBM sa Pagsasalita

Ang script na ito ay naghahanap para sa isang object ng teksto ng UI kaya hinahayaan lumikha ng isang bagong pindutan ng UI na magbibigay sa amin ng teksto na kailangan namin, gagamitin namin ang pindutan sa paglaon. Itakda ang canvas upang masukat sa laki ng screen at baguhin ang laki nang kaunti ang pindutan. Angkla ito sa kaliwang ibabang bahagi. I-drag ang teksto na iyon sa walang laman na puwang. Buksan ang script at hayaang idagdag ang aming mga kredensyal sa IBM Watson, hanapin kung saan ginagamit ang teksto na "mga resultaField" at itakda ito sa "alt.transcript" lamang dahil gagamitin namin ang teksto na ito upang maghanap sa google. Ngayon bago natin masubukan ito kailangan naming gawin ang laki ng teksto mismo nang pabago-bago upang ang anumang sabihin natin ay magkakasya sa loob ng kahon. Bumalik sa teksto at itakda ito sa pinakaangkop. Mag-type ng ilang teksto upang subukan ito. Ngayon kapag na-click namin ang pag-play ang aming mga salita ay maililipat sa teksto mula sa Watson Text to Speech API.

Hakbang 3: I-set up ang Google Custom Search API

Ang susunod na piraso na kailangan naming gawin ay ang i-set up ang pasadyang api sa paghahanap ng Google upang magamit sa Unity. Sa isang mataas na antas gagawa kami ng isang kahilingan sa HTTP mula sa Unity sa mga server ng Google na magbabalik sa amin ng tugon sa format na JSON.

Kaya pumunta sa pahina ng pag-set up ng Google Custom Search na JSON API, mag-click upang makakuha ng isang API key at lumikha ng isang bagong app. Panatilihing bukas ito Ngayon ay maaari na kaming pumunta sa control panel. Ilagay sa anumang bagay para sa mga site na maghanap, pangalanan ito anuman, at i-click ang lumikha.

I-click ang control panel at hinahayaan gumawa ng ilang mga pagbabago: nais naming pangunahin ang paghahanap ng mga meme, at i-on ang paghahanap ng imahe. Sa ilalim ng mga site upang maghanap ilipat iyon sa buong web. I-click ang i-update upang mai-save ang lahat.

Ngayon hanapin ang explorer ng google api at pumunta sa pasadyang API sa paghahanap. Papayagan kaming i-format ang sagot na JSON na makukuha namin mula sa Google. Kaya ilagay sa anumang bagay para sa query sa ngayon, i-paste ang iyong search engine ID, ilagay ang 1 para sa filter upang hindi kami makakuha ng mga duplicate, ilagay sa 10 sa ilalim ng num dahil iyon ang maximum na bilang ng mga resulta na maaari naming ibalik sa bawat oras, ilagay sa imahe para sa uri ng paghahanap dahil iyon lang ang nais nating ibalik. Ilagay ang 1 para sa pagsisimula, at sa wakas sa ilalim ng mga patlang ay ilagay sa "mga item / link" dahil para sa bawat item na ibinalik nais lang namin ang link ng imahe. Ngayon kapag nag-click ka sa pagpapatupad makikita mo na makakakuha kami ng 10 magagandang mga link ng imahe na ibinalik.

Ngayon kailangan nating makuha ang mga larawang ito sa Unity.

Hakbang 4: I-set up ang Vuforia sa Unity

Hinahayaan nating magtrabaho ang Vuforia upang maaari nating magamit ang kanilang deteksyon ng ground plane. I-save ang iyong kasalukuyang eksena at pumunta sa mga setting ng pagbuo. Lumipat ng iyong platform sa Android o IOS at kung ang iyong sa IOS ay naglagay ng isang bagay para sa tagakilala ng bundle, magdagdag ng isang paglalarawan ng paggamit ng camera at mikropono. Sa ilalim ng mga setting ng XR suriin ang Vuforia augmented reality na suportado.

Ngayon sa eksena tanggalin ang pangunahing camera at magdagdag ng isang Vuforia ARCamera. Pumunta sa seksyon ng pagsasaayos at baguhin ang mode ng pagsubaybay sa posisyonal. Alisan ng check ang lahat ng mga database sanhi na hindi namin kailangan ang mga ito.

Magdagdag ngayon ng tagahanap ng sasakyang panghimpapawid at kailangan naming i-override ang default na pag-uugali nito dahil nais naming i-deploy ang yugto ng eroplano sa lupa nang isang beses lamang kaya hahanapin natin ang Deploy Stage minsan script sa website ng Vuforia. Dalhin ang iskrip na iyon sa Unity at ilagay ito sa tagahanap ng eroplano, inaalis ang lumang script na naroon. Baguhin ang mode sa interactive at siguraduhin na ang function na "OnInteractiveHitTest" ay tinawag sa Unity Event na iyon. Habang narito kami itakda ang pindutan na ginawa namin nang mas maaga upang aktibo sa sandaling natagpuan namin ang ground plane, itakda ang default na estado nito sa hindi aktibo. Ngayon maglagay ng ground plane sa eksena at palitan ito sa mid air dahil nais namin ang lahat ng mga larawan na lumulutang sa hangin. I-drag ang ground plane na ito sa walang laman na puwang sa tagahanap ng eroplano.

Hakbang 5: Lumikha ng isang Larawan Prefab

Bago namin simulan ang pagsasama-sama ng lahat ng mga piraso na ito kailangan naming lumikha ng isang prefabricated na object ng laro na maaari naming patunayan sa tuwing nai-load ang isang larawan. Kaya lumikha ng isang walang laman na object ng laro sa ilalim ng yugto ng eroplano sa lupa at tawagan itong "picPrefab". Lumikha ng isang quad bilang isang anak ng iyon at sukatin ito ng 2, paikutin ang y nito ng 180 degree upang ang mga magulang na pasulong na vector na ipinakita bilang isang asul na arrow ay ang harap ng quad.

Lumikha ng isang bagong script na tinatawag na "PictureBehaviour" at idagdag ito sa aming picPrefab.

Ngayon i-drag ang prefab na ito sa iyong folder ng mga assets at ito ang ilalagay namin sa bawat larawan.

Ang aming "PictureBehaviour" script ay dapat magmukhang ganito:

gamit ang System. Collection;

gamit ang System. Collection. Generic; gamit ang UnityEngine; pampublikong klase PictureBehaviour: MonoBehaviour {public Renderer quadRenderer; pribadong Vector3 nais naPosisyon; walang bisa ang Start () {// tingnan ang camera transform. LookAt (Camera.main.transform); Nais ng Vector3Angle = bagong Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (ninanais na Angle); // force into air urgePosition = transform.localPosition; transform.localPosition + = bagong Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, naisPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = bagong WWW (url); magbabalik ng ani www; quadRenderer.material.mainTexture = www.tearance; }}

Hakbang 6: Lumikha ng isang Script para sa Google API

Hinahayaan ngayon ang pag-drag sa sanggunian sa quad renderer mula sa aming "picPrefab".

Mayroon lamang kaming natitirang mga script na gagawin, kaya hinahayaan lumikha ng isang C # script na tinatawag na GoogleService.cs at PictureFactroy.cs.

Sa loob ng "GoogleService" i-paste ang code na ito na humihiling sa aming kahilingan:

gamit ang System. Collection;

gamit ang System. Collection. Generic; gamit ang UnityEngine; gamit ang UnityEngine. UI; pampublikong klase GoogleService: MonoBehaviour {pampublikong PictureFactory pictureFactory; pampublikong Text buttonTeksto; pribadong const string API_KEY = "PUT API KEY DITO !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; query = WWW. EscapeURL (query + "memes"); // delete old images pictureFactory. DeleteOldPictures (); // save camera forward vector upang makagalaw tayo habang ang mga bagay ay inilalagay Vector3 cameraForward = Camera.main.transform.forward; // makakakuha lamang kami ng 10 mga resulta nang paisa-isa sa gayon kailangan naming i-loop at i-save ang aming pag-unlad na binabago ang numero ng pagsisimula pagkatapos ng bawat 10 int rowNum = 1; para sa (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 = imahe at simula = "+ i +" & mga patlang = item% 2Flink & key = "+ API_KEY; WWW www = bagong WWW (url); magbabalik ng ani www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } magbabalik ng ani ng bagong WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (totoo); } Ilista ang ParseResponse (string text) {List urlList = bagong List (); string urls = text. Split ('\ n'); paunahan (linya ng string sa mga url) {kung (line. Contains ("link")) {string url = line. Substring (12, linya. Haba-13); // ang pag-filter ng png o jpg ay tila hindi gagana mula sa Google kaya ginagawa namin ito dito: kung (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} ibalik ang urlList; }}

Hakbang 7: Lumikha ng Aming Pabrika ng Larawan

Sa loob ng PictureFactory.cs ilagay ang code na ito upang likhain ang lahat ng aming mga larawan at mai-load ang kanilang mga texture mula sa isang URL.

gamit ang System. Collection;

gamit ang System. Collection. Generic; gamit ang UnityEngine; pampublikong klase PictureFactory: MonoBehaviour {public GameObject picPrefab; pampublikong GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {precach (Transform child in this.transform) {Destroy (child.gameObject); }}} publiko na walang bisa angImages (ListurlList, int resultaNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; maaga (string url sa 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; kung (picNum <= 5) {pos = camForward + bagong Vector3 (picNum * -3, 0, rowNum * 3.5f); } iba pa {pos = camForward + bagong Vector3 ((picNum% 5) * 3, 0, rowNum * 3.5f); } bumalik pos; }}

Hakbang 8: Tapos Na

Lumikha ng walang laman na gameobject na tinatawag na GoogleService at ilagay dito ang "GoogleSerivice" script.

I-drag ang script na "PictureFactory" papunta sa yugto ng eroplano sa lupa sapagkat ang lahat ng aming mga larawan ay lilikha bilang mga bata ng larong ito ng laro.

I-drag ang naaangkop na mga sanggunian sa inspektor, gawin ang parehong bagay para sa serbisyo sa google.

Ang huling bagay na dapat nating gawin ay siguraduhin na ang tawag na "GetPictures" na tawag ay tinawag. Kaya't mapupunta sa kaganapan na "onClick" ng aming pindutan at tawagan ito mula doon.

Ngayon ay maaari naming mai-click ang play at subukan ito. Siguraduhin na paganahin ang yugto ng eroplano sa lupa at ang pindutan. Isang salita, at i-click ang pindutan upang maisagawa ang paghahanap sa teksto na iyon!

Ngayon upang makuha ang app na ito sa iyong telepono, i-plug ito at pumunta sa File-> Mga Setting ng Build. Pindutin ang build at tumakbo!

Ipaalam sa akin sa mga komento kung mayroon kang anumang mga katanungan!