Computergrafik. Peter Rösch Hochschule Augsburg University of Applied Sciences. Sommersemester Version: 24. März 2014

Transkript

1 Peter Rösch Hochschule Augsburg University of Applied Sciences Sommersemester 2014 Version: 24. März 2014 Sommer 2014, HS Augsburg, Peter Rösch

2 Inhalt [1] 1. Einführung 2. WebGL und GLSL 3. Geometrie und Transformationen 4. Interaktion 5. Texturen Einführung 6. Beleuchtung 7. Schatten 8. Umgebungs- und prozedurale Texturen 9. Projektionen und Stereoskopie 10. Bump- und Normalmaps 11. Displacement maps 12. Geometry- und Tesselation shaders Literatur Sommer 2014, HS Augsburg, Peter Rösch Inhalt 1

3 1. Einführung [2] Ziele Entscheidungen Organisation Literatur OpenGL Historie Matrizen und Vektoren Einführung Ziele [3] Methoden der interaktiven... im Zusammenhang verstehen. praktisch implementieren. für eigene Animationen nutzen. Moderne Grafik-Hardware effizient nutzen. Einführung Entscheidungen [4] Programmier-Schnittstelle JavaScript / WebGL, siehe Anwendungen laufen in aktuellen Browsern. Shader-Programmierung ist möglich. Geeignete Browser gibt es für Linux, WinDOS, Mac OS, Android, PlayBook OS... Es gibt zahlreiche frei verfügbare Beispiel-Programme. WebGL breitet sich zunehmend auf mobile Geräte aus. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 2

4 Einführung Entscheidungen (2) [5] Entwicklungs-Werkzeuge: Aptana Studio 3, WebGL Inspector, chromium Für die Übungen verwendete Workstations: Fujitsu W520, Xeon E3 CPU, 8 GByte Hauptspeicher, Nvidia GeForce GT 640 bzw. Nvidia Quadro 4000 Grafikkarten, Debian GNU/Linux. Gute WebGL Unterstützung (chromium/chrome, firefox). Hinreichend schnell. Einführung Organisation [6] Vorlesung: 2SWS (Mo. 09:50) in W317. Zentrale Anlaufstelle: Kennung: cgiam, Passwort: Wird jetzt bekannt gegeben... Übungen Ort: Grafik-Labor, M3.03 Übungen Start: , 11:20 Uhr (Gruppen-Einteilung) Übungen Organisation: Gruppen aus jew. 5 Studierenden, Gruppen um 08:00, 11:40, 14:00 Übungen Umfang: 2 SWS, Individuelle Team-Termine : Keine Vorlesung wg. Berufungs-Kommission, Details werden noch bekannt gegeben. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 3

5 OpenGL Hintergrund [7] Quellen: Rost [11] (elektronisch über Safari Books verfügbar) Wikipedia: OpenGL. Wikipedia: WebGL. 2011: WebGL Spezifikation Version 1.0 aktuell (03/2014): Im Labor M3.03 ist OpenGL-Version 4 installiert (NVIDIA-Treiber), chromium/chrome und /GB/firefox/firefox unterstützen WebGL. Matrizen und Vektoren [8] 1. Skalarprodukt 2. Kreuzprodukt (Vektorprodukt) 3. Homogene Koordinaten (a) Punkte und Vektoren (b) Transformationen 4. Normalenvektoren 5. Texturkoordinaten 6. 3D-Modelle Sommer 2014, HS Augsburg, Peter Rösch Inhalt 4

6 2. WebGL und GLSL [9] Abstraktionsebenen und Lebensdauer Das Beispiel SimpleTriangle SimpleScene WebGL Entwicklung effizienter -Anwendungen Die Render-Pipeline Die OpenGL Shading Language (GLSL) Abstraktionsebenen und Lebensdauer [10] Langlebige und abstrakt: Mathematik, Physik, Konzepte, Algorithmen. Mittlere Lebensdauer: Schnittstellen zur Grafik-Hardware, Programmiersprachen. Kurze Lebensdauer: Darstellung von Grafiken und Bildschirm-Fenstern. Das Beispiel SimpleTriangle [11] Darstellung eines farbigen Dreiecks im Web-Browser. Technologie: HTML5-Canvas, WebGL(JavaScript), Shader-Programme (GLSL). Fehler im JavaScript können mit den Developer Tools in Chromium gefunden werden. Der WebGL-Zustand kann mit der Browser-Erweiterung WebGL inspector untersucht werden. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 5

