Share
Augmented Reality ist in letzter Zeit viel aufgetaucht, insbesondere auf Flash-basierter AR. Ich werde Sie durch die Erstellung einiger einfacher, aber hübscher Effekte führen, die Sie auf Ihre eigene Website setzen können.
Augmented Reality wurde als einer der heißesten Trends des Jahres 2010 bewertet. Das Konzept dahinter ist ziemlich einfach: Überlagern Sie die physische Welt mit coolen Grafiken, die den gleichen Raum wie Sie einnehmen.
Viele Unternehmen haben es als großartiges Werbemittel verwendet. Adidas hat sie kürzlich in ihre Schuhe gesteckt und ein sehr cooles Spiel gemacht.
Lego verwenden Sie es, um zu visualisieren, wie ihre Produkte aussehen werden, wenn Sie mit dem Bau fertig sind.
Einige Freiberufler nutzen es als sehr coole Visitenkarte und Werbemittel. Mit AR können Sie eine beeindruckendere Visitenkarte erstellen, ohne dass dabei Kosten entstehen, und Sie können weitere Informationen dazu hinzufügen.
Im Januar dieses Jahres habe ich ein Projekt für die Universität abgeschlossen, in dem ich ein tragbares Augmented-Reality-System geschaffen habe. Es gab eine virtuelle Galerie, die, während Sie herumgingen, eine sehr tragische Geschichte erzählte.
Schauen Sie sich das Video auf Youtube an.
Ich ging an das Erstellen von AR aus Design-Sicht und wusste sehr wenig über das Programmieren in AS3. Ich bin hier, um das Gelernte mit Ihnen zu teilen, da es für Anfänger sehr schwierig war, etwas über das Thema zu lernen. Es ging nur darum, alles von vorne zu beginnen.
Ich bin mir sicher, Sie sind voll von Ideen, die Sie erstellen müssen. Lassen Sie uns Ihr erstes Augmented-Reality-Projekt erstellen: Tiefe Tiefe auf ein flaches Blatt Papier.
flARToolkit ist die Flash-Version der C-codierten Augmented-Reality-Bibliothek, die einfach als ARToolkit bezeichnet wird. Es wurde von einem sehr erfahrenen japanischen Kodierer namens Saqoosha umgerüstet. Er macht alle möglichen verrückten Sachen mit Augmented Reality und wenn Sie Japanisch lesen können oder bereit sind, viele Posts durchzugehen, die beim Übersetzen kaum Sinn machen, dann können Sie viel von ihm lernen. Er schuf den berüchtigten "Loch in der Wand" -Effekt, der in dem von ihm gegründeten Neujahrsfestprojekt 2009 gezeigt wird.
Vor kurzem hat er gezeigt, dass Sie verschiedene Marker miteinander verknüpfen können und andere wunderbare Effekte, von denen ich nur träumen konnte.
Squidder.com hat eine vorhandene flARToolkit-Bibliothek, die flARManager-Klasse, geändert, um Ereignisse und mehrere Objekte verarbeiten zu können. Interessanterweise veröffentlichen sie ihren Quellcode und ein sogenanntes "How to", erklären jedoch niemals ihren eigenen Code. Ich brauchte einige Zeit, um herauszufinden, wie man mehrere Objekte erhält, die alle unterschiedlich sein könnten. Ich sollte jetzt darauf hinweisen, dass ich zuerst ein Designer bin und das Codieren aus dem Wunsch entstand, verrückte Dinge zu machen. Ich näherte mich dem Ziel, dass das Endergebnis funktionieren sollte, anstatt mich mit den besten Wegen für das Codieren von Dingen zu beschäftigen.
Laden wir den Code von ihrem ursprünglichen Beitrag zum Thema herunter und werfen Sie einen Blick darauf.
Bearbeiten: Squidder.com ist zurzeit inaktiv; Verwenden Sie stattdessen diesen Link: http://kablamo.co.uk/flarsquidderkit.zip
Laden Sie die Datei "flarsquidderkit.zip" herunter, extrahieren Sie die ZIP-Datei und öffnen Sie den Hauptordner. Wenn Sie den ZIP-Ordner nicht extrahieren, können Sie die SWF-Datei nicht richtig öffnen und die benötigten Dateien nicht bearbeiten. Sobald Sie das getan haben, werden Sie 3 Schlüsselordner sehen: deploy, fla und src. Sie sehen auch eine Datei namens "flardrums.pdf".
Wir haben jetzt unsere Marker, drucken sie aus, damit wir sie testen können und sehen, wie die Quelle aktuell funktioniert.
Öffnen Sie den Bereitstellungsordner und öffnen Sie die MultiFLARExample.swf. Akzeptieren Sie die Webcam und spielen Sie mit den Markern.
In einer von ihnen erstellten Videodemo legen Sie Ihre Hand einzeln über jede Markierung und sehen, wie sie beim Verschwinden Klänge erzeugen. Dies wurde von Squidder geschrieben. Sie fügten zwei Ereignisse hinzu, MARKER_ADDED und MARKER_REMOVED. Wir werden später untersuchen, wie diese Ereignisse verwendet werden.
Jetzt wissen Sie, wie es derzeit aussieht. Lassen Sie uns jetzt den Quellcode ändern, um einige coole Dinge zu tun.
Ich gehe davon aus, dass Sie über Grundkenntnisse in AS3 und Klassenblättern verfügen.
Öffnen Sie den Ordner \ fla \ und doppelklicken Sie auf "multiFLARExample.fla". Im Eigenschaftenfenster sollte das mit MultiFLARExample ausgefüllte Klassenfeld angezeigt werden. Klicken Sie auf das Bleistiftsymbol neben dem Klassenfeld, damit wir den Code betrachten können.
Sofort sehen Sie den üblichen Importcode oben und darunter sowie einige grundlegende Variablen für Lichtquellen.
Der nächste ist ein interessanter Teil, der Code, der in die Marker geladen wird. Wie Sie sehen, werden die Marker in ein Array geladen, sodass sie später einfach aufgerufen werden können. Achten Sie auf die Reihenfolge, in der sie hier geladen wurden. Der erste Marker im Array erhält die ID 0, der nächste 1 und so weiter. Wir werden diese IDs später verwenden.
Schauen Sie sich auch private Funktionen an _addCube und _getFlatMaterial Da dies die beiden anderen Abschnitte sind, werden wir uns heute auf das Editieren konzentrieren. Sie sind ziemlich selbsterklärend, was sie tun, aber sie sind seltsam eingerichtet. Sie wurden aus Gründen der Einfachheit so codiert, dass sie dasselbe Objekt in mehreren Farben und nicht in vielen verschiedenen Objekten erhalten, daher müssen wir einige Änderungen vornehmen.
Okay, lass uns den Code ändern. Lassen Sie es in einen brauchbareren Zustand umwandeln, aber jetzt behalten wir das visuelle Aussehen bei. Als ich das alles herausfand, war es eine seltsame Erleichterung, herauszufinden, dass es darauf ankam ob Aussagen am Ende. Ob Aussagen sind einfach magisch und nützlich, wenn es darum geht, Dinge zu codieren.
In dem _addCube Funktion ersetzen diesen Code:
var cube: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40); cube.z = 20; dispObj.addChild (Cube);
mit dem folgenden Code:
if (id == 0) var cube: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40); cube.z = 60; dispObj.addChild (Cube); else if (id == 1) var cube2: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40); cube2.z = 0; dispObj.addChild (Cube2); else if (id == 2) var cube3: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40); cube3.z = 20; dispObj.addChild (Cube3); else if (id == 3) var cube4: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40); cube4.z = 40; dispObj.addChild (Cube4);
Nun mag dies wie ein komplizierter Umgang mit Würfeln erscheinen, aber es erlaubt uns, mit jedem einzelnen Würfel umzugehen. Im obigen Code habe ich beispielsweise die Z-Achse der Cubes geändert, um Ihnen zu zeigen, dass der Code jetzt jeden Cube als sein eigenes Objekt behandelt. Lass uns den Film ausprobieren, du solltest etwas zu diesem Effekt haben:
Bevor wir fortfahren, lassen Sie mich den Code erläutern, den Sie gerade eingegeben haben. Es ist ziemlich einfach und wenn Sie papervision3D verwendet haben, bevor Sie diesen Teil überspringen können.
var cube: Cube = neuer Cube (neue MaterialsList (all: fmat), 40, 40, 40);
Hier erstellen wir eine neue Variable, Würfel. Diese Variable enthält alle Informationen, die erforderlich sind, um einen Cube zu rendern und zu bestimmen, wie er aussieht. Das Materialliste Teil bezieht sich auf das Material, das für die Außenseite des Würfels verwendet wird. Da wir auf jeder Seite dasselbe Material haben möchten und dieses Material in einer Variablen enthalten ist, die zuvor im Code erstellt wurde, verwenden wir all: fmat. Ich werde später mehr über die Variable fmat sprechen. Schließlich die drei 40er, das sind die Abmessungen des Würfels, die Breite, Höhe und Tiefe. Natürlich müssen sie nicht alle gleich sein, auch wenn dies ein Würfel ist. Sie können die Cube-Methode verwenden, um rechteckige Quaderformen zu erstellen, wenn Sie dies wünschen.
cube.z = 20;
Dies legt den z-Wert des Würfels fest. So hoch sitzt der Würfel über der Markierung. 0 ist die Mittellinie des Würfels. Wenn Sie ihn auf die Hälfte der Formhöhe setzen, bedeutet dies, dass er sich genau auf der Markierung befindet.
dispObj.addChild (Cube);
dispObj verweist auf ein Anzeigeobjekt, das zuvor im Code erstellt wurde. Ein Anzeigeobjekt rendert Ihr Objekt auf dem Bildschirm. Sie können beliebig viele Formen in ein Anzeigeobjekt laden, sodass wir alle unsere Formen vorerst in dieses Objekt laden werden.
Brillant, jetzt, da Sie wissen, wie es funktioniert, können Sie den Code weiter bearbeiten. Sie brauchen das nicht wirklich _getFlatShadeMaterial Funktion, also lassen Sie uns das alles zusammen bearbeiten. Auf diese Weise können wir jedem Objekt ein anderes Material geben.
Sie möchten diese Zeile in Ihrem Code finden:
Wir werden jetzt das bearbeiten fmat Variable, so dass anstelle des Aufrufens einer Funktion ein neues flatShadeMaterial aufgerufen wird, in dem wir die Farben angeben. Später beschäftige ich mich mit anderen Materialien, einschließlich Bitmap-Materialien.
Ersetzen _getFlatMaterial (id); mit:
neues FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e);
Die drei Parameter legen die Lichtquelle für das flatShadeMaterial, die flache Farbe und auch die Schattenfarbe fest. Dadurch wird unser Objekt realistischer, wenn wir es drehen und im physischen Raum drehen.
Nun wollen wir unterhalb dieser Zeile hinzufügen:
var fmat2: FlatShadeMaterial = neues FlatShadeMaterial (_lightPoint, 0x00ff00, 0x113311); var fmat3: FlatShadeMaterial = neues FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); var fmat4: FlatShadeMaterial = neues FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
Nun, da wir für jedes unserer Objekte eine Variable erstellt haben, möchten wir den Cube-Code, den ich Ihnen zuvor gegeben habe, ändern. Anstatt nur zu haben fmat Als Material für alle unsere Würfel sollten Sie es ändern fmat, fmat2, fmat3 und fmat4 so dass unsere Würfel anders aussehen.
Nachdem Sie das getan haben, können Sie jetzt die _getFlatMaterial Funktion.
Löschen Sie die folgenden Codezeilen:
private Funktion _getFlatMaterial (id: int): FlatShadeMaterial if (id == 0) return new FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e); else if (id == 1) gibt neues FlatShadeMaterial zurück (_lightPoint, 0x00ff00, 0x113311); else if (id == 2) neues FlatShadeMaterial zurückgeben (_lightPoint, 0x0000ff, 0x111133); else return neues FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
Und jetzt lass uns nochmal testen. Wenn alles richtig gemacht wurde, sollte es genau gleich aussehen. Was für eine Leistung, eh?
Es sieht vielleicht nicht nach viel aus, aber wir haben gerade die Grundlage dafür geschaffen, viele verschiedene Objekte zu erstellen.
Okay, lass uns etwas nützlicher machen. Das Bitmap-Material. Die meisten Leute möchten ihre eigenen Bilder in die AR stellen, um auf coole Art und Weise ihre Arbeit zu präsentieren. Dies wird erreicht, indem ein Bild als Material verwendet wird.
Es ist fantastisch einfach. Ich habe das folgende Bild für Sie erstellt, da ich Ihnen zeigen werde, wie Sie Bitmap-Material über einen Weblink verwenden.
Zuerst müssen Sie die importieren BitmapFileMaterial Klasse. Fügen Sie oben in Ihrem Codeblatt, in das alle anderen Klassen importiert werden, die folgende Zeile hinzu:
import org.papervision3d.materials.BitmapFileMaterial;
und ändern Sie Ihr fmat-Material wie folgt:
Accentsconagua
var fmat: BitmapFileMaterial = neues BitmapFileMaterial ("http://kablamo.co.uk/artutorial/kcube1.jpg"); Jetzt testen wir es, es sollte so aussehen:
Wie einfach war das??
Nun, da ich Ihnen gezeigt habe, wie ein Würfel erstellt wird, der sich über der Markierung befindet, erstellen wir einen Würfel, der sich unterhalb der Markierung befindet, um den Würfel zu erstellen Loch in der Wand bewirken.
Dieser Effekt wurde ursprünglich von Saqoosha vorgestellt und erklärt. Leider erklärte er es auf japanisch und für papervision3d eher, dass für flARToolkit also ein paar Änderungen vorgenommen wurden.
Sie müssen diese beiden Klassen importieren:
import flash.geom.ColorTransform; importieren Sie flash.filters. *;
Fügen Sie diese Zeile unter hinzu _lightpoint mit den anderen privaten Variablen:
private var _grün: Würfel;
und dann unter var dispObj: DisplayObject3D = neues DisplayObject3D (); Folgendes hinzufügen:
this.viewport.filters = [neuer ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -1, 1, 1, 0])];
Im Grunde geht es hier darum, dass Sie zwei Würfel haben, von denen einer grün ist und der andere die Innenansicht bildet. Sie werden eine in der anderen sitzen. Mit dem Viewport-Filter wird alles ausgeblendet, das in dieser bestimmten Farbe Grün ist. Dies ist, worauf wir den äußeren Würfel setzen, wodurch der Eindruck entsteht, dass sich in der Markierung ein Loch befindet.
Jetzt werden wir die zwei Würfel erstellen.
Entfernen Sie Ihren vorhandenen Cube-Code und ersetzen Sie ihn durch diesen:
var hole: Cube = dispObj.addChild (neuer Cube (neue MaterialsList (alle: neues BitmapFileMaterial ("assets / hole.jpg"), unten: neues BitmapFileMaterial ("assets / k.jpg")), 80, 80, 80,1,1,1, Cube.ALL, Cube.TOP)) als Cube; this._green = dispObj.addChild (neuer Cube (neue MaterialsList (all: new ColorMaterial (0x00ff00)), 80, 80,80, 1, 1, 1, Cube.TOP)) als Cube; hole.rotationX = this._green.rotationX = 90; hole.z = this._green.z = -40; Beachten Sie, dass die Materialien, die wir in zwei JPG-Dateien importieren, aus dem Ordner "Assets" importiert werden. Dieser Ordner befindet sich im Hauptordner der Bereitstellung, in dem sich die Datei MultiFLARExample.swf befindet. Sie können entweder die folgenden von mir erstellten Bilder herunterladen oder eigene Bilder erstellen.
Testen Sie es und Sie sollten so etwas haben:
Inzwischen haben Sie es wahrscheinlich satt, ein Papier mit vier Markierungen bis zur Kamera hochzuhalten. Sie möchten Ihren eigenen Marker haben, also machen wir es. Mit ein paar Online-Tools und Photoshop können Sie innerhalb weniger Minuten Ihren eigenen Marker erstellen.
Lassen Sie uns zunächst Ihren Marker erstellen. Sie müssen kein Strichcode-ähnliches Design wie auf den derzeit verwendeten Markierungen verwenden. Wenn Sie jedoch viele Markierungen verwenden, ist der Barcode der beste Weg. Wenn Sie eine oder zwei verwenden, gehen Sie mit dem Design wild um. Für mein Marker-Design habe ich das K aus dem Logo meiner Website verwendet.
Wenn Sie es für eine Visitenkarte oder Werbematerial tun, denken Sie darüber nach, wie der Marker aussieht, da Sie einige sehr schön aussehende Marker erstellen können, die sich mehr in das Design einfügen.
Sie müssen Ihr Photoshop-Dokument für die Markererstellung einrichten. Erstellen Sie für eine Basismarkierung eine 800x800px-Datei mit einer 150px-Umrandung. Oder laden Sie dieses Bild herunter:
In das weiße Quadrat in der Mitte können Sie Ihr Markierungsdesign einfügen. Drucken Sie die Markierung aus und besuchen Sie den Online-Marker-Generator.
Sie verfügen über einen Online-Marker-Ersteller, der Ihre Marker übernimmt und eine .pat-Datei erstellt, die mit Ihrem Code arbeitet. Es ist ziemlich seltsam, sie haben eine Upload-Option, aber ich habe es nie zum Laufen gebracht (das Ausdrucken funktioniert einwandfrei). Es gibt auch eine AIR-App, die genau die gleiche Aufgabe erfüllt. Dies ist jedoch vorerst in Ordnung.
Legen Sie die Markierungssegmente auf 16 x 16 und die Markergröße auf 50% fest. Zeigen Sie der Webcam Ihren Marker an. Wenn ein rotes Quadrat Ihren Marker umgibt, klicken Sie auf Muster holen. Wenn Sie mit dem Aussehen im Vorschaufenster zufrieden sind, klicken Sie auf Speichern.
Wenn Ihre Markierung in der Vorschau wirklich ungerade aussieht oder ein rotes Quadrat nicht angezeigt wird, müssen Sie möglicherweise die Markierung neu entwerfen. Sie müssen auch sicherstellen, dass sich um Ihre Markierung herum etwas Leerzeichen befindet, da Flash die Markierung sonst nicht erkennt.
Wenn das Dialogfeld angezeigt wird, laden Sie es nicht einfach irgendwo herunter. Sie müssen die .pat-Datei in einem bestimmten Ordner ablegen. Navigieren Sie zu Ihrem flARToolkit-Ordner> deploy> assets> flar. Dort sollten Sie vier weitere .pat-Dateien finden. Speichern Sie Ihr Muster dort und merken Sie sich, wie Sie es genannt haben. Ich rief meinen "kmarker.pat" an
Zurück im Flash finde diese Zeile:
Und ändern crash.pat zu was auch immer Sie Ihren Marker als benannt haben.
Wenn Sie Ihre Flash-Datei testen, sollten Sie feststellen, dass Ihr neuer Marker alles perfekt aufnimmt.
Vielen Dank für das Lesen dieser Einführung in Augmented Reality. Ich hoffe, es hat Ihnen gefallen und es hat Sie neugierig gemacht auf Ihre eigenen AR-Projekte. Im nächsten Teil dieses Tutorials werde ich behandeln, wie Sie Objekte mit TweenMax animieren, die Marker ein wenig mehr Klang erzeugen, 3D-Modelle importieren und alles schöner machen.
