Computergrafik - Inhalt §0 Historie, Überblick, Beispiele §1 Begriffe und Grundlagen §2 Objekttransformationen §3 Objektrepräsentation und -Modellierung §4 Sichttransformationen §5 Kurven und Flächen §6 Rendering und Visibilität §7 Mapping-Techniken

1.1 Begriffe Computergrafik, Graphische Datenverarbeitung (computer graphics) Grobe Einordnung: Synthese von Bildern mit Hilfe des Rechners Erzeugung eines Bildes (einer Bitmap) aus einer (geometrischen) Beschreibung einer Szene Bei zeitabhängigen Szenenbeschreibungen: Animation Ausgabemedien: Bildschirm, Drucker, Plotter, Fräser, Projektor(en),...

1.1 Begriffe Computergrafik (cont.) Die Disziplin der Computergrafik beschäftigt sich u. a. mit: Repräsentation (Datenstrukturen!) und Verarbeitung (Algorithmen!) geometrischer, dreidimensionaler Objekte im Rechner Berechnung von Bilddarstellungen aufgrund solcher Datenstrukturen (bis hin zu foto-realistischen Bildern), das sog. „Rendern“ Grafik-Hardware, Grafik-Software Grafisch-interaktive Systeme

1.1 Begriffe Computergrafik (cont.) Modeling is figuring out the shape of it Rendering is how to make a picture of it Animation is figuring out how it moves with time Jim Blinn, SIGGRAPH98 Keynote Address, Computer Graphics 33(1), pp. 43-47

1.2 Grundlagen Einfachste Grafikarchitektur Prozessor Framebuffer Memory

1.2 Grundlagen Der Framebuffer

1.2 Grundlagen Display Processing Unit: Bilddefinition für Ausgabe aufbereiten Rasterisierung, Verdeckungs- /Beleuchtungsberechnung, Anti-Aliasing Schreiben des Framebuffers Video controller (Image Display System) Liest Framebuffer periodisch aus Bild- defi- nition CPU DPU Bilder- zeugung Framebuffer Bild- speicher IDS Bild- darstellung Bildrechner Display

1.2 Grundlagen Quelle: FU Hagen

1.2 Grundlagen 3D Grafik – Virtuelle Kamera

1.2 Grundlagen Die Computergrafik-Pipeline / Die Rendering-Pipeline Der Prozess der Bildsynthese, also die Abbildung eines Modells eines Objektes bzw. einer Szene auf ein Bild auf dem Bildschirm nennt man „Rendering“. Eine konkrete Implementierung dieses Prozesses in Soft- und/oder Hardware beschreibt man als „Rendering-Pipeline“. Die einzelnen Stufen der Pipeline setzen die noch vorzustellenden Basis-Algorithmen der Computergrafik um. Die einzelnen Stufen können jeweils in Soft- und/oder Hardware implementiert sein! Der Aufbau von Rendering-Pipelines kann sich je nach Art und Umsetzung des Renderings stark unterscheiden!

modeling transformation 1.2 Grundlagen Die Computergrafik-Pipeline / Die Rendering-Pipeline (cont.) Genereller Aufbau: database traversal modeling transformation viewing operation visible-surface determination scan conversion shading image object model or scene model / scene graph front-end (geometry processing) back-end (rasterization)

transform the data into something we can understand 1.2 Grundlagen Der Visualisierungsprozess / Die Visualisierungs-Pipeline Daten Pre-Processing transform the data into something we can understand Computer- grafik Kognition Interaktion Daten sammeln

1.2 Grundlagen Softwarearchitekturen 3D-Anwendung Anwendungsumgebung high-level 3D-API* low-level 3D-API* Hardware 3D-Anwendung *API bedeutet "application programming interface"

1.3 Graphische Eingabegeräte Im Idealfall: Eingabegeräte abgestimmt auf Dimension der graphischen Darstellung: 2D: Navigation nur in Ebene notwendig  2D Eingabegerät (Maus, Tastatur, …) 3D: Navigation in Ebene unzureichend  3D Eingabegerät (Kinect, Wii-Mote, …) Bilder: http://i.computer-bild.de

1.3 Graphische Eingabegeräte Spaceball Fixierte Gummikugel Kugel misst Kräfte Druck in x-, y- und z- Richtung verursacht Verschiebung (3 Freiheitsgrade) Drehmomente verursachen Rotation (3 Freiheitsgrade) Spacemouse Gummischeibe 6 LEDs mit Schlitzblende und Fotosensor Prinzip analog zur Maus 6 Freiheitsgrade Scanner/Digitalkamera: CCD (Charged Coupled Device) Lichtempfindlicher Halbleiter, zeilenweises Abtasten

1.3 Graphische Eingabegeräte Haptische Geräte Force Feedback durch Exoskelett und Bowdenzüge

1.4 Bildschirmtechnologien Begriffe Punktgröße (dot size): Durchmesser eines einzelnen Punktes auf dem Ausgabemedium, Einheit: [mm], [inch] Adressierbarkeit: Anzahl individuell erzeugbarer Punkte pro Längeneinheit, Beispiel: 1280 Pixel / 20“ Punktabstand: 1/Adressierbarkeit Auflösung (resolution): Anzahl unterscheidbarer Punkte oder Linien pro Längeneinheit, Einheit: [L/mm], [dpi] Adressierbarkeit = maximal zur Verfügung stehende Auflösung des Monitors 1mm

