Animated GIFs aus mit OpenGL erstellten Bildern

             Softwarepraktikum Computergraphik       Saoud Asla: Ang. Informatik Student                Betreuerin: Dr. Susanne Krömker

 

 

Definitionen

 

Einsatz von Animation

 

Beispiele

-        Gaussian Funktion

-        solar System

-        Kamerafahrt

Framebuffer

 

GLUT

 

Programme zur

Animationserstellung

 

Geschwindigkeit der Animation

 

Translation in OpenGL

 

Kamera in OpenGL

 

Perspektive in OpenGl

 

Orthogonale Projektion

 

 

 

 

Definitionen

 

-        GIF(Graphics Interchange Format): ist ein Grafikformat, das mit einem Browser, Textverarbeitungsprogrammen oder Präsentations-Software darstellbar ist.

 

-        Animation: Animationen sind Visualisierungen, die durch eine Abfolge von mehreren Einzelbildern den Eindruck von Bewegung erwecken.

 

-        animiertes GIF: Datei im Graphics Interchange Format, die einen Satz von Bildern enthält, die in einer bestimmten Reihenfolge als Film präsentiert werden.

 

 

 

Einsatz von Animation

 

 

        Gut gestaltete Animationen können dazu helfen, schneller und einfacher räumliche und zeitliche Sachverhalte zu begreifen. Sie sind auch eine hervorragende Hilfe für Lehrer, wenn es darum geht, schwierige Themen zu erklären. Die Schwierigkeit der Themen kann durch die Beteiligung der mathematischen Gleichungen oder Vorstellungskraft entstehen. (Beispiel 1: Gauß-Funktion)

 

        Darstellung von zeitabhängigen Vorgängen: Eine Animation kann zeitbasierte Phänomene visualisieren. (Beispiel 2: virtuelles Sonnensystem)

 

        Animation kann verwendet werden, um durch das Betrachten aus unterschiedlichen Blickwinkeln mehrere Informationen auf gleichen Raum zu zeigen, zum Beispiel durch Kameratransformationen.(Beispiel 3: Kamerafahrt)

 

 

 

 

 

 

 

Beispiel 1: gaußsche Normalverteilung(Gauß-Funktion) mit variierten Standardabweichung im Zeitablauf.

   

   

 

 

 

 

 

 

Die Standardabweichungen laufen gleichzeitig zwichen 0.1 und 1 hin und zurück

 

Schrittweite = 0.01

 

 

 

OpenGL Utility Toolkit (Glut)

 

·        Das OpenGL Utility Toolkit (GLUT) ist eine umfangreiche Bibliothek und Sammlung von OpenGL-Programmen, welche in erster Linie systemnahe Eingabe- und Ausgabeoperationen des jeweiligen Betriebssystems umsetzen.

 

·        Dieses Toolkit beinhaltet dabei Funktionen zum Definieren von Fenstern, zur Steuerung dieser Fenster und zur Erfassung von Benutzereingaben.

 

·        Es werden ebenfalls Funktionen bereitgestellt, die das Zeichnen von primitiven geometrischen Strukturen ermöglichen.

 

·        Alle GLUT-spezifischen Funktionen beginnen immer mit dem Präfix glut.

 

·        Im Beispiel 1:

 

               initialisiert der Aufruf glutInit(&argc, argv); das GLUT-System in C++ und C:

       glutInit(&argc, argv);     

 

       glutInitDisplayMode(GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA);  

 

               Ein Fenster mit geeigneten Größe erstellen:

       glutInitWindowPosition(5, 5);

       glutInitWindowSize(1280, 657);

       glutCreateWindow("animated gif");

 

       Callback Funktionen :

       glutDisplayFunc(Gaussian);       // Funktion zum Zeichnen des Graphen

       glutReshapeFunc(changeSize);       //Funktion die auf Größenänderungen des Fensers eingeht

                                                                          in der Methode changeSize wird die Projektionsmatrix erstellt(Perspektive in OpenGL)

       glutIdleFunc(Animation);      // void Animation() wird aufgerufen, wenn Ereignisse nicht empfangen werden, um den

                                                                      Standardabweichung zu varriieren.

 

 

 

               Callback Funktionen behandeln:

       glutMainLoop(); 

 

 

void Gaussian(float standardabweicung)

 

-        Zeichnet den Graph von der Gaussianfunktion für eingegebene Standardabweichung