7 SimpleScene [12] Ziel: Vereinfachung des Einstiegs. Methode: Verstecken der WebGL-Details in einer Klasse. Schnittstelle: Methoden zur Spezifikation von Eckpunkten, Farben etc. Überblick: Nutzung der Möglichkeiten von Aptana Studio 3 (Rechner). WebGL [13] Homepage: Dort finden Sie auch einen Link auf die sehr hilfreiche WebGL reference card. Fortgeschrittenes Beispiel: Fragen und Experimente: 1. Wie viele Aquarium-Frames schafft Ihr Telefon oder Tablet? 2. Was verrät der WebGL-Inspector über das Aquarium? WebGL-Anwendungen: Ebenen [14] HTML 5: Bereitstelung eines canvas. Interaktion (js-aufrufe). Einbinden von Hilfs-Skripten. JavaScript: Initialisierung Kontext CPU/RAM. Shader-Programme (CPU/VRAM). Buffer (Ecken, Topologie, RAM/VRAM). WebGL-Zustand. Zeichnen (Inhalte der Buffer, GPU/VRAM) Interaktion (Maus, Tastatur) Sommer 2014, HS Augsburg, Peter Rösch Inhalt 6

8 [15] GLSL (Vertex (vert)- und Fragment (frag)-shader): Geometrische Transformationen (vert). Projektion, 3D 2D (vert). Beleuchtungs-Berechnungen (vert, frag). Texturierung (frag, vert). Oberflächen-Effekte (frag). Setzen der Pixel-Farbe (frag). Entwicklung effizienter -Anwendungen [16] Typische Grafik-Befehle: Früher (z.b. Apple II+): Zeichne eine Linie vom Punkt (3, 2, 7, 1) zum Punkt (9, 8, 12, 1) Die Ausgabe erfolgte mit der CPU (universeller Prozessor). Heute: (z.b. WebGL): Zeichne Dreiecke mit Eckpunkten aus Buffer 7 mit Normalenvektoren aus Buffer 21 Die Ausgabe erfolgt mit der GPU (hochspezialisierter Parallelrechner). Die Unterschiede in den Schnittstellen korrespondieren zu Fortschritten im Aufbau der Grafik-Systeme (Tafel). Die Render-Pipeline [17] Texture Memory (Geomety) App. Memory (Pixels) Vertex Processor Pixel Unpack Pixel Pack Primitive Assembly Pixel Transfer Clip Project Viewport Cull (Geometry) Rasterize (Pixels) Fragment Processor Read Control Per Fragment Operations Frame Buffer Operations Frame Buffer Memory/ Buffer OpenGL Fixed Functionality Programmable Processor Vertices Fragments Textures Pixel Groups Sommer 2014, HS Augsburg, Peter Rösch Inhalt 7

9 Die OpenGL Shading Language (GLSL) [18] Philosophie Überblick Shader Ein- und Ausgabegrößen Einbinden von Shader-Programmen in OpenGL-Applikationen Weitere Eigenschaften der OpenGL Shading Language Philosphie [19] Die OpenGL Shading Language hat deutliche Vorteile im Vergleich zu anderen Ansätzen zur Shader-Programmierung 1 : Übersetztung der Shader-Programme geschieht zur Laufzeit: Der Compiler für Shader-Programme ist Teil des OpenGL-Treibers, so dass jeder Hersteller den Compiler für die eigene Hardware optimieren kann. In fast allen Fällen optimieren Compiler besser als Programmierer. Keine Notwendigkeit, in Assembler zu programmieren: Die OpenGL Shading Language ist eine C-ähnliche Hochsprache, die den meisten Grafikprogrammierern (auch Java-Programmierern) bekannt vorkommt. [20] Ein offener, plattformunabhängiger Standard: Shader-Programme können auf einer Plattform (und Grafikkarte) entwickelt werden, laufen jedoch auf allen Plattformen und Grafikkarten, sofern sich der Hersteller an den Standard hält. Eine Programmiersprache für Vertex- und Fragment-Shader: Beide Shader-Typen können mit der gleichen Sprache programmiert werden. Erweiterungen auf andere künftig programmierbare Teile der Grafikkarte (z.b. Pixel Pack/Unpack) sind problemlos möglich. 1 Quelle: Rost et al. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 8

