Introdução ao Vuforia para criação de aplicações de realidade aumentada na Unity

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

What You'll Be Creating

Este tutorial vai abordar como criar um aplicativo básico de realidade aumentada com Vuforia SDK na Unity. Durante todo o tutorial, você vai aprender a gerar uma cena compatível com Vuforia e como implementar scripts diferentes, incluindo ray tracing, a fim de interagir com o objeto dentro da cena.

Criando uma conta de desenvolvedor

Antes de começar, você precisa criar uma conta de desenvolvedor Vuforia. Vá para o Portal do desenvolvedor Vuforia para criar uma conta.

Com a conta criada, é hora de baixar o pacote da Unity do Vuforia. Vá para a página de download e baixe o pacote específico para Unity.

Criando um Image Target

Um Image Target é necessário para que a câmera do dispositivo tenha uma referência para rastrear. A orientação e o tamanho real do Image Target afetam diretamente os mesmos atributos das imagens geradas.

Qualquer imagem pode ser atribuída como um alvo. No entanto, as características de um Image Target efetivamente determinam quão bem o alvo é seguido. Neste tutorial, vamos usar uma ferramenta online para gerar Image Targets com várias características. Gere uma imagem usando a ferramenta online gerador de marcador de realidade aumentada e salve a imagem no seu computador.

Preparando a cena na Unity

Pacote Vuforia

Crie um novo projeto 3D na Unity e clique duas vezes no pacote que você baixou do Vuforia. Isso irá exibir a seguinte janela. Clique em All para selecionar todo o conteúdo do pacote e depois clique em Import. Isso vai importar todas as ferramentas necessárias para a aplicação de AR.

Image Target

O próximo passo é importar o Image Target. Para obter os arquivos, precisamos usar a página de desenvolvedor Vuforia.

Acesse o Portal do desenvolvedor Vuforia e depois entre na sua conta. Na guia Develop, você verá Target Manager. Primeiro você precisa adicionar um banco de dados. Use o botão designado e adicione um banco de dados.

Nomeie seu banco de dados como desejar e selecione o tipo Device.

Agora estamos prontos para adicionar um Image Target neste banco de dados. Clique no botão Add Target, e a seguinte janela aparecerá. O tipo selecionado deve ser Single Image, no nosso caso. Selecione o Image Target que geramos usando a ferramenta on-line. Se tiver qualquer dificuldade para fazer o upload do arquivo, tente convertê-lo para o formato .jpg e faça o upload novamente.

A largura é um parâmetro fundamental. Isto deve combinar com o tamanho real do Image Target que você pretende eventualmente imprimir no papel. Eu defini 40 de largura. Não há nenhuma unidade que coincida com a unidade de sua cena.

Ao adicionar um alvo em seu banco de dados, Vuforia vai avalia-lo. Como o gerador de Image Target que usamos tem várias características, a imagem ganha 5 estrelas, o que significa que é fácil para o Vuforia reconhecer e controlar este alvo.

Agora você precisa baixar esse banco de dados. Para fazer isso, clique no botão Download Database e selecione Unity Editor como a plataforma de desenvolvimento.

Uma vez que você tenha baixado o banco de dados, clique duas vezes nele e importe todo o conteúdo para a cena na Unity em que estamos trabalhando.

Objeto ARCamera

Começamos adicionando o objeto de ARCamera do Vuforia em nossa cena. Para isso, basta ir no diretório Assets > Vuforia > Prefabs e adicionar o objeto ARCamera, arrastando e soltando na cena.

Selecione o objeto de ARCamera na guia Inspector, você vai ver a seção App License Key. Esta chave de licença será obtida a partir do portal do desenvolvedor Vuforia.

Entre na sua conta Vuforia no Portal do desenvolvedor e na guia Develop, você encontrará a seção do License Manager. Clique no botão Add License Key. Na página seguinte, selecione Development como tipo de projeto e defina um nome de aplicativo para o seu projeto. Esse nome não é crucial, e você poderá alterá-lo mais tarde, se desejar.

Clique em Next e então confirme sua chave de licença na próxima página.

Selecione a licença que você acabou de criar. Isso vai revelar a chave de licença que temos de copiar e colar no objeto ARCamera. Copie esta licença e então coloque-a na seção App License Key nas configurações do ARCamera.

Em Database Load Behaviour, marque a opção Load ARdemo Database. feito isso, outra opção chamada Activate aparecerá abaixo dela. Marque esta opção também.

A parte ARdemo da opção Load ARdemo Database depende de como você nomeou seu banco de dados.

Objeto Image Target

O segundo objeto que devemos adicionar a nossa cena é o objeto Image Target.

No diretório Assets > Vuforia > Prefabs, você também irá encontrar o objeto "ImageTarget". Adicione este objeto à cena e selecione-o para revelar as opções.

Na seção Image Target Behaviour, você verá a opção Database. Selecione seu banco de dados no menu suspenso e selecione o destino da imagem específica que você deseja atribuir para o objeto Image Target nas opção do "Image Target". Se você tem múltiplos Image Target para um banco de dados, eles estarão todos listados aqui.

Os parâmetros width e height serão definidos automaticamente dependendo do valor que você atribuiu ao criar o Image Target no portal do desenvolvedor do Vuforia.

Criando os gráficos