-        Pseudocode :

grid(x)=Anzahl der Punkte zwischen a und -a           // Im Beispiel a=b=1

grid(y)=Anzahl der Punkte zwischen b und -b

von  x=-a bis x=a

     von y=-b bis y=b

            Berechne z für x und y

            Point=(x,y,z)

            x=x+1/grid(x) ,   y=y+1/grid(y)

            Add point to points

drawPoints(points)

 

 

Frambuffer

 

 

·        Zum speichern der Pixeldaten aus dem Framepuffer stellt OpenGL die Funktion glReadPixels bereit.

 

·        void glReadPixels(GLint x​, GLint y​, GLsizei width​, GLsizei height​, GLenum format​, GLenum type​, GLvoid * data​);

 

·        data : Gibt einen Zeiger auf die Bilddaten im Speicher an

 

   Bild aus der gezeichneten Scene erzeugen:

 

1.      Pixeldaten aus dem Framebuffer speichern:

 

       byte* bmpBuffer = (byte*)malloc(width*height * 3);

       if (!bmpBuffer) return;

 

       glReadPixels((GLint)0, (GLint)0,

              (GLint)width - 1, (GLint)height - 1, GL_BGR_GL_UNSIGNED_BYTE,bmpBuffer);

 

2.      Attribute für bitmapFileHeader und bitmapInfoHeader ensprechend setzen

BITMAPFILEHEADER bitmapFileHeader;

BITMAPINFOHEADER bitmapInfoHeader;

                               .

                               .

                               .

 

3.      Bitmap Information und Pixeldaten in einer Datei speichern

 

 

 

 

 

 

 

 

Animated GIFs aus den erzeugten Bildern erstellen

 

 

       Mit Photoshop:

-        Datei > Skripten > Dateien in Stapel laden

 

Untitled-2

                                  Bild 1

 

 

-        Endlosschleife einstellen

 

-       

Bild 3

-         

 

 

-        Zeitleiste öffnen: Fenster > Zeitleiste „Frame-Animation erstellen

-        Ebenen in Animations-Frames konvertieren

-       

Bild 2

 

-        Animation als GIF-Datei exportieren:

Datei > Exportieren > Für Web speichern (Legacy)

 

 

 

       Oder in der Webseite : https://ezgif.com/  :

 

Untitled-2

Untitled-1

 

·        Nachteil: man kann nur 80 MB maximal hochladen

 

 

 

 

 

 

Geschwindigkeit der Animation

 

 

 

  Zwei Möglichkeiten um Geschwindigkeit der Animation zu erhöhen(reduzieren):

 

1.      Durch Verzögerung zwischen den Frames.
In Photoshop z.B. kann man die Dauer der einzelnen Frames manuell ändern(siehe Bild 3).

-        Internet Explorer unterstützt Frame-Verzögerungen über 0,06 s, Verzögerungen  die weniger als 0,06 s ist , wird auf 0,10 s aufgerundet.

Quelle: http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser

 

 

2.        Schrittweite der variierten Parameter erhöhen(reduzieren)

step_size=0.01 , Dateigröße = 3.10 MB

Anzahl der mit OpenGL erzeugenden Bildern=ca. 180

Größe der mit OpenGL erzeugenden Bildern=ca. 120 MB

 

 

step_size=0.03 , Dateigröße = 551 KB

Anzahl der mit OpenGL erzeugenden Bildern=ca. 60

Größe der mit OpenGL erzeugenden Bildern=ca 37 MB

 

 

 

 

·        Wenn ein Bild große Flächen mit flachen oder einzelnen Tönen hat, dann ist GIF das Format der Wahl.

 

 

·        Das GIF-Format unterstützt 256 Farben (d.h. eine 8-Bit-Farbpalette).

-        Da Gifs nur 256 Farben verwenden, führen sie zu kompakten Bildern und verbrauchen weniger Bandbreite.

 

 

·        GIFs sind in der Animation weit verbreitet, weil sie Transparenz und interlacing ermöglichen .

-        Ihnen fehlt die volle Farbtiefe, die der Sensor einer Digitalkamera aufnehmen kann, und werden allmählich weniger verwendet.

 

 

 

 

 

Beispiel 2:  zeigt die Umdrehung von der Planette um die Sonne

 

 

 

Untitled1

planete1

 