1.4 Bildschirmtechnologien Röhrenbildschirm / CRT mit Rasterdisplay, einfarbig (cont.)

1.4 Bildschirmtechnologien Röhrenbildschirm / CRT (cathode ray tube) mit Rasterdisplay, einfarbig (cont.) Phosphorschicht Auftreffende Elektronen regen Phosphor zur Fluoreszenz an Phosphor leuchtet nach: Phosphoreszenz Dauer des Nachleuchtens: Persistenz (10-60 ms) Bildwiederholfrequenz (30-100 Hz): Aufgrund geringer Persistenz muss das Bild ständig neu aufgebaut werden Große Persistenz + kleine Frequenz: Bild verschmiert Kleine Persistenz + hohe Frequenz: sonst Flimmern

1.4 Bildschirmtechnologien Röhrenbildschirm / CRT (cathode ray tube) mit Rasterdisplay, farbig Prinzip: Farb-Fernseher Mischung der Farben aus den Grundfarben Rot, Grün, Blau Aufbau entspricht s/w-Röhrenbildschirm, zusätzlich: Drei Elektronenkanonen (deltaförmig angeordnet) Drei Phosphorpunkte (rot, grün, blau) pro Pixel deltaförmig auf der Phosphorschicht angeordnet Lochmaske vor der Phosphorschicht Elektronenstrahlen (moduliert) schießen gleichzeitig durch die Lochmaske Konvergenzproblem: Elektronenstrahlen stoßen einander ab

1.4 Bildschirmtechnologien Flüssigkristallbildschirm / LCD LCD = Liquid Crystal Display Zwei Glasplatten im Abstand weniger μm schließen Flüssigkristall ein Über zwei transparente Elektroden an beiden Glasplatten kann ein elektrisches Feld im Flüssigkristall erzeugt werden Einrahmung der Anordnung durch zwei um 900 gedrehte Polarisationsfilter Bildschirm wird durch künstliches Licht von hinten beleuchtet; dieses wird durch hinteren Polarisationsfilter polarisiert

1.4 Bildschirmtechnologien Flüssigkristallbildschirm / LCD (cont.)

1.4 Bildschirmtechnologien Flüssigkristallbildschirm / LCD (cont.) Die organischen Moleküle im Flüssigkristall drehen die Polarisationsrichtung um 900, falls kein elektrisches Feld anliegt → Licht passiert zweiten Filter ungehindert

1.4 Bildschirmtechnologien Flüssigkristallbildschirm / LCD (cont.) Bei maximalem elektrischen Feld wird die Polarisations- richtung idealerweise nicht gedreht → Licht passiert zweiten Filter nicht

1.4 Bildschirmtechnologien Flüssigkristallbildschirm / LCD (cont.) Für Farbdarstellungen werden drei Flüssigkristall- zellen zu einem RGB-Farbtripel zusammengefasst Die drei Elementarfarben werden über Farbfilter über den Zellen erzeugt Die Zellen werden matrixartig angeordnet

1.4 Bildschirmtechnologien Plasma-Displays Prinzip 1: Plasma Adressed Liquid Crystal (PALC) Von SONY entwickelt Funktionsweise analog des LCD-Displays Statt Flüssigkristall findet Plasma Verwendung Visuelles Ergebnis wie bei LCD-Displays Prinzip 2: Plasma Display Panel (PDP) Wahre Plasmatechnik Pixel sind ca. 0,65mm groß und in 3 Kammern (RGB) eingeteilt In Kammern: Neutral- bzw. Edelgas (Hauptbestandteile: Neon und Xenon) Strom auf Adressierelektrode: Gas → Plasma UV-Strahlen des Plasmas regen Phosphor an

1.4 Bildschirmtechnologien Plasma-Displays (cont.) Prinzip 2: Plasma Display Panel (PDP)

1.4 Bildschirmtechnologien Plasma-Displays (cont.) Lichterzeugung mittels Gasentladung Matrix von Gasentladungszellen mit bi-stabilem Zustand: Pixel anzeigen bei Zündspannung Pixel leuchtet bei mittlerer Brennspannung Pixel löschen bei Löschspannung Abb.: Ansteuerung einer Gasentladungszelle Quelle: Uni Karlsruhe

1.4 Bildschirmtechnologien Plasma-Displays (cont.) Helligkeitssteuerung Gas ändert nur sprunghaft Aggregatzustand Problem: Erzeugung verschiedener Helligkeitsstufen? Lösung: Trägheit des menschlichen Auges nutzen und Gas „früher ausschalten“ → Phosphoranregung geringer Vorteile der Plasmatechnologie: Geräte relativ leicht Hohe Auflösungen und Bilddiagonalen möglich Nachteile: Vergleichsweise hoher Stromverbrauch I.d.R. Lüfter nötig (Geräusch!) Vergleichsweise hohe Produktionskosten

