[Guida] Creare oggetti e layer 3d per il Layar Reality Browser

by

Quest’oggi vi guiderò alla pubblicazione di uno strato/layer su Layar Reality Browser.

Creare un oggetto 3D

In questa guida non mostrerò come creare oggetti 3d, però ecco alcuni consigli e linee guida da seguire:

  • Non superare i 5000 poligoni
  • Utilizzare textures piccole e con formato multiplo di 2 (ad esempio 128×128, 256×256, 512×512, 1024×1024; e non devono essere non per forza quadrate, come: 128×512)
  • Esportate gli oggetti dal centro del vostro editor 3d (Global 0,0,0)
  • Esportate in formato .obj mantenendo nell’export i materiali e l’UVmapping (Gli oggetti dunque possono essere creati con qualunque editor 3d che abbia l’exporter obj)
  • Copiate tutte le immagini utilizzate nel modello, nella stessa cartella dell’Obj, altrimenti il Layar 3D Model Converter non troverà le texture relative

Se non volete creare un modello potete scaricare dell’ottimo materiale dalla google 3d warehouse o da siti di oggetti 3d gratuiti come turbosquid

Layar 3D Model Converter

Recarsi alla pagina relativa del wiki Layar 3D Model Converter e scaricare il converter (trovate l’ultima versione al link http://site.layar.com/downloads/Layar3DModelConverter.jnlp)

Per importare un modello Obj, controllarlo, posizionarlo ed esportarlo in formato Layar, cioè .l3d vi rimando alla pagina del Layar 3D Model Converter dove c’è una guida  con immagini e step passo passo.

Aggiungere le tabelle al database

Questa, almeno per quello che mi riguarda, è la parte maggiormente ostica. Qui assumo che abbiate un vostro database sql configurato e funzionante (se ne può creare uno molto facilmente sul sito Altervista.org, con phpmyadmin già installato e tutto già configurato)

Aprite phpmyadmin, mysql o qualsiasi altro mezzo con il quale vi connettete al vostro db.

IMPORTANTE: Prima di proseguire, consultare l’UPDATE per la creazione corretta della tabella POI_Table: Link

Create la tabella POI_Table con la seguente query:

CREATE TABLE IF NOT EXISTS `POI_Table` (
 `id` varchar(255) NOT NULL,
 `attribution` varchar(150) default NULL,
 `title` varchar(150) NOT NULL,
 `lat` decimal(20,10) NOT NULL,
 `lon` decimal(20,10) NOT NULL,
 `imageURL` varchar(255) default NULL,
 `line4` varchar(150) default NULL,
 `line3` varchar(150) default NULL,
 `line2` varchar(150) default NULL,
 `type` int(11) default '0',
 `dimension` int(1) default '1',
 `alt` int(10) default NULL,
 `relativeAlt` int(10) default NULL,
 `distance` decimal(20,10) NOT NULL,
 `inFocus` tinyint(1) default '0',
 `doNotIndex` tinyint(1) default '0',
 `showSmallBiw` tinyint(1) default '1',
 `showBiwOnClick` tinyint(1) default '1',
 PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Create la tabella OBJECT_Table con la seguente query:

CREATE TABLE IF NOT EXISTS `OBJECT_Table` (
 `ID` int(10) NOT NULL auto_increment,
 `poiID` varchar(255) NOT NULL,
 `baseURL` varchar(255) NOT NULL,
 `full` varchar(255) NOT NULL,
 `reduced` varchar(255) default NULL,
 `icon` varchar(255) default NULL,
 `size` float(15,5) NOT NULL,
 PRIMARY KEY  (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

Un esempio di un oggetto nella tabella OBJECT_Table dentro phpmyadmin è:

Create la tabella TRANSFORM_Table con la seguente query:

CREATE TABLE IF NOT EXISTS `TRANSFORM_Table` (
 `ID` int(10) NOT NULL auto_increment,
 `poiID` varchar(255) NOT NULL,
 `rel` tinyint(1) default '0',
 `angle` decimal(5,2) default '0.00',
 `scale` decimal(12,2) NOT NULL default '1.00',
 PRIMARY KEY  (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ; 

Un esempio di un oggetto nella tabella TRANSFORM_Table dentro phpmyadmin è:

Creare un nuovo POI 3D

Per inserire un POI nella POI_Table , potete inserire tutti i campi manualmente, oppure utilizzare questa query base che ho copiato dal sito di Layar:

INSERT INTO `POI_Table`
(`id`, `attribution`, `title`, `lat`, `lon`, `imageURL`, `line4`, `line3`, `line2`, `type`, `dimension`, `alt`, `relativeAlt`, `distance`, `inFocus`, `doNotIndex`,                `showSmallBiw`, `showBiwOnClick`)
VALUES
('1', 'The Location of the Layar Office', 'The Layar Office', '52.3741180000', '4.9342500000', 'http://custom.layar.nl/Layar_banner_icon.png', '1019DW Amsterdam', 'distance:%distance%', 'Rietlandpark 301', 1, 1, NULL, NULL, '0.0000000000', 0, 0, 1, 1);

ed il POI appena creato diventerà:

Per personalizzare il vostro POI hotspot (con la vostra descrizione, il vostro nome) seguite le GETPOI-JSON-Response a questa pagina: http://layar.pbworks.com/w/page/28473525/GetPOIs-JSON%20Response

Per pubblicare un oggetto 3D, cambiamo il campo dimension della tabella da 1 a 3.

Sostituiamo poi le coordinate dove vogliamo piazzare il nostro POI prendendo Lat e Lon ad esempio da Google Maps.

Creare l’OBJECT ed il suo relativo TRANSFORM

Inserite una nuova entry nella tabella OBJECT_Table con parametri:

  • ID: vuoto
  • poiID: id del POI creato precedentemente, se è il vostro primo POI, probabilmente sarà 1
  • baseURL: url della directory dove caricherete il vostro file .l3d (es http://sparazza.altervista.org/)
  • full: nome del vostro file .l3d completo di estensione
  • reduced: vuoto
  • icon: vuoto
  • size: dimensione dell’oggetto (se avete usato il Layar 3d Model Converter avrete probabilmente questa informazione in un file .json salvato nella stessa directory del file .l3d)

Inserite ora una nuova entry nella tabella TRANSFORM_Table con parametri:

  • ID: vuoto
  • poiID: id del POI creato precedentemente, se è il vostro primo POI, probabilmente sarà 1
  • rel: vuoto
  • angle: angolo di rotazione dell’oggetto 3d (se avete usato il Layar 3d Model Converter avrete probabilmente questa informazione in un file .json salvato nella stessa directory del file .l3d)
  • scale: dimensione dell’oggetto 3d (se avete usato il Layar 3d Model Converter avrete probabilmente questa informazione in un file .json salvato nella stessa directory del file .l3d)

Editare il php per le funzioni di riconoscimento del POI

Scaricare il file presente a questo indirizzo: http://layar.pbworks.com/f/ThirdTutorial_code.zip

Questo file contiene l’esempio del wiki ufficiale, ma quello che ci interessa è il file .php contenuto al suo interno.
Una volta salvato apritelo con un editor di testo ed alle righe 380  circa trovate le informazioni per l’accesso al database: compilatelo con le informazioni per il vostro db, salvate e chiudete.

Caricare i file e creare il Layer

A questo punto caricate il layer (il file .l3d ed il file .php appena modificato) nel vostro spazio web, nella directory specificata precedentemente in baseURL.

Entrate nella sezione di pubblicazione layer del sito: http://www.layar.com/
(Se non avete un account da developer richiedetene uno)
Seguite infine l’how-to di creazione Layer che vi permetterà di mostrare il file tra i vostri Layer in testing.

Se mi sono dimenticato qualcosa o avete dubbi, lasciate pure un commento… intanto per ulteriori informazioni vi rimando alla lettura della documentazione ufficiale: Layar Developer Wiki

Inoltre consiglio vivamente, per “entrare nel meccanismo”, di guardare e seguire i tutorial partendo dal primo First Layar Tutorial – Create a simple layer

Tag: , , , , , , , , , ,

21 Risposte to “[Guida] Creare oggetti e layer 3d per il Layar Reality Browser”

  1. mario Says:

    Ciao grazie per questa preziosa prima guida che ho finalmente trovato sul web e che ora leggerò e studierò quasi come “testo sacro”.
    Tu sei riuscito a fare qualcosa di interessante e funzionante? mi sapresti dare qualhe altra indicazione proprio per non addetti ai lavori per iniziare a creare qualcosa da abbinare ai qr codes che mi piacciono moltissimo e di cui ho trovato un bel pò di documentazione anche per gestirne e crearne di dinamici.
    E’ un bellissimo mondo questo della realtà aumetata e mi piacerebbe riuscire ad apprendere qualcosa.
    Grazie di tutto in ogni caso

    • sparazza Says:

      Ho creato e gestisco uno strato su Layar che si chiama UniCinema, per segnalare sconti al cinema per studenti universitari a bologna.

      Oltre a ciò da me suggerito nella guida, ci sarebbero tante altre cose.
      Per ora il consiglio che posso dare è fare prove con oggetti 3d molto semplici e con texture molto piccole (128×128 o poco più). Per prendere familiarità con questo sistema di developing, l’unica è creare un proprio layer, anche di test (non è detto che uno debba pubblicarlo subito) e fare prove con quello.

      Se hai qualche buona idea per strati funzionali che ancora non sono su Layar, rispondi a questo post e potremmo crearli o potrei aiutarti nell’impresa.

      Per i QRCode non ti posso aiutare poichè non li ho ancora mai utilizzati attivamente (solo passivamente come link).

      Saluti
      Sparazza

      • RP Says:

        Ciao e complimenti per questo articolo.
        Ho un problema.. da Cinema4d esporto il modello ma non mi riconosce le texture nonostante io abbia rispettato tutte le caratteristiche richieste. Come fare, dove sbaglio?Ho provato sia con un modello nativo in c4d e sia con un modello esportato in c4d e, a sua volta, esportato sia in .dae e sia in .obj

      • sparazza Says:

        Ciao!
        purtroppo non sono esperto di Cinema 4d, ma il problema delle texture potrebbe non risiedere lì bensì, magari, potrebbe essere dovuto al come viene esportato il file obj e l’annesso file dei materiali .mtl da c4d.
        Puoi dunque controllare che il file dei materiali al suo interno abbia il percorso giusto alla texture del tuo oggetto, ad esempio qui:
        http://paulbourke.net/dataformats/obj/capsule.mtl
        puoi vedere come venga richiamata senza path l’immagine capsule0.jpg, presente dunque nella medesima cartella del file mtl e dell’obj.

        Ricapitolando assicurati che:
        – Allegato all’obj vi sia un file .mtl
        – Nel suddetto file .mtl vi sia collegamento alla texture
        – Il path della texture sia corretto

        Se risolvi prova a dirci in due righe su come hai fatto!

        Sparazza

      • RP Says:

        Grazie per i tuoi consigli, sempre molti mirati e concreti!
        In base al tuo commento ho verificato che ci fosse il file .mtl relativo ai materiali. Mi sono reso conto che effettivamente da Cinema4d l’esportazione in .obj non crea automaticamente il file .mtl. Si risolve facilmente grazie ad una plugin gratuita dal nome Riptide che potete trovare a questo link: http://skinprops.com/download.php. A questo punto basta caricare il modello in c4d e dal menù a tendina “Plugins” selezionare “Riptide” e “.obj Exporter” ottenendo automaticamente sia il file .obi che .mtl. Ho provato a caricarlo in Layar3dConverter e funzione tutto perfettamente.

  2. mario Says:

    Per i qr sto masticando abbastanza qua e la e come ti ho detto son pure riuscito atrovare come gestirli dinamicamente.
    però mi affascina e non poco poter avere questi elementi di realtà aumentata che se si potessero integrare nel QR ( come ho visto fare ) sarebbe meraviglioso .
    se hai qualche altra info utile da cui poter attingere e consigli pratci ( che sono sempre la migliore cosa ) sono TUTTo orecchie e disponibilissimo ad ascoltare.
    Appena potrò mi piacerebbe vedere il tuo layer ( anche perchè devo ancora ben capire come funzionano e le utilità e vantaggi che ne derivano ) .
    Grazie per la risposta.. se hai skype o similari , e se non disturbo, ti aggiungo volentieri per reciproci scambi di idee ed impressioni.

  3. davide Says:

    Ciao mi sembramolto interessante il tutorial e i possibili sviluppi, ma volevo chiederti una cosa, dal tuo punto divista quale è il valore aggiunto di uno strato informativo aggiunto su layar rispetto ad uno su una classica mappa 2D tipo gmap ?

    • sparazza Says:

      Una classica mappa 2D come gmaps, che ora sta andando anch’essa sul 3D (Google maps 5 per android) pronta a sostituire Layar in tutto e per tutto, non dà ancora la possibilità di inserire elementi 3D animati (con texture animate) ad esempio. Utili per qualsivoglia attività di marketing o puro svago. Inoltre la possibilità offerta dal geotag preciso, permette ad esempio di creare ricostruzioni di palazzi storici in 3D direttamente in Layar sovrapposti alla moderna realtà.

      Credo fortemente che ora l’unico limite di Layar sia solo la nostra fantasia.

      Sparazza

  4. [Aggiornamento] Creare layer 3d nel Layar Reality Browser « Says:

    […] « [Guida] Creare oggetti e layer 3d per il Layar Reality Browser […]

  5. Andrea Peter Macerata Says:

    Ragazzi, posso farvi una domanda??
    ho seguito la guida, passo passo, e alla fine il tutto funziona, mi carica tutto…ma nn capisco una cosa.
    come mai se visualizzio il mio Layer con Layar esso fluttua in aria??
    non riesco a capire come riuscire a farlo rimanere a terra, farlo fermare precisamente nel punto previsto.
    Un’altra cosa, faccio una prova da casa mia, che dista dalla posizione del Layer di circa 700 metri, e nonostante c’è di mezzo una collinetta che dovrebbe evitare di farmelo vedere, io lo vedo che fluttua li in mezzo, com’è possibile??
    qualche aiuto??
    vi ringrazio anticipatamente.
    Andrea

    • sparazza Says:

      Ciao e grazie per la risposta!

      Riguardo i tuoi dubbi ti posso dire che:
      Come hai visto, Layar gestisce le posizioni degli oggetti AR mediante coordinate Lat e Lon. Ciò sottolinea la mancanza di una coordinata o di un riferimento per l’altitudine dei contenuti 3D, di conseguenza esistono parametri per l’object che hai creato nel tuo database, per regolare l’altezza del POI rispetto all’utente:
      Alt: altezza assoluta dal livello del mare (in metri)
      RelativeAlt: altezza relativa rispetto all’utente che visualizza il POI ( positiva o negariva, in metri)
      Regolando tali parametri sarà possibile, (per l’Alt solo se l’utente utilizza il GPS) visualizzare l’oggetto in un punto preciso dello spazio e fare così in modo che esso rimanga fermo. Purtroppo a meno che tu non abbia un altimetro a disposizione, puoi ricavare altitudine da applicare ai tuoi POI per tentativi.

      Per quanto riguarda la collinetta che non nasconde il POI, posso dirti che a quanto ne so questa tecnica non è applicabile in Layar poichè il sistema client non interagisce con la realtà catturata dalla fotocamera, ma applica solo dei Livelli Layar su di essa, non è possibile dunque avere oggetti che nascondono POI ma al massimo POI che nascondono POI.
      Per oggetti molto ben piazzati tuttavia puoi sperimentare il parametro alpha di trasparenza, che nel caso di oggetti sovrapposti, con alpha >0, mostra ciò che vi è dietro ai POI 3D. Per farti capire meglio, slide 16: http://www.slideshare.net/layarmobile/layar-3d-content-creation-tips-and-tricks

      Spero di esserti stato utile

      Saluti!
      Sparazza

      • Andrea Peter Macerata Says:

        Ok, ci sono.
        ho impostato il livello di altitudine a 570 metri, così dice google maps, ed impostato il parametro di RelativeAlt a 0, dato che si tratta di un monumento. giusto?
        il fatto è che a questo punto però dovrei modificare anche il file .php predefinito per la connessione credo, perchè ho visto che all’interno vengono passati i parametri di lat e lon, e non di alt. sbaglio?

      • sparazza Says:

        Credo che così possa bastare, poichè non serve che il client Layar passi i dati riguardo l’Alt al tuo php, in quanto per identificare la posizione il sistema si basa solo sui dati Lat e Lon del gps.
        Comunque se per caso non funziona, prova ad impostare il parametro RelativeAlt a NULL, così il sistema tenta di basarsi sull’Alt assoluta.

        Se funziona comunica qui come hai fatto, per i posteri!

        Sparazza

      • Andrea Peter Macerata Says:

        Niente da fare.
        Ho impostato il valore di alt ed ho impostato a null il valore di RelativeAlt ma il POI continua a svolazzare.
        Non ho idea di come sistemarlo.
        Andrea

  6. Cate Says:

    Ciao a tutti,
    ho creato i nodi, punti di interesse, con drupal…qnd creo il mio strato…tt funziona perfettamente…visualizzo i nodi e le informazioni…l’unico problema sono i collegamenti url associati al nodo (visualizzo il codice html)..qualcuno potrebbe aiutarmi???

    • sparazza Says:

      Non ho ben capito la domanda, Hai aggiunto delle informazioni sotto forma di URL http e similari ad un tuo POI?
      Ci sei riuscita modificando quale parametro?
      Dici che visualizzi il codice html, dove?

      Saluti
      Sparazza

      PS: Probabilmente la risposta alla tua domanda è in questa pagina( http://layar.pbworks.com/w/page/28473525/GetPOIs-JSON%20Response ), ma senza queste informazioni non potremo mai esserne sicuri! 😛

    • cate Says:

      Ciao,
      praticamente ho aggiunto al nodo un immagine che se cliccata dovrebbe indirizzarmi ad una pagina web (l’ho fatto con add image). Quando effettuo il test dello strato di layar creato sul mobile…leggo solo codice html…..:(

    • cate Says:

      vorrei poter cliccare l’immagine sotto…!!!Scusami il modulo installato è image il componente del modulo utilizzato si chiama “image assist”…ti consente di inserire nel corpo del nodo l’immagine ed associare un link.

  7. sparazza Says:

    Non trovo informazioni su add Image. Dove l’hai aggiunto effettivamente? (in quale tabella del database?)
    Tu vorresti poter cliccare il POI nella griglia 3d di layar, oppure il tuo intento è quello di rendere cliccabile l’icona che compare in basso, a fianco alla descrizione, quando un POI è selezionato?

    Per intenderci:

    Vuoi poter cliccare i cerchi rossi oppure l’immagine sotto?

    Bye
    Sparazza

  8. cate Says:

    vorrei poter cliccare l’immagine sotto…!!!Scusami il modulo installato è image il componente del modulo utilizzato si chiama “image assist”…ti consente di inserire nel corpo del nodo l’immagine ed associare un link.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...


%d blogger cliccano Mi Piace per questo: