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!