400 likes | 501 Views
Prototyping Augmented Reality . Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung Medien zwischen Technik und Gesellschaft WS 2012/13 Dozent: Prof. Dr. Thaller Referentin Maria Wagner. Inhaltsverzeichnis. Augmented Reality Processing Blender Modeling
E N D
PrototypingAugmented Reality Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung Medien zwischen Technik und Gesellschaft WS 2012/13 Dozent: Prof. Dr. Thaller Referentin Maria Wagner
Inhaltsverzeichnis • Augmented Reality • Processing • Blender Modeling • Low-PolyAnimatedCharacter • 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 – computervision • 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
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 inti = -50 voidsetup () { size (300, 300); fill (255); stroke (0); strokeWeight (3); } voiddraw () { background (100); ellipse(150, i, 100, 100); i++; if (i > 350) { i = -50; } }
Weitere Formen • Point () • Line () • Triangle () • Quad () • Rect () • Ellipse () • Arc ()
Farbe • RGB Voidsetup () { Size (500, 500); Colormode (HSB, 1) HGB } Voiddraw () { 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; IntinitialY; Boolean fall = true; Boolean active = false; … voiddisplay () {noStroke(); fill(255); ellipse…} • Mausinteraktion: VoidmouseReleased /Pressed(){ Spots [spotcount-1].initialY = mouseY; Spots [spotcount-1].active= true;
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 • Ambientocclusion (AO) als Lichteffekt • UV Texturing
Animation • Armature: Charakter – Skelet erstellen (bones) • 3D Elemente platzieren, keying in verschiedenen Positionen in einer Zeit
Einführung Voidsetup () { Size (500, 500, P3D); } Voiddraw () { Background (255); Sphere (100); }
Weiterführung int y = -100 Voidsetup () { Size (500, 500, P3D); noStroke ();} Voiddraw () { Background (255); Lights (); Translate (250, y, 0); Sphere (100); Y++; If ( y > 600){ Y = -100; }}
Licht int y = -100 FloatdirY; FloatdirX; Voidsetup () { Size (500, 500, P3D); noStroke(); Fill (255, 0, 255);} Voiddraw () { 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.*; OBJModelourModel; FloatrotX, rotY; Voidsetup () { Size (800, 600, OPENGL); ourModel = newOBJModel (this, „sa.obj“, TRIANGLES); ourModel.enableDebug(); ourModel.scale (80); ourModel.translateToCenter(); noStroke();} Voiddraw () { Background (200); Lights (); Translate (width/2, height/2, 0); rotateX(rotY); rotateY(rotX); ourModel.draw (); } VoidmouseDragged () { rotX += (mouseX – pmouseX) * 0.01; rotY -= (mouseY – pmouseY) * 0.01; }
NyAR4psg Library • Von dem Projekt NyARToolkitby Rio Iizuka GSCapturecam; NyARMultiBoardnya; Pfontfont, font2D; Voidsetup () { …colorMode (RGB, 100); Font = createFont („FFScala“, 32); Font2d = createFont („FFScala“, 10); Cam = newGSCapture (this, width, height); Cam.play (); String [] patts = {„patt.hiro“, „patt.kanji“}; Double [] widths = {80, 80};
Nya=new NyARMultiBoard(this, width, height, „camera_para.dat“, patts, widths); Nya.gsThreshold = 120;//(0>n>255) default=110 Nya.cfThreshold=0.4;//(0.0>n>1.0) default=0.4 VoiddrawMarkerPos(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);}
Voiddraw() { 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();}}}
Physicalcomputing • Software – basiertes System • Beispiele: • Hausalarm-System • Bewegungsmelder • Verändert die Umwelt
Arduino • Mikrokontroller, Programmiersprache, Kontrolle der Beiden • CPU • Interagiert mit Processing
FLARManager AR Toolset private funktiononMarkerAdded (evt:FLARMarkerEvent):void{ Trace („[+evt.marker.patternID+“]added“); This.modelContainer.visible=true; This.activeMarker=evt.marker; } um ein Marker zu erkennen
ProvatePatternMarkerProcessormarkerProcessor; Private NideRotateTranslateListenerrtl;