Mari Buat Aplikasi Realiti Bertambah untuk MEMES !: 8 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Dalam Instructable ini kita akan membuat aplikasi augmented reality untuk Android dan IOS di Unity3D yang menggunakan API Google untuk mencari meme. Kami akan menggunakan pengesanan pesawat darat Vuforia di Unity supaya aplikasi mudah alih ini berfungsi untuk kebanyakan pengguna Android dan IOS. Menggunakan Vuforia juga akan membolehkan kita meletakkan gambar yang berlabuh di satu lokasi sehingga kita dapat melalui bidang gambar ini dan objek akan tetap berada di tempat mereka berada.

Kami juga akan menguji IBM Watson API baru sehingga kami dapat melakukan carian ini dengan suara kami dan memanfaatkan pemprosesan bahasa semula jadi mereka.

Oleh itu, berita buruk itu bukan API ini benar-benar percuma, tetapi berita baiknya ialah kedua-duanya bebas untuk mencuba. API carian khusus google memberi anda 100 carian percuma setiap hari, dan IBM Watson API memberikan anda bulan pertama secara percuma.

Ringkasnya, aplikasi ini akan mendapat ucapan daripada mikrofon di Unity, menghantarnya ke pelayan IBM Watson, yang akan mengembalikan teks kepada kami. Kami kemudian akan mengambil teks itu dan menghantarnya ke pelayan Google yang akan mengembalikan senarai URL gambar dalam bentuk JSON.

Langkah 1: Sediakan IBM Watson SDK di Unity

Untuk mendapatkan Watson API, anda perlu mendapatkan bukti kelayakan anda terlebih dahulu dari laman web mereka. Pergi ke Console.bluemix.net, buat dan akaun, dan log masuk. Pergi ke akaun IBM anda dan arahkan ke Cloud Foundry Orgs dan buat ruang baru. Sekarang pergi ke papan pemuka anda dan klik untuk menyemak imbas perkhidmatan, tambahkan ucapan ke perkhidmatan teks kerana itulah yang akan kami gunakan. Pilih wilayah, organisasi, dan ruang anda dan buat projek. Sekarang anda akan melihat kelayakan API anda di bahagian bawah.

Muat turun Unity jika anda belum memilikinya dan import IBM Watson SDK dari kedai aset di Unity. Kita boleh mengujinya dengan membuat objek permainan kosong dan memanggilnya IBM Watson dan menambahkan skrip streaming contoh. Skrip ini sudah siap untuk merakam audio dari kesatuan dan mengirimkannya ke pelayan Watson untuk diproses.

Buat masa ini, kami hanya akan menggunakan skrip contoh ini kerana masih banyak yang perlu kami lakukan tetapi mungkin lain kali kami dapat mempelajari perkara-perkara Watson dengan lebih mendalam kerana saya ingin melakukan sesuatu dengan Vision API.

Langkah 2: Uji Teks IBM Watson untuk Ucapan

Skrip ini mencari objek teks UI jadi mari kita buat butang UI baru ini akan memberi kita teks yang kita perlukan, kita akan menggunakan butang itu kemudian. Tetapkan kanvas ke skala dengan ukuran skrin dan ubah saiz butang sedikit. Jauhkan ke kiri bawah. Seret teks itu ke slot kosong. Buka skrip dan mari tambahkan kelayakan IBM Watson kami, cari di mana teks "resultsField" digunakan dan tetapkannya menjadi "alt.transcript" sahaja kerana kita akan menggunakan teks ini untuk mencari di google. Sekarang sebelum kita dapat menguji ini, kita perlu membuat ukuran teks itu sendiri secara dinamik sehingga apa sahaja yang kita katakan akan masuk ke dalam kotak. Kembali ke teks dan tetapkan agar sesuai. Taipkan beberapa teks untuk mengujinya. Sekarang apabila kita klik bermain, kata-kata kita akan ditranskripsikan ke teks dari Watson Text to Speech API.

Langkah 3: Sediakan API Carian Khusus Google

Bahagian seterusnya yang perlu kita lakukan adalah menyiapkan api carian khusus Google untuk digunakan di Unity. Pada tahap yang tinggi, kami akan membuat permintaan HTTP dari Unity ke pelayan Google yang akan memberikan respons kepada kami dalam format JSON.

