Arxiu d'autors Pere Cornellà Canals

PerPere Cornellà Canals

Realitat Augmentada al teu web amb Saqoosha FLARToolKit

El propòsit d’aquesta entrada és la de mostrar el procés que hem de seguir per tenir una aplicació de RA en el nostre lloc web. Em basaré en la idea de crear una aplicació on, en acostar el marcador, aparegui la imatge de l’Esquivamosques, un dels capgrossos més populars de la ciutat de Girona. En entrades anteriors he explicat com crear marcadors (markers, arxius en format PAT o PATT) on line o bé amb l’aplicació BuildAR.

En aquesta nova entrada s’explica com utilitzar aquests marcadors per crear realitat augmentada i posar-la al nostre espai web amb l’ajuda dels arxius que ens proporciona Saqoosha FLARToolKit. L’enllaç anterior ens porta fins a la pàgina de la guia d’inici, on podrem trobar un arxiu zip amb el FLARToolKit-starter-kit. Aquest és l’arxiu que necessitem descarregar i descomprimir. El següent esquema explica la funció i contingut de les carpetes i arxius que hi trobem (les icones poden variar en funció de les aplicacions que tingueu instal·lades al vostre ordinador).

Si volem fer una prova de com funciona, podem seguir els següents passos:

  • imprimir el marcador que utilitza FLARToolKit per defecte que trobarem a la carpeta Data: flarlogo-marker.pdf,
  • fer doble clic a un dels dos arxius .swf (pel·lícula Flash): Earth.swf o SimpleCube.swf,
  • s’obrirà una finestra del navegador i ens demanarà que permetem l’accés al Flash. Quan li donem el permís, en encarar el marcador a la webcam, ens ha d’aparèixer el model relacionat.

En la  imatge següent es pot observar el resultat d’haver executat l’arxiu Earth.swf:

Anem a veure com podem personalitzar tant el marcador com l’objecte que es mostra quan acostem el marcador a la webcam. Seguirem aquests passos:

  • crear el nostre propi marcador,
  • crear la nostra pròpia imatge a mostrar (2D, 3D…),
  • esborrar els arxius que no ens són necessaris de la carpeta FLARToolKit,
  • canviar el nom d’un arxiu i d’una carpeta,
  • posar els nostres arxius al lloc adequat,
  • modificar l’arxiu d’ActionScript (llenguatge que utilitza el Flash) amb l’ajuda d’Adoble Flash Builder.

Creant el nostre propi marcador

En altres entrades s’han explicat un parell de maneres de crear arxius .PAT que ens serveixin de marcador per a aplicacions de Realitat Augmentada:

Tot i que hi ha altres maneres de crear-los. El cas és que, d’alguna manera o altra, hem de tenir el nostre marcador personalitzat.

Creant la nostra pròpia imatge a mostrar (2D, 3D…)

Per als nostres propòsits necessitem un arxiu d’imatge en format DAE. Aquest és un tipus d’arxiu generat per Collada, una extensió que es pot treballar a partir de Blender, 3DS Max i altres editors 3D. D’entrada, dir això fa respecte, perquè l’ús d’aplicacions com aquestes, no és pas trivial (més aviat és complex… molt complex). Està clar que si dominem alguna d’aquestes aplicacions, els resultats poden ser molt espectaculars.

Tenim, però, una alternativa més senzilla: utilitzar l’aplicació Trimble SketchUp, una aplicació de Google. Per tant, descarreguem i instal·lem aquesta aplicació (hi ha una versió gratuïta i una versió Pro de pagament). D’una forma senzilla podem construir models 3D (és qüestió de practicar una mica). Però també podem convertir imatges personals al format DAE. El que explicaré aquí és precisament aixó. Seguint l’exemple, vull que la imatge mostrada en l’aplicació de RA sigui una foto del capgròs Esquivamosques. Per això, seguiré aquests passos:

  • retallo la figura del capgròs en un editor d’imatges i deso l’arxiu en format PNG,
  • obro l’aplicació SketchUp i hi importo l’arxiu PNG que acabo de preparar (File > Import…). El puc posar on més em convingui però, en el meu cas, el posaré sobre el terra; això ho aconseguiré desplaçant la imatge que estic important cap a la part inferior. Intento que quedi centrat amb els eixos de coordenades de l’aplicació. Sempre puc moure els objectes utilitzant les eines de SketchUp. També hauré d’esborrar la figura que apareix per defecte en els nous arxius de SketchUp (amb l’eina Select, selecciono la figura i l’esborro),
  • exporto l’arxiu (File > Export > 3D Model…). Puc escollir entre exportar un arxiu DAE (és el que ens interessa) i KMZ (el podríem utlitzar en el Google Earth, per exemple). Això ens crea un arxiu DAE amb el nom que haguem escollit i una carpeta amb el mateix nom que conté la textura. Ho necessitarem tot plegat per als nostres interessos.
