Mari Membuat Aplikasi Augmented Reality untuk MEMES!: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Dalam Instructable ini kita akan membuat aplikasi augmented reality untuk Android dan iOS di Unity3D yang menggunakan Google API untuk mencari meme. Kami akan menggunakan deteksi bidang tanah Vuforia di Unity sehingga aplikasi seluler ini akan berfungsi untuk sebagian besar pengguna Android dan iOS. Menggunakan Vuforia juga akan memungkinkan kita untuk menempatkan gambar di satu lokasi sehingga kita dapat berjalan melalui bidang gambar ini dan objek akan tetap berada di tempatnya.

Kami juga akan menguji IBM Watson API baru sehingga kami dapat melakukan pencarian ini dengan suara kami dan memanfaatkan pemrosesan bahasa alami mereka.

Jadi kabar buruknya adalah tidak satu pun dari API ini yang benar-benar gratis, tetapi kabar baiknya adalah keduanya gratis untuk dicoba. Google custom search API memberi Anda 100 pencarian gratis per hari, dan IBM Watson API memberi Anda gratis bulan pertama.

Singkatnya, aplikasi ini akan mendapatkan pidato kami dari mikrofon di Unity, mengirimkannya ke server IBM Watson, yang akan mengembalikan teks kepada kami. Kami kemudian akan mengambil teks itu dan mengirimkannya ke server Google yang akan mengembalikan kami daftar URL gambar dalam bentuk JSON.

Langkah 1: Siapkan IBM Watson SDK di Unity

Untuk menjalankan Watson API, Anda harus terlebih dahulu mendapatkan kredensial Anda dari situs mereka. Buka Console.bluemix.net, buat dan akun, dan masuk. Buka akun IBM Anda dan navigasikan ke Cloud Foundry Orgs dan buat ruang baru. Sekarang buka dasbor Anda dan klik untuk menelusuri layanan, tambahkan pidato ke layanan teks karena itulah yang akan kita gunakan. Pilih wilayah, organisasi, dan ruang Anda dan buat proyek. Sekarang Anda akan melihat kredensial API Anda di bagian bawah.

Unduh Unity jika Anda belum memilikinya dan impor IBM Watson SDK dari aset store di Unity. Kita dapat menguji ini dengan membuat objek game kosong dan menyebutnya IBM Watson dan menambahkan contoh skrip streaming. Skrip ini sudah diatur untuk merekam audio dari kesatuan dan mengirimkannya ke server Watson untuk diproses.

Untuk saat ini kita hanya akan menggunakan skrip contoh ini karena kita memiliki lebih banyak hal yang harus dilakukan, tetapi mungkin lain kali kita dapat membahas lebih dalam tentang Watson karena saya ingin melakukan sesuatu dengan Vision API.

Langkah 2: Uji IBM Watson Text to Speech

Script ini mencari objek teks UI jadi mari kita buat tombol UI baru ini akan memberi kita teks yang kita butuhkan, kita akan menggunakan tombol itu nanti. Atur kanvas ke skala dengan ukuran layar dan ubah ukuran tombol sedikit. Jangkar ke kiri bawah. Seret teks itu ke dalam slot kosong. Buka skrip dan mari tambahkan kredensial IBM Watson kami, temukan di mana teks "resultsField" digunakan dan atur hanya "alt.transcript" karena kami akan menggunakan teks ini untuk mencari google. Sekarang sebelum kita dapat menguji ini, kita perlu membuat ukuran teks itu sendiri secara dinamis sehingga apa pun yang kita katakan akan muat di dalam kotak. Kembali ke teks dan atur agar sesuai. Ketik beberapa teks untuk mengujinya. Sekarang ketika kita mengklik putar kata-kata kita akan ditranskripsikan ke teks dari Watson Text to Speech API.

Langkah 3: Siapkan Google Custom Search API

Bagian selanjutnya yang perlu kita lakukan adalah menyiapkan api pencarian kustom Google untuk digunakan di Unity. Pada level tinggi, kami akan membuat permintaan HTTP dari Unity ke server Google yang akan mengembalikan respons kepada kami dalam format JSON.