1.4 Bildschirmtechnologien OLED-Bildschirme Lichtemittierende Dioden (LED) aus Kunststoffen Vorteile: Hoher Kontrast, da selbstleuchtend (LCDs nur Filter) da keine Hintergrundbeleuchtung, sehr dünn Reaktionszeit um ein Vielfaches schneller als bei LCD (mehr als Faktor 1.000) Nachteile: Niedrige Lebensdauer (blau als begrenzender Faktor) Korrosionsanfälligkeit Teurer als LCDs Anwendung vor allem in kleinen Bildschirmen (v.a. hochpreisige Smartphones, Tablets, …) Bild oben: http://www.oled-info.com Bild links: http://hiperdef.com

1.5 3D-Sichtsysteme Shutter-Brille Doppelwandige Brillengläser sind mit LC gefüllt Normaler Bildschirm (>100Hz) zeigt abwechselnd zwei Bilder aus verschiedenen Perspektiven Synchron dazu verdunkelt die Brille abwechselnd das linke und das rechte Glas Synchronisation: Funk Infrarot Kabelgebunden Bild: Sony

1.5 3D-Sichtsysteme Shutter-Brille

1.5 3D-Sichtsysteme Polarisationsbrille Head Mounted Display Polarisierte Bilder für das linke bzw. rechte Auge Head Mounted Display Zwei kleine LCD bieten beiden Augen die Ansicht einer 3D Szene aus leicht unterschiedlichen Perspektiven an Virtual Retinal System Bild wird direkt auf die Retina projiziert (zeilenweise) Bild ungefähr eine Armlänge entfernt Durchsichtmodus: regelbare Helligkeit

1.5 3D-Sichtsysteme BOOM: Binocular Omni-Orientation Monitor (Fakespace) Kopfgeführtes Sichtgerät mit stereoskopischer Anzeige Benutzer kann sich innerhalb des Aktionsraums frei bewegen Force Feedback Arme

1.5 3D-Sichtsysteme Responsive Workbench Verwendung der Tisch-Metapher Neigbare Projektionsfläche Rückprojektion 3D durch Shutter-Brille

1.5 3D-Sichtsysteme Powerwall Große Projektionsfläche Stereoskopische Ausgabe 3D durch Polarisations- oder Shutter-Brille 3D-Interaktion (eine Person) Benutzer kann sich innerhalb des Aktionsraums frei bewegen

1.5 3D-Sichtsysteme CAVE Cave Automatic Virtual Environment Immersion über an Wände, Decke und Boden projizierte Stereobilder 3D durch Shutter-Brille Tracking 3D-Surround-Sound

1.5 3D-Sichtsysteme Autoskopische Bildschirme Image Splitter herkömmliches LCD mit abwechselnd einer Pixelspalte für das linke und rechte Auge Streifenmaske blockiert jeweils den Blick auf die jeweils andere Spalte Funktioniert nur bei einem Betrachter und bestimmter Kopfposition Autoskopisch: ohne Hilfsmittel wie z.B. Brillen Abb.: Funktionsprinzip eines Image Splitters Quelle: Uni Karlsruhe

1.5 3D-Sichtsysteme Autoskopische Bildschirme Lentikularsystem halbzylindrische Linsen vor Mattscheibe lenken Bilder in rechtes und linkes Auge fester Betrachtungsabstand Abb.: Funktionsprinzip eines Lentikularsystems Quelle: Uni Karlsruhe

1.5 3D-Sichtsysteme Autoskopische Bildschirme Prismensystem Bereich, in dem 3D-Effekt gesehen wird ("Sweetspot") ist normalerweise klein Herkömmliches TFT-Display mit vorgeschaltetem Prismensystem Tracking-Funktion: Prismen werden je nach Position des Betrachters verschoben Autoskopisch: ohne Hilfsmittel wie z.B. Brillen Abb.: Funktionsprinzip des Prismensystems Quelle: SeeReal

1.5 3D-Sichtsysteme - Bewertung HMDs Preisgünstig Weites Spektrum an Bewegungen möglich Virtuelle, zwei-händige Interaktionen möglich Immersiv, aber unhandlich Geringe Auflösung und kleines Sichtfeld U.U. Übelkeit durch ungenaues oder langsames Tracking Ein-Benutzer-System

1.5 3D-Sichtsysteme - Bewertung Responsive Workbench Gute Auflöung Sehr natürliche Darstellung Natürliche Arbeitsumgebung (durch Tischmetapher) Virtuelle zwei-händige Interaktionen möglich Multiuser-Betrieb möglich Teuer (ca. 50.000 Euro) Eingeschränktes operationelles Bewegungsfeld

1.5 3D-Sichtsysteme - Bewertung Powerwall / CAVE Hohe Auflösung, großes Sichtfeld Ein aktiver und zahlreiche passive Nutzer Integration von echten Objekten im CAVE Multiuser-Betrieb möglich Sehr teuer (Powerwall ab 60.000 Euro, CAVE ab 250.000 Euro) U.U. Übelkeit durch falsche Stereoskopieberechnung oder ungenaues / langsames Tracking

1.6 Rastergrafik Rasterung Motivation: Die Rasterbildschirmtechnologie erfordert die „Zerlegung“ aller darzustellenden geometrischen Objekte in Bildschirmpunkte. → Rasterungs-Prozess Problemstellung: (am Beispiel einer Linie/Geraden) Darstellung einer Linie auf einem Rasterbildschirm erfordert die Bestimmung der „am besten passenden“ Punkte im Raster bzw. Gitter. → geeignete ganzzahlige Rundung

