API Poly: recuperando recursos 3D para seus aplicativos VR e AR Android

Vídeo: 3D Scanning from your Smart Phone for free!

Contente

Exibindo ativos 3D com o Poly
Criando um projeto de modelagem 3D
Crie uma conta do Google Cloud Platform
Obtenha sua chave da API Poly
Dependências do projeto: Extensões de combustível, P3D e Kotlin
Adicionando sua chave de API
Recuperando o ativo
Criando uma segunda tela: Adicionando navegação
Construindo uma tela 3D
Desenho na tela do P3D
Testando seu projeto
Empacotando
Relacionado

Você tem uma ótima idéia para um aplicativo móvel de Realidade Virtual (VR) ou Realidade Aumentada (AR), mas não sabe como dar vida à sua visão?

A menos que você seja um desenvolvedor do Android e também seja um artista experiente em 3D, a criação de todos os recursos necessários para proporcionar uma experiência imersiva de 360 graus pode ser um processo assustador.

Só porque você não tem tempo, recursos ou experiência necessários para criar modelos 3D, não significa que você não pode criar um ótimo aplicativo para dispositivos móveis de VR ou AR! Há uma enorme variedade de recursos 3D disponíveis gratuitamente na Internet, além de todas as APIs, estruturas e bibliotecas necessárias para fazer o download e renderizar esses ativos em seus aplicativos Android.

Leia em seguida: Agora você pode visitar qualquer site usando o Daydream VR. Até aquele.

Neste artigo, veremos o Poly, um repositório on-line e API que coloca milhares de ativos 3D na ponta dos dedos. Até o final deste artigo, você criou um aplicativo que recupera um ativo Poly 3D em tempo de execução e o renderiza usando a popular biblioteca Processing for Android.

Exibindo ativos 3D com o Poly

Se você já se interessou pelo desenvolvimento do Unity, o repositório Poly é semelhante ao Unity Asset Store - exceto que tudo no Poly é gratuito!

Muitos dos modelos 3D da Poly são publicados sob a licença Creative Commons, portanto, você pode usar, modificar e remisturar esses recursos, desde que dê o crédito adequado ao criador.

Todos os modelos 3D da Poly foram projetados para serem compatíveis com as plataformas VR e AR do Google, como Daydream e ARCore, mas você pode usá-los onde e como quiser - potencialmente, você pode até usá-los com o ARKit da Apple!

Quando se trata de recuperar e exibir ativos Poly, você tem duas opções. Primeiro, você pode baixar os ativos para o seu computador e depois importá-los para o Android Studio, para que eles sejam enviados com o aplicativo e contribuam para o tamanho do APK, ou você pode recuperar esses ativos em tempo de execução usando a API API.

A API API Poly, baseada em REST, de plataforma cruzada, fornece acesso programático e somente leitura à enorme coleção de modelos 3D da Poly. Isso é mais complicado do que agrupar ativos com seu APK, mas há vários benefícios em recuperar ativos Poly em tempo de execução, principalmente o que ajuda a manter o tamanho do APK sob controle, o que pode afetar quantas pessoas baixam seu aplicativo.

Você também pode usar a API Poly para oferecer aos usuários mais opções. Por exemplo, se você estiver desenvolvendo um jogo para celular, poderá permitir que eles escolham entre vários modelos de personagens.

Como você pode modificar os modelos Poly, você pode até permitir que os usuários ajustem o personagem escolhido, por exemplo, alterando a cor do cabelo ou dos olhos ou combinando-o com outros recursos Poly, como armas e armaduras diferentes. Dessa forma, a Poly API pode ajudá-lo a fornecer uma variedade impressionante de ativos 3D, com muito escopo para personalizar a experiência - e tudo por relativamente pouco trabalho. Seus usuários estarão convencidos de que você gastou uma tonelada de tempo, elaborando meticulosamente todos esses modelos 3D!

Criando um projeto de modelagem 3D

Vamos criar um aplicativo que recupera um ativo Poly específico quando o aplicativo é iniciado pela primeira vez e exibe esse ativo no modo de tela cheia, a pedido do usuário.

Para nos ajudar a recuperar esse recurso, usarei o Fuel, uma biblioteca de rede HTTP para Kotlin e Android. Comece criando um novo projeto com as configurações de sua escolha, mas quando solicitado, escolha "Incluir suporte Kotlin".

