API Poly: recupero di risorse 3D per le tue app Android VR e AR

Video: Let’s Make an Augmented Reality Web Browser (Unity AR)

Contenuto

Visualizzazione di risorse 3D con Poly
Creazione di un progetto di modellazione 3D
Crea un account Google Cloud Platform
Ottieni la tua chiave Poly API
Dipendenze del progetto: estensioni Fuel, P3D e Kotlin
Aggiunta della chiave API
Recupero della risorsa
Creazione di una seconda schermata: aggiunta della navigazione
Costruire una tela 3D
Disegno sulla tela di P3D
Testare il tuo progetto
Avvolgendo
Relazionato

Hai una grande idea per un'app mobile di Realtà Virtuale (VR) o Realtà Aumentata (AR), ma non hai idea di come dare vita alla tua visione?

A meno che tu non sia uno sviluppatore Android che sia anche un artista 3D esperto, quindi creare tutte le risorse necessarie per offrire un'esperienza coinvolgente a 360 gradi, può essere un processo scoraggiante.

Solo perché non hai il tempo, le risorse o l'esperienza necessarie per creare modelli 3D, non lo fa significa che non puoi costruire una fantastica app mobile VR o AR! Esiste una vasta gamma di risorse 3D disponibili gratuitamente sul World Wide Web, oltre a tutte le API, i framework e le librerie di cui hai bisogno per scaricare e rendere queste risorse nelle tue applicazioni Android.

Leggi il prossimo: Ora puoi visitare qualsiasi sito Web utilizzando Daydream VR. Anche quello.

In questo articolo, esamineremo Poly, un repository online e un'API che mette a portata di mano migliaia di risorse 3D. Alla fine di questo articolo, avrai creato un'app che recupera un asset Poly 3D in fase di esecuzione e quindi lo esegue il rendering utilizzando la popolare libreria Processing for Android.

Visualizzazione di risorse 3D con Poly

Se ti sei mai dilettato nello sviluppo di Unity, il repository Poly è simile a Unity Asset Store, tranne per il fatto che tutto in Poly è gratuito!

Molti dei modelli 3D di Poly sono pubblicati sotto la licenza Creative Commons, quindi sei libero di utilizzare, modificare e remixare queste risorse, a condizione che tu dia al creatore il credito appropriato.

Tutti i modelli 3D di Poly sono progettati per essere compatibili con le piattaforme VR e AR di Google, come Daydream e ARCore, ma puoi usarli ovunque e come vuoi - potenzialmente, potresti persino usarli con l'ARKit di Apple!

Quando si tratta di recuperare e visualizzare risorse Poly, sono disponibili due opzioni. In primo luogo, puoi scaricare le risorse sul tuo computer e quindi importarle in Android Studio, in modo che vengano spedite con la tua applicazione e contribuiscano alla sua dimensione APK, oppure puoi recuperare queste risorse in fase di esecuzione utilizzando l'API Poly.

La Poly API multipiattaforma basata su REST offre accesso programmatico e di sola lettura alla vasta collezione di modelli 3D di Poly. Questo è più complicato del raggruppamento di risorse con il tuo APK, ma ci sono diversi vantaggi nel recupero di risorse Poly in fase di esecuzione, in particolare che aiuta a tenere sotto controllo le dimensioni dell'APK, il che può influire sul numero di persone che scaricano l'applicazione.

Puoi anche utilizzare l'API Poly per offrire agli utenti una scelta più ampia, ad esempio se stai sviluppando un gioco per dispositivi mobili, puoi consentire ai tuoi utenti di scegliere tra una vasta gamma di modelli di personaggi.

Dal momento che sei libero di modificare i modelli Poly, puoi anche consentire ai tuoi utenti di modificare il personaggio scelto, ad esempio alterando il colore dei capelli o degli occhi o combinandolo con altri beni Poly, come armi e armature diverse. In questo modo, l'API Poly può aiutarti a fornire una vasta gamma di risorse 3D, con un ampio margine per personalizzare l'esperienza e tutto per un lavoro relativamente ridotto. I tuoi utenti saranno convinti che hai trascorso una tonnellata di tempo, realizzando meticolosamente tutti questi modelli 3D!

Creazione di un progetto di modellazione 3D

Creeremo un'applicazione che recupera un determinato asset Poly al primo avvio dell'applicazione, quindi visualizza tale asset in modalità a schermo intero, su richiesta dell'utente.