10 [21] Modulare Programmierung: Durch die von C/C++ bekannten Schritte Compile und Link ist ein modularer Aufbau der Applikationen möglich. Die fördert die Entwicklung wiederverwendbarer Komponenten. Es werden keine weiteren Bibliotheken oder Programme benötigt: Die OpenGL/WebGL Shading Language, der Compiler und Linker sind Teil von OpenGL. Neuere Versionen des Compilers/Linkers sind Teil eines Treiber-Updates. Überblick Shader [22] Falls ein Vertex Shader Teil des OpenGL-Zustandes ist, wird er einmal für jeden Knotenpunkt (Vertex) der an OpenGL übergeben wird, ausgeführt. Falls ein Fragment Shader Teil des OpenGL-Zustandes ist, wird er einmal für jedes Fragment, das der Rasterizer ausgibt, ausgeführt, also z.b. einmal pro Bildschirm-Pixel eines gefüllten Dreiecks. Die Shader können auf aktive Buffer zugreifen, die z.b. Koordinaten von Knotenpunkten oder Normalenvektoren enthalten. [23] Es gibt zwei Arten von Variablen, über die eine Anwendung mit den Shadern kommunizieren kann, nämlich attribute variables (ändern sich häufig, maximial einmal pro Vertex) und uniform variables (ändern sich relativ selten, z.b. einmal pro Objekt). Die Übergabe von Parametern ist im Allgemeinen nur in Pipeline-Richtung möglich. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 9

11 Überblick Programmiersprache und Datenfluß [24] Die Sprache basiert auf der Syntax von C. Viele Schlüsselwörter und Strukturen sind identisch zu denen der Sprache C. Zusätzliche Arten von Datentypen erlauben die Kommunikation zwischen Anwendung und Shadern und zwischen Vertex und Fragment Shadern: attribute: Übermittlung von Vertices, Normalen, Texturen und Parametern, die sich häufig ändern (Applikation Vertex Shader). varying: Parameter, die im Vertex Shader berechnet werden und für die Verwendung im Fragment Shader interpoliert werden müssen (Vertex Shader Fragment Shader). uniform: Parameter, die sich relativ selten ändern (Applikation Vertex/Fragment Shader). [25] Es gibt einen Datentyp sampler für den Zugriff auf Texturen. Die Sprache enthält einen Satz fest definierter Funktionen für Operationen, die im Grafik-Kontext relevant sind. Funktionen müssen deklariert werden, das Überladen von Funktionen (unterscheidung über Typ und Anzahl der Argumente) ist möglich (Vergleiche C++). Variablen können an den Stellen definiert werden, an denen sie gebraucht werden. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 10

12 Shader Ein- und Ausgabegrößen [26] Eingabegrößen: Vom Benutzer definierte Buffer (Vertex/Texturkoordinaten, Normalenvektoren, Texturen,... ) sowie zusätzliche applikationsspezifische Parameter (z.b. Temperatur, Iterationstiefe, Tangentenvektoren). Ausgabegrößen des Vertex-Shaders: Transformierte Positionen der Knotenpunkte sowie zusätzliche Parameter, die vom Fragment-Shader benötigt werden (siehe Überblicks-Grafik). Ausgabegrößen des Fragment-Shaders: Farbe eines Bildschirm-Pixels. Shader Ausgabe (Auswahl): [27] Vertex Shader, Special Variables: Die Position des Knotenpunkts im clip space muss von jedem Vertex Shader berechnet und in der speziellen Variable gl Position gespeichert werden. Vertex, Varying Variables: Die Werte dieser Variablen werden zwischen den Vertex-Positionen interpoliert (wie z.b. Farben beim smooth shading ). Fragement Shader, Special Variables: Farbe eines Fragments (Pixels) gl FragColor Einbinden von Shader-Programmen in OpenGL-Applikationen [28] Problem: Die Aufrufe zum Übersetzen und zur Verwendung von Shadern sind etwas verwickelt, insbesondere werden Fehlermeldungen oder Warnungen nicht automatisch ausgegeben, sondern müssen erst ausgelesen werden. Lösung: Erstellen einer Klasse ShaderProgram, die die Aufrufe kapselt und ggf. Fehlermeldungen ausgibt. Die Klasse findet sich als Vorlage an den üblichen Stellen. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 11

