Μάθημα 1ο

Πρώτο Μάθημα Γραφικών - OpenGL

Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.

1. Λίγα λόγια για το OpenGL

Το OpenGL είναι ένα ΑΡΙ για την επικοινωνία με την κάρτα γραφικών. Αποτελείται από περίπου 150 διαφορετικές εντολές. Εμείς στο εργαστήριο θα ασχοληθούμε με ένα βασικό υποσύνολο των εντολών αυτών. Μπορείτε να βρείτε περισσότερες πληροφορίες για το OpenGL στο OpenGL Redbook που βρίσκεται στο:

http://www.glprogramming.com/red/

Το OpenGL είναι σχεδιασμένο ώστε να είναι ανεξάρτητο από το υλικό (hardware) και από λειτουργικό σύστημα - παραθυρικό περιβάλλον. Μπορεί να χρησιμοποιηθεί σχεδόν σε όλες τις «γνωστές» γλώσσες προγραμματισμού (C, C++, JAVA, Visual Basic, Delphi).

Παρέχει ένα σύνολο εντολών για την επικοινωνία με το υλικό και υποστηρίζεται από όλες τις εταιρείες κατασκευής καρτών γραφικών. Είναι το τρέχον standard παρά τις προσπάθειες της Microsoft με το DirectX. Για αυτό το λόγο χρησιμοποιείται ευρέως σε πολλές εφαρμογές και παιχνίδια.

Το OpenGL είναι μια μηχανή καταστάσεων (state machine) με την έννοια ότι είμαστε διαρκώς σε μια κατάσταση μέχρι με μια εντολή να μεταβούμε σε κάποια άλλη. Για παράδειγμα, όταν χρωματίζουμε αντικείμενα, μπορούμε να θέσουμε το χρώμα σε κόκκινο, κίτρινο, … και θα χρησιμοποιούμε το ίδιο χρώμα συνέχεια, μέχρι να ορίσουμε ένα καινούριο χρώμα...

2. Άνοιγμα του πρώτου μαθήματος

Κατεβάστε τον κώδικα του μαθήματος. Είναι συμπιεσμένος σε ένα .zip αρχείο. Ανοίξτε το και κάντε extract όλα τα αρχεία σε ένα κατάλογο.

Επίσης θα χρειαστείτε τη βοηθητική βιβλιοθήκη glut από εδώ:

http://www.xmission.com/~nate/glut.html

και φυσικά την OpenGL από εδώ (στην περίπτωση που δεν είναι ήδη στο σύστημά σας):

http://opengl.org/resources/faq/getting_started.html

Ύστερα πηγαίνετε στον κατάλογο που κάνατε extract το εργαστήριο εκείνο και:

2.1 Με Visual Studio

Στο Visual Studio 6 ανοίξτε το αρχείο με την κατάληξη .dsw.

Στο Visual Studio.net ανοίξτε το αρχείο με την κατάληξη .sln.

Για να κάνετε compile και να τρέξετε το πρόγραμμα, πατήστε CTRL-F5

Απαραίτητα αρχεία για να τρέξει σε Visual Studio

Στον κατάλογο System

• glu32.dll
• opengl32.dll
• glut32.dll

Στον κατάλογο include του Visual Studio

• gl\gl.h
• gl\glu.h
• gl\glut.h (includes both gl.h and glu.h)

Στον κατάλογο lib του Visual Studio

• gl\glu32.lib
• gl\opengl32.lib
• gl\glut32.lib

Στο .net, το GLUT μπορεί να βγάλει error αν χρησιμοποιηθεί μαζί με το stdlib.h

Στην περίπτωση αυτή κάντε την ακόλουθη αλλαγή στο glut.h:

Από

extern _CRTIMP void __cdecl exit(int);

σε

extern _CRTIMP __declspec(noreturn) void __cdecl exit(int);

2.2 Με Unix compilers

Τρέξτε το make για να κάνετε compile τα προγράμματα.

Για την προετοιμασία του συστήματος σε Linux κοιτάξτε στον παρακάτω σύνδεσμο:

http://www.opengl.org/resources/faq/technical/gettingstarted.htm#gett0090

3. Το πρώτο μάθημα

3.1 main.cpp

Στο αρχείο main.cpp η main ξεκινά με τη συνάρτηση glutInit(). Η glutInit() αρχικοποιεί τη βιβλιοθήκη glut η οποία κάνει το προγραμματισμό για τη δημιουργία του παραθύρου πιο εύκολο και μεταφέρσιμο. Στη συνέχεια η glutInitDisplayMode() με την οποία επιλέγουμε αν θα έχουμε χρώμα κατά το μοντέλο RGB (κόκκινο- πράσινο-μπλε) ή με παλέτα, αν θα έχουμε μονό ή διπλό buffer, και αν θα έχουμε διάφορους άλλους buffer (βάθους, κτλ). Στο παράδειγμά μας με τις παραμέτρους GLUT_RGBA|GLUT_DOUBLE επιλέγουμε να έχουμε χρώμα κατά το μοντέλο κόκκινο- πράσινο-μπλε και διπλό buffer.

Εδώ πρέπει να αναφέρουμε πώς αναπαριστάται το χρώμα στο μοντέλο κόκκινο- πράσινο-μπλε. Στο μοντέλο αυτό κάθε χρώμα είναι ένας γραμμικός συνδυασμός των τριών βασικών χρωμάτων: κόκκινο, πράσινο, μπλε. Το κάθε χρώμα παίρνει τιμές από 0 έως 255, δηλαδή 256 τιμές, άρα για να το αποθηκεύσουμε χρειαζόμαστε 2⁸ τιμές = 8 bits = 1 byte. Οπότε και για τα τρία χρώματα χρειαζόμαστε 3 bytes. Αν επιπλέον αποθηκεύουμε και διαφάνεια (παράγοντας άλφα (Α) ) θα χρειαστούμε ένα byte επιπλέον. Τότε λέμε ότι έχουμε RGBA μοντέλο.

Όσον αφορά τη χρήση διπλού buffer (double buffering), αυτό χρησιμοποιείται για να αποφύγουμε το «τρεμόπαιγμα» (flickering) της σκηνής όταν έχουμε κίνηση. Αυτό επιτυγχάνεται ως εξής:

Έχουμε δύο buffers στους οποίους «ζωγραφίζουμε» τη σκηνή μας. Ο ένας δείχνεται στο χρήστη όσο εμείς ζωγραφίζουμε στον άλλο. Ύστερα με μια εντολή οι δύο buffer αλλάζουν ρόλους και εμείς ζωγραφίζουμε πλέον στον buffer που πριν από λίγο έβλεπε ο χρήστης. Με τη χρήση της τεχνικής αυτής το κάθε καρέ δείχνεται μόνο όταν είναι πλήρως ζωγραφισμένο. Ο χρήστης του προγράμματός μας δε βλέπει ποτέ ένα ημιτελές καρέ.

Παρακάτω συναντάμε τις εντολές

glutInitWindowSize(480,480);

glutInitWindowPosition(50,50);

Η glutInitWindowSize μας λέει πόσα pixel θα έχει πλάτος και ύψος το παράθυρο μας. Ύστερα με την glutInitWindowPosition το τοποθετούμε στην οθόνη. Εδώ πρέπει να αναφέρουμε ότι οι συντεταγμένες οθόνης ξεκινάνε από την πάνω αριστερά γωνία (0,0) και αυξάνονται προς τα κάτω και δεξιά. Οπότε το (50,50) στο παράδειγμα θα τοποθετήσει το παράθυρο κοντά στην πάνω αριστερά γωνία της οθόνης.

Αντίθετα στο OpenGL οι συντεταγμένες ξεκινάνε (0,0) στην κάτω αριστερή γωνία και αυξάνονται προς τα πάνω και δεξιά, όπως φαίνεται στο ακόλουθο σχήμα.

Εικόνα 1 Συντεταγμένες κατά OpenGL

Τέλος, αφού έχουμε επιλέξει το μέγεθος και τη θέση του παραθύρου το δημιουργούμε με την glutCreateWindow. Το αλφαριθμητικό που παίρνει σαν παράμετρος είναι ο τίτλος που θα έχει το παράθυρο.