Todas as chamadas feitas para a API Poly devem incluir uma chave de API, usada para identificar seu aplicativo e impor limites de uso. Durante o desenvolvimento e o teste, você costuma usar uma chave de API irrestrita, mas se planeja lançar este aplicativo, deve usar uma chave de API restrita ao Android.

Para criar uma chave restrita, você precisa conhecer o certificado de assinatura SHA-1 do seu projeto. Portanto, vamos obter essas informações agora:

Selecione a guia "Gradle" do Android Studio (onde o cursor está posicionado na captura de tela a seguir). Isso abre um painel "Projetos Gradle".

No painel "Gradle projects", clique duas vezes para expandir a "raiz" do seu projeto e selecione "Tasks> Android> Signing Report". Isso abre um novo painel na parte inferior da janela do Android Studio.
Selecione o botão ‘Alternar execuções de tarefas / modo de texto” (onde o cursor está posicionado na captura de tela a seguir).

O painel “Executar” agora será atualizado para exibir muitas informações sobre o seu projeto, incluindo a impressão digital SHA-1.

Crie uma conta do Google Cloud Platform

Para adquirir a chave de API necessária, você precisará de uma conta do Google Cloud Platform (GPC).

Se você não possui uma conta, pode se inscrever para uma avaliação gratuita de 12 meses, acessando a página Experimentar a Plataforma na Nuvem gratuitamente e seguindo as instruções. Observe que é necessário um cartão de crédito ou débito, mas, de acordo com a página de Perguntas frequentes, isso é usado apenas para verificar sua identidade e "você não será cobrado ou cobrado durante o teste gratuito".

Obtenha sua chave da API Poly

Depois de se inscrever, você pode ativar a API Poly e criar sua chave:

Vá para o console do GCP.
Selecione o ícone alinhado no canto superior esquerdo e escolha "APIs e serviços> Painel".
Selecione "Ativar APIs e serviços".
No menu à esquerda, escolha "Outro".
Selecione o cartão "Poly API".
Clique no botão "Ativar".
Após alguns instantes, você será direcionado para uma nova tela. abra o menu lateral e escolha "APIs e serviços> Credenciais".

No pop-up subsequente, selecione "Restringir chave".
Atribua um nome distinto à sua chave.
Em "Restrições de aplicativos", selecione "Aplicativos Android".
Selecione "Adicionar nome do pacote e impressão digital".
Copie / cole a impressão digital SHA-1 do seu projeto no campo "Impressão digital do certificado de assinatura".
Digite o nome do pacote do seu projeto (ele aparece no manifesto e na parte superior de cada arquivo de classe).
Clique em "Salvar".

Agora você será direcionado para a tela "Credenciais" do seu projeto, que contém uma lista de todas as suas chaves de API, incluindo a chave de API habilitada para Poly que você acabou de criar.

Dependências do projeto: Extensões de combustível, P3D e Kotlin

Para recuperar e exibir os ativos da Poly, precisamos de uma ajuda de algumas bibliotecas adicionais:

Combustível. Atualmente, a Poly não possui um kit de ferramentas oficial para Android, portanto, você precisará trabalhar com a API diretamente usando sua interface REST. Para tornar esse processo mais simples, eu usarei a biblioteca de rede Fuel HTTP.
Processando para Android. Usarei o renderizador P3D desta biblioteca para exibir o ativo Poly.

Abra o arquivo build.gradle do seu projeto e adicione essas duas bibliotecas como dependências do projeto:

dependências {implementação fileTree (inclui:, dir: libs) implementação "org.jetbrains.kotlin: kotlin-stdlib-jre7: $ kotlin_version" implementação com.android.support:appcompat-v7:27.1.1 // Adicione a biblioteca Fuel / / implementação com.github.kittinunf.fuel: fuel-android: 1.13.0 // Adicione o mecanismo de processamento para Android // implementação org.p5android: processing-core: 4.0.1}

Para tornar nosso código mais conciso, também utilizarei as extensões Kotlin para Android, então vamos adicionar este plug-in enquanto temos o arquivo build.gradle aberto:

aplique o plugin: kotlin-android-extensions

Por fim, como estamos recuperando o ativo da Internet, nosso aplicativo precisa da permissão da Internet. Abra seu manifesto e adicione o seguinte:

Adicionando sua chave de API

Sempre que nosso aplicativo solicita um ativo da Poly, ele precisa incluir uma chave de API válida. Estou usando texto de espaço reservado, mas você devo substitua esse espaço reservado por sua própria chave de API, se o aplicativo funcionar.

Também estou adicionando uma verificação para que o aplicativo exiba um aviso se você esquecer de substituir o texto "INSERIR A SUA API-CHAVE":

import android.os.Bundle import android.support.v7.app.AppCompatActivity classe MainActivity: AppCompatActivity () {objeto complementar {const val APIKey = "INSERT-YOUR-API-KEY"} substitui a diversão onCreate (savedInstanceState: Bundle?) { super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) // Se a chave da API começar com "INSERT" ... // if (APIKey.startsWith ("INSERT")) {//, exibir o seguinte brinde… .// Toast.makeText (este, "Você não atualizou sua chave de API", Toast.LENGTH_SHORT) .show ()} else {... ... ...

Recuperando o ativo

Você pode escolher qualquer ativo no site do Google Poly, mas eu usarei este modelo do planeta Terra.

Você recupera um ativo usando seu ID, que aparece no final da barra de URL (destacado na captura de tela anterior). Combinamos esse ID do ativo com o host da API Poly, que é "https://poly.googleapis.com/v1".

Em seguida, precisamos fazer uma solicitação GET para o URL do ativo, usando o método httpGet (). Também estou especificando que o tipo de resposta deve ser JSON:

O ativo pode ter vários formatos, como OBJ, GLTF e FBX. Precisamos determinar que o ativo está no formato OBJ.

Nesta etapa, também estou recuperando o nome e o URL de todos os arquivos que precisamos baixar,
incluindo o arquivo principal do recurso ("raiz"), além de qualquer arquivo de material e textura associado ("recursos").

Se o nosso aplicativo não conseguir recuperar o ativo corretamente, ele exibirá um brinde informando o usuário.

importar android.content.Intent importar android.os.Bundle importar android.support.v7.app.AppCompatActivity importar android.widget.Toast importar com.github.kittinunf.fuel.android.extension.responseJson importar com.github.kittinunf.fuel .httpDownload import com.github.kittinunf.fuel.httpObter importação kotlinx.android.synthetic.main.activity_main. * import java.io.File classe MainActivity: AppCompatActivity () {objeto complementar {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} substitui a diversão onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (este, "Você não atualizou sua chave de API", Toast.LENGTH_SHORT) .show ()} else {// Faça uma solicitação GET para a URL do ativo // assetURL. httpGet (listOf ("chave" para APIKey)). responseJson {request, response, result -> // Faça algo com a resposta // result.fold ({val asset = it.obj () var objectURL: String? = null var materialLibraryName: String? = null var materialLibraryURL: String? = null // Verifique o formato do ativo, usando a matriz "formatos" // val assetFormats = asset.getJSONArray ("Formatos") // Faz um loop em todos os formatos // de (i em 0 até assetFormats.length ()) val currentFormat = assetFormats.getJSONObject (i) // Use formatType para identificar o tipo de formato deste recurso. Se o formato for OBJ… .// if (currentFormat.getString ("formatType") == "OBJ") {//... então recupere o arquivo 'root' deste recurso, ou seja, o arquivo OBJ // objectURL = currentFormat. getJSONObject ("root") .getString ("url") // Recupera todas as dependências do arquivo raiz // materialLibraryName = currentFormat.getJSONArray ("resources") .getJSONObject (0) .getString ("relatedPath") materialLibraryURL = currentFormat.getJSONArray ("recursos") .getJSONObject (0) .getString ("url") quebra}} objectURL !!. httpDownload (). destination {_, _ -> Arquivo (filesDir, "globeAsset.obj")} .response {_ , _, result -> result.fold ({}, {// Se você não conseguir localizar ou baixar o arquivo OBJ, exiba um erro // Toast.makeText (este, "Não foi possível baixar o recurso", Toast.LENGTH_SHORT ) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> Arquivo (filesDir, materialLibraryName)} .resposta {_, _, result -> result.fold ({}, {Toast. makeText (isso, "Não foi possível baixar o recurso", Toast.LENGTH_SHORT) .show ()})}}, { Toast.makeText (isso, "Não foi possível baixar o recurso", Toast.LENGTH_SHORT) .show ()})}}}

Nesse momento, se você instalar o projeto no seu smartphone ou tablet Android ou no dispositivo virtual Android (AVD), o recurso será baixado com êxito, mas o aplicativo não o exibirá. Vamos consertar isso agora!

Criando uma segunda tela: Adicionando navegação

Como exibiremos o ativo no modo de tela cheia, atualize nosso arquivo main_activity.xml para incluir um botão que, quando pressionado, iniciará a atividade em tela cheia.

Agora vamos adicionar o onClickListener ao final do arquivo MainActivity.kt:

importar android.content.Intent importar android.os.Bundle importar android.support.v7.app.AppCompatActivity importar android.widget.Toast importar com.github.kittinunf.fuel.android.extension.responseJson importar com.github.kittinunf.fuel .httpDownload import com.github.kittinunf.fuel.httpObter importação kotlinx.android.synthetic.main.activity_main. * import java.io.File classe MainActivity: AppCompatActivity () {objeto complementar {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} substitui a diversão onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (este, "Você não atualizou sua chave de API", Toast.LENGTH_SHORT) .show ()} else {assetURL.httpGet (listOf ("key" to APIKey)). responseJson {solicitação, resposta, resultado -> resultado.fold ({val asset = it.obj () var objectURL: String? = nulo var materialLibraryName: String? = nulo var materialLibraryURL: Str ing? = valor nulo assetFormats = asset.getJSONArray ("formatos") para (i em 0 até assetFormats.length ()) {val currentFormat = assetFormats.getJSONObject (i) if (currentFormat.getString ("formatType") == "OBJ" ) {objectURL = currentFormat.getJSONObject ("root") .getString ("url") materialLibraryName = currentFormat.getJSONArray ("resources") .getJSONObject (0) .getString ("relatedPath") materialLibraryURL = currentFormat.getJSONArray ("resources") ) .getJSONObject (0) .getString ("url") break}} objectURL !!. httpDownload (). destination {_, _ -> File (filesDir, "globeAsset.obj")} .response {_, _, result -> result.fold ({}, {Toast.makeText (este, "Não foi possível baixar o recurso", Toast.LENGTH_SHORT) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> Arquivo (filesDir, materialLibraryName)} .resposta {_, _, result -> result.fold ({}, {Toast.makeText (isto, "Não é possível baixar o recurso", Toast.LENGTH_SHORT) .show ()})}}, {Toast.makeText (isso, "Não foi possível baixar o recurso", Toast.LENGTH_SHORT) .sh ow ()})} // Implementa um botão // displayButton.setOnClickListener {val intent = Intent (este, SecondActivity :: class.java) startActivity (intent); }}}

Construindo uma tela 3D

Agora, vamos criar a atividade em que exibiremos nosso recurso no modo de tela cheia:

Clique com a tecla Control pressionada no arquivo MainActivity.kt do seu projeto e selecione "Novo> Arquivo / classe Kotlin".
Abra o menu suspenso "Tipo" e selecione "Classe".
Dê a esta classe o nome "SecondActivity" e clique em "OK".

Para desenhar um objeto 3D, precisamos de uma tela 3D! Vou usar o renderizador P3D da biblioteca do Processing for Android, que significa estender a classe PApplet, substituir o método settings () e passar o P3D como argumento para o método fullScreen (). Também precisamos criar uma propriedade que represente o ativo Poly como um objeto PShape.

diversão privada displayAsset () {val canvas3D = objeto: PApplet () {var polyAsset: PShape? = substituição nula configurações divertidas () {tela cheia (PConstants.P3D)}

Em seguida, precisamos inicializar o objeto PShape, substituindo o método setup (), chamando o método loadShape () e passando o caminho absoluto do arquivo .obj:

substitua a configuração divertida () {polyAsset = loadShape (Arquivo (filesDir, "globeAsset.obj"). absolutePath)}

Desenho na tela do P3D

Para desenhar nessa tela 3D, precisamos substituir o método draw ():

substituir diversão draw () {background (0) shape (polyAsset)}}

Por padrão, muitos dos ativos recuperados da API Poly estão no lado menor; portanto, se você executar esse código agora, poderá nem ver o ativo, dependendo da configuração da tela. Ao criar cenas em 3D, você normalmente cria uma câmera personalizada para que o usuário possa explorar a cena e visualizar seus recursos em 3D a partir de 360 graus. No entanto, isso está além do escopo deste artigo, portanto alterarei o tamanho e a posição do ativo manualmente, para garantir que ele se encaixe confortavelmente na tela.

Você pode aumentar o tamanho do ativo, passando um valor negativo para o método scale ():

escala (-10f)

Você pode ajustar a posição do ativo no espaço 3D virtual usando o método translate () e as seguintes coordenadas:

X. Posiciona o ativo ao longo do eixo horizontal.
Y. Posiciona o ativo ao longo do eixo vertical.
Z. Este é o eixo "profundidade / altura", que transforma um objeto 2D em um objeto 3D. Valores positivos criam a impressão de que o objeto está vindo em sua direção e valores negativos criam a impressão de que o objeto está se afastando de você.

Observe que as transformações são cumulativas; portanto, tudo o que acontece após a função acumula o efeito.

Estou usando o seguinte:

traduzir (-50f, -100f, 10f)

Aqui está o código completo:

substituir fun draw () {background (0) escala (-10f) translate (-50f, -100f) // Desenhe o ativo chamando o método shape () // shape (polyAsset)}}

Em seguida, precisamos criar o arquivo de layout correspondente, onde adicionaremos a tela 3D como um widget FrameLayout:

Clique com a tecla Control pressionada na pasta "res> layout" do seu projeto.
Selecione "Arquivo de recurso de layout".
Dê a esse arquivo o nome "activity_second" e clique em "OK".

Agora que temos nosso FrameLayout "asset_view", precisamos informar nossa SecondActivity sobre isso! Volte para o arquivo SecondActivity.kt, crie uma nova instância do PFragment e aponte-a na direção do nosso widget "asset_view":

importar android.os.Bundle importar android.support.v7.app.AppCompatActivity importar kotlinx.android.synthetic.main.activity_second. * importar processing.android.PFragment importar processing.core.PApplet import processing.core.PConstants import processing.core.PA .PShape import java.io.File classe SecondActivity: AppCompatActivity () {substitui diversão onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_second) displayAsset ()} diversão privada displayAsset () {val canvas3D = objeto: PApplet () {var polyAsset: PShape? = substituir configurações divertidas nulas () {tela cheia (PConstants.P3D)} substituir configuração divertida () {polyAsset = loadShape (Arquivo (filesDir, "globeAsset.obj"). absolutePath)} substituir diversão fun () {escala de fundo (0) (-10f) converte (-50f, -100f) forma (polyAsset)}} // Adicione o seguinte // val assetView = PFragment (canvas3D) assetView.setView (asset_view, this)}}

A etapa final é adicionar a SecondActivity ao seu manifesto:

// Adicione o seguinte //

Testando seu projeto

Agora estamos prontos para testar o projeto finalizado! Instale-o no seu dispositivo Android ou AVD e verifique se você possui uma conexão ativa com a Internet. Assim que o aplicativo for iniciado, ele fará o download do ativo e você poderá visualizá-lo pressionando o botão "Exibir ativo".

Você pode baixar este projeto completo no GitHub.

Empacotando

Neste artigo, vimos como usar a API Poly para recuperar um ativo 3D em tempo de execução e como exibi-lo usando a biblioteca Processing for Android. Você acha que a API API tem potencial para tornar o desenvolvimento de RV e AR acessível a mais pessoas? Deixe-nos saber nos comentários abaixo!

Relacionado

Google trará aplicativos AR para "centenas de milhões" de dispositivos Android em 2018
O Google ensinará sobre IA e aprendizado de máquina gratuitamente
15 melhores jogos de realidade virtual para o Google Cardboard
10 melhores aplicativos de VR para o Google Cardboard
O que é o Google Fuchsia? Este é o novo Android?
O que é o Google Duplex? - recursos, data de lançamento e muito mais
Como criar um aplicativo de realidade virtual para Android em apenas 7 minutos
Auscultadores móveis VR - quais são as suas melhores opções?