Per aiutarci a recuperare questa risorsa, userò Fuel, che è una libreria di rete HTTP per Kotlin e Android. Inizia creando un nuovo progetto con le impostazioni che preferisci, ma quando ti viene richiesto scegli "Includi supporto Kotlin".

Tutte le chiamate effettuate all'API Poly devono includere una chiave API, che viene utilizzata per identificare l'app e applicare limiti di utilizzo. Durante lo sviluppo e i test, utilizzerai spesso una chiave API senza restrizioni, ma se hai intenzione di rilasciare questa app, devi utilizzare una chiave API con restrizioni Android.

Per creare una chiave riservata, devi conoscere il certificato di firma SHA-1 del tuo progetto, quindi otteniamo ora queste informazioni:

Seleziona la scheda "Gradle" di Android Studio (in cui è posizionato il cursore nella schermata seguente). Si apre un pannello "Progetti di livello".

Nel pannello "Progetti pendenza", fai doppio clic per espandere la "radice" del tuo progetto, quindi seleziona "Attività> Android> Rapporto firma". Si apre un nuovo pannello nella parte inferiore della finestra di Android Studio.
Seleziona il pulsante "Attiva esecuzione / modalità testo" (dove si trova il cursore nella schermata seguente).

Il pannello "Esegui" ora verrà aggiornato per visualizzare molte informazioni sul progetto, inclusa l'impronta digitale SHA-1.

Crea un account Google Cloud Platform

Per acquisire la chiave API necessaria, devi disporre di un account Google Cloud Platform (GPC).

Se non disponi di un account, puoi registrarti per una prova gratuita di 12 mesi accedendo alla pagina gratuita di Try Cloud Platform e seguendo le istruzioni. Tieni presente che è richiesta una carta di credito o di debito, ma in base alla pagina Domande frequenti, questa viene semplicemente utilizzata per verificare la tua identità e "non ti verranno addebitati o fatturati durante la prova gratuita".

Ottieni la tua chiave Poly API

Una volta effettuata la registrazione, puoi abilitare l'API Poly e creare la tua chiave:

Vai alla console GCP.
Seleziona l'icona allineata nell'angolo in alto a sinistra e scegli "API e servizi> Dashboard".
Seleziona "Abilita API e servizi".
Nel menu a sinistra, seleziona "Altro".
Seleziona la scheda "Poly API".
Fai clic sul pulsante "Abilita".
Dopo alcuni istanti, verrai portato a una nuova schermata; apri il menu laterale e scegli "API e servizi> Credenziali".

Nel popup successivo, selezionare "Limita chiave".
Dai alla tua chiave un nome distintivo.
In "Restrizioni applicazione", seleziona "App Android".
Seleziona "Aggiungi nome pacchetto e impronta digitale".
Copia / incolla l'impronta digitale SHA-1 del tuo progetto nel campo "Impronta digitale del certificato di firma".
Inserisci il nome del pacchetto del tuo progetto (appare nel tuo manifest e nella parte superiore di ogni file di classe).
Fai clic su "Salva".

Ora verrai indirizzato alla schermata "Credenziali" del tuo progetto, che contiene un elenco di tutte le tue chiavi API, inclusa la chiave API abilitata per Poly che hai appena creato.

Dipendenze del progetto: estensioni Fuel, P3D e Kotlin

Per recuperare e visualizzare risorse Poly, avremo bisogno di una mano da alcune librerie aggiuntive:

Carburante. Poly attualmente non ha un toolkit Android ufficiale, quindi dovrai lavorare direttamente con l'API usando la sua interfaccia REST. Per semplificare questo processo, userò la libreria di rete Fuel HTTP.
Elaborazione per Android. Userò il renderer P3D di questa libreria per visualizzare l'asset Poly.

Apri il file build.gradle del tuo progetto e aggiungi queste due librerie come dipendenze del progetto:

dipendenze {implementazione fileTree (include:, dir: libs) implementazione "org.jetbrains.kotlin: kotlin-stdlib-jre7: $ kotlin_version" implementazione com.android.support:appcompat-v7:27.1.1 // Aggiungi la libreria Fuel / / Implementazione com.github.kittinunf.fuel: fuel-android: 1.13.0 // Aggiungi il motore di elaborazione per Android // implementazione org.p5android: processing-core: 4.0.1}

Per rendere il nostro codice più conciso, userò anche le estensioni di Kotlin per Android, quindi aggiungiamo questo plugin mentre abbiamo aperto il file build.gradle:

applica plugin: kotlin-android-extensions

Infine, poiché stiamo recuperando la risorsa da Internet, la nostra app necessita dell'autorizzazione Internet. Apri il tuo manifest e aggiungi quanto segue:

Aggiunta della chiave API

Ogni volta che la nostra app richiede un asset da Poly, deve includere una chiave API valida. Sto usando il testo segnaposto, ma tu dovere sostituisci questo segnaposto con la tua chiave API se l'applicazione funzionerà mai.

Sto anche aggiungendo un segno di spunta, in modo che l'applicazione visualizzi un avviso se si dimentica di sostituire il testo "INSERT-YOUR-API-KEY":

import android.os.Bundle import android.support.v7.app.AppCompatActivity class MainActivity: AppCompatActivity () {object companion {const val APIKey = "INSERT-YOUR-API-KEY"} sovrascrivi divertimento onCreate (savedInstanceState: Bundle?) { super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) // Se la chiave API inizia con "INSERT" ... // if (APIKey.startsWith ("INSERT")) {// quindi visualizza il seguente toast ... .// Toast.makeText (questo, "Non hai aggiornato la tua chiave API", Toast.LENGTH_SHORT) .show ()} else {... ... ...

Recupero della risorsa

Puoi scegliere qualsiasi risorsa sul sito di Google Poly, ma userò questo modello del pianeta Terra.

Puoi recuperare una risorsa usando il suo ID, che appare alla fine della lumaca URL (evidenziata nella schermata precedente). Combiniamo questo ID risorsa con l'host Poly API, che è "https://poly.googleapis.com/v1".

Successivamente, dobbiamo effettuare una richiesta GET all'URL dell'asset, utilizzando il metodo httpGet (). Sto anche specificando che il tipo di risposta deve essere JSON:

L'asset potrebbe avere diversi formati, come OBJ, GLTF e FBX. Dobbiamo determinare che la risorsa è nel formato OBJ.

In questo passaggio, sto anche recuperando il nome e l'URL di tutti i file che dobbiamo scaricare,
incluso il file principale dell'asset ("root"), oltre a qualsiasi file di materiale e texture associato ("risorse").

Se la nostra applicazione non è in grado di recuperare correttamente la risorsa, verrà visualizzato un brindisi che informa l'utente.

import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.widget.Toast import com.github.kittinunf.fuel.android.extension.responseJson import com.github.kittinunf.fuel .httpScarica import com.github.kittinunf.fuel.httpOttieni import kotlinx.android.synthetic.main.activity_main. * import java.io.File class MainActivity: AppCompatActivity () {oggetto complementare {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} ignora il divertimento suCreate (saveInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (questo, "Non hai aggiornato la chiave API", Toast.LENGTH_SHORT) .show ()} else {// Invia una richiesta GET all'URL della risorsa // assetURL. httpGet (listOf ("chiave" di APIKey)). responseJson {richiesta, risposta, risultato -> // Fai qualcosa con la risposta // result.fold ({val asset = it.obj () var objectURL: String? = null var materialLibraryName: String? = null var materialLibraryURL: String? = null // Controlla il formato dell'asset, usando l'array “formati” // val assetFormats = asset.getJSONArray ("formati") // Scorri tutti i formati // per (i in 0 fino a assetFormats.length ()) { val currentFormat = assetFormats.getJSONObject (i) // Usa formatType per identificare il tipo di formato di questa risorsa. Se il formato è OBJ… .// if (currentFormat.getString ("formatType") == "OBJ") {//... quindi recupera il file 'root' di questa risorsa, ovvero il file OBJ // objectURL = currentFormat. getJSONObject ("root") .getString ("url") // Recupera tutte le dipendenze del file root // materialLibraryName = currentFormat.getJSONArray ("resources") .getJSONObject (0) .getString ("relativePath") materialLibraryURL = currentFormat.JSONAr ("risorse") .getJSONObject (0) .getString ("url") break}} objectURL !!. httpDownload (). destination {_, _ -> File (filesDir, "globeAsset.obj")} .response {_ , _, risultato -> result.fold ({}, {// Se non riesci a individuare o scaricare il file OBJ, visualizza un errore // Toast.makeText (questo, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT ) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> File (filesDir, materialLibraryName)} .response {_, _, result -> result.fold ({}, {Toast. makeText (questo, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT) .show ()})}}, { Toast.makeText (questo, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT) .show ()})}}}

A questo punto, se installi il progetto sul tuo smartphone o tablet Android o dispositivo virtuale Android (AVD), la risorsa verrà scaricata correttamente, ma l'app non la visualizzerà effettivamente. Risolviamolo ora!

Creazione di una seconda schermata: aggiunta della navigazione

Visualizzeremo la risorsa in modalità a schermo intero, quindi aggiorniamo il nostro file main_activity.xml per includere un pulsante che, se toccato, avvierà l'attività a schermo intero.

Ora aggiungiamo onClickListener alla fine del file MainActivity.kt:

import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.widget.Toast import com.github.kittinunf.fuel.android.extension.responseJson import com.github.kittinunf.fuel .httpScarica import com.github.kittinunf.fuel.httpOttieni import kotlinx.android.synthetic.main.activity_main. * import java.io.File class MainActivity: AppCompatActivity () {oggetto complementare {const val APIKey = "INSERT-YOUR-API -KEY "val assetURL =" https://poly.googleapis.com/v1/assets/94XG1XUy10q "} ignora il divertimento suCreate (saveInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) if ( APIKey.startsWith ("INSERT")) {Toast.makeText (questo, "Non hai aggiornato la tua chiave API", Toast.LENGTH_SHORT) .show ()} else {assetURL.httpGet (listOf ("key" to APIKey)). responseJson {richiesta, risposta, risultato -> result.fold ({val asset = it.obj () var objectURL: String? = null var materialLibraryName: String? = null var materialLibraryURL: Str ing? = null val assetFormats = asset.getJSONArray ("formati") per (i in 0 fino a 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 ("relativePath") materialLibraryURL = currentFormat.getJSONArray ( ) .getJSONObject (0) .getString ("url") break}} objectURL !!. httpDownload (). destination {_, _ -> File (filesDir, "globeAsset.obj")} .response {_, _, risultato -> result.fold ({}, {Toast.makeText (questo, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT) .show ()})} materialLibraryURL !!. httpDownload (). destination {_, _ -> File (filesDir, materialLibraryName)} .response {_, _, result -> result.fold ({}, {Toast.makeText (this, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT) .show ()})}}, {Toast.makeText (this, "Impossibile scaricare la risorsa", Toast.LENGTH_SHORT) .sh ow ()})} // Implementa un pulsante // displayButton.setOnClickListener {val intent = Intent (this, SecondActivity :: class.java) startActivity (intent); }}}

Costruire una tela 3D

Ora creiamo l'attività in cui mostreremo la nostra risorsa in modalità schermo intero:

Fai clic tenendo premuto il tasto Ctrl sul file MainActivity.kt del tuo progetto e seleziona "Nuovo> File / classe di Kotlin".
Apri il menu a discesa "Tipo" e seleziona "Classe".
Dai a questa classe il nome "SecondActivity", quindi fai clic su "OK".

Per disegnare un oggetto 3D, abbiamo bisogno di una tela 3D! Userò il renderer P3D della libreria Processing per Android, il che significa estendere la classe PApplet, sovrascrivere il metodo settings () e quindi passare P3D come argomento al metodo fullScreen (). Dobbiamo anche creare una proprietà che rappresenti l'asset Poly come oggetto PShape.

private fun displayAsset () {val canvas3D = object: PApplet () {var polyAsset: PShape? = null override fun settings () {fullScreen (PConstants.P3D)}

Successivamente, dobbiamo inizializzare l'oggetto PShape, sovrascrivendo il metodo setup (), chiamando il metodo loadShape () e passando il percorso assoluto del file .obj:

override fun setup () {polyAsset = loadShape (File (filesDir, "globeAsset.obj"). absolutePath)}

Disegno sulla tela di P3D

Per disegnare su questa tela 3D, abbiamo bisogno di sovrascrivere il metodo draw ():

override fun draw () {background (0) shape (polyAsset)}}

Per impostazione predefinita, molte delle risorse recuperate dall'API Poly si trovano sul lato più piccolo, quindi se si esegue questo codice ora, potrebbe non essere possibile visualizzare la risorsa, a seconda della configurazione dello schermo. Quando crei scene 3D, in genere creerai una videocamera personalizzata in modo che l'utente possa esplorare la scena e visualizzare le risorse 3D da 360 gradi. Tuttavia, questo va oltre lo scopo di questo articolo, quindi cambierò manualmente la dimensione e la posizione della risorsa, per assicurarmi che si adatti comodamente allo schermo.

Puoi aumentare le dimensioni dell'asset, passando un valore negativo al metodo scale ():

scala (-10f)

Puoi regolare la posizione dell'asset nello spazio 3D virtuale utilizzando il metodo translate () e le seguenti coordinate:

X. Posiziona l'asset lungo l'asse orizzontale.
Y. Posiziona l'asset lungo l'asse verticale.
Z. Questo è l'asse "profondità / altezza", che trasforma un oggetto 2D in un oggetto 3D. I valori positivi creano l'impressione che l'oggetto venga verso di te, mentre i valori negativi creano l'impressione che l'oggetto si stia allontanando da te.

Nota che le trasformazioni sono cumulative, quindi tutto ciò che accade dopo la funzione accumula l'effetto.

Sto usando il seguente:

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

Ecco il codice completo:

override fun draw () {background (0) scale (-10f) translate (-50f, -100f) // Disegna la risorsa chiamando il metodo shape () // shape (polyAsset)}}

Successivamente, dobbiamo creare il file di layout corrispondente, in cui aggiungeremo l'area di disegno 3D come widget FrameLayout:

Fai clic tenendo premuto il tasto Ctrl sulla cartella "res> layout" del tuo progetto.
Seleziona "File di risorse layout".
Assegna a questo file il nome "activity_second", quindi fai clic su "OK".

Ora abbiamo il nostro FrameLayout "asset_view", dobbiamo far sapere a SecondActivity! Torna al file SecondActivity.kt, crea una nuova istanza di PFragment e puntala nella direzione del nostro widget "asset_view":

import android.os.Bundle import android.support.v7.app.AppCompatActivity import kotlinx.android.synthetic.main.activity_second. * import processing.android.PFragment import processing.core.PApplet import processing.core.PConstants import processing.core .PShape import java.io.File class SecondActivity: AppCompatActivity () {override fun onCreate (savedInstanceState: Bundle?) {Super.onCreate (savedInstanceState) setContentView (R.layout.activity_second) displayAsset ()} private fun displayAsset () {val canvas3D = object: PApplet () {var polyAsset: PShape? = null override fun settings () {fullScreen (PConstants.P3D)} override fun setup () {polyAsset = loadShape (File (filesDir, "globeAsset.obj"). absolutePath)} override fun draw () {background (0) scale (-10f) translate (-50f, -100f) shape (polyAsset)}} // Aggiungi il seguente // val assetView = PFragment (canvas3D) assetView.setView (asset_view, this)}}

Il passaggio finale è l'aggiunta di SecondActivity al tuo manifest:

// Aggiungi il seguente //

Testare il tuo progetto

Ora siamo pronti per testare il progetto finito! Installalo sul tuo dispositivo Android o AVD e assicurati di avere una connessione Internet attiva. Non appena l'applicazione viene scaricata, la risorsa viene scaricata e puoi quindi visualizzarla toccando il pulsante "Visualizza risorsa".

Puoi scaricare questo progetto completo da GitHub.

Avvolgendo

In questo articolo, abbiamo esaminato come utilizzare Poly API per recuperare un asset 3D in fase di esecuzione e come visualizzare tale asset utilizzando la libreria Elaborazione per Android. Pensi che l'API Poly abbia il potenziale per rendere lo sviluppo di VR e AR accessibile a più persone? Fateci sapere nei commenti qui sotto!

Relazionato

Google porterà app AR a "centinaia di milioni" di dispositivi Android nel 2018
Google ti insegnerà gratuitamente l'IA e l'apprendimento automatico
15 migliori giochi VR per Google Cardboard
10 migliori app VR per Google Cardboard
Che cos'è Google Fuchsia? È questo il nuovo Android?
Che cos'è Google Duplex? - caratteristiche, data di rilascio e altro
Come creare un'app VR per Android in soli 7 minuti
Cuffie VR per dispositivi mobili: quali sono le tue migliori opzioni?