Un parell de consideracions:
  • amb SketchUp puc crear objectes 3D que funcionaran de la mateixa manera que l’exemple explicat. Una mica de pràctica ens portarà a obtenir figures interessants,
  • si no volem crear nosaltres l’objecte DAE, poder recórrer a repositoris existens, per exemple la mateixa Galeria 3D de Google, des d’on es poden descarregar els arxius DAE.

Esborrant els arxius que no ens són necessaris

Hem vist que a l’arrel de la carpeta FLARToolKit Starter Kit hi ha dos exemples: Earth i SimpleCube. Ens quedarem només amb un dels dos exemples: l’Earth, pequè és el que ens permetrà, posteriorment, afegir un model personalitzat a mostrar. Això vol dir que podem esborrar:

  • els tres arxius de l’exemple SimpleCube,
  • dos dels arxius Earth: Earth.swf i Earth.fla, i deixem sense esborrar l’arxiu Earth.as,
  • no hem de tocar els arxius ARAppBase ni PV3DARApp,
  • de la subcarpeta Data, hem d’esborrar els arxius flarlogo.pat i flarlogo-marker.pdf; i deixar, per tant l’arxiu camera_para.dat,
  • de la subcarpeta model hem d’esborrar tots els arxius i deixar-la buida.

Canviant de nom d’un arxiu i d’una carpeta

Per començar a personalitzar el nostre projecte, canviarem el nom de l’arxiu Earth.as pel que nosaltres vulguem. En el meu cas, el rebatejaré com a esquivamosques.as (penseu que pot ser que no es vegi l’extensió).

També canviarem el nom de la carpeta on hem preparat tots els arxius anomenada FLARToolKit Starter Kit i la personalitzarem amb un nom referent al nostre projecte. per exemple, esquivamosques.

Posant els nostres arxius al lloc adequat

A la subcarpeta Data hi posarem el nostre arxiu de marcador. En el meu cas, esquivamosques.pat. A la subcarpeta model hi posarem els arxius del nostre model a mostrar. En el meu cas, l’arxiu esquivamosques.dae i la carpeta esquivamosquesque conté la textura de la imatge.

Modificant l’arxiu d’ActionScript (llenguatge que utilitza el Flash) amb l’ajuda d’Adoble Flash Builder