Στη συνέχεια ακολουθεί μια κλήση στη Setup, την οποία όμως δεν πρόκειται να αναλύσουμε στο εργαστήριο αυτό. Προς το παρόν αρκεί να ξέρετε ότι εκεί αρχικοποιούνται μεταβλητές και καταστάσεις του OpenGL πριν ξεκινήσει το πρόγραμμα.

Με τις εντολές

glutDisplayFunc(Render);

glutReshapeFunc(Resize);

καθορίζουμε τη συνάρτηση που θα καλείται όταν πρέπει να ξανασχεδιασθεί το περιεχόμενο του παραθύρου (π.χ. λόγω του ότι αυτό κρύφτηκε από κάποιο άλλο παράθυρο και μετά ξαναήρθε στο προσκήνιο) και τη συνάρτηση που θα καλείται όταν αλλάζουμε το μέγεθος του παραθύρου, αντίστοιχα. Το όρισμα της glutDisplayFunc πρέπει να είναι μια συνάρτηση με τύπο void disp() ενώ το όρισμα της glutReshapeFunc πρέπει να είναι μια συνάρτηση με τύπο

void resh(int, int).

Τελικά η συνάρτηση glutMainLoop() εκτελεί συνεχώς ένα βρόχο που τερματίζει όταν κλείσουμε το παράθυρο και στον οποίο καλούνται οι συναρτήσεις που καθορίσαμε με τις glutDisplayFunc και glutReshapeFunc όταν αυτό είναι απαραίτητο.

3.2 visuals.cpp

Θα εξετάσουμε τις εξής δύο συναρτήσεις:

void Render()

void Resize(int w, int h)

3.2.1 Resize

Η γραμμή

if (h==0) h=1;

μας εγγυάται ότι δε θα έχουμε ύψος ίσο με το μηδέν. Με την εντολή

glViewport(0,0,w,h);

Καθορίζουμε ένα ορθογώνιο μέσα στο παράθυρό μας (το πεδίο παράστασης- Viewport), στο οποίο θα απεικονιστεί τελικά η εικόνα μας. Αφού γίνουν οι διάφοροι μετασχηματισμοί και προβολές το τελικό αποτέλεσμα «συστέλλεται» ή «διαστέλλεται» ώστε να χωρέσει στο ορθογώνιο αυτό. Αυτό φαίνεται και στην παρακάτω εικόνα, όπου η γραφική παράσταση «συστέλλεται» ώστε να χωρέσει σε ένα ορθογώνιο μικρότερο από το παράθυρο μας.

Εικόνα 2 Ορισμός viewport μικρότερου από το παράθυρο

Οι παράμετροι της εντολής είναι οι εξής:

• Η πρώτη τιμή είναι η τετμημένη (χ άξονας) της κάτω αριστερής γωνίας του ορθογωνίου μέσα στο παράθυρό μας.
• Η δεύτερη τιμή είναι η τεταγμένη (ψ άξονας).
• Η τρίτη είναι το πλάτος του ορθογωνίου σε pixels
• Η τέταρτη είναι το ύψος του ορθογωνίου σε pixels

Ας αλλάξουμε τώρα τις τιμές αυτές για να το καταλάβουμε καλύτερα:

1) Αντικαταστήστε την με την εντολή glViewport(0,0,w/2,h); Καθορίζουμε ένα ορθογώνιο που θα εκτείνεται μέχρι τα μισά του παραθύρου.

2) Αντικαταστήστε την με την εντολή glViewport(0,0,w/2,h/2); Καθορίζουμε ένα ορθογώνιο που καταλαμβάνει την κάτω αριστερά γωνία του παραθύρου.

3) Αντικαταστήστε την με την εντολή glViewport(w/3,h/3,w,h); Καθορίζουμε ένα ορθογώνιο που ξεκινάει από τη θέση (w/3, h/3) του παραθύρου και εκτείνεται σε μέγεθος ίσο με το παράθυρο.

