Vamos fazer um aplicativo de realidade aumentada para MEMES !: 8 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Neste Instructable, vamos fazer um aplicativo de realidade aumentada para Android e IOS no Unity3D que usa a API do Google para pesquisar memes. Vamos usar a detecção de plano de solo da Vuforia no Unity, para que este aplicativo móvel funcione para a maioria dos usuários de Android e IOS. O uso do Vuforia também nos permitirá ter as fotos ancoradas em um local para que possamos caminhar por esse campo de fotos e os objetos ficarem onde estão.

Também testaremos a nova API do IBM Watson para que possamos fazer essas pesquisas com nossa voz e aproveitar seu processamento de linguagem natural.

Portanto, a má notícia é que nenhuma dessas APIs são totalmente gratuitas, mas a boa notícia é que ambas podem ser testadas gratuitamente. A API de pesquisa customizada do Google oferece 100 pesquisas gratuitas por dia, e a API do IBM Watson oferece o primeiro mês de graça.

Resumindo, este aplicativo irá pegar nossa fala do microfone no Unity, enviar para os servidores IBM Watson, que nos devolverão o texto. Em seguida, pegaremos esse texto e enviaremos aos servidores do Google, que nos retornarão uma lista de URLs de imagens em formato JSON.

Etapa 1: Configurar o IBM Watson SDK no Unity

Para colocar a API do Watson em funcionamento, primeiro você precisa obter suas credenciais de seu site. Vá para Console.bluemix.net, crie uma conta e efetue login. Vá para sua conta IBM e navegue para Cloud Foundry Orgs e crie um novo espaço. Agora vá para o seu painel e clique para navegar pelos serviços, adicione a fala ao serviço de texto porque é isso que vamos usar. Escolha sua região, organização e espaço e crie o projeto. Agora você verá suas credenciais de API na parte inferior.

Faça download do Unity se ainda não o tiver e importe o IBM Watson SDK da loja de ativos no Unity. Podemos testar isso criando um objeto de jogo vazio e chamá-lo de IBM Watson e adicionar o script de streaming de exemplo. Este script já está configurado para gravar áudio da unidade e enviá-lo aos servidores Watson para processamento.

Por enquanto, vamos apenas usar este script de exemplo porque temos muito mais a fazer, mas talvez da próxima vez possamos nos aprofundar nas coisas do Watson porque eu gostaria de fazer algo com a API Vision.

Etapa 2: Teste o IBM Watson Text to Speech

Este script está procurando um objeto de texto da IU, então vamos criar um novo botão da IU que nos dará o texto de que precisamos, usaremos o botão mais tarde. Defina a tela para dimensionar com o tamanho da tela e redimensione o botão um pouco. Fixe-o na parte inferior esquerda. Arraste esse texto para o slot vazio. Abra o script e vamos adicionar nossas credenciais do IBM Watson, encontre onde o texto "resultsField" é usado e defina-o como apenas "alt.transcript" porque usaremos esse texto para pesquisar no google. Agora, antes de podermos testar isso, precisamos fazer o próprio tamanho do texto dinamicamente para que tudo o que dissermos caiba dentro da caixa. Volte para o texto e defina-o para o melhor ajuste. Digite algum texto para testá-lo. Agora, quando clicarmos em reproduzir, nossas palavras serão transcritas em texto da API Watson Text to Speech.

Etapa 3: Configurar a API de pesquisa personalizada do Google

A próxima coisa que precisamos fazer é configurar a API de pesquisa personalizada do Google para usar no Unity. Em um alto nível, estaremos fazendo uma solicitação HTTP do Unity para os servidores do Google que nos retornarão uma resposta no formato JSON.

Portanto, vá para a página de configuração da API JSON da Pesquisa personalizada do Google, clique para obter uma chave de API e criar um novo aplicativo. Mantenha isso aberto. Agora podemos ir para o painel de controle. Insira qualquer coisa para os sites pesquisarem, nomeie como quiser e clique em criar.

Clique no painel de controle e vamos fazer algumas modificações: queremos pesquisar principalmente memes e ativar a pesquisa de imagens. Em sites para pesquisa, mude para a web inteira. Clique em atualizar para salvar tudo.

Agora encontre o explorador da API do Google e vá para a API de pesquisa personalizada. Isso nos permitirá formatar a resposta JSON que recebemos do Google. Então coloque qualquer coisa para a consulta por enquanto, cole seu ID do mecanismo de pesquisa, coloque 1 no filtro para não obtermos duplicatas, coloque 10 em num porque esse é o número máximo de resultados que podemos retornar por vez, colocar uma imagem para o tipo de pesquisa porque isso é tudo o que queremos retornar. Coloque 1 no início e, por fim, nos campos coloque "itens / link" porque para cada item retornado queremos apenas o link da imagem. Agora, quando você clicar em executar, verá que retornamos 10 links de imagens agradáveis.

Agora temos que colocar essas fotos no Unity.

Etapa 4: Configure o Vuforia no Unity

Vamos fazer o Vuforia funcionar para que possamos alavancar a detecção do plano terrestre. Salve sua cena atual e vá para as configurações de construção. Mude sua plataforma para Android ou IOS e se você estiver no IOS coloque algo para o identificador de pacote, adicione uma descrição de uso de câmera e microfone. Nas configurações de XR, verifique a realidade aumentada Vuforia com suporte.

