Pengantar Vuforia pada kesatuan untuk membuat aplikasi Augmented Reality

() translation by (you can also view the original English article)

What You'll Be Creating

Tutorial ini akan mencakup bagaimana untuk mengimplementasikan aplikasi dasar ditambah kenyataan dengan Vuforia SDK pada kesatuan. Seluruh tutorial, Anda akan belajar bagaimana untuk menghasilkan sebuah adegan yang kompatibel dengan Vuforia dan bagaimana menerapkan berbagai skrip, termasuk ray-tracing, untuk dapat berinteraksi dengan objek dalam adegan.

Membuat akun pengembang

Sebelum memulai, Anda harus mendaftar untuk rekening pengembang Vuforia. Pergi ke Portal pengembang Vuforia untuk membuat account.

Setelah Anda membuat account, saatnya untuk men-download paket persatuan Vuforia. Pergi ke halaman download dan men-download paket khusus untuk kesatuan.

Membuat sasaran gambar

Target gambar yang diperlukan dalam rangka untuk perangkat kamera untuk mengenali referensi dan lagu itu. Orientasi dan ukuran sebenarnya gambar target secara langsung mempengaruhi atribut yang sama gambar dilapiskan.

Gambar dapat ditetapkan sebagai target. Namun, fitur gambar target secara efektif menentukan seberapa baik target dilacak. Dalam tutorial ini, kita akan menggunakan alat online untuk menghasilkan gambar target kaya fitur. Menghasilkan sasaran gambar dengan menggunakan alat online Augmented Reality penanda Generator, dan menyimpan gambar pada komputer Anda.

Mempersiapkan adegan kesatuan

Paket Vuforia

Membuat proyek kesatuan 3D baru dan kemudian klik dua kali kesatuan paket yang Anda download untuk Vuforia. Ini akan meminta jendela berikut. Klik semua untuk memilih semua konten paket, dan kemudian memukul impor. Ini akan mengimpor semua alat yang diperlukan untuk aplikasi AR.

Gambar Target

Langkah berikutnya adalah untuk mengimpor file target gambar. Untuk mendapatkan gambar file target, kita perlu menggunakan halaman pengembang Vuforia.

Pergi ke Portal pengembang Vuforia dan kemudian login ke account Anda. Di bawah tab berkembang, Anda akan melihat Target manajer. Pertama Anda perlu menambahkan database. Gunakan tombol Ruangan Khusus dan menambah database.

Nama database Anda seperti yang Anda inginkan, dan pilih perangkat sebagai jenis.

Sekarang kita siap untuk menambahkan target dalam database ini. Klik pada tombol Tambahkan Target, dan jendela berikut akan muncul. Jenis harus dipilih sebagai satu gambar dalam kasus kami. Pilih target gambar yang kami dihasilkan dengan menggunakan alat online. Jika Anda memiliki kesulitan meng-upload file, mencoba mengubahnya menjadi .jpg file format dan meng-upload lagi.

Lebar adalah parameter penting. Ini harus sesuai ukuran sebenarnya dari gambar target yang Anda akan akhirnya mencetak pada kertas. Saya mengatur lebar 40. Ada ada unit karena cocok unit adegan Anda.

Setelah Anda menambahkan target ke dalam database Anda, Vuforia tingkat target Anda. Dengan target gambar generator kami digunakan, fitur tinggi dan karena itu ia mendapat bintang 5, yang berarti sangat mudah untuk Vuforia untuk mengenali dan melacak target ini.

Sekarang Anda perlu untuk men-download database ini. Untuk melakukannya, tekan tombol Download Database dan memilih Editor persatuan sebagai platform pengembangan.

Setelah Anda men-download database, double klik di atasnya dan mengimpor semua konten ke adegan kesatuan kita bekerja pada.

ARCamera objek

Kita mulai dengan menambahkan objek ARCamera Vuforia kami adegan. Untuk melakukannya, cukup ikuti aset > Vuforia > Prefabs direktori dan menambahkan ARCamera obyek dengan menyeret dan menjatuhkan ke TKP.

Pilih objek ARCamera dan di bawah tab inspektur, Anda akan melihat bagian kunci lisensi App. Kunci lisensi ini akan didapatkan dari portal pengembang Vuforia.

Login di akun Vuforia pada Portal pengembang dan di bawah tab berkembang, Anda akan menemukan bagian lisensi Manager. Klik tombol Tambahkan License Key. Pada halaman berikut, pilih pembangunan sebagai jenis proyek dan menetapkan nama aplikasi untuk proyek Anda. Nama ini tidak penting, dan Anda dapat mengubah ini nanti jika Anda inginkan.

Memukul berikutnya, dan kemudian mengkonfirmasi Anda kunci lisensi pada halaman berikutnya.