Παρατηρούμε ότι η τσαγιέρα «συστέλλεται» και «επεκτείνεται» ανάλογα με το μέγεθος του ορθογωνίου πεδίου παράστασης ώστε να το καταλαμβάνει ολόκληρο.

Έπονται οι εντολές

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

Για να κατανοήσουμε τι κάνουν οι εντολές αυτές πρέπει πρώτα να εμβαθύνουμε λίγο στη λειτουργία του OpenGL. Το OpenGL αποθηκεύει πληροφορίες για τους μετασχηματισμούς

α) των αντικειμένων,

β) των υφών και

γ) των προβολών

σε πίνακες. Με την εντολή glMatrixMode καθορίζουμε σε ποιον από τους πίνακες αυτούς θα αναφέρονται οι μετασχηματισμοί που θα ακολουθήσουν. Με το GL_PROJECTION αναφερόμαστε στον πίνακα για τους μετασχηματισμούς προβολών.

Η εντολή glLoadIdentity φορτώνει το μοναδιαίο πίνακα στον πίνακα που αναφερόμαστε.

Τέλος, η εντολή

glOrtho (-50.0f, 50.0f, -50.0f, 50.0f, 100.0f, -100.0f);

καθορίζει ότι ο μετασχηματισμός προβολής που θα χρησιμοποιήσουμε θα είναι η παράλληλη προβολή. Οι παράμετροι που παίρνει καθορίζουν τα όρια αποκοπής και είναι οι εξής:

glOrtho (Left, Right, Bottom, Top, Near, Far);

και η χρήση τους φαίνεται στην παρακάτω εικόνα.

Ουσιαστικά η glOrtho κάνει μια απεικόνιση από τον χώρο R³ στον οποίο βρίσκονται τα αντικείμενα στον R² σε συντεταγμένες εικόνας. Γίνεται λοιπόν αντιστοιχία των τιμών από τον R³ oι οποίες δεν έχουν μονάδες μέτρησης, σε τιμές στον R² οι οποίες μετρώνται σε pixels.

Εικόνα 3 Η σημασία των παραμέτρων της glOrtho

3.2.2 Render

Στη συνάρτηση αυτή γίνεται ο σχεδιασμός των αντικειμένων. Ξεκινάμε με την εντολή

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

η οποία αρχικοποιεί τους buffers που χρησιμοποιεί το OpenGL με το πέρασμα σε αυτή προκαθορισμένων παραμέτρων, που χωρίζονται με το σύμβολο του bitwise OR. Στο παράδειγμά μας καθαρίζεται ο buffer του χρώματος και του βάθους (z-buffer).

Ύστερα επιλέγουμε τον πίνακα μετασχηματισμού των αντικειμένων και του φορτώνουμε τον μοναδιαίο πίνακα:

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

Με την εντολή

glColor3f(1.0, 0.5, 0.2);

θέτουμε το χρώμα που θέλουμε να χρησιμοποιήσουμε. Οι παράμετροι της glColor3f είναι πραγματικοί αριθμοί από 0.0 εώς 1.0 που καθορίζουν την ένταση των χρωμάτων κόκκινο, πράσινο, μπλε με τη σειρά που εμφανίζονται. Μπορείτε να δώσετε διάφορες τιμές στις παραμέτρους και να δείτε τις αλλαγές στο χρώμα της τσαγιέρας.

Ακολουθεί η εντολή που ζωγραφίζει την τσαγιέρα.

glutSolidTeapot( 20.0 );

Η εντολή αυτή είναι μέρος της βοηθητικής βιβλιοθήκης glut, για το σχεδιασμό βασικών σχημάτων. Η παράμετρος είναι το μέγεθος της τσαγιέρας. Όσο μεγαλύτερη η τιμή της παραμέτρου, τόσο μεγαλύτερη η τσαγιέρα. Άλλα σχήματα που μπορείτε να δοκιμάσετε είναι:

glutWireTeapot( 20.0 );

glutSolidSphere( 20.0, 30, 24);

Τέλος υπάρχει η εντολή που αλλάζει τους buffers (για το double-buffering) .

glutSwapBuffers();

Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.