13 OpenGL Shading Language Datentypen [29] Skalare: Unterstützt werden die Typen float, int, bool, wobei int mindestens den Bereich [-65535, 65535] abdeckt. Vektoren: Es werden Vektoren mit Länge 2,3 und 4 der Basistypen unterstützt, also float: vec2, vec3, vec4, int: ivec2, ivec3, ivec4, bool: bvec2, bvec3, bvec4, wobei es unterschiedliche Möglichkeiten für den Zugriff auf Komponenten gibt (z.b. myvec.y oder myvec[1]. Matrizen: Es werden quadratische Matrizen aus float-zahlen unterstützt (mat2, mat3, mat4), wobei die Anordnung der Werte im OpenGL-typischen Format, also spaltenweise erfolgt. Die Komponenten einer 3 3-Matrix m sind wie folgt angeordnet: m[0][0] m[1][0] m[2][0] m[0][1] m[1][1] m[2][1] m[0][2] m[1][2] m[2][2] Sampler: Der Zugriff auf Texturen erfolgt über Sampler, wobe es für verschiedene Arten von Texturen verschiedene Sampler gibt, also z.b. sampler1d, sampler2d, sampler3d, samplercube. Der Zugriff auf eine 2D-Textur könnte folgendermaßen aussehen: uniform sampler2d Grass; vec2 coord(0.32, 0.45); vec4 color = texture2d(grass, coord); Dabei muss der Variablen Grass die Nummer der Textur zugewiesen werden (dies geschieht per gluniform1iarb oder gluniform1ivarb von der Applikation aus). [30] Sommer 2014, HS Augsburg, Peter Rösch Inhalt 12

14 OpenGL Shading Language Operationen und Funktionen [31] Rechenoperationen: Die meisten Operatoren sind so überladen, dass sie sowohl für Skalare, Vektoren und Matrizen das erwartete Ergebnis liefern, so kann ein Punkt folgendermaßen verschoben werden: vec4 oldpoint = vec4(5,4,3,1); mat4 transmat = mat4(1,0,0,0, 0,1,0,0, 0,0,1,0, 2,3,4,1); vec4 newpoint = transmat * oldpoint; Benutzedefinierte Funktionen: In Anlehnung an C++ können Funktionen überladen werden. Rekursion ist jedoch nicht erlaubt. Vordefinierte Funktionen: vordefiniert. Viele grafikrelevante (z.b. trigonometrische) Funktionen sind Präprozessor: Die von C her bekannten Mechanismen #define, #if etc. und Makros (z.b. LINE ) werden unterstützt. Sommer 2014, HS Augsburg, Peter Rösch Inhalt 13

15 Literatur [32] [1] Edward Angel: Interactive Computer Graphics A Top-Down Approach with OpenGL, Addison-Wesley [2] J. D. Foley, A. van Dam, S. K. Feiner: Computer Graphics Priciples and Practice, Addison-Wesley [3] A. Nischwitz, P. Haberächer: Masterkurs und Bildverarbeitung, Vieweg [4] K. Zeppenfeld: Lehrbuch der Grafikprogrammierung, Spektrum Akademischer Verlag [5] H.-J. Bungartz, M. Griebel, C. Zenger: Einführung in die, Vieweg [6] U. Claussen: Programmierung mit OpenGL, Springer [7] M. Apetri: 3D-Grafik mit OpenGL, mitp [8] M. Apetri: 3D-Grafik Programmierung, mitp [9] M. Woo, J. Jeider, T. Davis, D. Shreiner: OpenGL Programming Guide, Addison-Wesley [10] D. Shreiner (Ed.): OpenGL Reference Manual, Addison-Wesley [11] R. J. Rost, J. M. Kessenich, B. Lichtenbelt: OpenGL Shading Language, Addison-Wesley [12] D. Wolff: OpenGL 4.0 Shading Language Cookbook, PACKT Publishing [13] H. Ihde: Shader mit GLSL, Diplomica Verlag [14] H. Nguyen (Ed.): GPU Gems 3, NVIDIA (2008) [15] R. S. Wright, Jr., B. Lipchak, N. Haemel: OpenGL SuperBible Comprehensive Tutorial and Reference, Addison-Wesley [16] T. Parisi: WebGL: Up and Running, O Reilly, Safari Books [17] WebGL quick reference card [18] WebGL home page [19] three.js home page [20] Online-Angebot der Bibliothek (Suchbegriffe: WebGL, JavaScript, html5, OpenGL etc.) Im Labor M3.03 vorhanden Sommer 2014, HS Augsburg, Peter Rösch Inhalt 14