Pilih lisensi yang baru Anda buat. Itu akan mengungkapkan kunci lisensi yang kita butuhkan untuk copy dan paste ke objek ARCamera. Salin lisensi ini dan kemudian menyisipkannya ke bagian kunci lisensi App di bawah pengaturan ARCamera.

Database beban perilaku, pilih opsi beban ARdemo Database. Setelah Anda check it, pilihan lain yang disebut Aktifkan akan muncul tepat di bawah ini. Cek pilihan ini juga.

ARdemo bagian dari beban ARdemo Database pilihan tergantung pada bagaimana Anda bernama database Anda.

Gambar objek Target

Objek kedua kita butuhkan dalam adegan kami adalah objek Target gambar.

Di bawah aset > Vuforia > direktori Prefabs, Anda juga akan menemukan objek "ImageTarget". Menambahkan objek ini ke adegan Anda dan pilih untuk mengungkapkan pilihan.

Di bawah bagian gambar Target perilaku, Anda akan melihat opsi Database. Pilih database Anda dari dropdown menu dan pilih target gambar tertentu yang Anda ingin tetapkan ke objek target gambar dari opsi "Gambar Target" menu dropdown. Jika Anda memiliki beberapa gambar target untuk satu database, mereka akan semua terdaftar di sini.

Parameter yang lebar dan tinggi akan diatur secara otomatis tergantung pada nilai yang Anda tetapkan saat membuat gambar target di Vuforia's pengembang portal.

Peningkatan grafis

Langkah berikutnya adalah untuk menciptakan grafis dan mengikat mereka ke target gambar. Anda juga dapat membuat GameObject atau Anda dapat mengimpor model 3D Anda sendiri ke dalam kesatuan dan menggunakannya. Dalam tutorial ini kita akan menggunakan objek kubus 3D sederhana demi kesederhanaan.

Menambahkan objek kubus adegan seperti yang ditunjukkan dalam gambar berikut.

Set x, y dan z parameter untuk skala pilihan di bawah mengubah ke 40, sehingga cocok ukuran gambar target kami dihasilkan.

Jika Anda menetapkan nilai lebar lain untuk target gambar Anda ketika menghasilkan di portal pengembang, gunakan nilai yang dipilih untuk sesuai dengan ukuran penuh gambar target.

Langkah terakhir untuk mendapatkan kerja app AR kami adalah untuk mengatur objek kubus sebagai anak target gambar. Untuk melakukannya, cukup drag objek kubus dan drop objek imageTarget di bawah menu hirarki.

Keadaan akhir adegan harus sebagai berikut:

Sekarang tekan tombol Play untuk menjalankan aplikasi Anda. Itu akan menggunakan webcam Anda. Mendapatkan gambar target yang dicetak atau membukanya dari telepon sehingga melalui webcam Anda Vuforia, Anda dapat mendeteksi. Saya melakukan yang terakhir dan membuka gambar target dari telepon.

Berikut adalah screenshot sebenarnya pandangan webcam. Anda dapat melihat bahwa objek kubus mencakup target seluruh gambar, karena kita cocok nilai faktor skala untuk objek 3D dan gambar target.

Interaksi script

Sejauh ini, kami telah mengembangkan aplikasi AR dasar yang mengakui dan melacak sasaran gambar dan menampilkan grafis 3D yang ditunjuk. Namun, untuk aplikasi AR yang lengkap, kita juga perlu untuk dapat berinteraksi dengan benda-benda, peningkatan realitas.

Untuk tujuan ini, kita harus mampu mendeteksi mana kita diklik — atau menyentuh, dalam kasus perangkat mobile. Kami akan melakukan hal ini dengan menerapkan ray-pengusut.

Pertama, Buat folder bernama "script" di bawah aset untuk tetap mengatur semuanya. Kami akan menyimpan file script kami dalam folder ini. Kemudian membuat C# Script file dalam folder ini. Nama "rayTracer". Penamaan ini penting karena fakta bahwa kode berikut harus sesuai nama file tertentu ini. Jika Anda memilih untuk menggunakan nama yang berbeda untuk script file, Anda juga harus mengubah kode yang tersedia sesuai.

Ray-pengusut Script