1.6 Rastergrafik Rasterung von Linien Beispiel: Mögliche Rasterkandidaten P1=(x1,y1) P2=(x2,y2)

1.6 Rastergrafik Rasterung von Linien (cont.) Beispiel: Rasterkandidaten P1=(x1,y1) P2=(x2,y2)

1.6 Rastergrafik Rasterung von Linien (cont.) Anforderungen: Linien sollen gerade erscheinen Linien sollen gleichmäßig hell erscheinen Helligkeit soll unabhängig von Richtung sein Linien sollen konstante Dicke haben Linien sollen schnell gezeichnet werden Algorithmus muss leicht in Hardware implementierbar sein

1.6 Rastergrafik Rasterung von Linien (cont.): Darstellung von Linien Gegeben: zwei Punkte Gesucht: Beschreibung der Linie zwischen P1 und P2 Parametrisch: Funktional: Implizit:

1.6 Rastergrafik Rasterung von Linien (cont.): Naiver Algorithmus P1 und P2 gegeben in Integer-Koordinaten Algorithmus benutzt funktionale Darstellung: Durchlauf von x1 nach x2 im Pixelabstand, y-Werte berechnen und runden, zeichnen: double m = (y2-y1)/(x2-x1); double b = y1-m*x1 for (int x=x1; x<=x2; x++) { double y=m*x+b; setPixel(x,round(y)); }

1.6 Rastergrafik Rasterung von Linien (cont.) Probleme Gleitkommawerte Divisionen und Multiplikationen Rundungen senkrechte Linien (Division durch 0!) Aussehen der Linien bei verschiedenen Steigungen m DDA-Algorithmus (digital differential analyzer), Digitaler Integrierer Abb.: Rasterungen mit dem naiven Algorithmus Quelle: Uni Magdeburg

1.6 Rastergrafik Rasterung von Linien (cont.) Bresenham- / Midpoint-Line-Algorithmus für Geraden: Keine Divisionen, nur Integer-Arithmetik Abhängig von der Steigung wird die x- oder y-Koordinate immer um eine Einheit geändert. Die andere Koordinate wird entweder nicht oder ebenfalls um eine Einheit geändert, entsprechend der kleineren Abweichung der Geraden zum nächsten Gitterpunkt in Koordinatenrichtung. P2 x y P1 3. 2. hier: Ursprung des zugeordneten Koordinatensystems in P1 1. Oktant (0 ≤ Steigung ≤ 1) P1 und P2 auf Raster 4. 1.Oktant 5. 6. 7. 8.

1.6 Rastergrafik Rasterung von Linien (cont.) Zuletzt gesetztes Pixel ist P Muss als nächstes NE oder E gesetzt werden? Abstände von NE und E zur Linie bestimmen und vergleichen Leichter: Liegt M = (x+1, y+½) ober- oder unterhalb der Linie? Wähle d = F(M) = F(x+1, y+½) als Entscheidungsvariable Quelle: Uni Magdeburg F(M) > 0 → NE ist nächstes Pixel F(M) ≤ 0 → E ist nächstes Pixel Wie berechnet man F(M) ? → inkrementell

1.6 Rastergrafik Rasterung von Linien (cont.) 1. Fall NE als nächstes Pixel ist nächster Mittelpunkt 2. Fall E als nächstes Pixel ist nächster Mittelpunkt Quelle: Uni Magdeburg

1.6 Rastergrafik Rasterung von Linien (cont.) Initialisierung von d? Startpunkt P1 liegt auf der Linie Für den ersten Mittelpunkt M ist dann: ist kein Integer Nur Vorzeichen ist interessant: Multiplikation mit 2 Init: Fall 1: Fall 2:

1.6 Rastergrafik Rasterung von Linien (cont.) Bresenham-Algorithmus, erster Oktant (nur ganzzahlige Operanden und Operationen!): int x, y, d, dx, dy, delta_NE, delta_E; x = x1; y = y1; dx = x2 – x1; dy = y2 – y1; delta_NE = 2*(dy – dx); delta_E = 2*dy; d = (2*dy) – dx; setPixel(x,y); while(x<x2){ if(d >= 0) {d+=delta_NE; x++; y++;} // NE else {d+=delta_E; x++;} // E } Pseudocode nicht optimiert Erweiterung auf beliebige Steigungen: Vertauschen von x und y, Vorzeichen, etc.

1.6 Rastergrafik Rasterung von Linien (cont.) Beispiel: (0, 0) P1= dx = 5, dy = 4 delta_NE = -2 delta_E = 8 (5, 4) P2= 1 2 3 4 5 6 x y d plot 3 (0,0) 1 1 1 (1,1) 2 -1 (2,2) 3 7 (3,2) 4 5 (4,3) (5,4) ----- Notizen (19.4.12 08:42) ----- Auf den Folien für die Studenten sind Tabelle und Grafik nicht ausgefüllt! Die Übung sollte daher durchgeführt und genug Zeit gegeben werden, um die richtigen Werte abzuschreiben

1.6 Rastergrafik Rasterung von Kreisen Darstellung eines Kreises mit Mittelpunkt (xM, yM) und Radius r : Implizit: Parametrisch: Problem: Beide Darstellungen sind rechenaufwändig und erfordern höhere Rechenoperationen!

1.6 Rastergrafik Rasterung von Kreisen (cont.) Mit der Berechnung eines Kreispunktes sind durch Symmetrie sieben weitere Kreispunkte gegeben. Herangehensweise wie bei Geraden Voraussetzungen: Radius Kreissegment im 2. Oktanten

1.6 Rastergrafik Rasterung von Kreisen (cont.) Zuletzt gesetztes Pixel ist P Muss als nächstes E oder SE gesetzt werden? Abstände von E und SE zum Kreis berechnen und vergleichen Leichter: Liegt M = (x+1, y-½) ober- oder unterhalb der Linie? Wähle d = F(M) = F(x+1, y-½) als Entscheidungsvariable Quelle: Uni Magdeburg F(M) < 0 → E ist nächstes Pixel F(M) ≥ 0 → SE ist nächstes Pixel Wie berechnet man F(M) ? → inkrementell

1.6 Rastergrafik Rasterung von Kreisen (cont.) 1. Fall E als nächstes Pixel M1 ist nächster Mittelpunkt 2. Fall SE als nächstes Pixel M2 ist nächster Mittelpunkt Quelle: Uni Magdeburg

1.6 Rastergrafik Rasterung von Kreisen (cont.) Initialisierung von d ? Startpunkt ist (0,r), d.h.: Nur Vorzeichen von d interessant: Multiplikation mit 4 Erweiterung: Inkrementelle Berechnung von Keine Multiplikationen int x, y, d, delta_SE, delta_E; x = 0; y = r; d = 5–4*r; setPixel(x,y); setPixel(-x,y); ... // Symmetrie while(y > x) { if (d >= 0) {delta_SE = 4*(2*(x-y)+5); d+=delta_SE; x++; y--;} // SE else {delta_E = 4*(2*x+3); d+=delta_E; x++;} // E setPixel(x,y); setPixel(-x,y); ... // Sym. } Für Berechnung von d verwendet man die Formel von Folie 59: d = F(M) = (x+1)2 + (y-1/2)2 – r2 Hier setzt man nun den bekannten Punkt (x,y)=(0,r) ein und rechnet aus => d = 5/4 – r

1.6 Rastergrafik – Füllalgorithmen Gegeben: Polygon oder begrenzter Bereich durch Pixelmenge geometrische Beschreibung (Polygone, Kreise, etc.) Gesucht: Einfärbung des Bereichs mit einer Füllfarbe oder einem Muster bzw. einer Schraffur Beispiele: Balkendiagramme, Flächen, Körper etc.

1.6 Rastergrafik – Füllalgorithmen Füllen von Pixelmengen: Saatkorn-Methoden/seed fill Gegeben: Gerastertes Polygon als Rand-“Pixelmenge“ Startpixel (Saatkorn, seed), das festlegt wo innen ist Gesucht: Alle inneren Pixel sind einzufärben Zusammenhang von Gebieten: Welche Pixel sind benachbart? 8-fach zusammenhängend 4-fach zusammenhängend

1.6 Rastergrafik – Füllalgorithmen Bemerkungen Füllalgorithmen mit 8 Freiheitsgraden (Bewegungsrichtungen) können auch 4-fach zusammenhängende Gebiete füllen. Problem: 4-fach zusammenhängende Gebiete mit gemeinsamen Ecken Füllalgorithmen mit 4 Freiheitsgraden können keine 8-fach zusammenhängenden Gebiete füllen

1.6 Rastergrafik – Füllalgorithmen Man unterscheidet nach der Art der Gebietsdefinition: Boundary-Fill-Algorithmus für randdefinierte Gebiete Input: Startpunkt (Saatkorn), Farbe der Begrenzungskurve, Füllfarbe oder Muster Algorithmus: Vom Startpixel ausgehend werden rekursiv Nachbarpixel umgefärbt, bis Pixel mit der Farbe der Begrenzungskurve (oder bereits umgefärbte Pixel) erreicht werden; dann Abbruch

1.6 Rastergrafik – Füllalgorithmen Man unterscheidet nach der Art der Gebietsdefinition: (cont.) Flood/Interior-Fill-Algorithmus für inhaltsdefinierte Gebiete Input: Startpunkt (Saatkorn), Farbe der umzufärbenden Pixel, Füllfarbe oder Muster Algorithmus: Vom Startpixel ausgehend werden rekursiv Nachbarpixel gleicher Farbe umgefärbt, bis Pixel mit abweichender Farbe erreicht werden; dann Abbruch

1.6 Rastergrafik – Füllalgorithmen Einfacher Saatkorn-Algorithmus (4 Bewegungsrichtungen, randdefiniertes Gebiet, FILO/LIFO-Prinzip) Eventuell werden Pixel mehrfach im Stack abgelegt (und gefärbt)! Empty(stack); Push(stack, seed-pixel); while(stack not empty) { pixel = Pop(stack); setColor(pixel, FillColor); for each of the 4-connected pixels pi { if(! ((pi == boundary_pixel) || (colorOf(pi) == FillColor))) Push(stack, pi); } } 1 2 3 4 hier z. B.: FILO: First In Last Out LIFO: Last In First Out

1.6 Rastergrafik – Füllalgorithmen Beispiel: (die Zahlen geben die Position der Pixel im Stack an) 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1,19 2,15,17 3,14,15 5,7,15 13,15 12,16 12 11 11,13 10 10,14 8,9,15 16 6,21 4,20 17 16,18,25 17,24 25 19,23 20,22 21 21,24 22,24 23,24 24 ----- Notizen (23.4.12 17:54) ----- Auf den Folien für die Studenten sind die Felder ebenfalls ausgefüllt Eine Erklärung zusammen mit einer kleinen (einfachen) Übung könnte zu besserer Anschaulichkeit beitragen

1.6 Rastergrafik – Füllalgorithmen Beispiel: Gebiet mit Loch 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 15 8,15 3,9 4,9 5,9 6,9 7,9 2,9 1,10 10 9,11 12 13 14 13,14 12,14 10,14 ----- Notizen (23.4.12 17:54) ----- Auf den Folien für die Studenten sind die Felder ebenfalls ausgefüllt Eine Erklärung zusammen mit einer kleinen (einfachen) Übung könnte zu besserer Anschaulichkeit beitragen

1.6 Rastergrafik – Füllalgorithmen Scan-Line-Methode Auch Rasterzeilen-Methode oder Scan Conversion genannt Arbeitet zeilenweise von oben nach unten Ein Pixel der aktuellen Zeile (Scan Line) wird nur dann gezeichnet, wenn es innerhalb des Polygons liegt // einfachster Ansatz für Rechtecke: for(y=ymin ; y<=ymax ; y++) // Zeile (row) for(x=xmin ; x<=xmax ; x++) // Spalte (column) if(Inside(polygon, x, y) SetPixel(x,y); Für geometrisch als auch für pixelweise definierte Gebiete Sehr langsam

1.6 Rastergrafik – Füllalgorithmen Verbesserung durch Ausnutzung von Kohärenz (Zusammenhängen) Verfahren basiert auf dem Prinzip der Zeilenkohärenz: Benachbarte Pixel auf einer Zeile besitzen höchstwahrscheinlich die gleichen Intensitätswerte. Pixelcharakteristik (Intensität) ändert sich nur dort, wo ein Schnittpunkt einer Polygonkante mit einer Scan Line vorliegt, d.h. der Bereich zwischen zwei Schnittpunkten gehört zum Polygon oder nicht.

1.6 Rastergrafik – Füllalgorithmen Beispiel: P1 P2 P3 P4 P5 2 4 6 8 Scan Line y=2 Scan Line y=4 Scan Line y=2: Schnitt mit Polygon für x ∈ { 1, 8 } Scan Line y=4: Schnitt mit Polygon für x ∈ { 1, 4, 6, 8 }

1.6 Rastergrafik – Füllalgorithmen Beispiel: Scan Line y=2: Unterteilung der Scan Line in 3 Bereiche: x < 1 : außerhalb des Polygons 1 ≤ x ≤ 8 : innerhalb des Polygons x > 8 : außerhalb des Polygons P1 P2 P3 P4 P5 2 4 6 8

1.6 Rastergrafik – Füllalgorithmen Beispiel: Scan Line y=4: Unterteilung der Scan Line in 5 Bereiche: x < 1 : außerhalb des Polygons 1 ≤ x ≤ 4 : innerhalb des Polygons 4 < x < 6 : außerhalb des Polygons 6 ≤ x ≤ 8 : innerhalb des Polygons x > 8 : außerhalb des Polygons P1 P2 P3 P4 P5 2 4 6 8

1.6 Rastergrafik – Füllalgorithmen Wahl der Scan Lines: 1 2 3 4 5 6 Scan Lines bei y=n mit ganzzahligem n Pixelaktivierung: linke Pixelseite im Intervall Problem: ggf. zu viele Pixel aktiviert 1 2 3 4 5 6 3.5 2.5 1.5 Lösung: Scan Lines durch Pixelmitte Pixelaktivierung: Pixelmitte „liegt rechts“ vom Schnittpunkt der Scanline mit dem Polygon

1.6 Rastergrafik – Füllalgorithmen Einfacher Kanten-Listen-Algorithmus (ordered edge list algorithm) Funktionsweise: a) Preprocessing b) Scan Conversion Teil a): Preprocessing: Ermittle (z.B. mit Bresenham-Algorithmus) für jede Polygonkante die Schnittpunkte mit den Scan Lines in der Pixelmitte. Ignoriere dabei horizontale Kanten. Speichere jeden Schnittpunkt (x, y+½) in einer Liste. Sortiere die Liste dann von oben nach unten und von links nach rechts. da Scan Lines durch Pixelmitte gehen!

