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 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 = -50 void 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 RGB Void 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

Modellieren, Texturieren, Animieren im 3D Kontext Open Source – Version 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 = -100 Void setup () { Size (500, 500, P3D); noStroke ();} Void draw () { Background (255); Lights (); Translate (250, y, 0); Sphere (100); Y++; If ( y > 600){ Y = -100; }}

Licht int y = -100 Float 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 Iizuka GSCapture 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=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 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!