Per acabar el procés, cal crear els arxius necessaris a partir dels nostres arxius personalitzats. Per això seguirem el següent procés:

  • descarreguem i instal·lem la versió de prova de l’Adobe Flash Builder (60 dies) que trobarem al web d’Adobe (ens faran crear un compte d’Adobe, de forma gratuïta). Si som del ram eductiu o som a l’atur, podem optar a una versió no comercial. la podeu trobar en aquest enllaç d’Adobe (triguen un parell de setmanes en validar les dades i proporcionar-te un serial),
  • executem l’aplicació,
  • creem un nou projecte ActionScript: File > New > ActionScript Project,

  • completem la finestra que se’ns obre amb les dades del nom del nostre projecte. Canvieu, si us convé, el destí on desarà el projecte. Les altres opcions les deixem tal i com estan,
  • fem clic sobre Next i ens porta a una nova finestra. Fem clic sobre la pestanya Source path i afegirem una nova carpeta, a través del botó Add Folder… Escollirem la carpeta que hem preparat amb tots els arxius. En el meu cas, la carpeta esquivamosques. Fem clic sobre Finish i veurem que es crea tot el projecte perquè apareixen carpetes i arxius a la zona de l’esquerra,
  • després d’un breu procés, veurem que la part esquerra de pantalla de Flash Builder ha canviat i hi apareixen elements relacionats amb el nostre projecte,
  • des de la finestra de l’esquerra anomenada Package Explorer, despleguem la carpeta anomenada [source path] seguit del nom de la carpeta del nostre projecte. Veurem que hi ha les carpetes Data, model i org que ja hem vist anteriorment. Seleccionem les carpetes Data i model, les copiem, i les enganxem a la carpeta (default package) que trobarem dins la carpeta src, dins la mateixa zona de la pantalla. El resultat final ha de ser com el que mostra la imatge:
  • encara hem de copiar i enganxar un altre arxiu de la finestra Package Explorer: hem de desplegar la carpeta [source path] esquivamosques > (default package), seleccionar i copiar l’arxiu esquivamosques.as i copiar-lo a a la carpeta src que hi ha una mica més avall. Ens dirà si volem sobreescriure l’arxiu i li diem que sí. Quan ho fem, veurem que el codi de l’arxiu d’ActionScript (as) que hi ha a la dreta canvia,
  • podem observar que, a la part inferior de la pantalla apareix un error. És normal perquè hem d’actualitzar algunes parts del codi per ajustar-lo als noms d’arxiu del nostre projecte,
  • ara ens cal fer uns quants canvis en aquest codi:
    1. canviem el nom del marcador pel nostre (flarlogo.pat per esquivamosques.pat),
    2. canviem el nom del model pel nostre (earth.dae per esquivamosques.dae),
    3. canviem els 2 noms de la classe Earth per un nom personalitzat. En el meu cas, esquivamosques,
    4. canviem els 7 noms _earth per un nom personalitzat. En el meu cas, _esquivamosques (és aconsellable deixar la barra baixa inicial; podeu canviar d’un sol cop tots aquests noms amb una cerca i reemplaçament),
  • el resultat final per al meu projecte és aquest:
  • i ja podem provar el projecte tot fent clic sobre el botó verd (Run) de la barra d’icones de l’aplicació.A vegades ens podem trobar que no es visualitza res; sol ser degut a problemes amb el navegador (en el meu cas, he tingut problemes amb el Google Chrome, també cal tenir el Flash Player degudament actualitzat). Es pot copiar l’adreça i enganxar-la en un altre navegador. Probablement el resultat que veiem no ens acaba d’agradar: mida, està girant, posició… En la següent imatge indico quines línies de codi cal modificar per variar els resultats. Tingueu en compte que, tant en el cas de la posició inicial com en el de la rotació de l’objecte, es poden variar els exios i es poden afegir noves línies de cosi per a nous eixos. Us deixo de la vostra mà l’experimentació fins a obtenir el resultat desitjat,
  • en el meu cas, he canviat el valor de l’escala a 4; he afegit una rotació inicial de l’eix Z a 90 (afegint una línia sota la de l’eix X) i he tret la rotació de l’objecte (deixant el valor a 0),
  • ara només ens exportar el projecte: File > Export… i triant l’opció Release Build de la carpeta Flash Builder. Triem la carpeta destí (o en creem una de nova) i ja ho tindrem tot llest.  Aquesta és la carpeta que hem de pujar al nostre lloc web. A l’interior veureu que hi ha un arxiu html amb el mateix nom del projecte, que és el que engega el projecte (de fet, abans de penjar la carpeta podem executar aquest arxiu per veure el resultat final). Podeu rebatejar aquest arxiu amb el nom index i així no caldrà escriure’l a l’adreça web perquè ja s’obrirà per defecte. També podeu editar i canviar alguns dels paràmetres d’aquest arxiu html. Per exemple, el color de forns, la mida de la finestra de vídeo… En la darrera imatge podeu veure una imatge del resultat del meu projecte, que podeu trobar i provar en aquest enllaç web  fent sevir el aquest marcador.

 

PerPere Cornellà Canals

Acció i reacció

accioreaccioTota acció provoca una reacció. No recordo els anys que fa que vaig sentir aquesta llei de la física per primera vegada…