1.6 Rastergrafik – Füllalgorithmen Probleme bei Singularitäten! (Scan Line schneidet das Polygon in einer Ecke) Behandlung durch Fallunterscheidung: Ist die Ecke lokales Extremum, so zählt der Schnitt zweifach. Ist die Ecke kein lokales Extremum, so zählt der Schnitt einfach. Lokales Extremum: y-Werte der Endpunkte der in dieser Ecke beginnenden Polygonseiten sind beide größer oder beide kleiner als der y-Wert der Schnittecke

1.6 Rastergrafik – Füllalgorithmen Teil b): Scan Conversion: Betrachte jeweils zwei direkt aufeinanderfolgende Schnittpunkte (x1, y1) und (x2, y2) der Liste, d.h. Listenelemente 1 und 2, Listenelemente 3 und 4, usw. Aufgrund des Preprocessings gilt: y = y1 = y2 und x1 ≤ x2 Zeichne alle Pixel auf der Scan Line y, für die gilt: x1 ≤ x+½ ≤ x2 mit ganzzahligem x

1.6 Füllalgorithmen Beispiel: a) Preprocessing: P5 P3 P4 P1 P2 2 4 6 8 Scan Lines bei y+½ 2 4 6 8 y=7 P1 P2 P3 P4 P5 ./. (1, 6.5), (1.5, 6.5) (1, 5.5), (2.5, 5.5), (7.5, 5.5), (8, 5.5) (1, 4.5), (3.5, 4.5), (6.5, 4.5), (8, 4.5) (1, 3.5), (4.5, 3.5), (5.5, 3.5), (8, 3.5) (1, 2.5), (8, 2.5) y=1 (1, 1.5), (8, 1.5) y=0 ./.