O próximo passo é criar os gráficos e ajustá-los para o Image Target. Você pode criar um GameObject ou você pode importar seu próprio modelo 3D na Unity e usá-lo. Neste tutorial, vamos usar um simples cubo 3D para manter a simplicidade.

Adicione um objeto cubo na cena, como na figura a seguir.

Defina seus parâmetros x, y e z na opção Scale próximo a Transform para 40, para que coincida com o tamanho do Image Target que geramos.

Se você definiu outro valor de largura para o seu Image Target no portal do desenvolvedor, use o valor que você selecionou para coincidir com o tamanho do Image Target.

O último passo para começar nosso trabalho de app RA é definir o objeto cubo como filho do Image Target. Para fazer isso, simplesmente arraste o cubo e solte-o sobre o objeto de Image Target sob no menu de hierarquia.

O estado final da cena deve ser assim:

Agora clique em Play para executar seu aplicativo. Ele irá usar sua webcam. Pegue o Imaget Target impresso ou abra a imagem no celular para que o Vuforia possa detectá-lo através de sua webcam. Eu escolhi abrir a imagem de destino do meu celular.

Aqui está a imagem real do modo de exibição da webcam. Você pode ver que o cubo cobre a imagem inteira, pois fizemos com que os valores da escala fossem os mesmo do objeto 3D.

Scripts de interação

Até agora, desenvolvemos um aplicativo básico do AR que reconhece e rastreia nossa imagem alvo e exibe os gráficos 3D designados. No entanto, para uma aplicação completa em AR, também precisamos ser capazes de interagir com os objetos, aumentando a realidade.

Para este efeito, precisamos ser capazes de detectar onde clicamos — ou tocamos, no caso de um dispositivo móvel. Nós vamos fazer isso implementando um ray-tracer.

Primeiro, crie uma pasta chamada "scripts" em Assets para manter tudo organizado. Nós vamos armazenar nossos arquivos de script nesta pasta. Em seguida, crie um script C# nesta pasta com o nome "rayTracer". Nomear é importante pois o código a seguir deve corresponder a este nome de arquivo específico. Se você preferir usar um nome diferente para seu arquivo, você também deve alterar o código fornecido.

Script Ray-Tracer

Copie e cole o seguinte código no arquivo c# que você criou.

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);
				}
			}
		}
	}
}

Este script detecta os dois cliques do mouse se você estiver trabalhando no editor Unity e toque na tela se você implantou o seu aplicativo em um celular com um ecrã táctil.

Depois de criar seu script rayTracer, você precisa ativá-lo, atribuindo a ele um dos objetos na cena. Eu selecionei o objeto ARCamera e adicionei o script rayTracer como componente usando o botão Add Component na guia Inspector.

Material do objeto

Agora, vamos atribuir um material ao nosso cubo e mudar a cor do material mediante a interação com o cubo.

Em Assets, crie um material com o nome que quiser.

Agora atribua este material ao cubo arrastando e soltando o material.

Script de interação

Crie um novo script c# na pasta de scripts com o nome "interaction".

Copie o código c# a seguir em seu script de "interação" e em seguida, adicione esse arquivo de script no objeto de cubo como um componente, tal como fizemos com o script "rayTracer". No entanto, desta vez deve ser um componente do objeto cubo — isto é importante para poder interagir apenas com o cubo.

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;
	}
}

No script "interaction", nos referimos ao material do objeto cubo como "mat".

Criamos dois objetos de materiais diferentes, chamados defaultColor e selectedColor. defaultColor será a cor branca, como indicam os parâmetros RGBA (255, 255, 255, 255).

Inicializamos a cor do material do cubo como defaultColor com a seguinte linha:

mat.color = defaultColor;

Temos quatro funções diferentes para quatro estados diferentes:

touchBegan() é chamado no instante que tocamos no objeto.
touchEnded() é chamado quando você tira o dedo.
touchStay() é chamado depois que o objeto foi tocado — esta função vem depois de touchBegan(). Então, se você atribuir diferentes cores para seu material nessas funções, é improvável que você veja a cor atribuída em touchStay(), pois a ação é imediata.
touchExit() é chamado quando você arrasta o dedo na superfície do objeto, em vez de soltar, que chama a função touchEnded(), como explicado anteriormente.

Em nosso código, quando tocamos no cubo, podemos atribuir o objeto selectedColor para mat.color, que é a cor do material do nosso cubo.

Atribuindo selectedColor dentro da função touchStay(), garantimos que a cor do objeto será igual a selectedColor, enquanto mantemos nosso dedo no objeto. Se tirarmos o dedo ou arrastá-lo para fora do objeto, atribuímos o parâmetro defaultColor a cor do material, chamando as funções de touchEnded() ou touchExit() de acordo com a ação que tomarmos.

Agora execute o projeto e clique no cubo, quando a imagem alvo é reconhecida o objeto de cubo aparece. Ele deve virar vermelho e branco novamente quando você soltar ou arrastar na superfície do objeto.

Você pode experimentar diferentes cores para as quatro ações diferentes para entende-las a fundo.

Conclusão

Neste tutorial, passamos por uma introdução ao Vuforia SDK para Unity juntamente com o seu portal de desenvolvedor, e já vimos como gerar uma imagem de destino e uma chave de licença apropriada.

Além disso, criamos scripts personalizados para interagir com os gráficos aumentados. Este tutorial é apenas uma introdução para que você possa começar a usar o Vuforia com a Unity e criar seus próprios aplicativos de realidade aumentada.

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	}