I avui ho he pogut comprovar en primera persona. De la mà de Twitter. A quarts de dues del migdia d’avui he escrit aquest tuit:

Permeteu-me que us situï. Avui som 12 d’octubre, dia festiu (de moment). La Falange, Ciutadans, PxC i el PP han convocat una manifestació unionista, en favor d’una España única. Evidentment, aquesta convocatòria responia a la manifestació en favor de la independència de Catalunya, de l’11 de setembre passat (acció – reacció).

El ball de xifres torna a deixar en evidència la manca de rigor de qui fa els recomptes. En aquest cas, la forquilla va entre els 6.000 i els 100.000 manifestants. Des del meu punt de vista, trobo que la darrera xifra és molt exagerada atenent les imatges que he vist de la concentració.

En qualsevol cas, les xifres de la manifestació de l’11 de setembre anaven entre 600.000 i 1.500.000 de persones. La diferènca és brutal i explica força coses. Moltes de mal pair per a segons qui…

Però tornem al tuit. No sé què ha passat exactament, però s’ha retuitejat 120 vegades i 9 persones l’han marcat com a favorit (acciò – reacció). No m’havia passat mai (i, la veritat, fot il·lusió). Deu voler dir que a força gent li ha agradat. Però està clar, no a tothom li agrada el mateix. Així doncs, hi ha hagut un altre tipus de reaacció. Primer m’ha intranquil·litzat força, però després m’ho he agafat amb humor. Jutgeu vosaltres mateixos. Fixeu-vos amb el detall que, totes aquestes expressions de desacord (lícit, només faltaria…) van acompanyats d’un insult. I això diu molt de les persones. O no? Cada cop em sento més orgullós de ser català! Us deixo amb les “perles”.

PerPere Cornellà Canals

Crear markers de RA amb BuildAR

BuildAR, de HITLabNZ, és una aplicació que ens permet experimentar amb la realitat augmentada. Ens permet crear escenes en pocs segons, sense necessitat de saber programació. Proporciona una vista de vídeo en viu amb models 3D virtuals sobre imatges i marcadors.

Tot i que hi ha una versió de pagament, el BuilsAR Pro (molt completa i amb possibilitat de fer servir un trial), per aquest tutorial he utilitzat la versió gratuita de l’any 2008 que podreu trobar a la seva pàgina de descàrregues o directament en aquest enllaç.

Un cop instal·lada l’aplicació, l’executeu i, si teniu webcam, ja veureu la imatge capturada en pantalla. A la zona de l’esquerra hi ha l’arbre de l’escena on ens permetria triar marcadors i imatges a mostrar sobre aquests marcadors.

En aquest cas, el que ens interessa és la capacitat d’aquesta aplicació per crear marcadors. Per això, hem de tenir preparat un arxiu BMP (és el format que he comprovat que dóna menys problemes) amb una imatge quadrada del dibuix que volem que serveixi de marcador. En aquest cas, vaig preparar una imatge que representa la lletra E amb el FireWorks (però serveix qualsevol editor gràfic).

Ara, des del BuildAR, ens cal triar l’opció de menú Tools > Generate Patterns… Això ens obrirà una nova finestra amb la imatge d’un quadrat blanc amb un marc negre.

En aquesta nova finestra ens trobem tre botons:

  • el primer ens permet incorporar al marcador el dibuix BMP que tenim desat,
  • el segon ens permet desar aquest marcador en format .patt, que és el que necessitem per poder-lo utilitzar en aplicacions de realitat augmentada. Generalment els marcadors tenen l’extensió .pat; si ens convé, podem canviar l’extensió per aquesta darrera opció,
  • el tercer ens permet imprimir el marcador. Podem desar-ho en format PDF per, posteriorment, copiar la imatge i posar-la on ens convingui. És una bona idea fer-ne una impressió ara. Així ja el tindrem imprès per fer les nostres proves.
La imatge següent mostra com queda el marcador un cop s’ha incorporat la imatge:

No tots els marcadors funcionen de la mateixa manera. Qüestions com les simetries i la definició del dibuix són importants perquè les aplicacions de realitat augmentada els reconeguin fàcilment. Cal experimentar una mica sobre quines imatges ofereixen més facilitats a l’hora de ser reconegudes per l’aplicació.

