Share
Realitatea Augmented a crescut foarte mult în ultima vreme, în special AR bazată pe Flash. Vă voi îndruma cum să creați niște efecte simple și totuși îngrijite pe care le puteți pune pe site-ul dvs. propriu.
Realitatea augmentată a fost considerată una dintre cele mai fierbinți tendințe din 2010. Conceptul din spatele său este destul de simplu, de-a lungul lumii fizice, cu o grafică rece care par să ocupe același spațiu ca și tine.
O mulțime de companii au folosit-o ca un instrument promoțional excelent. Adidas le-a pus recent pe pantofi și a făcut un joc foarte interesant.
Lego îl folosește ca o modalitate de a vizualiza ce vor arăta produsele lor când le-ați terminat.
Unii freelanceri o folosesc ca o carte de vizită foarte interesantă și un instrument promoțional. AR vă permite să creați o carte de vizită mai impresionantă, fără niciun cost, și puteți să vă potriviți mai multe informații despre aceasta.
În luna ianuarie a acestui an, am finalizat un proiect pentru universitate, unde am creat un sistem de realitate augmentat. A fost o galerie virtuală, care, pe măsură ce ați mers în jur, a povestit o poveste foarte tragică.
Consultați videoclipul de pe YouTube.
Am abordat crearea de AR din punct de vedere al designului, știind foarte puțin despre codificare în AS3. Sunt aici pentru a împărtăși ceea ce am învățat cu dvs., deoarece mi-a părut foarte dificil pentru începători să învețe ceva despre subiect. A fost doar o chestiune de a începe totul de la zero.
Acum sunt sigur că sunteți plini de idei de lucruri pe care trebuie să le creați, să creăm primul proiect de realitate augmentată: adăugarea adâncimii la o bucată de hârtie plat.
flARToolkit este versiunea flash a bibliotecii de realitate îmbogățită codificată C cunoscută pur și simplu ca ARToolkit. A fost transformată de un codificator japonez foarte calificat, cunoscut sub numele de saqoosha. El face tot felul de lucruri nebunești cu realitate augmentată și dacă poți citi japonezi sau ești pregătit să treci prin multe posturi care abia au sens când sunt traduse, atunci poți învăța multe de la el. El a creat infamul "gaura in perete", care este demonstrat in proiectul de sarbatoare de Anul Nou creat pentru a fi binevenit in 2009.
Mai recent, el a demonstrat că puteți conecta diferite markere împreună și alte efecte minunate pe care am putut vreodată visa să le creați.
Squidder.com a modificat o bibliotecă existentă flARToolkit, clasa flARManager, pentru a putea gestiona evenimente și obiecte multiple. Destul de interesant este faptul că postează codul sursă și așa-numitul "cum să", dar nu explică niciodată propriul cod. Mi-a trebuit ceva timp pentru a afla cum să obții mai multe obiecte care ar putea fi diferite. Ar trebui să subliniez acum că eu sunt primul designer și codificarea a rezultat din dorința de a face lucruri nebunești. Am abordat acest lucru dorind ca rezultatul final să funcționeze mai degrabă decât să fie preocupat de cele mai bune modalități de a codifica lucrurile.
Să descărcăm codul din postarea inițială pe subiect și să îl aruncăm o privire.
Editare: Squidder.com este în prezent în jos; utilizați în schimb acest link: http://kablamo.co.uk/flarsquidderkit.zip
Descărcați fișierul numit "flarsquidderkit.zip", extrageți fișierul .zip și deschideți directorul principal. Rețineți că, dacă nu extrageți dosarul .zip, nu veți putea să deschideți corect .swf sau să editați fișierele de care aveți nevoie. Deci, odată ce ați făcut acest lucru, veți vedea 3 foldere cheie: implementați, fla și src. Veți vedea, de asemenea, un fișier numit "flardrums.pdf".
Avem marcatorii noștri pentru moment, le imprimați pentru a putea să le testați și să vedem cum funcționează sursa în prezent.
Deschideți folderul de implementare și deschideți MultiFLARExample.swf. Acceptați camera web și începeți să jucați cu marcatorii.
Într-un demo video pe care l-au creat, treci mâna peste fiecare marcator individual și vezi cum fac sunete când dispar. Acest lucru a fost scris de către squidder. Au adăugat două evenimente, MARKER_ADDED și MARKER_REMOVED. Vom explora modul de utilizare a acestor evenimente mai târziu.
Acum știi cum arată în prezent, să trecem la modificarea codului sursă pentru a face niște lucruri interesante de-ale noastre.
Pentru acest tutorial, presupun că aveți cunoștințe de bază despre AS3 și foile de clasă.
Deschideți directorul \ fla \ și apoi faceți dublu clic pe "multiFLARExample.fla". În panoul de proprietăți ar trebui să vedeți caseta de clasă completă cu MultiFLAREexemplu. Veți dori să faceți clic pe pictograma creion de lângă caseta de clasă, astfel încât să putem începe să căutăm codul.
Imediat, veți vedea codul de import obișnuit în partea de sus și dedesubt câteva variabile de bază pentru sursele de lumină.
Înainte este o parte interesantă, codul care se încarcă în markeri. După cum puteți vedea, marcatorii sunt încărcați într-o matrice, astfel încât să poată fi ușor de apelat ulterior. Fiți atenți la ordinea în care sunt încărcați aici. Primul marcator din matrice obține ID-ul de 0, următorul este 1 și așa mai departe. Vom folosi aceste id-uri mai târziu.
De asemenea, uitați-vă la funcțiile private _addCube și _getFlatMaterial deoarece acestea sunt celelalte două secțiuni pe care ne vom concentra pe editarea de azi. Sunt destul de explicați în ceea ce fac, dar sunt ciudat înființați. Au fost codificate pentru simplitate în obținerea aceluiași obiect în mai multe culori, mai degrabă decât o mulțime de obiecte diferite, așa că trebuie să facem câteva schimbări.
Bine, să schimbăm un cod. Să o modificăm într-o stare mai utilizabilă, dar pentru moment vom păstra aspectul vizual la fel. Când mi-am imaginat toate astea, a fost o ușurare ușoară pentru a afla că totul a căzut dacă declarații în cele din urmă. Dacă afirmațiile sunt atât de magice și utile atunci când vine vorba de codificarea lucrurilor.
În _addCube funcția înlocuiesc acest cod:
var cub: Cube = Cub nou (new MaterialsList (all: fmat), 40, 40, 40); cube.z = 20; dispObj.addChild (cub);
cu următorul cod:
dacă (id == 0) var cube: Cube = Cube nou (new MaterialsList (all: fmat), 40, 40, 40); cube.z = 60; dispObj.addChild (cub); altfel dacă (id == 1) var cube2: Cube = Cube nou (new MaterialsList (all: fmat), 40, 40, 40); cube2.z = 0; dispObj.addChild (cube2); altfel dacă (id == 2) var cube3: Cube = nou Cub (new MaterialsList (all: fmat), 40, 40, 40); cube3.z = 20; dispObj.addChild (cube3); altfel dacă (id == 3) var cube4: Cube = Cube nou (new MaterialsList (all: fmat), 40, 40, 40); cube4.z = 40; dispObj.addChild (cube4);
Acum, aceasta ar putea părea o modalitate complicată de a face față cuburilor, dar ne permite să facem față fiecărui cub individual. De exemplu, în codul de mai sus, am modificat axa z a cuburilor pentru a vă demonstra că codul gestionează acum fiecare cub ca obiect propriu. Să încercăm filmul, ar trebui să aveți ceva în acest sens:
Înainte de a continua, permiteți-mi să explic codul pe care tocmai l-ați pus. Este destul de drept înainte și dacă ați folosit papervision3D înainte să puteți sări peste această parte.
var cub: Cube = Cub nou (new MaterialsList (all: fmat), 40, 40, 40);
Aici vom crea o nouă variabilă, cub. Această variabilă conține toate informațiile necesare pentru a face un cub și a determina cum arată. MaterialsList o parte se referă la materialul utilizat pentru exteriorul cubului. Întrucât vrem același material pe fiecare parte și că materialul este păstrat într-o variabilă creată mai devreme în cod, folosim toate: fmat. Mai târziu voi vorbi despre variabila fmat. În cele din urmă, cele trei 40, acestea sunt dimensiunile cubului, lățimea, înălțimea și adâncimea. Bineînțeles că nu trebuie să fie toți aceiași, chiar dacă acesta este un cub. Puteți folosi metoda cub pentru a crea forme cuboide dreptunghiulare, dacă doriți.
cube.z = 20;
Aceasta stabilește valoarea z a cubului. Acesta este modul în care cubul este ridicat deasupra marcatorului. 0 este linia centrală a cubului și fixarea acestuia la jumătatea înălțimii formei înseamnă că este așezat exact pe vârful marcatorului.
dispObj.addChild (cub);
dispObj se referă la un obiect afișat care a fost creat mai devreme în cod. Un obiect afișat va face obiectul pe ecran. Puteți încărca cât mai multe forme pe care le doriți în interiorul unui obiect de afișare, așa că acum vom încărca toate formele noastre în ea.
Brilliant, acum că știți cum funcționează, să continuăm să editați codul. Nu aveți nevoie de adevărat _getFlatShadeMaterial așa că hai să o editați pe toate împreună. A face acest lucru ne permite, de asemenea, să oferim un material diferit fiecărui obiect.
Veți dori să găsiți această linie în codul dvs.:
Acum vom edita FMAT astfel încât, în loc să apelați o funcție, se va numi un new flatShadeMaterial unde specificăm culorile. Mai târziu voi aborda și alte materiale, inclusiv materiale bitmap.
A inlocui _getFlatMaterial (id); cu:
noul FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e);
Cei trei parametri stabilesc sursa de lumină pentru materialul FlatShadeMaterial, culoarea plană și culoarea umbrei. Făcând acest lucru vom da obiectului nostru un efect mai realist pe măsură ce îl întoarcem și îl rotim în spațiul fizic.
Acum, sub această linie, vom dori să adăugăm:
var fmat2: FlatShadeMaterial = FlatShadeMaterial nou (_lightPoint, 0x00ff00, 0x113311); var fmat3: FlatShadeMaterial = FlatShadeMaterial nou (_lightPoint, 0x0000ff, 0x111133); var fmat4: FlatShadeMaterial = nou FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
Acum, că am creat o variabilă pentru fiecare dintre obiectele noastre, vom dori să schimbăm codul de cub pe care vi l-am dat mai devreme. În loc de a avea doar FMAT ca material pentru toate cuburile noastre, veți dori să-l schimbați fmat, fmat2, fmat3 și fmat4 astfel încât cuburile noastre să pară diferite.
După ce ați făcut acest lucru, puteți elimina în cele din urmă _getFlatMaterial funcţie.
Ștergeți următoarele linii de cod:
funcția privată _getFlatMaterial (id: int): FlatShadeMaterial if (id == 0) returnează FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e); altfel dacă (id == 1) returnează FlatShadeMaterial (_lightPoint, 0x00ff00, 0x113311); altfel dacă (id == 2) returnează FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); altceva returnează FlatShadeMaterial nou (_lightPoint, 0x777777, 0x111111);
Și acum să încercăm din nou. Dacă totul se face corect, ar trebui să arate exact același lucru. Ce realizare, eh?
Este posibil să nu pară prea mult, dar tocmai am creat fundația pentru a crea o mulțime de obiecte diferite.
Bine, să mergem la ceva mai util. Materialul bitmap. Majoritatea oamenilor ar dori să-și pună propriile imagini în AR ca mod răcoros de a-și prezenta munca; acest lucru se realizează prin utilizarea unei imagini ca material.
Este fantastic de simplu. Am creat următoarea imagine pentru a vă folosi, deoarece vă voi arăta cum să utilizați materialul bitmap printr-un link web.
În primul rând, trebuie să importați BitmapFileMaterial clasă. În partea de sus a foii de cod unde sunt importate toate celelalte clase, adăugați următoarea linie:
import org.papervision3d.materials.BitmapFileMaterial;
și schimbați materialul fmat la următoarele:
Accentsconagua
var fmat: BitmapFileMaterial = nou BitmapFileMaterial ("http://kablamo.co.uk/artutorial/kcube1.jpg"); Acum, să o testați, ar trebui să arate exact așa:
Cât de simplu a fost asta?
Acum că v-am arătat cum să faceți un cub care se află deasupra marcatorului, să creăm un cub care se află sub marcator pentru a crea gaura in perete efect.
Acest efect a fost inițial imaginat și explicat de saqoosha. Din păcate, el a explicat-o în japoneză și pentru papervision3d mai degrabă că pentru utilizarea cu flARToolkit, așa că s-au făcut câteva schimbări.
Trebuie să importați aceste două clase:
import flash.geom.ColorTransform; fișiere flash de import. *;
Adăugați această linie sub _lightpoint cu celelalte variabile private:
privat var _green: Cube;
și apoi sub var dispObj: DisplayObject3D = nou DisplayObject3D (); adăugați următoarele:
acest filtru de filtre = [new ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0])];
Practic, ceea ce se întâmplă aici este că veți avea două cuburi, una fiind verde, iar cealaltă formând vederea interioară. Ei vor sta unul în celălalt. Filtrul din fereastra de vizualizare va masca tot ceea ce este acea culoare verde specială, ceea ce am stabilit la cubul exterior, dând efectul că există o gaură în marker.
Acum vom crea cele două cuburi.
Eliminați codul cubului existent și înlocuiți-l cu acesta:
var: Cube = dispObj.addChild (noul Cube (noul MaterialList (toate: noul BitmapFileMaterial ("assets / hole.jpg" 80,1,1,1, Cube.ALL, Cube.TOP)) ca Cube; this._green = dispObj.addChild (nou Cube (noul MaterialList (toate: noul ColorMaterial (0x00ff00)), 80, 80,80, 1, 1, Cube.TOP); hole.rotationX = this._green.rotationX = 90; hole.z = this._green.z = -40; Observați, pentru materialele pe care le importăm în două fișiere .jpg din dosarul cu materiale. Acest dosar este localizat în directorul principal de implementare, unde se găsește fișierul MultiFLARExample.swf. Puteți descărca următoarele imagini pe care le-am creat sau le puteți crea.
Dați-i un test și ar trebui să aveți ceva de genul:
Până acum, ești probabil că te-ai săturat să ții o bucată de hârtie cu patru margini până la cameră. Vrei să ai propriul tău marcator, așa că hai să reușim. Cu câteva instrumente online și Photoshop, puteți avea propriul dvs. marker în câteva minute.
În primul rând, să vă facem marca. Nu aveți nevoie să utilizați un design asemănător unui cod de bare ca pe marcajele pe care le utilizați în prezent, dar dacă utilizați o mulțime de markere atunci codul de bare este cel mai bun mod de a merge. Dacă utilizați una sau două, atunci faceți salt cu designul. Pentru designul meu de marker, am folosit K din logo-ul site-ului meu.
Dacă o faci pentru o carte de vizită sau pentru un material promoțional, gândește-te la felul în care arată marker-ul și poți să faci niște markeri foarte frumosi care se amestecă în design mai mult.
Trebuie să configurați documentul Photoshop gata pentru crearea de marcaje. Pentru un marker de bază, creați un fișier de 800x800px cu o margine de 150px pe tot parcursul. Sau descarcă această imagine mai jos:
Pătratul alb din mijloc este locul unde puteți pune designul dvs. de marcator. Imprimați marcatorul și apoi efectuați o vizită la Generatorul de marcatori online.
Ei au un creator de markeri on-line care iti ia marker-ul si face un fisier .pat care functioneaza cu codul tau. Este destul de ciudat, au o opțiune de încărcare, dar nu am reușit niciodată să lucrez (imprimarea funcționează foarte bine). Există, de asemenea, o aplicație AIR care face același lucru, dar acest lucru este bine pentru moment.
Setați segmentele de marcatori la 16x16 și marimea marcatorului la 50%, arătați marcajul pe camera dvs. Web și atunci când un pătrat roșu înconjoară markerul faceți clic pe modelul de obținere, dacă sunteți mulțumit de modul în care arată în fereastra de previzualizare, faceți clic pe Salvați.
Dacă marcatorul dvs. arată cu adevărat ciudat în previzualizare sau dacă nu apare un pătrat roșu, este posibil să trebuiască să vă re-proiectați marcajele. De asemenea, trebuie să vă asigurați că există un spațiu alb în jurul marcatorului dvs., deoarece Flash nu o va recunoaște.
Când se deschide caseta de dialog, nu descărcați acest lucru oriunde, trebuie să puneți fișierul .pat într-un anumit dosar. Navigați la folderul flartoolkit> deploy> assets> flar și ar trebui să găsiți alte patru fișiere .pat acolo. Salvează-ți modelul acolo și ține minte ceea ce ai numit-o. Am sunat pe mine "kmarker.pat"
Înapoi în blitz, găsiți această linie:
Și schimbați crash.pat la orice ai numit marcatorul tău.
Dacă testați fișierul dvs. Flash, ar trebui să găsiți că noul dvs. marker alege totul perfect.
Vă mulțumim că ați citit această introducere la Realitatea Augmented. Sper că ți-a plăcut și că te-a făcut curios să-ți creezi propriile proiecte AR. În următoarea parte a acestui tutorial, voi studia cum să animați obiecte cu TweenMax, făcând marcajele un pic mai mult sunet de joc, importând modele 3D și făcând totul mai frumos.