1.6 Füllalgorithmen Beispiel: b) Scan Conversion: Achtung: Dies sind nun die Pixelkoordinaten! P1 P2 P3 P4 P5 2 4 6 8 (1, 6) ./. Denn bei y = 6 gilt: 1 ≤ x+½ ≤ 1.5 ⇒ x = 1

1.6 Füllalgorithmen Beispiel: b) Scan Conversion: Achtung: Dies sind nun die Pixelkoordinaten! 2 4 6 8 P5 (1, 6) (1, 5), (2, 5), (7, 5) ./. P3 Denn bei y = 5 gilt: 1 ≤ x+½ ≤ 2.5 ⇒ x ∈ {1,2} 7.5 ≤ x+½ ≤ 8 ⇒ x = 7 P4 P1 P2

1.6 Füllalgorithmen Beispiel: b) Scan Conversion: Achtung: Dies sind nun die Pixelkoordinaten! 2 4 6 8 P5 (1, 2), (2, 2), …, (7, 2) (1, 1), (2, 1), …, (7, 1) (1, 6) (1, 5), (2, 5), (7, 5) (1, 4), (2, 4), (3, 4), (6, 4), (7, 4) (1, 3), (2, 3), …, (7, 3) ./. P3 P4 P1 P2

1.6 Rastergrafik – Füllalgorithmen Füllen mit Mustern Muster als Bitmap (Textur) Keine einheitliche Farbe, sondern Zuordnung der Pixel auf Pixel der Textur Abhängig von der Verankerung der Textur, d.h. Lage der Textur bzgl. dem Polygon: Verankerung in linken unteren Polygonecke Verankerung auf dem Hintergrund Quelle: Uni Magdeburg

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing Aliasing: Allgemein versteht man unter Aliasing-Effekten die fehlerhafte Rekonstruktion eines (kontinuierlichen) Ausgangssignals durch eine Abtastung mit zu geringer Frequenz. → Nyquist-Theorem Hintergrund: Im Frequenzbereich bandbegrenzte Signale müssen mit mehr als der doppelten Grenzfrequenz abgetastet werden, um eine exakte Rekonstruktion zu ermöglichen.

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Phänomen: Die hochfrequenten (unterabgetasteten) Frequenzen verschwinden nicht einfach, sie erscheinen als neue (falsche!) Frequenzen mit niedrigerer Frequenz. Beispiel: räumliches Aliasing (spatial aliasing)

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Phänomen: (cont.) Pixels are sampled at a rate 2 times the detail frequency Pixels are sampled at a rate less the detail frequency

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Aliasing-Effekte in der Computergrafik: Textur-Artefakte Treppeneffekte beim Rastern von Kurven, jagged edges Verschwinden von Objekten, die kleiner als ein Pixel sind Verschwinden von langen, dünnen Objekten Detailverlust bei komplexen Bildern „Aufblinken“ kleiner Objekte bei Bewegungen / Animationen Bewegungsirritationen bei Animationen (zeitliches Aliasing)

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Aliasing in der Computergrafik – Gruppierungen: Visuelle Effekte, die auf „echtes“ Aliasing zurückzuführen sind Beispiel: Schachbrettmuster Visuelle Artefakte, die auf Rasterkonvertierungseffekte zurückgehen Beispiel: Treppeneffekte bei schrägen Linien Zusätzlich: Unterscheidung zwischen örtlichem (spatial) und zeitlichem (temporal) Aliasing Beispiel: scheinbar rückwärts drehende Wagenräder in Westernfilmen

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Anti-Aliasing im Umfeld der Computergraphik: Alle Methoden (z. B. Oversampling, Filterung) haben das Ziel, Aliasing-Effekten entgegenzuwirken Ein echtes „Beseitigen“ ist oft (schon theoretisch) nicht möglich: Falls Signale nicht bandbegrenzt sind, hilft zwar höhere Abtastfrequenz (Oversampling), beseitigt aber Probleme nicht! Bei Effekten, die auf Rasterkonvertierung zurückzuführen sind, spricht man bei Anti-Aliasing-Verfahren auch von „Verfahren zur Bildkantenglättung“.

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Beispiel: Textur-Artefakte, unendliches Schachbrettmuster visuelle Artefakte, wenn Periodizität in der Textur Größenordnung der Pixel erreicht zweifaches Oversampling (doppelte Frequenz) verringert Artefakte

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Beispiel: Treppeneffekte, jagged edges, jaggies Treppeneffekte, da das Zeichnen von Punkten nur an Rasterpositionen möglich ist geglättete Linie durch Benutzung mehrerer Intensitäten bei Nachbarpixel Bildquelle: http://www.photography.com

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.)