Si volem comprovar si el marcador que hem creat funciona correctament, des de BuildAR fem clic a la icona d’afegir un marcador, naveguem i seleccionem el que acabem de desar en el procés anterior en format PATT. Veurem que ens apareix a l’esquema de la part dreta.

Si acostem a la webcam el marcador que hem pogut imprimir en el pas anterior, veurem que ens apareix un cub de color blau. Això vol dir que hem fet el procés correctament. ja tenim, doncs, un marcador imprès i el seu arxiu patt corresponent. Ja podem començar a treballar amb aplicacions de realitat augmentada.

Aquesta mateixa aplicació ens permet variar alguns paràmetres de l’objecte. Ho podem provar fent clic sobre la imatge del cub. Això farà que apareguin uns eixos i la possibilitat de realitzar canvis de mida i orientació. Us deixo a les vostres mans que acabeu d’experimentar amb aquesta aplicació.

PerPere Cornellà Canals

Infogràfics

infographic2El terme infogràfic sorgeix de la barreja de les paraules informació i gràfic. Són, per tant, representacions visuals d’informació, dades o coneixement. Una de les principals virtuts dels infogràfics (també ho he vist mencionat com a infografies) és que són capaços de mostrar informació complexa de forma ràpida i clara.

Aquestes representacions gràfiques són cada dia més populars i és fàcil que n’haguem vist una bona quantitat. Si encara no hi esteu familiaritzats, podeu fer un cop d’ull al web Infografías, on se’n mostra algun exemple. I en aquest article del Hubspot Blog, podreu trobar alguna recomanació per crear bons infogràfics.

En educació pot ser una bona eina per treballar la capacitat de síntesi, la selecció i organització d’informació i les habilitats artístiques.

Com podem crear infogràfics?

Cada cop es poden trobar eines a la xarxa que ens permeten crear infogràfics. En aquesta entrada en relaciono tres que ens poden ser força útils. Totes tres enes tenen funcionaments semblants: escollim una plantilla de les predeterminades, hi afegim els camps de text que ens interessi, creem gràfics a partir de les nostres dades, revisem la part estètica… i finalment descarreguem la imatge creada o la compartim a través de la xarxa. Algunes d’aquestes eines permeten, fins i tot, la creació d’infogràfics de forma compartida. Així que, trieu i remeneu i quedeu-vos amb aquella que us faci més el pes.

visuallypiktochart-logo

PerPere Cornellà Canals

La realitat augmentada

 “Augmented reality is the pursuit of
eliminating the latency between
atoms and bits”
Rouli (Augmented Times)

D’una forma senzilla, podríem entendre la realitat augmentada com el fet d’afegir informació virtual al nostre entorn físic. Això implica una tecnologia que permeti afegir informació virtual sobre la realitat. Això es fa a temps real en funció del que capta la càmera. Hi ha, a més, una relació espacial entre la informació virtual i l’entorn real.

Fa un temps vaig fer una presentació per explicar el que és la realitat augmentada i com en podem crear:

PerPere Cornellà Canals

Crear capes d’AR amb Google Maps i Wikitude

Una manera ben senzilla de crear capes de realitat augmentada amb diversos punts d’interès (POIs) és utilitzant la combinació de Google Maps i de Wikitude, un navegador AR.