Agora na cena delete a câmera principal e adicione um Vuforia ARCamera. Vá para a seção de configuração e altere o modo de rastreamento para posicional. Desmarque todos os bancos de dados porque não precisamos deles.

Agora adicione um localizador de plano e precisamos substituir seu comportamento padrão porque queremos implantar o estágio de plano de solo apenas uma vez, então vamos encontrar o script Deploy Stage once no site da Vuforia. Traga esse script para o Unity e coloque-o no localizador de planos, removendo o script antigo que estava lá. Mude o modo para interativo e certifique-se de que a função "OnInteractiveHitTest" seja chamada nesse evento do Unity. Enquanto estamos aqui, vamos definir o botão que criamos anteriormente para ativo, uma vez que encontramos o plano de chão, defina seu estado padrão para inativo. Agora coloque um plano terrestre na cena e mude-o para o ar porque queremos todas as fotos flutuando no ar. Arraste este plano de chão para o slot vazio no localizador de plano.

Etapa 5: Crie uma imagem pré-fabricada

Antes de começarmos a juntar todas essas peças, precisamos criar um objeto de jogo pré-fabricado que possamos instanciar toda vez que uma imagem for carregada. Portanto, crie um objeto de jogo vazio sob o estágio do plano terrestre e chame-o de "picPrefab". Crie um quadrante como filho disso e dimensione-o em 2, gire seu y em 180 graus para que o vetor de avanço dos pais, que é mostrado como uma seta azul, esteja na frente do quadrante.

Crie um novo script chamado "PictureBehavior" e adicione-o ao nosso picPrefab.

Agora arraste esta foto pré-fabricada para sua pasta de ativos e é nela que colocaremos cada foto.

Nosso script "PictureBehavior" deve ser semelhante a este:

using System. Collections;

using System. Collections. Generic; using UnityEngine; public class PictureBehavior: MonoBehaviour {public Renderer quadRenderer; private Vector3 neededPosition; void Start () {// veja a câmera transform. LookAt (Camera.main.transform); Vector3 neededAngle = new Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (desejadoAngle); // força no ar desejadoPosition = transform.localPosition; transform.localPosition + = novo Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, neededPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = new WWW (url); rendimento retorno www; quadRenderer.material.mainTexture = www.texture; }}

Etapa 6: Crie um script para a API do Google

Agora vamos arrastar a referência para o renderizador quad de nosso "picPrefab".

Nós só temos dois scripts para fazer, então vamos criar um script C # chamado GoogleService.cs e PictureFactroy.cs.

Dentro de "GoogleService" cole este código que faz nossa solicitação:

using System. Collections;

using System. Collections. Generic; using UnityEngine; using UnityEngine. UI; public class GoogleService: MonoBehaviour {public PictureFactory pictureFactory; public Text buttonText; private const string API_KEY = "COLOQUE A CHAVE API AQUI !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; consulta = WWW. EscapeURL (consulta + "memes"); // excluir imagens antigas pictureFactory. DeleteOldPictures (); // salva o vetor de avanço da câmera para que possamos nos mover enquanto os objetos são colocados Vector3 cameraForward = Camera.main.transform.forward; // só podemos obter 10 resultados por vez, então temos que fazer um loop e salvar nosso progresso, alterando o número inicial a cada 10 int rowNum = 1; para (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 = novo WWW (url); rendimento retorno www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } rendimento retorna novo WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } List ParseResponse (string text) {List urlList = new List (); string urls = text. Split ('\ n'); foreach (string line em urls) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // a filtragem por png ou jpg não parece funcionar no Google, então fazemos isso aqui: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} return urlList; }}

Etapa 7: Crie nossa fábrica de imagens

Dentro de PictureFactory.cs coloque este código para criar todas as nossas imagens e carregue suas texturas a partir de um URL.

using System. Collections;

using System. Collections. Generic; using UnityEngine; public class PictureFactory: MonoBehaviour {public GameObject picPrefab; public GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destroy (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (string url em urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instanciar (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum ++; }} GetPosition Vector3 (int picNum, int rowNum, Vector3 camForward) {Vector3 pos = Vector3.zero; if (picNum <= 5) {pos = camForward + novo Vector3 (picNum * -3, 0, rowNum * 3.5f); } else {pos = camForward + new Vector3 ((picNum% 5) * 3, 0, rowNum * 3.5f); } return pos; }}

Etapa 8: Terminamos

Crie um gameobject vazio chamado GoogleService e coloque o script "GoogleSerivice" nele.

Arraste o script "PictureFactory" para o palco do plano terrestre porque todas as nossas imagens serão criadas como filhas deste objeto de jogo.

Arraste as referências apropriadas no inspetor e faça o mesmo para o serviço do Google.

A última coisa que precisamos fazer é garantir que nossa função "GetPictures" seja chamada. Então, vamos ao evento "onClick" do nosso botão e chamá-lo de lá.

Agora podemos clicar em reproduzir e testar isso. Certifique-se de habilitar o estágio do plano de solo e o botão. Diga uma palavra e clique no botão para realizar a pesquisa nesse texto!

Agora, para obter este aplicativo em seu telefone, conecte-o e vá para Arquivo-> Configurações de compilação. Clique em construir e correr!

Deixe-me saber nos comentários se você tiver alguma dúvida!