Copy dan paste kode berikut ke dalam file C# Script Anda telah menciptakan dan bernama "rayTracer".

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class rayTracer : MonoBehaviour {

    private List<GameObject> touchList = new List<GameObject>();
  private GameObject[] touchPrev;
	private RaycastHit hit;

	
	void Update () {

		#if UNITY_EDITOR

		if (Input.GetMouseButton(0) || Input.GetMouseButtonDown(0) || Input.GetMouseButtonUp(0)) {

			touchPrev = new GameObject[touchList.Count];
			touchList.CopyTo (touchPrev);
			touchList.Clear ();

			Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
			//Debug.DrawRay(ray.origin, ray.direction*10000, Color.green, 10, false);

			if (Physics.Raycast (ray, out hit)) {

				GameObject recipient = hit.transform.gameObject;
				touchList.Add (recipient);

				if (Input.GetMouseButtonDown(0)) {
					recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);

				}
				if (Input.GetMouseButtonUp(0)) {
					recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);

				}
				if (Input.GetMouseButton(0)) {
					recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);

				}
			}

			foreach (GameObject g in touchPrev) {
				if(!touchList.Contains(g)){
					g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
				}
			}
		}

		#endif

		if (Input.touchCount > 0) {

			touchPrev = new GameObject[touchList.Count];
			touchList.CopyTo (touchPrev);
			touchList.Clear ();
	
			foreach (Touch touch in Input.touches) {

				Ray ray = Camera.main.ScreenPointToRay (touch.position);

				if (Physics.Raycast (ray, out hit)) {

					GameObject recipient = hit.transform.gameObject;
					touchList.Add (recipient);

					if (touch.phase == TouchPhase.Began) {
						recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);

					}
					if (touch.phase == TouchPhase.Ended) {
						recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);

					}
					if (touch.phase == TouchPhase.Stationary || touch.phase == TouchPhase.Moved) {
						recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);

					}
					if (touch.phase == TouchPhase.Canceled) {
						recipient.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);

					}
				}
			}

			foreach (GameObject g in touchPrev) {
				if(!touchList.Contains(g)){
					g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
				}
			}
		}
	}
}

Script ini mendeteksi klik mouse kedua jika Anda bekerja pada editor persatuan dan menyentuh masukan jika Anda telah dikerahkan aplikasi pada perangkat mobile dengan layar sentuh.

Setelah Anda membuat skrip rayTracer, Anda harus mengaktifkannya dengan menetapkan ke salah satu obyek dalam adegan. Aku memilih objek yang ARCamera dan menambahkan skrip rayTracer sebagai komponen dengan menggunakan tombol Tambahkan komponen di bawah tab Inspektur.

Objek bahan

Sekarang kita akan menetapkan bahan untuk objek kubus dan mengubah warna bahan atas interaksi dengan kubus.

Di bawah aset, bahan-bahan dan nama itu seperti yang Anda inginkan.

Sekarang menetapkan bahan ini dengan menyeret dan menjatuhkan lebih dari objek kubus.

Interaksi Script

Membuat C# Script baru di bawah folder skrip dan nama itu "interaksi".

Salin C# kode berikut ke dalam file skrip "interaksi" dan kemudian menambahkan file script ini ke objek kubus sebagai komponen, seperti yang kita lakukan dengan file script "rayTracer". Namun, kali ini ia harus komponen objek kubus — hal ini penting untuk dapat hanya berinteraksi dengan objek kubus.

using UnityEngine;
using System.Collections;

public class interaction : MonoBehaviour {

    public static Color defaultColor;
	public static Color selectedColor;
	public static Material mat;

	void Start(){

		mat = GetComponent<Renderer> ().material;

		mat.SetFloat("_Mode", 2);
		mat.SetInt("_SrcBlend", (int)UnityEngine.Rendering.BlendMode.SrcAlpha);
		mat.SetInt("_DstBlend", (int)UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha);
		mat.SetInt("_ZWrite", 0);
		mat.DisableKeyword("_ALPHATEST_ON");
		mat.EnableKeyword("_ALPHABLEND_ON");
		mat.DisableKeyword("_ALPHAPREMULTIPLY_ON");
		mat.renderQueue = 3000;

		defaultColor = new Color32 (255, 255, 255, 255);
		selectedColor = new Color32 (255, 0, 0, 255);

		mat.color = defaultColor;
	}

	void touchBegan(){
		mat.color = selectedColor;
	}

	void touchEnded(){
		mat.color = defaultColor;
	}

	void touchStay(){
		mat.color = selectedColor;
	}

	void touchExit(){
		mat.color = defaultColor;
	}
}

Script ini "interaksi", kami merujuk kepada bahan objek kubus sebagai "mat".

Kami menciptakan dua benda materi yang berbeda, bernama defaultColor dan selectedColor. defaultColor dipilih untuk menjadi putih, seperti menunjukkan parameter RGBA, yang adalah (255, 255, 255, 255).

Kami menginisialisasi objek kubus warna bahan sebagai defaultColor oleh baris berikut:

Mat.Color = defaultColor;

Kami memiliki empat fungsi yang berbeda untuk empat negara yang berbeda:

