Prototyping Augmented Reality
description
Transcript of Prototyping Augmented Reality
Prototyping Augmented Reality
Universität zu KölnHistorisch-Kulturwissenschaftliche Informationsverarbeitung
Medien zwischen Technik und Gesellschaft WS 2012/13
Dozent: Prof. Dr. ThallerReferentin Maria Wagner
Inhaltsverzeichnis• Augmented Reality• Processing• Blender Modeling• Low-Poly Animated Character• 3D-Programming in Processing• AR mit Processing• Physikalische Welt• Webbasierte AR• jMonkeyEngine• Android
Augmented Reality
• Beschreibt eine Kombination von Technologien, die es ermöglichen, reale Zeit von computergenerierten Inhalt mit Live Video Bildschirmen zu mischen
• Sie erzeugen, was nicht wirklich da ist• Vermischt Live Medien mit virtuellen Inhalt um des
Nutzungswillen• VR vs. AR • Smartphone, Mobile Plattformen: eröffnet neue
Möglichkeiten und Potential
• Billig und einfach, für Marketingzwecke • AR funktioniert durch– Location und Orientation (GPS)
• Printed Markers – Aktuelles Bild, markerlos – computer vision
• Interagieren durch:– Bild Verarbeitung – Computer Vision: wie man Computer gemachte 3D
Inhalte verschmilzt mit Live Video und physikalischen Markern
Geschichte der AR
• Terminator (1984): Graphische Overlays in dem Sehkraft-System
• 1990: Tom Caudell • Ende der ´90: ARToolKit
Processing
Umgebung
• Nicht unbedingt für Computer Programmierer• Eine Extension von Java Programm Sprache
Die ersten Schritte
• Ein Fenster erstellen:size (600, 400);
• Ein Kreis zeichnen:background (0); fill (255, 255 0); stroke (255, 0 ,255); strokeWeight (10); ellipse (300, 200, 200, 200);
Interaktiver Modus, Animation setup () --> nur einmal executed draw () --> wiederholt den Code immer wieder
int i = -50void setup () { size (300, 300);fill (255);stroke (0);strokeWeight (3); }
void draw () {background (100); ellipse(150, i, 100, 100); i++;if (i > 350) {i = -50;} }
Weitere Formen
• Point ()• Line ()• Triangle ()• Quad ()• Rect ()• Ellipse ()• Arc ()
Farbe• RGBVoid setup () {Size (500, 500);Colormode (HSB, 1) HGB }Void draw () {For (int x = 0; x <=500; x++) {Stroke (x/500.0, mouseX/500.0, 0.7);Line (x, 0, x, 500);}}
Bouncers: Klassen, Mausinteraktion
• Wie die Kugeln gemalt werden:Class Spot {Int x, y; Int rate = 1; Int initialY;Boolean fall = true;Boolean active = false; …void display (){noStroke(); fill(255); ellipse…}
• Mausinteraktion:Void mouseReleased /Pressed(){Spots [spotcount-1].initialY = mouseY;Spots [spotcount-1].active= true;
Blender
Blender
• Modellieren, Texturieren, Animieren im 3D Kontext
• Open Source• www.blender.org – Version 2.58• Man kann einen animierten Charakter
erstellen, der mit AR interagieren kann
Tipps
• Symmetrische Objekte: eine Hälfte modellieren, die andere duplizieren
• Low – poly Charakter • Ambient occlusion (AO) als Lichteffekt• UV Texturing
Low-Poly Animated Character
Animation
• Armature: Charakter – Skelet erstellen (bones)
• 3D Elemente platzieren, keying in verschiedenen Positionen in einer Zeit
3D-Programming in Processing
Einführung
Void setup () {Size (500, 500, P3D); }Void draw () {Background (255);Sphere (100); }
Weiterführung int y = -100Void setup () {Size (500, 500, P3D); noStroke ();}Void draw () {Background (255);Lights ();Translate (250, y, 0);Sphere (100); Y++;If ( y > 600){Y = -100;}}
Lichtint y = -100Float dirY;Float dirX;Void setup () {Size (500, 500, P3D); noStroke ();Fill (255, 0, 255);}Void draw () {Background (255);If (mouseY <= y) {dirY = -(1.0-(mouseY/float(y)));} else {dirY = float (mouseY-y/float(height-y);}dirX = (mouseX/float(width) –0.5)*2;directionalLight (255, 255, 255, -dirX, -dirY, -0.5);Translate (250, y, 0);Sphere (100); Y++;If ( y > 600){Y = -100;}}
OBJ Dateien
• Text basierte Dateien, welche die Koordinaten von Eckpunkten und ihre Verbindungen beschreiben
• Beinhalten Text Dateien, die 3D Daten enthalten • OBJ library in Processing importieren• Auch möglich:– Animation durch Schleifen, Boolean (true: es wird
gemalt)
OBJ Dateien: Nutzung Import processing.opengl.*;Import saito.objloader.*;OBJModel ourModel;Float rotX, rotY;Void setup () {Size (800, 600, OPENGL);ourModel = new OBJModel (this, „sa.obj“, TRIANGLES);ourModel.enableDebug();ourModel.scale (80);ourModel.translateToCenter();noStroke();}Void draw () {Background (200);Lights ();Translate (width/2, height/2, 0);rotateX(rotY);rotateY(rotX);ourModel.draw (); }Void mouseDragged () {rotX += (mouseX – pmouseX) * 0.01;rotY -= (mouseY – pmouseY) * 0.01; }
AR mit Processing
NyAR4psg Library • Von dem Projekt NyARToolkit by Rio IizukaGSCapture cam;NyARMultiBoard nya;Pfont font, font2D;
Void setup () {…colorMode (RGB, 100);Font = createFont („FFScala“, 32);Font2d = createFont („FFScala“, 10);
Cam = new GSCapture (this, width, height);Cam.play ();
String [] patts = {„patt.hiro“, „patt.kanji“};Double [] widths = {80, 80};
Nya=newNyARMultiBoard(this, width, height,„camera_para.dat“, patts, widths);
Nya.gsThreshold = 120;//(0>n>255) default=110Nya.cfThreshold=0.4;//(0.0>n>1.0) default=0.4
Void drawMarkerPos(int[][]pos2d){textFont(font, 10.0);Stroke(100,0,0);Fill(100,0,0);
For (int i=0; i<4; i++) {Ellipse (pos2d[i][0], pos2d[i][1],5,5);}
Void draw() {If (cam.available() !=true){Return;}Cam.read();
Hint (DISABLE_DEPTH_TEST);Image (cam,0,0);Hint (ENABLE_DEPTH_TEST);
If(nya.detect(cam)){Hint (DISABLE_DEPTH_TEST);For (int i=0; i<nya.markers.lenght;i++){If(nya.markers[i].detected){drawMarkerPos(nya.markers[i].pos2d);}}Hint (ENABLE_DEPTH_TEST); 3D
Nya.markers[i].beginTransform();
Translate (0,0,20);If (i==0){Stroke (255, 200, 0);Box(40);}else{Stroke (0,200,255);Sphere(25); }Nya.markers[i].endTransform();}}}
Physikalische Welt
Physical computing
• Software – basiertes System• Beispiele:– Hausalarm-System– Bewegungsmelder
• Verändert die Umwelt
Arduino
• Mikrokontroller, Programmiersprache, Kontrolle der Beiden
• CPU• Interagiert mit Processing
Webbasierte AR
FLARManager AR Toolset
private funktion onMarkerAdded (evt:FLARMarkerEvent):void{
Trace („[+evt.marker.patternID+“]added“);This.modelContainer.visible=true;This.activeMarker=evt.marker;}um ein Marker zu erkennen
jMonkeyEngine
Provate PatternMarkerProcessor markerProcessor;Private NideRotateTranslateListener rtl;
Android
Vielen Dank für Ihre Aufmerksamkeit!