Oleh itu, pergi ke halaman penyediaan API Google Custom Search JSON, klik untuk mendapatkan kunci API dan buat aplikasi baru. Pastikan ini terbuka. Sekarang kita boleh pergi ke panel kawalan. Masukkan apa sahaja laman web untuk dicari, namakan apa sahaja, dan klik buat.

Klik panel kawalan dan mari buat beberapa pengubahsuaian: kami ingin mencari meme, dan menghidupkan carian gambar. Di bawah laman web untuk mencari beralih ke seluruh web. Klik kemas kini untuk menyimpan semuanya.

Sekarang cari penjelajah api google dan pergi ke API carian tersuai. Ini akan membolehkan kita memformat respons JSON yang kita dapat dari Google. Oleh itu, masukkan apa sahaja untuk pertanyaan buat masa ini, tampal ID enjin carian anda, masukkan 1 untuk penapis supaya kami tidak mendapat pendua, masukkan 10 di bawah angka kerana itulah jumlah hasil maksimum yang dapat kami kembalikan pada satu masa, masukkan gambar untuk jenis carian kerana hanya itu yang ingin kami kembalikan. Masukkan 1 untuk permulaan, dan akhirnya di bawah bidang masukkan "item / pautan" kerana untuk setiap item yang dikembalikan, kami hanya mahukan pautan gambar. Sekarang apabila anda mengklik eksekusi, anda akan melihat bahawa kami akan mendapat 10 pautan gambar yang bagus.

Sekarang kita mesti memasukkan gambar-gambar ini ke dalam Unity.

Langkah 4: Siapkan Vuforia dalam Perpaduan

Mari Vuforia berfungsi supaya kita dapat memanfaatkan pengesanan pesawat tanah mereka. Simpan pemandangan semasa anda dan pergi ke tetapan binaan. Tukar platform anda ke Android atau IOS dan jika di iOS anda memasukkan sesuatu untuk pengenal kumpulan, tambahkan keterangan penggunaan kamera dan mikrofon. Di bawah tetapan XR, periksa augmented reality Vuforia yang disokong.

Sekarang di tempat kejadian, hapuskan kamera utama dan tambahkan Vuforia ARCamera. Pergi ke bahagian konfigurasi dan ubah mod penjejakan ke kedudukan. Nyahtanda semua pangkalan data kerana kami tidak memerlukannya.

Sekarang tambahkan pesawat pencari dan kita perlu mengatasi tingkah laku lalainya kerana kita ingin menggunakan tahap dasar tanah hanya sekali jadi mari kita cari skrip Deploy Stage sekali di laman web Vuforia. Bawa skrip itu ke dalam Unity dan letakkan di pencari pesawat, hapus skrip lama yang ada di sana. Ubah mod menjadi interaktif dan pastikan fungsi "OnInteractiveHitTest" dipanggil pada Peristiwa Kesatuan. Semasa kita di sini mari kita tetapkan butang yang kita buat lebih awal untuk aktif setelah kita menemui bidang tanah, tetapkan keadaan lalai ke tidak aktif. Sekarang letakkan pesawat darat ke tempat kejadian dan ubah ke udara kerana kita mahu semua gambar melayang di udara. Seret pesawat darat ini ke slot kosong pada pencari pesawat.

Langkah 5: Buat Prefab Gambar

Sebelum kita mula mengumpulkan semua kepingan ini, kita perlu membuat objek permainan pasang siap yang dapat kita buat setiap kali gambar dimuat. Oleh itu, buat objek permainan kosong di bawah permukaan tanah dan namakan "picPrefab". Buat quad sebagai anak dari itu dan skala dengan 2, putar y dengan 180 darjah sehingga vektor hadapan ibu bapa yang ditunjukkan sebagai anak panah biru adalah bahagian depan quad.

Buat skrip baru yang disebut "PictureBehavior" dan tambahkannya ke picPrefab kami.

Sekarang seret prefab gambar ini ke dalam folder aset anda dan inilah yang akan kami letakkan setiap gambar.