El primer que haurem de fer és anar a la pàgina web de Google Maps (http://maps.google.com) i entrar a la nostra sessió de Google, tot proporcionant el nostre nom d’usuari i la contrasenya.

Un cop identificats, farem clic sobre el botó Els meus llocs per accedir a l’àrea d’edició i de creació de mapes personals. Com que el que volem és crear un nou mapa, farem clic sobre CREA UN MAPA. La primera cosa que haurem de fer serà triar un títol per al nostre conjunt de POIs i una descripció. Haurem de deixar l’opció de privadesa a Públicament.

Ara ja podem començar a afegir els nostres punts d’interès sobre el mapa de la part dreta de la pantalla. Per fer-ho, hem de fer clic sobre la icona corresponent (a la dreta de la mà estesa) i tornar a fer clic en el punt que vulguem destacar. Això farà que es mostri un quadre on podem afegir el títol del punt i altres dades. També és possible canviar la icona del punt, tot i que això no té efectes sobre el que veurem a través de Wikitude.

D’aquesta manera es poden anar creant tants punts com ens interessi. Veurem que, a mesura que anem afegint punts, aquests ens quedaran en una llista, a la part esquerra de la pantalla. Un cop els tinguem tots creats, fem clic sobre el botó Fet per sortir del mode d’edició (al que podrem tornar, si cal, fent clic sobre el botó d’edició corresponent).

Observarem que, a sota de la descripció del nostre mapa, apareix un enllaç amb la inscripció KML i un requadre blau. He observat que a vegades aquest enllaç no apareix de seguida. En aquest cas, torneu a fer clic sobre Els meus llocs i llavors sobre el vostre mapa. Això ha de fer que, ara sí, aparegui aquest l’enllaç KML (KML correspon a l’acrònim Keyhole Markup Language, un llenguatge basat en XML per representar dades geogràfiques en tres dimensions).

Fent clic sobre KML o sobre la icona de la seva dreta, farà que se’ns descarregui un arxiu que portarà com a nom el nom de la capa, i com a extensió, kml. Ja tenim l’arxiu que conté els nostres punts d’interès. La feina a Google Maps ha acabat. Ara anem cap a Wikitude.

Un cop a Wikitude, ens caldrà anar a la zona de desenvolupadors (developer)  i, si encara no ens hem registrat mai, haurem de fer-ho. Quan ja tinguem un perfil creat a Wikitude podrem entrar a la zona de desenvolupadors.  A la part superior esquerra veurem un enllaç on podrem afegir un nou món; això vol dir, crear una nova capa amb els nostres punts d’interès.

Quan haguem fet clic sobre aquest enllaç ens apareixeran diverses opcions per afegir la nostra informació. Nosaltres haurem de triar l’opció d’importar POIs en format KML/ARML i fer clic al botó Upload KML File.

Haurem d’omplir el formulari corresponent a la capa que estem creant, tenint en compte que hi ha alguns camps que són obligatoris i d’altres no. Un dels camps ens serveix per pujar l’arxiu KML que havíem creat amb el Google Maps. Desem els canvis i ja ho tenim tot llest.

Tot el que hem de fer és executar Wikitude al nostre dispositiu mòbil i fer una cerca de la capa que acabem de crear.

 

PerPere Cornellà Canals

Generador de Markers online

Exemple de marcadorEls marcadors (markers, patterns…) són imatges que s’utilitzen en realitat augmentada. Són uns símbols, generalment quadrats i asimètrics, que el software de realitat augmentada interpreta i emet una resposta específica al marcador concret. Aquesta resposta pot ser mostra una imatge en 3D, una imatge en 2D, un vídeo, un text…

És important que els marcadors continguin zones blanques i zones negres ben contrastades. D’aquesta manera, el software ho tindrà més fàcil per interpretar el dibuix del marcador i per donar una resposta.

Els marcadors que s’utilitzen en realitat augmentada són arxius amb extensió .pat que es poden generar a partir d’imatges. Una forma senzilla d’obtenir marcadors és el Marker Generator Online. Aquesta aplicació ens permet crear arxius pat a partir d’imatges jpg, gif o png.

Primer de tot haurem de preparar la imatge que volem utilitzar com a marcador. Com a base, podem partir d’un requadre negre que conté, en el seu interior, un requadre blanc els costats del qual mesuren la meitat que els del negre. Els símbols o dibuixos que incloguem dins la part blanca cal que quedin ben contrastats i que siguin asimètrics (com el que apareix en la part superior). Podeu partir d’aquest arxiu.

El següent pas consisteix en obrir l’ARToolkit Marker Generator Online Multi. Aquesta aplicació permet capturar la imatge del marcador o bé carregar la imatge del marcador (opció recomanada). A partir d’aquí, només cal seleccionar la mida del marcador resultant i desar-lo al nostre ordinador. Per utilitzar aquesta aplicació online ens cal tenir instal·lada una càmera web.

PerPere Cornellà Canals

Hola, món!

Hola món! Estreno espai web!