touchBegan() disebut Instant Anda menyentuh pada objek.
touchEnded() disebut ketika Anda melepaskan jari Anda.
touchStay() disebut tepat setelah Anda menyentuh pada objek-fungsi ini mengikuti touchBegan(). Jadi, jika Anda menetapkan warna yang berbeda untuk materi Anda dalam fungsi ini, Anda tidak mungkin melihat warna yang ditetapkan dalam fungsi touchStay(), karena itu adalah instan pertama sentuhan diakui.
touchExit() disebut seperti ketika Anda tarik jari Anda dari permukaan objek kubus, daripada melepaskan jari, yang memanggil fungsi touchEnded() seperti yang dijelaskan di atas.

Dalam kode kita, ketika kita menyentuh pada objek kubus, kami menetapkan objek selectedColor untuk mat.color, yang merupakan warna bahan kami objek kubus.

Dengan menetapkan selectedColor dalam fungsi touchStay(), kami memastikan bahwa warna objek kubus akan sama dengan selectedColor selama kita tetap jari kita pada objek kubus. Jika kita melepaskan kami jari atau seret keluar dari objek kubus, kami menetapkan defaultColor untuk bahan warna parameter dengan memanggil fungsi touchEnded() atau touchExit() sesuai dengan tindakan kita mengambil.

Sekarang menjalankan proyek dan klik pada objek kubus setelah gambar target diakui dan objek kubus telah muncul. Itu harus berubah merah dan putih lagi ketika Anda melepaskan Anda klik atau memindahkannya dari permukaan objek kubus.

Anda dapat melakukan percobaan dengan warna yang berbeda untuk tindakan berbeda empat untuk memahami mereka secara menyeluruh.

Kesimpulan

Dalam tutorial ini, kami telah pergi melalui pengenalan Vuforia SDK untuk kesatuan bersama dengan portal pengembang, dan kita telah melihat bagaimana untuk menghasilkan gambar target dan kunci lisensi yang sesuai.

Selain itu, kami menghasilkan file script kustom untuk dapat berinteraksi dengan grafik ditambah. Tutorial ini adalah hanya sebuah pengantar untuk memungkinkan Anda untuk mulai menggunakan Vuforia dengan persatuan dan menciptakan aplikasi AR Anda sendiri.

1	using UnityEngine;
2	using System.Collections;
3	using System.Collections.Generic;
4
5	public class rayTracer : MonoBehaviour {
6
7	private List<GameObject> touchList = new List<GameObject>();
8	private GameObject[] touchPrev;
9	private RaycastHit hit;
10
11
12	void Update () {
13
14	#if UNITY_EDITOR
15
16	if (Input.GetMouseButton(0) \|\| Input.GetMouseButtonDown(0) \|\| Input.GetMouseButtonUp(0)) {
17
18	touchPrev = new GameObject[touchList.Count];
19	touchList.CopyTo (touchPrev);
20	touchList.Clear ();
21
22	Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
23	//Debug.DrawRay(ray.origin, ray.direction*10000, Color.green, 10, false);
24
25	if (Physics.Raycast (ray, out hit)) {
26
27	GameObject recipient = hit.transform.gameObject;
28	touchList.Add (recipient);
29
30	if (Input.GetMouseButtonDown(0)) {
31	recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);
32
33	}
34	if (Input.GetMouseButtonUp(0)) {
35	recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);
36
37	}
38	if (Input.GetMouseButton(0)) {
39	recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);
40
41	}
42	}
43
44	foreach (GameObject g in touchPrev) {
45	if(!touchList.Contains(g)){
46	g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
47	}
48	}
49	}
50
51	#endif
52
53	if (Input.touchCount > 0) {
54
55	touchPrev = new GameObject[touchList.Count];
56	touchList.CopyTo (touchPrev);
57	touchList.Clear ();
58
59	foreach (Touch touch in Input.touches) {
60
61	Ray ray = Camera.main.ScreenPointToRay (touch.position);
62
63	if (Physics.Raycast (ray, out hit)) {
64
65	GameObject recipient = hit.transform.gameObject;
66	touchList.Add (recipient);
67
68	if (touch.phase == TouchPhase.Began) {
69	recipient.SendMessage ("touchBegan", hit.point, SendMessageOptions.DontRequireReceiver);
70
71	}
72	if (touch.phase == TouchPhase.Ended) {
73	recipient.SendMessage ("touchEnded", hit.point, SendMessageOptions.DontRequireReceiver);
74
75	}
76	if (touch.phase == TouchPhase.Stationary \|\| touch.phase == TouchPhase.Moved) {
77	recipient.SendMessage ("touchStay", hit.point, SendMessageOptions.DontRequireReceiver);
78
79	}
80	if (touch.phase == TouchPhase.Canceled) {
81	recipient.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
82
83	}
84	}
85	}
86
87	foreach (GameObject g in touchPrev) {
88	if(!touchList.Contains(g)){
89	g.SendMessage ("touchExit", hit.point, SendMessageOptions.DontRequireReceiver);
90	}
91	}
92	}
93	}
94	}