Skrip "PictureBehavior" kami akan kelihatan seperti ini:

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; kelas awam PictureBehavior: MonoBehaviour {public Renderer quadRenderer; Vector3 peribadiPosisi yang dikehendaki; batal Mula () {// lihat transformasi kamera. LookAt (Camera.main.transform); Vector3 dikehendakiAngle = baru Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (dikehendakiAngle); // daya ke udara yang dikehendakiPosisi = transform.localPosition; transform.localPosition + = Vector3 baru (0, 20, 0); } batal Kemas kini () {transform.localPosition = Vector3. Lerp (transform.localPosition, dikehendakiPosition, Time.deltaTime * 4f); } awam kosong LoadImage (url string) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = WWW baru (url); pulangan hasil www; quadRenderer.material.mainTexture = www.texture; }}

Langkah 6: Buat Skrip untuk API Google

Sekarang mari kita seret dengan merujuk kepada quad renderer dari "picPrefab" kami.

Kami hanya memiliki dua skrip yang tersisa untuk dibuat, jadi mari kita buat skrip C # yang disebut GoogleService.cs dan PictureFactroy.cs.

Di dalam "GoogleService" tampal kod ini yang membuat permintaan kami:

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; menggunakan UnityEngine. UI; perkhidmatan awam GoogleService: MonoBehaviour {public PictureFactory pictureFactory; butang Teks awamTeks; string const peribadi API_KEY = "PUT API KEY DI SINI !!!!!"; awam tidak sah GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); pertanyaan rentetan = buttonText.text; pertanyaan = WWW. EscapeURL (pertanyaan + "memes"); // padamkan gambar lama gambarFactory. DeleteOldPictures (); // simpan vektor depan kamera supaya kita dapat bergerak semasa objek diletakkan Vector3 cameraForward = Camera.main.transform.forward; // kita hanya dapat 10 hasil pada satu masa sehingga kita harus melengkapkan dan menyimpan kemajuan kita mengubah nombor permulaan setelah setiap 10 int barisNum = 1; untuk (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + pertanyaan + "& cx = 011535004225295624669% 3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = "+ i +" & field = item% 2Pautan & kunci = "+ API_KEY; WWW www = WWW baru (url); pulangan hasil www; gambarFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); barisNum ++; } hasil pulangan WaitForSeconds baru (5f); buttonText.transform.parent.gameObject. SetActive (benar); } List ParseResponse (teks rentetan) {List urlList = senarai baru (); rentetan urls = text. Split ('\ n'); foreach (garis rentetan dalam url) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // menapis dengan png atau jpg nampaknya tidak berfungsi dari Google jadi kami melakukannya di sini: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} urlList pulangan; }}

Langkah 7: Buat Kilang Gambar Kami

Di dalam PictureFactory.cs meletakkan kod ini untuk membuat semua gambar kami dan memuatkan teksturnya dari URL.

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; kelas awam PictureFactory: MonoBehaviour {public GameObject picPrefab; perkhidmatan awam GoogleService; kekosongan awam DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destroy (child.gameObject); }}} kekosongan awam CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Pusat vektor3 = Camera.main.transform.position; foreach (string url dalam 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; jika (picNum <= 5) {pos = camForward + Vector3 baru (picNum * -3, 0, rowNum * 3.5f); } lain {pos = camForward + Vector3 baru ((picNum% 5) * 3, 0, rowNum * 3.5f); } kembali pos; }}

Langkah 8: Kita Selesai

Buat objek permainan kosong yang disebut GoogleService dan letakkan skrip "GoogleSerivice" di atasnya.

Seret skrip "PictureFactory" ke permukaan tanah kerana semua gambar kita akan dibuat sebagai anak objek permainan ini.

Seret rujukan yang sesuai di pemeriksa, lakukan perkara yang sama untuk perkhidmatan google.

Perkara terakhir yang perlu kita lakukan ialah memastikan fungsi "GetPictures" kita dipanggil. Oleh itu mari kita pergi ke acara "onClick" pada butang kami dan memanggilnya dari sana.

Sekarang kita boleh klik mainkan dan uji ini. Pastikan untuk mengaktifkan tahap dan butang permukaan tanah. Ucapkan sepatah kata, dan klik butang untuk melakukan carian pada teks itu!

Sekarang untuk mendapatkan aplikasi ini di telefon anda, pasangkannya dan pergi ke Fail-> Tetapan Binaan. Tekan membina dan jalankan!

Beritahu saya dalam komen jika anda mempunyai sebarang pertanyaan!