Jadi, buka halaman penyiapan Google Custom Search JSON API, klik untuk mendapatkan kunci API dan buat aplikasi baru. Tetap buka ini. Sekarang kita bisa pergi ke panel kontrol. Masukkan apa saja untuk dicari situs, beri nama apa pun, dan klik buat.

Klik panel kontrol dan mari buat beberapa modifikasi: kami ingin mencari meme, dan mengaktifkan pencarian gambar. Di bawah situs untuk mencari, alihkan itu ke seluruh web. Klik perbarui untuk menyimpan semuanya.

Sekarang temukan penjelajah api google dan buka API pencarian khusus. Ini akan memungkinkan kami untuk memformat respons JSON yang kami dapatkan dari Google. Jadi masukkan apa saja untuk kueri untuk saat ini, tempel di ID mesin telusur Anda, masukkan 1 untuk filter agar kami tidak mendapatkan duplikat, masukkan 10 di bawah angka karena itulah jumlah maksimum hasil yang dapat kami kembalikan sekaligus, masukkan gambar untuk jenis pencarian karena hanya itu yang ingin kami kembalikan. Masukkan 1 untuk memulai, dan akhirnya di bawah bidang masukkan "item/tautan" karena untuk setiap item yang dikembalikan kami hanya menginginkan tautan gambar. Sekarang ketika Anda mengklik eksekusi, Anda akan melihat bahwa kami mendapatkan 10 tautan gambar bagus yang dikembalikan.

Sekarang kita harus memasukkan gambar-gambar ini ke Unity.

Langkah 4: Siapkan Vuforia di Unity

Mari kita buat Vuforia bekerja sehingga kita bisa memanfaatkan deteksi ground plane mereka. Simpan adegan Anda saat ini dan buka pengaturan build. Alihkan platform Anda ke Android atau iOS dan jika Anda di iOS memasukkan sesuatu untuk pengidentifikasi bundel, tambahkan deskripsi penggunaan kamera dan mikrofon. Di bawah pengaturan XR, periksa Vuforia augmented reality didukung.

Sekarang dalam adegan hapus kamera utama dan tambahkan Vuforia ARCamera. Buka bagian konfigurasi dan ubah mode pelacakan ke posisional. Hapus centang semua database karena kami tidak membutuhkannya.

Sekarang tambahkan plane finder dan kita perlu mengganti perilaku defaultnya karena kita ingin menerapkan ground plane stage hanya sekali jadi mari temukan skrip Deploy Stage Once di situs web Vuforia. Bawa skrip itu ke Unity dan letakkan di pencari pesawat, hapus skrip lama yang ada di sana. Ubah mode menjadi interaktif dan pastikan fungsi "OnInteractiveHitTest" dipanggil pada Acara Unity itu. Sementara kita di sini, mari kita atur tombol yang kita buat sebelumnya menjadi aktif setelah kita menemukan ground plane, atur status defaultnya menjadi tidak aktif. Sekarang letakkan pesawat darat ke dalam adegan dan ubah ke udara tengah karena kita ingin semua gambar melayang di udara. Seret bidang dasar ini ke dalam slot kosong pada pencari bidang.

Langkah 5: Buat Prefab Gambar

Sebelum kita mulai menyatukan semua bagian ini, kita perlu membuat objek game prefabrikasi yang dapat kita buat setiap kali gambar dimuat. Jadi buat objek game kosong di bawah ground plane stage dan beri nama "picPrefab". Buat segi empat sebagai anak dari itu dan skalakan dengan 2, putar y sebesar 180 derajat sehingga vektor depan orang tua yang ditunjukkan sebagai panah biru adalah bagian depan segi empat.

Buat skrip baru bernama "PictureBehavior" dan tambahkan ke picPrefab.

Sekarang seret cetakan foto ini ke folder aset Anda dan inilah yang akan kita letakkan di setiap gambar.