Die relative Entfernung von der Sonne und die relative Größe der Planeten fällt mit dem realen Sonnensystem zusammen(https://en.wikipedia.org/wiki/Solar_System).

 

 

Translation in OpenGL

    

·       glTranslate( GLfloat x, GLfloat y, GLfloat z) bewegt den Koordinatenursprung in den Punkt (x,y,z) gezeichnet.

·       Im obigen Beispiel wird erst die Sonne im Koordinatenursprung gezeichnet, dann werden die andere Planeten jeweils nach einem Aufruf von glTranslate() mit enstsprechenden Abstandsvektor gezeichnet.

 

drawSun();

 

glPushMatrix();

glMultMatrixf(getMercuryRotationMatrix(time));

glTranslatef(MercuryAbstandsvektor.x, MercuryAbstandsvektor.y, MercuryAbstandsvektor.z);

drawMercury();

glPopMatrix();

 

 

glPushMatrix();

glMultMatrixf(getNeptunRotationMatrix(time));

glTranslatef(NeptunAbstandsvektor.x, NeptunAbstandsvektor.y, NeptunAbstandsvektor.z);

drawNeptun();

glPopMatrix();

 

 

 

 

 

Kamera in OpenGL

 

 

 

    Wie kann ich mein Auge oder meine Kamera in meine Szene bewegen?                    

 

Stellt die GLU-Bibliothek die gluLookAt () -Funktion zur Verfügung, die eine Augenposition, eine Position zum Betrachten und einen up-Vektor, alle in Objektraumkoordinaten benötigt. Diese Funktion berechnet die inverse Kameratransformation nach ihren Parametern und multipliziert sie mit dem aktuellen Matrixstapel.

 

Untitled2

Untitled3

 

Die Augenposition im rechten Bild, näher als im linken Bild    

 

 

 

Perspektive in OpenGl

 

 

gluPerspective( GLdouble fovy, GLdouble aspect, GLdouble zNear, GLdouble zFar) befindet sich in der GLU-Utility-Klasse und bietet eine einfache Möglichkeit, die Tiefe und das Sichtfeld (fovy) der Szene anzugeben.

Fovy: field of view (FOV) in Y direction.

http://potatoland.org/glart/week3/

perspective_proj_glupers

 

Durch das Sichtfeld kann man die Größe von dem Viewfrustum(Viewfrustum ist der sichtbare Bereich in Weltkoordinaten, abgegrenzt durch die zwei Clipping-Planes) bestimmen :

 

 13213211

                                         Fovy=90

 121311

                                             Fovy=45

 

 

 

 

 

 

 

 

Beispiel 3:  Kamerafahrt

 

 

 

·       Kamerafahrt wird verwendet um mehrere Seiten von 3D Objekten zu zeigen.

 

 

-        Eine der Methoden eine Kamerafahrt mit OpenGL zu schaffen, ist durch die Funktion glRotated( GLdouble angle, GLdouble x, GLdouble y, GLdouble z).

-        Die glRotate Funktion multipliziert die aktuellen Matrix mit einer Rotationsmatrix. Durch diese Rotationsmatrix werden alle Punkte um angle Grad entgegen dem Uhrzeigersinn um eine Rotationsachse gedreht. (quelle: https://wiki.delphigl.com/index.php/glRotate)

 

·       Im Bild rechts, werden alle Objekte nach jedem Aufruf von glRotate mit zunehmendem Winkel um die x-Achse gedreht gezeichnet. 

Untitled6

 

 

 

 

 

Orthogonale Projektion

 

 

 

Orthogonale Projektion: Größe der gezeichneten Objekte ist unabhängig von ihrer Position

 

 

 

Zum Einstellen der orthogonalen Projektion stellt OpenGL die Funktion glOrtho(left, right, bottom, top, near, far:gldouble) bereit.

 

Image63

 

Bildquelle

 

 

 

 

 

orthonew

 

glOrtho

perspnew

 

glPerspective

 

 

 

Quellen :

 

https://www.guidingtech.com/7729/difference-between-jpg-png-gif-bmp-image-formats/

https://www.e-teaching.org/didaktik/gestaltung/visualisierung/animation/

https://en.wikipedia.org/wiki/Gaussian_function

https://de.wikipedia.org/wiki/OpenGL_Utility_Toolkit

https://www.opengl.org/archives/resources/faq/technical/viewing.htm

 

 

Kontakt : asla@stud.uni-heidelberg.de