1.6 Rastergrafik Rasterkonvertierungseffekte und Aliasing (cont.) Beispiel: Aliasing bei Polygonen

1.6 Rastergrafik Anti-Aliasing Überabtastung, Oversampling, Supersampling: Einfachstes globales (d. h. das gesamte Bild betreffende) Anti-Aliasing-Verfahren Jedes Pixel wird mit einer höheren Auflösung berechnet, als es schließlich dargestellt wird Der resultierende Grauwert (Farbwert) ist der gewichteten Durchschnitt aller beteiligten Subpixelwerte Zugrundeliegende Theorie: digitale Filter Übliche Filterkerne (Crow, 1981): Rechteck-/Box-Filter, Dreieck-/Barlett-Filter, Gaußfilter ----- Notizen (19.4.12 08:39) ----- Oversampling != Supersampling Oversampling: Abtasten mit höherer Abtastrate als notwendig (mindestens doppelte Frequenz) Supersampling: Rendern in höherer Auflösung, dann herunterskalieren auf Darstellung

1.6 Rastergrafik Anti-Aliasing (cont.) Überabtastung, Oversampling, Supersampling: (cont.) 3 x 3 („2x-AA“) 5 x 5 („4x-AA“) 7 x 7 („6x-AA“) 1 2 4 1 2 3 4 6 9 1 2 3 4 6 8 9 12 16 Pixel Subpixel Abtastpunkt 1 2 4 ----- Besprechungsnotizen (17.04.12 13:36) ----- Masken / Nachbarschaften erklären! Grafik erklären! ----- Notizen (19.04.12 08:23) ----- Bei Bild unbedingt darauf hinweisen, dass es sich um 2-Fach-Supersampling in Kombination mit einer Erhöhung der Abtastpunktzahl handelt Die Techniken stehen eigentlich für sich allein, ermöglichen aber in der Kombination deutlich bessere Ergebnisse mit weniger Aufwand als wenn man nur eine von beiden (verstärkt) anwendet Unterschied beim Anwendungszeitpunkt: Rendern mit doppelter Auflösung (Supersampling), Abtastung erst nach dem Rendern Vorteil: Statt nur die Mittelwerte von Abtastwerten in den Mittelpunkten zu nehmen, werden die Ergebnisse vor allem bei Farbgrenzen bzw. –Verläufen genauer Links: 2-Fach-Anti-Aliasing auf 4 Pixeln Bild wird mit doppelter Auflösung gerechnet → aus einem Pixel werden vier Mittelwertbildung über Abtastpunkte mit Gewichtung

1.6 Rastergrafik Anti-Aliasing (cont.) Bei Linien und spitzen Dreiecken (dünnen Polygonen) kann es trotz Supersampling zu überraschenden Effekten kommen! Linie verschwindet stellenweise, da keine Subpixel getroffen werden!

1.6 Rastergrafik Anti-Aliasing (cont.) Abhilfe: (korrekte) Berechnung der überdeckten Fläche im Pixel! Praxis: exakte analytische Berechnung ausgeschlossen! → Näherungsverfahren

1.6 Rastergrafik Anti-Aliasing (cont.) Bemerkung: Stochastische Methoden Stochastisches Sampling: Oversampling mittels Monte-Carlo-Methoden Intensitäten an zufälligen Punkten im Pixel ermittelt und Ergebnis gemittelt Einsatz von Monte-Carlo-Methoden bei Berechnung der vom Polygon im Pixel überdeckten Fläche Stochastische Methoden erhöhen zwar Effizienz, neigen aber zum Flimmern von Objekten in Animationen!

1.6 Rastergrafik Anti-Aliasing (cont.) – Beispiel

1.6 Rastergrafik Temporales Aliasing Tritt auf, falls sich einige Teile einer Animation relativ zur Bildwiederholfrequenz zu schnell verändern Auch hier gilt das Abtasttheorem: Vermeidung durch (zeitliche) Abtastung mit mehr als der doppelten Detailfrequenz der Bewegung Klassisches Beispiel: Wagenräder in Wildwestfilmen Wahrnehmung der Bewegung über bewegte Speichen Je nach Abtastung der Bewegung, können die Räder stillstehen, (langsam/schnell) rückwärts oder vorwärts drehen

1.6 Rastergrafik Temporales Aliasing (cont.) Beispiel: Rad mit 8 Speichen „Wiederholfrequenz“ 1/8 Umdrehung Abtastfrequenz höher 1/16 Umdrehung Besonders störend: variierende Radgeschwindigkeit im Bereich 1/16 Umdrehung

1.6 Rastergrafik Temporales Aliasing (cont.)