Skrip "PictureBehavior" kami akan terlihat seperti ini:

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; kelas publik PictureBehavior: MonoBehaviour { quadRenderer Renderer publik; Private Vector3 yang diinginkanPosisi; void Start(){ //lihat camera transform. LookAt (Camera.main.transform); Vector3 yang diinginkanAngle = new Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (sudut yang diinginkan); //memaksa ke udara yang diinginkanPosition = transform.localPosition; transform.localPosition += new Vector3 (0, 20, 0); } void Update(){ transform.localPosition = Vector3. Lerp (transform.localPosition, keinginanPosition, Time.deltaTime * 4f); } public void LoadImage(url string){ StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL(string url){ WWW www = new WWW(url); hasil kembali www; quadRenderer.material.mainTexture = www.texture; } }

Langkah 6: Buat Skrip untuk Google API

Sekarang mari kita tarik referensi ke quad renderer dari "picPrefab" kita.

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

Di dalam "GoogleService" rekatkan kode ini yang membuat permintaan kami:

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; menggunakan UnityEngine. UI; public class GoogleService: MonoBehaviour { public PictureFactory pictureFactory; teks tombol teks publik; private const string API_KEY = "MASUKKAN KUNCI API DI SINI!!!!!"; public void GetPictures(){ StartCoroutine (PictureRoutine()); } IEnumerator PictureRoutine(){ buttonText.transform.parent.gameObject. SetActive (salah); string kueri = buttonText.text; kueri = WWW. EscapeURL (kueri + " meme"); //hapus gambar lama pictureFactory. DeleteOldPictures(); //menyimpan camera forward vector agar kita dapat bergerak saat objek ditempatkan Vector3 cameraForward = Camera.main.transform.forward; //kita hanya bisa mendapatkan 10 hasil sekaligus jadi kita harus mengulang dan menyimpan kemajuan kita dengan mengubah nomor awal setelah setiap 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 = WWW baru (url); hasil kembali www; pictureFactory. CreateImages (ParseResponse(www.text), rowNum, cameraForward); barisNum++; } hasilkan kembali WaitForSeconds baru (5f); buttonText.transform.parent.gameObject. SetActive (benar); } Daftar ParseResponse(teks string){ Daftar urlList = Daftar baru(); string url = teks. Split ('\n'); foreach (baris string dalam url) { if (line. Contains("link")){ string url = line. Substring (12, line. Length-13); //memfilter menurut png atau jpg sepertinya tidak berfungsi dari Google jadi kami melakukannya di sini: if (url. Contains (".jpg") || url. Contains (".png")) { urlList. Add (url); } } } kembali urlList; } }

Langkah 7: Buat Pabrik Gambar Kami

Di dalam PictureFactory.cs letakkan kode ini untuk membuat semua gambar kita dan memuat teksturnya dari URL.

menggunakan System. Collections;

menggunakan System. Collections. Generic; menggunakan UnityEngine; PictureFactory kelas publik: MonoBehaviour { publik GameObject picPrefab; GoogleLayanan Google publik; public void DeleteOldPictures(){ if (transform.childCount > 0) { foreach (Transform child in this.transform) { Hancurkan (child.gameObject); } } } public void CreateImages(ListurlList, int resultNum, Vector3 camForward){ int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (string url di urlList) { Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Membuat Instansi (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 + new Vector3 (picNum * -3, 0, rowNum * 3.5f); } else { pos = camForward + new Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } kembalikan pos; } }

Langkah 8: Kami Selesai

Buat objek game kosong bernama GoogleService dan letakkan skrip "GoogleSerivice" di atasnya.

Seret skrip "PictureFactory" ke bidang bidang dasar karena semua gambar kita akan dibuat sebagai anak-anak dari objek game ini.

Seret referensi yang sesuai di inspektur, lakukan hal yang sama untuk layanan google.

Hal terakhir yang harus kita lakukan adalah memastikan fungsi "GetPictures" kita dipanggil. Jadi mari kita pergi ke acara "onClick" dari tombol kita dan memanggilnya dari sana.

Sekarang kita bisa mengklik play dan menguji ini. Pastikan untuk mengaktifkan ground plane stage dan tombolnya. Ucapkan sepatah kata, dan klik tombol untuk melakukan pencarian pada teks itu!

Sekarang untuk mendapatkan aplikasi ini di ponsel Anda, colokkan dan buka File-> Build Settings. Hit membangun dan menjalankan!

Beri tahu saya di komentar jika Anda memiliki pertanyaan!