Thomas Jung Geschichte der Computergrafik Zeichenalgorithmen Bildformate Grafikstandards - HDRI 26.03.2019
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
26.03.2019
Thomas Jung
Geschichte der Computergrafik
Zeichenalgorithmen
Bildformate
Grafikstandards
HDRI
1
26.03.2019
Einschätzung der heute gängigen Technologie
Verstehen der Abläufe im Rechner
Einsatz von Bildformaten
Überblick zum Thema Computergrafik
Vektorgrafik
beschreibt Grafikprimitive (Linie, Kreis, etc.)
verlustfrei skalierbar
Speicherbedarf steigt mit Detailreichtum
Einfache Konvertierung in Rastergrafik durch
Rasterung
Rastergrafik
beschreibt Bildpunkte
entspricht Möglichkeiten aktueller Hardware
Speicherbedarf steigt mit Auflösung
Fotografische Aufnahme möglich
Schwierige Konvertierung in Vektorgrafik durch
Vektorisierung
(Bildquelle: Wikipedia)
2
26.03.2019
Kathodenstrahl wird auf Bildschirm platziert
Zahl der Primitive pro Bild begrenzt
Erste graphische Anzeige 1949
Springender Ball, Whirlwind Computer, MIT
Erste interaktive Grafik 1958 (?)
Oszilloskop mit regelbarem Abflugwinkel, Auslösung
des Flugs per Knopf,
Willy Higginbotham, Brookhaven National Laboratory
„Erstes Computerspiel“ 1961
Spacewar, DEC - PDP 1, Steve Russell
Flugsimulator mit grafischer Ausgabe 1963
General Electrics
3D-Vektordisplay 1977
Spiel „Speed Freak“, Cinematronics
http://www.youtube.com/watch?v=6PG2mdU_i8k&feature=related
http://www.youtube.com/watch?v=_S_-xuBM2es&feature=related
(Bildquellen: Brookhaven National Laboratory, Wikipedia, u. a.)
Entstanden in den 1980iger Jahren
günstige Hardware durch Farbfernsehen
Bildspeicher zur Zwischenspeicherung
Ausgelesen von RAMDAC
(Random Access Memory Digital/Analog Converter)
Vektordaten werden gerastert
z. B. Bresenham-Algorithmus für Linien
326.03.2019
Pong 1972 noch kein
Rastergrafiksystem
Spezielle Elektronik zum
Zeichnen des Balkens
Spielautomaten
Breakout 1976
Pacman 1980
Heimcomputer
C64 1982
320 x 200 Pixel, 16 Farben
Commodore Amiga 1985
C64 Amiga
1980iger erste
Grafikkarten
1995 erster 3D-
Beschleuniger
(nVidia)
2000 integrierte
GPUs auf der
Hauptplatine
(Notebooks)
Ab ca. 2005 ( Bildquelle: www.die-grafikkarte.de )
zusätzliche
Funktionen
ATI Radeon HD 5870
(Bildquelle Wikipedia)
426.03.2019
Falls Speicherzellen
nicht alle Farben
repräsentieren
Beispiel 8bit-Speicher
ermöglicht 28 = 256
unterschiedliche Farbwerte
Mensch kann mehr als 224 Farben unterscheiden
Spezielle Hardwarekomponente („Look up table“)
erlaubt es noch, Farben anzupassen
Feste (Fensterübergreifende) Farbtabelle: Dithering
Variable Farbtabellen pro Bild: Farbquantisierung
Bessere Bildqualität, aufwändiger
Falschfarben in anderen Fenstern
Unter X-Windows möglich nicht aber unter MS Windows
Kein Bestandteil von aktuellem OpenGL Grafikkarte
(Bildquellen: Wikipedia)
Abbildung auf feste Farbtabelle
Übertragung der Fehler auf
Nachbarpixel
(Bildquellen: Wikipedia)
526.03.2019
Linien und Polygone werden abgetastet
Unendliche Zahl von Punkten auf endliches Raster
Unterabtastung erzeugt Aliasing
Antialiasing – Vorlesung
Polylinien durch Bresenham-Algorithmus
Polygone durch Scanline-Algorithmus
Vorlesung zum Thema Beleuchtung
Ursprünglich 1962 von Bresenham
für Plotter Jack
Bresenham
Heute Algorithmus-Varianten anderer Autoren (IBM)
Rasterung mit einfachen Operationen
Addition, Subtraktion, Multiplikation mit 2 (Shift)
Bestandteil auch aktueller Grafikchips
Erweiterbar auf Rasterung von Kreisbögen
Antialiasing in späterer Vorlesung
(Bildquelle: http://wscg.zcu.cz/wscg2003/Photos_2003/Bresenham.jpg )
626.03.2019
Schnelle Richtung
Hier x-Richtung weil
Steigung =
(y2 – y1) / (x2 – x1) < 1
Jeweils Schritt in
schneller Richtung
Fehler initialisieren
pro Schritt Steigung
subtrahieren
Schritt in langsamer
Richtung bei Fehler < 0
( Bildquelle: Wikipedia )
Entweder 8 Spezialfälle:
oder:
dx = xend - xstart; dy = yend - ystart;
if (dx < 0) { incx = -1; dx = -dx; } else incx = (dx > 0);
if (dy < 0) { incy = -1; dy = -dy; } else incy = (dy > 0);
dist = (dx > dy) ? dx : dy;
x = xstart; y = ystart; xerr = dx; yerr = dy;
for (t = 0; t < dist; t++)
{
image[y][x] = col;
xerr += dx; yerr += dy;
if (xerr > dist) { xerr -= dist; x += incx; }
if (yerr > dist) { yerr -= dist; y += incy; }
}
image[yend][xend] = col;
726.03.2019
Y ist schnelle Richtung beim 1. Oktant
Entweder x wird dekrementiert oder bleibt
konstant
Vergleich des quadrierten Abstands
beider Pixel zum Kreisbogen
Variante mit kleinerem Abstand wählen
Abstand2 = x2 + y2 – r2
Keine Wurzelberechnung erforderlich
Quadrierung kann durch Iteration vermieden werden
(y + 1)2 = y2 + 2 y + 1
Spiegelung der anderen 7 Oktanten
( Bildquelle: Wikipedia )
Vektorgrafiken
Flash-SWF, SVG, …
inclusive Text: PDF, …
aber auch DXF (CAD-Austausch)
oder 3D-Formate: VRML, … (3D-Modellierer)
teilweise kompakter zu speichern
Rastergrafiken
Bildformate Kompression
3D-Voxeldaten … Medizin
826.03.2019
Speicherbedarf eines unkomprimierten Bilds:
Horizont. Auflösung * Vertikale Aufl. * Bildtiefe + Header
Metainformation im Header möglich (EXIF-Spez.)
Kamera, Datum, Aufnahmeparameter, Vorschaubild, GPS, …
Kompression soll Speicherbedarf reduzieren
Verlustfreie Kompression
Nutzt Kohärenzen im Bild (z. B. gleichfarbige Bildbereiche)
Z.B. GIF, … (LZW-Kompression)
Verlustbehaftete Kompression
Nutzt zusätzlich begrenzte menschliche Wahrnehmung
„Verlust“ soll nicht erkennbar sein
Z. B. JPEG, …
Einfache Kompression auch in Grafikkarten (Textur), um
Bandbreitenbedarf zu verringern
glCompressedTexImage2D
Komprimiert einfarbige Bereiche
3 4 5 1 z. B. Windows-Bitmap
Dateiendung „.RLE“
Kann Dateien aufblähen
1 1 1 1 1 1 1 1 1 1 1 1 1
Lösung: Kontrollzeichen erst bei Länge > 2
( Erkennen von
Kontrollzeichen erforderlich )
4 5
926.03.2019
256 Farben mit Farbtabelle Interlacing
Transparente Farbe (Kein Alpha-Kanal)
Interlacing, für Web-Vorschau
Jede 8., jede 4., jede 2. Zeile und dann Rest
Ab 1989 Speicherung von Bildfolgen
Unterstützt LZW-Kompression
Nachfolger PNG mit Echtfarbenmodus,
Alphakanal und zusätzlicher Huffmann-
Codierung
(Bildquelle: Wikipedia)
Abraham
Tabelle = [ [÷,A] [÷,B] [÷,C] [÷,D] ]; Lempel
Jacob Ziv
Zeichen- Gefunden Neuer
Wort = ÷ kette und aus- Eintrag
gegeben
Solange Zeichen vorhanden ABCABDBC A 5: A B
Zeichen = liesZeichen()
BCABDBC B 6: B C
Wenn [Wort,Zeichen] in Tabelle
dann Wort = [Wort,Zeichen] CABDBC C 7: C A
Sonst
Tabelle += [Wort,Zeichen] ABDBC 5 8: 5 D
Ausgabe Wort
Wort = Zeichen // Eintrag DBC D 9: D B
Ggf. Rest ausgeben BC 6 -
Ausgabe also: A B C 5 D 6 = A B C AB D BC
Beim Dekodieren wird Tabelle in gleicher Weise aufgebaut (wird nicht übertragen)
(Bildquelle: www.itec.uka.de/seminare/redundanz/vortrag05/ )
1026.03.2019
Bilder bestehen nicht mehr aus TrueColor-Pixeln
Zur Zeit vorwiegend proprietäre Formate
Helligkeit wird später ausgewählt (Tone Mapping)
oder direkte Darstellung an zukünftigen Bildschirmen
Erzeugung durch Rendering („CGI“) oder …
Bilder können heute mit konventionellen Kameras durch
Kombination von Bildreihen mit unterschiedlichen
Belichtungen erzeugt werden
iPhone4 z. B. nimmt Belichtungsreihe auf, iPhone6 sogar Videos
Tonemapping für HDR-Foto dann z. B. per „Slider“ steuerbar
( Bildquelle: http://en.wikipedia.org/wiki/Image:HDR_example_-_exposure.jpeg )
Abbildung von HDR-Pixelfarben auf LDR-Farben
Global: jedes Pixel unabhängig von anderen
Lokal: Erhaltung von regionalen Details
Beispiel:
Windows 10
(für jeden
Framebuffer
Farbkanal
gleich)
HDR-Werte
(Bildquelle: https://msdn.microsoft.com/en-us/library/windows/desktop/mt742103(v=vs.85).aspx )
1126.03.2019
LDR
HDR
Fixpunkt-Repräsentation im Framebuffer
impliziert „Clamping“ auf den Wertebereich 0..1
Floatingpoint-Framebuffer
… besitzen variablen Wertebereich
… werden nicht direkt auf dem Bildschirm angezeigt
… erfordern bis zu viermal mehr Speicherplatz
Tone Mapping
Floatingpoint-FB als Textur eines bildschirmfüllenden
Rechtecks
Texturemapping definiert dann das Tone Mapping
1226.03.2019
Idee: menschliche Helligkeitswahrnehmung
passt sich kleineren Bildregionen an
Tone mapping deshalb mit
lokal unterschiedlichen
Operatoren
Aufwändiger
Anfällig für Artefakte
Halo-Artefakte
z. B. iPhone Xs
(Bildquelle: © Nevit Dilmen, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1388147)
Vektorgrafik vs. Rastergrafik
Farbtabellen und Dithering
Rasterung von Linien und Kreisen
Speicherung von Rasterbildern
HDRI
13Sie können auch lesen
