Beginner guide til Augmented Reality
50
Del
16
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Augmented Reality har dukket opp mye i det siste, spesielt Flash-baserte AR. Jeg vil lede deg gjennom hvordan du skal lage noen enkle, men pene effekter som du kan sette på din egen hjemmeside
Innledning:. Augmented Reality
Augmented Reality har blitt dømt som en av 2010s heteste trender. Konseptet bak det er ganske enkel, over lå den fysiske verden med kul grafikk som synes å oppta den samme plassen som deg.
Mange selskaper har brukt det som en stor salgsfremmende verktøy. Adidas har nylig satt dem på deres sko og gjorde en veldig kul ser spillet.
Lego bruke det som en måte å visualisere hva deres produkter vil se ut når du er ferdig med å bygge dem.
Noen frilansere bruke det som en veldig kul visittkort og salgsfremmende verktøy. AR lar deg lage en mer imponerende visittkort uten kostnad i det hele tatt, og du får plass til mye mer info om det.
I januar i år, fullførte jeg et prosjekt for universitetet hvor jeg opprettet en bærbar augmented reality system. Det inneholdt et virtuelt galleri som, som du gikk rundt, fortalte en svært tragisk historie.
Sjekk ut videoen på Youtube.
Jeg nærmet skape AR fra et designsynspunkt, vet svært litt om koding i AS3. Jeg er her for å dele det jeg har lært med dere som jeg fant det svært vanskelig for nybegynnere å lære noe om emnet. Det var bare et spørsmål om å starte alt fra scratch
Nå er jeg sikker på at du er full av ideer til ting å lage, la oss lage din første augmented reality prosjekt. Legge dybde til en flat stykke papir.
Innledning: flARToolkit
flARToolkit er den flash-versjonen av C-kodet augmented reality bibliotek kjent som ARToolkit. Det ble omgjort i løpet av en svært dyktig japansk koder kjent som saqoosha. Han gjør alle slags sprø ting med utvidet virkelighet, og hvis du kan lese japansk eller er forberedt på å vasse gjennom masse innlegg som knapt gir mening når oversatt, så kan du lære mye av ham. Han skapte den beryktede "hull i veggen" effekt som er demonstrert i nyttårsfeiring prosjekt han skapte velkommen i 2009.
I det siste har han vist at du kan koble ulike markører sammen og andre fantastiske effekter at jeg bare kunne drømme om å skape
Trinn 1:. Komme til Source
Squidder.com endret en eksisterende flARToolkit biblioteket, flARManager klasse, for å være i stand til å håndtere hendelser og flere objekter. Interessant nok de legger sin kildekode og en såkalt "hvordan", men aldri faktisk forklare sin egen kode. Det tok meg litt tid å finne ut hvordan du kan få flere objekter som kan alt være annerledes. Jeg skal peke ut nå som jeg er en designer først og koding resulterte fra som ønsker å gjøre gale ting. Jeg nærmet dette ønsker sluttresultatet til å jobbe i stedet for å være opptatt av de beste måtene å kode ting. .
La oss laste ned koden fra sin opprinnelige innlegget om emnet, og gi den en titt over
Edit: Squidder.com er for øyeblikket nede; bruk denne linken i stedet: http://kablamo.co.uk/flarsquidderkit.zip
Last ned fil som heter "flarsquidderkit.zip", pakke ut ZIP-filen og åpne opp hovedmappen. Legg merke til, hvis du ikke pakke ut .zip mappe, vil du ikke være i stand til å åpne SWF riktig eller redigere filene du trenger. Så når du har gjort det, vil du se 3 viktige mapper: distribuere, fla og src. Du vil også se en fil som heter "flardrums.pdf".
Trinn 2:. Spilletid
Vi har våre markører for nå, skrive dem ut, slik at vi kan teste det og se hvordan det fungerer kilden for tiden
Åpne opp distribuere mappen og åpne MultiFLARExample.swf. Godta webkamera og begynne å spille med markører.
I en video demo som de skapte, passerer du hånden over hver markør individuelt og se hvordan de lager lyder når de forsvinner. Dette ble skrevet i av squidder. De har lagt til to hendelser, MARKER_ADDED Hotell og MARKER_REMOVED. Nå vet du hvordan det nå ser ut, la oss komme ned til å modifisere kildekoden til å gjøre noen kule ting på vår egen. For denne opplæringen, antar jeg at du har grunnleggende kunnskap om AS3 og klasse ark. Åpne opp \\ fla \\ mappen og dobbeltklikk på "multiFLARExample.fla". I egenskapsvinduet bør du se klasse boks fylt på med MultiFLARExample. Det er lurt å klikke på blyantikonet ved siden av klasse boksen slik at vi kan begynne å se på koden. Straks du vil se den vanlige import kode på toppen og under som noen grunnleggende variabler for lyskilder Neste er. en interessant del, koden som laster i markørene. Som du kan se, er markører lastet inn i en matrise slik at de lett kan kalles senere. Ta hensyn til den rekkefølgen de er lagt inn her. Den første markeringen i rekken får id fra 0, den neste er en og så videre. Vi skal bruke disse id-er senere. Også se på private tilstelninger _addCube og _getFlatMaterial som disse er de to andre delene som vi skal fokusere på å redigere i dag. De er ganske selvforklarende i hva de gjør, men de er merkelig satt opp. De har blitt kodet for enkelhet i å få samme objekt i flere farger, i stedet for mange forskjellige gjenstander, så vi må gjøre noen endringer Ok, la oss endre noen kode. La oss endre det til en mer brukbar tilstand, men for nå vil vi holde det visuelle utseende det samme. Da jeg var å finne alt dette ut, det var en merkelig lettelse å finne ut at det hele kom ned til hvis uttalelser i slutten. Hvis påstandene er bare så magisk og nyttig når det kommer til koding ting I _addCube funksjonen erstatte denne koden. med følgende kode: Nå kan dette virke som en convoluted måte å håndtere kuber, men det gir oss mulighet til å forholde seg til hver enkelt kube. For eksempel i koden ovenfor, har jeg endret z-aksen av kubene for å demonstrere for deg at koden er nå håndterer hver kube som sitt eget objekt. La oss prøve ut filmen, bør du ha noe til denne effekten: Før vi fortsetter, la meg forklare koden du bare sette i Det er ganske rett frem og hvis. du har brukt Papervision3D før du kan hoppe over denne delen Her skaper vi en ny variabel, kube. . Denne variabelen inneholder all nødvendig informasjon for å gjengi en kube og finne ut hvordan det ser ut. Den MaterialsList del refererer til materialet som brukes til utsiden av kuben. Som vi ønsker det samme materialet på hver side, og at materialet er holdt i en variabel opprettet tidligere i koden, bruker vi {alt: fmat}. Jeg skal snakke mer om fmat variable senere. Til slutt, de tre 40-tallet, er det disse dimensjonene av kuben, bredde, høyde og dybde. Selvfølgelig er de ikke trenger å være alle den samme, selv om dette er en kube. Du kan bruke kuben metode for å lage rektangulære terning figurer hvis du ønsker det Dette setter z verdien av kuben. Slik høy kuben sitter over markør. 0 er senterlinjen av kuben og så sette den til halve figurens høyden gjør er sitter nøyaktig på toppen av markøren dispObj refererer til en skjerm objekt som er laget tidligere i koden. En skjerm objektet vil gjengi objekt på skjermen. Du kan legge til så mange figurer som du ønsker inne én skjerm objekt, så vi vil laste alle våre figurer i det for nå. Brilliant, nå som du vet hvordan det fungerer, la oss fortsette å redigere koden. Du trenger egentlig ikke trenger _getFlatShadeMaterial funksjon så la oss redigere alt sammen skal vi. Gjøre det på denne måten også gir oss mulighet til å gi et annet materiale på hvert objekt Det er lurt å finne denne linjen i koden din: Vi skal nå redigere fmat variabel slik at i stedet for å kalle en funksjon, det vil kalle en ny flatShadeMaterial der vi angir fargene. . Senere skal jeg håndtere andre materialer, inkludert bitmap materialer Erstatt _getFlatMaterial (id); med: De tre parametrene setter light for flatShadeMaterial, flat farge, og også skyggen farge. Å gjøre dette vil gi våre objekt et mer realistisk effekt som vi snu og rotere den i fysisk plass Nå, under den linjen vi ønsker å legge til:. Nå som vi har opprettet en variabel for hver av våre objekter, vil vi ønske å endre opp kuben koden jeg ga deg tidligere. I stedet for bare å ha fmat som materiale for alle våre kuber, vil du ønsker å endre den til fmat, fmat2, fmat3 og fmat4 slik at våre kuber vil fremstå annerledes. Når du har gjort det, kan du nå endelig fjerne _getFlatMaterial funksjon Slett følgende linjer med kode:. Og nå skal vi teste på nytt. Hvis alt er gjort riktig, bør det se ut akkurat det samme. For en prestasjon, eh? Det ser kanskje ikke ut som mye, men vi har nettopp satt opp grunnlaget for å skape mange forskjellige objekter. OK, la oss komme videre til noe litt mer nyttig. Den bitmap materiale. De fleste mennesker ønsker å sette sine egne bilder til AR som en kul måte å presentere sitt arbeid; Dette oppnås ved hjelp av et bilde som materiale. Det er utrolig enkelt. Jeg har laget følgende bilde for deg å bruke, siden jeg skal vise deg hvordan du bruker bitmap materiale gjennom en web link. For det første må du importere BitmapFileMaterial klassen. På toppen av koden arket der alle de andre klassene er importert, legg til følgende linje: og endre fmat materialet til følgende: Nå la oss teste det, bør det se ut som dette: Hvor enkelt var det? Nå som jeg har vist deg hvordan å lage en kube som sitter over markøren, la oss lage en kube som sitter under markøren for å lage den hull i veggen Denne effekten ble opprinnelig forestilte og forklart av saqoosha. Dessverre, forklarte han det på japansk og for Papervision3D heller at for bruk med flARToolkit så noen endringer ble gjort Du må importere disse to klasser: Legg denne linje under _lightpoint med de andre private variabler. og deretter under Var dispObj: DisplayObject3D = new DisplayObject3D (); legge til følgende: I utgangspunktet hva som skjer her er at du vil ha to terninger, et vesen grønn og den andre danner innsiden visning. De vil sitte i hverandre. Synsfeltet filter vil maskere ut noe som er en bestemt farge grønn, som er det vi satt utenfor kuben til, noe som gir den effekten at det er et hull i markeringen. Nå vil vi skape de to terninger. Fjern den eksisterende kube koden og erstatte det med dette: Legg merke til, for de materialene vi importerer i to JPG-filer fra eiendeler mappen. Denne mappen er plassert inne i hoved distribuere mappen hvor filen MultiFLARExample.swf er funnet. Du kan enten laste ned følgende bilder som jeg har laget, eller lage din egen Gi det en test og du bør ha noe sånt som dette: Nå er du sannsynligvis lei av å holde opp en ratty stykke papir med fire markører opp til kameraet. Du ønsker å ha din egen markør, så la oss gjøre det. Med noen få elektroniske verktøy og Photoshop, kan du ha din egen markør opp i løpet av minutter. Først, la oss lage din markør. Du trenger ikke å bruke en strekkode-lignende design som på markørene du bruker for øyeblikket, men hvis du bruker mye av markører deretter strekkoden er den beste veien å gå. Hvis du bruker én eller to, så gå vill med design. For min markør design, brukte jeg rett fra min nettside logo. Hvis du gjør det for et visittkort eller noen reklamemateriell, tenke på hvordan markøren ser ut som du kan gjøre noen veldig hyggelig ser markører som harmonerer mer. Du må sette opp Photoshop-dokumentet klar for markør skapelse. For en enkel markør, opprette en 800x800px fil med en 150 piksler grensen hele veien rundt. Eller laste ned dette bildet under: Den hvite firkanten i midten er der du kan sette din markør design. Skrive ut av markør og deretter betale et besøk til Online Marker Generator. De har en elektronisk markør skaperen som tar din markør og gjør en .pat fil som fungerer med koden din. Det er ganske rart, de har en opplastings alternativ, men jeg har aldri fått det til å fungere (skrive ut fungerer helt fint). Det er også en AIR app som gjør akkurat den samme jobben, men dette er greit for nå. Sett markøren segmenter til 16x16 og markøren størrelsen til 50%, viser markøren til webkameraet ditt, og når en rød firkant omgir din markør klikk på get mønster, hvis du er fornøyd med hvordan det ser ut i forhåndsvisningsvinduet klikker du Lagre. Hvis markøren ser virkelig rart i forhåndsvisningen, eller en rød firkant ikke kommer opp, kan det hende du trenger å re-designe din markør. Du må også sørge for at det er noe hvitt område rundt markøren som ellers Flash vil ikke anerkjenne den. Når dialogboksen kommer opp, ikke bare laste ned dette hvor som helst, må du sette .pat fil i en bestemt mappe. Naviger til flARToolkit mappe > distribuere > eiendeler > flar og du bør finne fire andre .pat filer der. Lagre mønster der og husker hva du kalte det. Jeg ringte mine "kmarker.pat" Tilbake i flash, finn denne linjen: Og forandring crash.pat Hvis du teste din Flash-fil, bør du finne at din nye marker plukker opp alt perfekt. Takk for lesing denne introduksjon til Augmented Reality. Jeg håper du likte det og at det har gjort deg nysgjerrig på å lage dine egne AR prosjekter. I neste del av denne opplæringen, vil jeg dekke hvordan å animere objekter med TweenMax, gjør markørene litt mer lek lyd, importere 3D-modeller og gjør alt penere. Anmeldelser
Vi vil utforske hvordan du bruker disse hendelsene senere.
Trinn 3: Det er Coding å gjøre
Trinn 4: MultiFLARExample
Trinn 5:. Ch-Ch-Endringer
Var kube: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40); cube.z = 20; dispObj.addChild (kube);
if (id == 0) {var kube: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40); cube.z = 60; dispObj.addChild (kube);} else if (id == 1) {var CUBE2: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40); cube2.z = 0; dispObj.addChild (CUBE2);} else if (id == 2) {var cube3: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40); cube3.z = 20; dispObj.addChild (cube3);} else if (id == 3) {var cube4: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40); cube4.z = 40; dispObj.addChild (cube4);}
Trinn 6: Test Movie
Trinn 7: Forklaringer
Var kube: Cube = new Cube (ny MaterialsList ({alt: fmat}), 40, 40, 40);
cube.z = 20;.
dispObj.addChild (terning);.
Trinn 8:. Trekke det sammen
ny FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e);
Var fmat2: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint , 0x00ff00, 0x113311); Var fmat3: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); Var fmat4: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
privat funksjon _getFlatMaterial (id: int): FlatShadeMaterial {if ( id == 0) {return new FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e); } Else if (id == 1) {return new FlatShadeMaterial (_lightPoint, 0x00ff00, 0x113311); } Else if (id == 2) {return new FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); } Else {return new FlatShadeMaterial (_lightPoint, 0x777777, 0x111111); }}
Trinn 9: Test Movie Igjen
Trinn 10: Materialer
importere org.papervision3d.materials.BitmapFileMaterial;
Var fmat: BitmapFileMaterial = new BitmapFileMaterial ("http://kablamo.co.uk/artutorial/kcube1.jpg");
Trinn 11: Gjør det Hole
effekt.
import flash.geom.ColorTransform, importere flash.. filtre *;
private Var _green: Cube;
this.viewport.filters = [ny ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, -1, 1, 1, 0])];
Var hull: Cube = dispObj.addChild (ny Cube (ny MaterialsList ({alt: nye BitmapFileMaterial ("assets /hole.jpg"), bunn: nye BitmapFileMaterial ("eiendeler /k.jpg")}), 80, 80,80,1,1,1, Cube.ALL, Cube.TOP)) som Cube; this._green = dispObj.addChild (ny Cube (ny MaterialsList ({alt: ny ColorMaterial (0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) som Cube, hole.rotationX = dette ._green.rotationX = 90; hole.z = this._green.z = -40;
Trinn 12:. Test Hole
Trinn 13:. Making Mark-ers
Trinn 14: Online Marker Generator
Trinn 15: endre koden
til hva du heter markøren as.
Konklusjon