Mitglied der Helmholtz-Gemeinschaft Inhaltsverzeichnis Integration von 3D-Visualisierungstechniken in 2D-Grafiksystemen Motivation Ergebnisse Ausblick 24. August 2012 Florian Rhiem 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 2 26 Motivation Die Realität ist räumlich Der Monitor ist 2-dimensional Wie können 3D-Inhalte in 2D-Grafiken integriert werden? Wie können die... Ansätze Schnittstellen Ausgabemedien in einer Anwendung vereint werden? 2D-Grafiksysteme GKS Das Graphische Kernsystem Linienzüge ISO-Standard Hohe Qualität Grafische Primitiven Plattformunabhängig Symbole Flächen Text Beispieltext Farbmatrizen 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 3 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 4 26
2D-Grafiksysteme GR 3D-Visualisierungstechniken Eine auf dem GKS aufbauende Grafikbibliothek Erzeugt komplexe Objekte mit Primitiven des GKS Koordinatensysteme Spline-Funktionen Fehlerbalken Rastergrafiken L A T E X-Formeln... Vereinfacht die Benutzung Die Vorteile des GKS bleiben erhalten Die Open Graphics Library 3D-Grafik API Spezifikation Plattformunabhängig Benutzbar aus C, C++, Python, Fortran, Delphi, Java, C#,... Weitgehend sprachunabhängige Schnittstelle Weit verbreitet Aktuell: 4.3 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 5 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 6 26 3D-Visualisierungstechniken WebGL 3D-Visualisierungstechniken Rasterisierer Web Graphics Library im Web 3D-Grafik in HTML5-Dokumenten JavaScript-Integration Umwandlung von Vektorgrafik zu Rastergrafik 1 Durch Eckpunkte beschriebene Vektorgrafik 2 Pixel unter der Fläche feststellen 3 Pixelfarbe bestimmen 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 7 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 8 26
3D-Visualisierungstechniken Raytracing Strahlenverfolgung, Pixel für Pixel 1 Szene mit Objekten und Lichtquelle im Raum 2 Strahl von der Kamera durch einen Pixel bestimmen 3 Ersten Schnittpunkt mit der Szene finden 4 Weitere Strahlen verfolgen und dabei Reflektion Lichtbrechung Absorption beachten. 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 9 26 3D-Visualisierungstechniken Persistence of Vision Raytracer Raytracer Sehr hohe Qualität Zeitaufwändiges Rendering Szenenbeschreibungssprache 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 10 26 3D-Visualisierungstechniken GR3 in der Grafikinfrastruktur Gleiche Inhalte Verschiedene Ausgabemedien GR Anwendung GR3 GLUT... Qt Rastergrafiken (JPEG, PNG oder rohe Pixmap) HTML5-Dokument Anzeigefenster Offscreen Rendering Direktes Rendering JavaScript GKS GLUT Qt wxwidgets... GKS Browser WebGL & WGL/CGL/GLX 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 11 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 12 26
HTML5/JavaScript- Dokument JavaScript.html.pov Anwendung Szenenverwaltung - Funktionen jpeglib libpng Anwendung GR.jpeg Szene Szenenbeschreibung.png Rastergrafik Pixmap auslesen Fenster der Anwendung Zeichnen in GKS/GR oder Szenenbeschreibung Eigenschaften der Szene camera light_source background Körper in der Szene mesh sphere cylinder cone Export in eine Datei 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 13 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 14 26 y Kein Konzept einer Szene Dreiecksgitter Grafik-Pipeline Transformationen Rasterisierung Farbberechnungen z vertices n 1 n2 n 3 c 1 c 3 v 1 v 3 v 2 c 2 v 1 v 2 x v 3 Auf Monitore ausgelegt Maximale Auflösung begrenzt Zerlegung in Einzelbilder Zusammensetzen im Hauptspeicher y top normals colors n 1 c 1 r g b n 2 c 2 r g b n 3 c 3 r g b bottom α z 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 15 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 16 26
Kontext Bestehender Zeichenbereich wird verwendet glx/cgl/wglgetcurrentcontext() Alternativ: Offscreen Rendering Kontext Vektorgrafik Rastergrafik in 4-facher Auflösung Rastergrafik mit Kantenglättung Framebuffer Objekt 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 17 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 18 26 WebGL GKS/GR WebGL Kontext <canvas> canvas.getcontext("experimental-webgl") C Code () GLuint vbo; glgenbuffers(1, &vbo); glbindbuffer(gl_array_buffer, vbo); Rastergrafiken als Farbmatrix (Cell Array) gr_drawimage gr3_drawimage JavaScript Code (WebGL) var vbo = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vbo); 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 19 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 21 26
Ergebnisse Moldyn Ergebnisse Moldyn Molekülvisualisierung Darstellung mit: X11 GDI Bisher: Interaktive Darstellung mit Grafikexport mit GLor und jpeglib oder mit Redundanter Darstellungscode Jetzt: Szenenbeschreibung bei Änderung des Inhalts Zeichnen und Export mit GR3-Funktionen Erweiterungen einfacher 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 22 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 23 26 Zusammenfassung und Ausblick Eine Schnittstelle für mehrere Ausgabeformen Python-Anbindung 2D-Elemente fehlen, z. B. Text Isoflächen Vielen Dank für Ihre Aufmerksamkeit! Fragen? 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 25 26 24. August 2012 PGI/JCNS Wissenschaftliche IT-Systeme 26 26