Kαλωσορίσατε στην ιστοσελίδα μας εκμάθησης Γραφικών με την χρήση της OpenGL.
Για να ξεκινήσετε κάντε click εδώ
ή κάντε click στην εισαγωγή, στην αρχειοθήκη ιστολογίου (αριστερά στην οθόνη).
Project
Άσκηση OpenGL : «Κανόνι & Λαγουδάκια»
Την εκφώνηση και το συνοδευτικό υλικό μπορείτε να τα βρείτε εδώ.
Μερικά demo μπορείτε να βρείτε εδώ.
Να κατασκευάσετε ένα παιχνίδι βολών με το παρακάτω σενάριο:
Ο παίχτης αναλαμβάνει το χειρισμό ενός κανονιού και προσπαθεί να πετύχει με βολές τα λαγουδάκια που εμφανίζονται στο επίπεδο στο οποίο κινείται (επίπεδο ΧZ - έδαφος). Ο παίχτης έχει τη δυνατότητα να ρυθμίσει μέσω του πληκτρολογίου την γωνία βολής του κανονιού α, την αρχική ταχύτητα του βλήματος v0 και την θέση του κανονιού. Η βολή εκτελείται στο επίπεδο XY. Τα λαγουδάκια θα εμφανίζονται σε τυχαίες αρχικές θέσεις στο έδαφος (επίπεδο ΧΖ) και θα κινούνται κατά τον άξονα Χ, με αναπηδήσεις στο επίπεδο ΧΥ. Όταν ο παίχτης καταφέρνει να πετύχει κάποιο από τα περιπλανώμενα λαγουδάκια, τότε να εμφανίζεται στο σημείο της σύγκρουσης ένα αστέρι με τη λέξη «Hit!» μέσα του.
Το περιβάλλον του παιχνιδιού μπορείτε να το εμπλουτίσετε με δικά σας στοιχεία κατασκευασμένα είτε από OpenGL primitives είτε από 3Δ μοντέλα.
Διευκρινίσεις-Υποδείξεις
Το κανόνι πρέπει να το κατασκευάσετε χρησιμοποιώντας OpenGL primitives (torus, σφαίρα, κύλινδρο με χρήση της GL_QUAD_STRIP), με σωστή ιεραρχία μετασχηματισμών, και η κάνη του θα πρέπει να μπορεί να κινείται, ανάλογα με την γωνία βολής. Η βολή μπορεί να αναπαρασταθεί με μία σφαίρα που θα ξεκινά την πορεία της από την βάση της κάνης του κανονιού. Το λαγουδάκι σας δίνεται σαν μοντέλο wavefront (obj) το οποίο και θα πρέπει να φορτώσετε και αναπαραστήσετε στο παιχνίδι σας.
Α. Οι κινήσεις
Σε μία εφαρμογή κινούμενης εικόνας ο χρόνος «κυλάει» παίρνοντας διακριτές τιμές σε κάθε καρέ i, σύμφωνα με την εξίσωση:
t(i) = t(i-1) + dt, με dt σταθερό και t(0) = 0. Η σταθερά dt είναι το βήμα του χρόνου και καθορίζει πόσο «γρήγορα» ή «αργά» θα κυλάει η προσομοίωση.
Η θέση της σφαίρας-βλήματος όταν φύγει από το κανόνι θα προσδιορίζεται από τις εξισώσεις βολής.
Γενικά η θέση ενός σώματος που εκτελεί βολή δίνεται από την μετατόπιση r(x,y), με:
x = v0 cosα t, και
y = v0 sinα t – ½ g t2
όπου v0 η αρχική ταχύτητα του βλήματος, α η γωνία βολής, και g η επιτάχυνση της βαρύτητας.
Η γωνία α μπορεί να παίρνει τιμές στο διάστημα [0ο, 180ο]. Η επιτάχυνση της βαρύτητας g να θεωρηθεί 10. Η αρχική ταχύτητα θα παίρνει τιμές σε ένα διάστημα δικής σας επιλογής, ώστε η προσομοίωση να «δουλεύει». Επίσης πρέπει να προσδιορίσετε το βήμα χρόνου dt ώστε η προσομοίωση να κυλάει φυσιολογικά. Μπορείτε να αφήνετε το χρήστη εμμέσως να ρυθμίζει το dt ώστε η προσομοίωση να τρέχει γρηγορότερα, ανάλογα με το επίπεδο δυσκολίας του παιχνιδιού. ΠΡΟΣΕΞΤΕ: μεγάλες τιμές στο dt μπορεί να προκαλέσουν ασυνέχεια στην κίνηση, και αδυναμία ελέγχου των συγκρούσεων. Επίσης πολύ μικρές τιμές στο dt μπορεί να προκαλέσουν επαναληπτική απεικόνιση της ίδιας σκηνής χωρίς να χρειάζεται.
Για να προσομοιώσετε τις αναπηδήσεις του λαγού, θεωρήστε οτι το κέντρο μάζας του εκτελεί διαδοχικές βολές με συγκεκριμένη αρχική ταχύτητα v0 και συγκεκριμένη γωνία βολής α πχ. 45ο. Την αρχική ταχύτητα την αποφασίζετε εσείς.
Για να το πετύχετε αυτό μόλις το λαγουδάκι φτάσει στο επίπεδο ΧΖ (έδαφος) τελειώνοντας την τρέχουσα βολή, ξαναξεκινήστε μία νέα βολή από την νέα θέση του με τις ίδιες παραμέτρους (αρχική ταχύτητα και γωνία βολής) κοκ.
Β. Wavefront αρχεία
Η παράσταση αντικειμένων με πολύγωνα είναι η πιο διαδεδομένη. Κάθε αντικείμενο αντιπροσωπεύεται από ένα σύνολο πολυγώνων τα οποία είναι το κύριο συστατικό για την παράσταση επιφανειών. Η δομή που χρησιμοποιείται είναι ιεραρχική. Κάθε αντικείμενο είναι μια λίστα επιφανειών, κάθε επιφάνεια μια λίστα πολυγώνων και κάθε πολύγωνο μια λίστα κορυφών. Επίσης έχουμε και λίστες συντεταγμένων υφής και κανονικών διανυσμάτων φωτισμού για κάθε κορυφή ενός πολυγώνου, ενώ σε κάθε επιφάνεια μπορούμε να αντιστοιχίσουμε και το ανάλογο υλικό.
Ένα από τα πιο απλά πρότυπα αρχείων για την αποθήκευση πολυγωνικών μοντέλων είναι το wavefront object πρότυπο, κατά το οποίο είναι αποθηκευμένα και τα συνοδευτικά αρχεία της άσκησης. Είναι σε ascii μορφή επομένως το διάβασμά του είναι εξαιρετικά απλό. Τα βασικά στοιχεία που περιέχει είναι τα εξής (εμφανίζονται σαν identifiers στην αρχή κάθε γραμμής) :
• v – σημείο στο χώρο
• vn – κανονικό διάνυσμα κορυφής
• vt – συντεταγμένες υφής κορυφής
• g – επιφάνεια ακολουθούμενη από το όνομα της
• mtllib – αρχείο αποθήκευσης υλικών επιφανειών
• f – πολύγωνο που χαρακτηρίζεται από δείκτες στις κορυφές του αλλά και επιπλέον με δείκτες σε συντεταγμένες υφής ή κανονικά διανύσματα κορυφών.
o v/t/n , v//n , v/t , v (π.χ. f 45//32 46/33 56//55 , τρίγωνο)
• usemtl – όνομα υλικού για την τρέχουσα επιφάνεια
Αυτό που θα χρειαστεί στην περίπτωση της άσκησης να διαβάσετε από το αρχείο, είναι μόνο η λίστα κορυφών (v) και η λίστα πολυγώνων (τριγώνων) (f), καθώς αρκούν για την αναπαράσταση του αντικειμένου.
Μετά το διάβασμα κάθε αντικειμένου, μετασχηματίστε το κατάλληλα ώστε να ενσωματωθεί στο περιβάλλον που δημιουργείτε (μεταφορά στην αρχή των αξόνων → αλλαγή κλίμακας → προσανατολισμός).
Για τη μεταφορά στην αρχή των αξόνων, αρκεί να υπολογίσετε το κέντρο μάζας του μοντέλου (χρησιμοποιώντας τις συντεταγμένες των κορυφών του) και να μεταφέρετε το μοντέλο έτσι ώστε το κέντρο μάζας του να συμπίπτει με το κέντρο των αξόνων.
Για την προσαρμογή της κλίμακας του μοντέλου, αρκεί να υπολογίσετε την απόσταση της πιο απομακρυσμένης κορυφής (Rmax) του μοντέλου από το κέντρο μάζας και να διαιρέσετε τις συντεταγμένες όλων των κορυφών με αυτήν την τιμή.
Για την προσαρμογή του προσανατολισμού του μοντέλου, αυτό το καθορίζετε εσείς ανάλογα με το πώς θα διαμορφώσετε το περιβάλλον του παιχνιδιού.
Γ. Έλεγχος Σύγκρουσης
Για τον έλεγχο σύγκρουσης μεταξύ δύο αντικειμένων, η υλοποίησή σας θα ελέγχει απλά την απόσταση ανάμεσα στα κέντρα μάζας των 2 μοντέλων (του κουνελιού, και της σφαίρας-βλήματος). Όταν αυτή η απόσταση γίνεται μικρότερη από ένα κατώφλι (δικής σας επιλογής), τότε θα θεωρείτε ότι γίνεται σύγκρουση. Η απόσταση αυτή θα πρέπει να είναι μικρότερη από το άθροισμα της ακτίνας της σφαίρας που περιβάλει το κουνέλι (Rmax) και της ακτίνας της σφαίρας-βλήματος (Rsph).
Κατά τη σύγκρουση μπορεί να εμφανίζεται για κάποια δευτερόλεπτα το παρακάτω σχήμα:
Στο συνοδευτικό υλικό της εργασίας εκτός από τα μοντέλα δίνεται και demo της εργασίας.
Μάθημα 4ο
Τέταρτο Μάθημα Γραφικών – OpenGL
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Κάντε compile το πρόγραμμα. Θα πρέπει να βλέπετε δύο τσαγιέρες.
Βρείτε και ξεσχολιάστε το κομμάτι κώδικα (01) στη setup και αλλάξτε το χρώμα της δεύτερης τσαγιέρας σε glColor4f(0.3, 0.2, 0.9, 0.5) (δηλαδή την μετονομάζουμε από 3f σε 4f και προσθέτουμε άλλη μια τιμή στο τέλος).
Παρατηρήστε τον κώδικα (01) που ξεσχολιάσατε στη setup. Ήταν οι εντολές.
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Με την πρώτη εντολή ενεργοποιούμε τη διαφάνεια στο OpenGL. Με τη δεύτερη εντολή λέμε στο OpenGL πώς να τη χειριστεί. Στην περίπτωσή μας πολλαπλασιάζουμε το χρώμα που βρίσκεται ήδη στον buffer με 1-α (όπου α, η τέταρτη τιμή στην glColor4f, όπως εξηγείται παρακάτω), πολλαπλασιάζουμε με α το χρώμα του αντικειμένου που είναι διαφανές, και τα προσθέτουμε. Δηλαδή ο τύπος είναι:
όπου: src = το αντικείμενο που ζωγραφίζουμε και
dest = τα αντικείμενα που βρίσκονται ήδη στον buffer
Όσον αφορά την glColor4f(0.3, 0.2, 0.9, 0.5); η τέταρτη παράμετρος είναι ο παράγοντας α που αναφέρεται παραπάνω. Παίρνει τιμές από 0.0 εώς 1.0, με το 0.0 να είναι πλήρης διαφάνεια και το 1.0 πλήρης αδιαφάνεια (για τον τύπο που χρησιμοποιούμε).
2ο βήμα
Βάλτε σε σχόλια τον κώδικα 02 και στην setup και στην render. Έως τώρα το OpenGL έβαζε σωστά τα πολύγωνα ως προς το βάθος. Αυτό συνέβαινε επειδή χρησιμοποιούσε τον αλγόριθμο z-buffer (glEnable(GL_DEPTH_TEST);).
Με τις εντολές
glDepthFunc(GL_LEQUAL);
glClearDepth(1.0);
αρχικoποιούμε το z-buffer ώστε οι αρχικές τιμές του να είναι το z του πίσω (far) επιπέδου αποκοπής (1.0) και ορίζουμε να σχεδιάζονται τα αντικείμενα με τη μικρότερη z τιμή (GL_EQUAL - πιο κοντά σε «εμάς»).
Με την εντολή
glClear(GL_DEPTH_BUFFER_BIT);
σε κάθε καρέ ξανα-αρχικοποιούμε τις τιμές του z-buffer.
3ο βήμα
Μέχρι τώρα στο OpenGL δεν κάναμε διάκριση μεταξύ των πολυγώνων που κοιτάνε προς τον παρατηρητή (έμπροσθεν, front-facing) και αυτών που δεν κοιτάνε (όπισθεν, back-facing). Στην πραγματικότητα όμως μπορούμε να τα χειριστούμε διαφορετικά. Πρώτα ορίζουμε με ποια φορά είναι δηλωμένες οι κορυφές για τα έμπροσθεν πολύγωνα με την εντολή glFrontFace που παίρνει σαν όρισμα τα GL_CCW/GL_CW (Counter-ClockWise,ClockWise). Στο κομμάτι κώδικα 03 αλλάζουμε το CW σε CCW. Με αυτόν τον τρόπο βλέπουμε τα πίσω τρίγωνα στις τσαγιέρες (τα αντικείμενα του GLUT ακολουθούν από default την σύμβαση CW). Στο κομμάτι 03 πάλι, σχολιάζουμε το glEnable(GL_CULL_FACE). Αυτό επιτρέπει και στα μπροστινά και στα πίσω τρίγωνα να ζωγραφίζονται, οπότε αχρηστεύει την χρήση του glFrontFace. Με αυτόν τον τρόπο όμως ζωγραφίζουμε πάντα όλα τα τρίγωνα οπότε η σκηνή θα θέλει περίπου τον διπλάσιο χρόνο για να ζωγραφιστεί, οπότε για λόγους απόδοσης το αφήνουμε ενεργοποιημένο.
Στο κομμάτι 04 αλλάξτε το GL_FILL με GL_LINE. Αυτό ορίζει στο OpenGL να ζωγραφίζει μόνο τις ακμές από κάθε τρίγωνο και όχι ολόκληρο.
4ο βήμα
Ο φωτισμός ενός αντικειμένου στο OpenGL κάνει ρεαλιστικότερη την παράστασή του και εξαρτάται από τέσσερις παραμέτρους. Το φωτισμό που δέχεται από το περιβάλλον του (ambient), το φωτισμό που προέρχεται από τη διάχυση του φωτός που προσπίπτει στο αντικείμενο από τις φωτεινές πηγές (diffuse), το φωτισμό που προέρχεται από την ανάκλαση του φωτός που προσπίπτει στο αντικείμενο από τις φωτεινές πηγές (specular) και το φως που εκπέμπει το αντικείμενο (emission). Στα πλαίσια του εργαστηρίου θα ασχοληθούμε μόνο με το φωτισμό περιβάλλοντος και το φωτισμό από διάχυση.
Στους πίνακες
GLfloat ambientLight[] = { 0.3, 0.3, 0.3, 1.0 };
GLfloat diffuseLight[] = { 0.7, 0.7, 0.7, 1.0 };
ορίζουμε τις δύο αυτές παραμέτρους. Τα στοιχεία των πινάκων είναι κατά σειρά η ένταση των χρώματων Red, Green, Blue και το Alpha. Οι τιμές που έχουμε δώσει στο παράδειγμά μας, κοθορίζουν ένα φωτισμό περιβάλλοντος με μικρή ένταση και ένα ελαφρώς έντονο λευκό φωτισμό από διάχυση.
Με την εντολή
GLfloat lightPos[] = { 0.0, 30.0,50.0,0.0 };
καθορίζουμε τις συντεταγμένες της φωτεινής πηγής x,y,z,w. Όταν το w είναι 0.0 τότε η φωτεινή πηγή βρίσκεται στο άπειρο, ενώ όταν είναι 1.0 βρίσκεται στο x,y,z.
Δοκιμάστε να δώσετε διάφορες τιμές στα χρώματα για να δείτε τις αλλαγές στο χρώμα του αντικειμένου από το χρώμα και την ένταση του φωτισμού. Επίσης δοκιμάστε να μετακινήσετε τη φωτεινή πηγή σε διάφορες θέσεις στο χώρο και δείτε το αποτέλεσμα.
Τέλος με τις παρακάτω εντολές δίνονται οι παραπάνω ιδιότητες στο GL_LIGHT0: glLightfv( GL_LIGHT0, GL_AMBIENT, ambientLight );
glLightfv( GL_LIGHT0, GL_DIFFUSE, diffuseLight );
glLightfv( GL_LIGHT0, GL_POSITION, lightPos );
και με τις εντολές
glEnable(GL_LIGHTING);
gEnable(GL_LIGHT0);
ενεργοποιούμε το φωτισμό και τη φωτεινή πηγή 0.
Τέλος αν ενεργοποιήσουμε το κομμάτι κώδικα 05 προσθέτουμε και specular φωτισμό.
Σαν πείραμα δοκιμάστε να κάνετε την φωτεινή πηγή να περιστρέφεται γύρω από τις τσαγιέρες.
5ο βήμα
Ξεσχολιάστε τον κώδικα 06 για να τυπωθεί κείμενο στην οθόνη. Χρησιμοποιούμε την υλοποίηση της GLUT η οποία ζωγραφίζει τα fonts με γραμμες. Η βασική συνάρτηση είναι η glutStrokeCharacter η οποία καλείται μέσα στην συνάρτηση keimeno. Οι υπόλοιπες συναρτήσεις είναι για να θέτουνε το μέγεθος των χαρακτήρων και να επαναφέρουν τους πίνακες μετασχηματισμών στην αρχική τους θέση. Ο συγκεκριμένος τύπος κειμένου δημιουργεί 3Δ γεωμετρία (γραμμές), οπότε ότι έχουμε μάθει για τους 3Δ μετασχηματισμούς ισχύει και εδώ.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Κάντε compile το πρόγραμμα. Θα πρέπει να βλέπετε δύο τσαγιέρες.
Βρείτε και ξεσχολιάστε το κομμάτι κώδικα (01) στη setup και αλλάξτε το χρώμα της δεύτερης τσαγιέρας σε glColor4f(0.3, 0.2, 0.9, 0.5) (δηλαδή την μετονομάζουμε από 3f σε 4f και προσθέτουμε άλλη μια τιμή στο τέλος).
Παρατηρήστε τον κώδικα (01) που ξεσχολιάσατε στη setup. Ήταν οι εντολές.
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Με την πρώτη εντολή ενεργοποιούμε τη διαφάνεια στο OpenGL. Με τη δεύτερη εντολή λέμε στο OpenGL πώς να τη χειριστεί. Στην περίπτωσή μας πολλαπλασιάζουμε το χρώμα που βρίσκεται ήδη στον buffer με 1-α (όπου α, η τέταρτη τιμή στην glColor4f, όπως εξηγείται παρακάτω), πολλαπλασιάζουμε με α το χρώμα του αντικειμένου που είναι διαφανές, και τα προσθέτουμε. Δηλαδή ο τύπος είναι:
όπου: src = το αντικείμενο που ζωγραφίζουμε και
dest = τα αντικείμενα που βρίσκονται ήδη στον buffer
Όσον αφορά την glColor4f(0.3, 0.2, 0.9, 0.5); η τέταρτη παράμετρος είναι ο παράγοντας α που αναφέρεται παραπάνω. Παίρνει τιμές από 0.0 εώς 1.0, με το 0.0 να είναι πλήρης διαφάνεια και το 1.0 πλήρης αδιαφάνεια (για τον τύπο που χρησιμοποιούμε).
2ο βήμα
Βάλτε σε σχόλια τον κώδικα 02 και στην setup και στην render. Έως τώρα το OpenGL έβαζε σωστά τα πολύγωνα ως προς το βάθος. Αυτό συνέβαινε επειδή χρησιμοποιούσε τον αλγόριθμο z-buffer (glEnable(GL_DEPTH_TEST);).
Με τις εντολές
glDepthFunc(GL_LEQUAL);
glClearDepth(1.0);
αρχικoποιούμε το z-buffer ώστε οι αρχικές τιμές του να είναι το z του πίσω (far) επιπέδου αποκοπής (1.0) και ορίζουμε να σχεδιάζονται τα αντικείμενα με τη μικρότερη z τιμή (GL_EQUAL - πιο κοντά σε «εμάς»).
Με την εντολή
glClear(GL_DEPTH_BUFFER_BIT);
σε κάθε καρέ ξανα-αρχικοποιούμε τις τιμές του z-buffer.
3ο βήμα
Μέχρι τώρα στο OpenGL δεν κάναμε διάκριση μεταξύ των πολυγώνων που κοιτάνε προς τον παρατηρητή (έμπροσθεν, front-facing) και αυτών που δεν κοιτάνε (όπισθεν, back-facing). Στην πραγματικότητα όμως μπορούμε να τα χειριστούμε διαφορετικά. Πρώτα ορίζουμε με ποια φορά είναι δηλωμένες οι κορυφές για τα έμπροσθεν πολύγωνα με την εντολή glFrontFace που παίρνει σαν όρισμα τα GL_CCW/GL_CW (Counter-ClockWise,ClockWise). Στο κομμάτι κώδικα 03 αλλάζουμε το CW σε CCW. Με αυτόν τον τρόπο βλέπουμε τα πίσω τρίγωνα στις τσαγιέρες (τα αντικείμενα του GLUT ακολουθούν από default την σύμβαση CW). Στο κομμάτι 03 πάλι, σχολιάζουμε το glEnable(GL_CULL_FACE). Αυτό επιτρέπει και στα μπροστινά και στα πίσω τρίγωνα να ζωγραφίζονται, οπότε αχρηστεύει την χρήση του glFrontFace. Με αυτόν τον τρόπο όμως ζωγραφίζουμε πάντα όλα τα τρίγωνα οπότε η σκηνή θα θέλει περίπου τον διπλάσιο χρόνο για να ζωγραφιστεί, οπότε για λόγους απόδοσης το αφήνουμε ενεργοποιημένο.
Στο κομμάτι 04 αλλάξτε το GL_FILL με GL_LINE. Αυτό ορίζει στο OpenGL να ζωγραφίζει μόνο τις ακμές από κάθε τρίγωνο και όχι ολόκληρο.
4ο βήμα
Ο φωτισμός ενός αντικειμένου στο OpenGL κάνει ρεαλιστικότερη την παράστασή του και εξαρτάται από τέσσερις παραμέτρους. Το φωτισμό που δέχεται από το περιβάλλον του (ambient), το φωτισμό που προέρχεται από τη διάχυση του φωτός που προσπίπτει στο αντικείμενο από τις φωτεινές πηγές (diffuse), το φωτισμό που προέρχεται από την ανάκλαση του φωτός που προσπίπτει στο αντικείμενο από τις φωτεινές πηγές (specular) και το φως που εκπέμπει το αντικείμενο (emission). Στα πλαίσια του εργαστηρίου θα ασχοληθούμε μόνο με το φωτισμό περιβάλλοντος και το φωτισμό από διάχυση.
Στους πίνακες
GLfloat ambientLight[] = { 0.3, 0.3, 0.3, 1.0 };
GLfloat diffuseLight[] = { 0.7, 0.7, 0.7, 1.0 };
ορίζουμε τις δύο αυτές παραμέτρους. Τα στοιχεία των πινάκων είναι κατά σειρά η ένταση των χρώματων Red, Green, Blue και το Alpha. Οι τιμές που έχουμε δώσει στο παράδειγμά μας, κοθορίζουν ένα φωτισμό περιβάλλοντος με μικρή ένταση και ένα ελαφρώς έντονο λευκό φωτισμό από διάχυση.
Με την εντολή
GLfloat lightPos[] = { 0.0, 30.0,50.0,0.0 };
καθορίζουμε τις συντεταγμένες της φωτεινής πηγής x,y,z,w. Όταν το w είναι 0.0 τότε η φωτεινή πηγή βρίσκεται στο άπειρο, ενώ όταν είναι 1.0 βρίσκεται στο x,y,z.
Δοκιμάστε να δώσετε διάφορες τιμές στα χρώματα για να δείτε τις αλλαγές στο χρώμα του αντικειμένου από το χρώμα και την ένταση του φωτισμού. Επίσης δοκιμάστε να μετακινήσετε τη φωτεινή πηγή σε διάφορες θέσεις στο χώρο και δείτε το αποτέλεσμα.
Τέλος με τις παρακάτω εντολές δίνονται οι παραπάνω ιδιότητες στο GL_LIGHT0: glLightfv( GL_LIGHT0, GL_AMBIENT, ambientLight );
glLightfv( GL_LIGHT0, GL_DIFFUSE, diffuseLight );
glLightfv( GL_LIGHT0, GL_POSITION, lightPos );
και με τις εντολές
glEnable(GL_LIGHTING);
gEnable(GL_LIGHT0);
ενεργοποιούμε το φωτισμό και τη φωτεινή πηγή 0.
Τέλος αν ενεργοποιήσουμε το κομμάτι κώδικα 05 προσθέτουμε και specular φωτισμό.
Σαν πείραμα δοκιμάστε να κάνετε την φωτεινή πηγή να περιστρέφεται γύρω από τις τσαγιέρες.
5ο βήμα
Ξεσχολιάστε τον κώδικα 06 για να τυπωθεί κείμενο στην οθόνη. Χρησιμοποιούμε την υλοποίηση της GLUT η οποία ζωγραφίζει τα fonts με γραμμες. Η βασική συνάρτηση είναι η glutStrokeCharacter η οποία καλείται μέσα στην συνάρτηση keimeno. Οι υπόλοιπες συναρτήσεις είναι για να θέτουνε το μέγεθος των χαρακτήρων και να επαναφέρουν τους πίνακες μετασχηματισμών στην αρχική τους θέση. Ο συγκεκριμένος τύπος κειμένου δημιουργεί 3Δ γεωμετρία (γραμμές), οπότε ότι έχουμε μάθει για τους 3Δ μετασχηματισμούς ισχύει και εδώ.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Μάθημα 3ο
Τρίτο Μάθημα Γραφικών - OpenGL
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Κάντε compile το πρόγραμμα. Θα πρέπει να βλέπετε ένα torus (ένα στερεό που μοιάζει με λουκουμά).
2ο βήμα
Βρείτε και σχολιάστε το κομμάτι κώδικα (00) και ξεσχολιάστε το κομμάτι κώδικα “(01)-pumpkin”. Αυτό που κάνει ο κώδικας αυτός είναι να σχεδιάζει 9 tori (ο πληθυντικός του torus), το κάθε ένα περιστρεμμένο κατά 20 μοίρες γύρω από τον άξονα Ψ σε σχέση με το προηγούμενο. Έτσι σχηματίζεται μια κολοκύθα.
3ο βήμα
Ξεσχολιάστε και το κομμάτι κώδικα (02a). Με την εντολή που μόλις ξεσχολιάσατε, η κολοκύθα μεταφέρεται κατά 100 μονάδες μακριά μας. Θα παρατηρήσετε όμως ότι πάλι φαίνεται το ίδιο μεγάλη με πριν. Το ίδιο θα συνέβαινε όσες μονάδες μακριά σας και αν το μεταφέρετε. Μπορείτε να δοκιμάσετε. Μόνο να έχετε υπόψη σας ότι αν υπερβείτε το «far clipping plane»-«μακρινό επίπεδο αποκοπής», η κολοκύθα θα σταματήσει να φαίνεται στην οθόνη σας.
Αυτό συμβαίνει γιατί χρησιμοποιούμε (παράλληλη) ορθογραφική προβολή για την απεικόνιση της εικόνας μας στις δύο διαστάσεις. Αυτό όμως δε συμβαδίζει με την πραγματικότητα, όπου όσο πιο μακριά είναι ένα αντικείμενο, τόσο πιο μικρό φαίνεται. Για να προσομοιώσουμε το φαινόμενο αυτό, χρησιμοποιούμε την προοπτική προβολή.
Αυτό επιτυγχάνεται στο πρόγραμμα με την εντολή:
gluPerspective(60.0, (float)w/(float)h, 1.0, 500.0);
Οι παράμετροι της εντολής αυτής είναι οι εξής:
gluPerspective(θ, aspect, near, far);
Στην Resize() αλλάξτε την υπάρχουσα glOrtho() στην παραπάνω gluPerspective() , κομμάτι κώδικα (02b).
Οι παράμετροι επεξηγούνται στην εικόνα 1.
Εικόνα 1 Προοπτική Προβολή – Επεξήγηση Παραμέτρων
Αυτό που κάνει σε γενικές γραμμές η προοπτική προβολή είναι ότι διαιρεί τις Χ,Ψ συντεταγμένες ενός αντικειμένου με το Ζ .
Αν τώρα «παίξετε» με διάφορες τιμές απομάκρυνσης της κολοκύθας θα τη δείτε να αλλάζει μέγεθος ανάλογα με την απόστασή της από τον παρατηρητή.
4ο βήμα
Ξανασχολιάστε το κομμάτι κώδικα (01) και ξεσχολιάστε το κομμάτι κώδικα (03). Αυτό που κάνει ο κώδικας αυτός είναι να ζωγραφίζει, σε απόσταση 100 μονάδες από εμάς, δύο tori. Το πρώτο ζωγραφίζεται 30 μονάδες προς τα δεξιά και το δεύτερο 30 μονάδες προς τα αριστερά.
Θα παρατηρήσετε όμως ότι το δεύτερο σχεδιάζεται στο κέντρο του παραθύρου.
Όπως θα θυμάστε το OpenGL είναι μια μηχανή καταστάσεων. Όταν χρησιμοποιούμε την εντολή
glTranslatef(30.0, 0.0, 0.0);
βάζουμε το OpenGL σε μια νέα κατάσταση όπου ο πίνακας μετασχηματισμών μετακινεί όλα τα ακόλουθα αντικείμενα κατά 30 μονάδες προς την κατεύθυνση του θετικού άξονα Χ (προς τα δεξιά). Οταν εκτελεσθεί η εντολή
glTranslatef(-30.0, 0.0, 0.0);
ο καινούριος πίνακας μετασχηματισμού που προκύπτει από τη σύνθεση των δύο μετασχηματισμών (30 δεξιά και 30 αριστερά) θα αφήνει τα αντικείμενα στο κέντρο του παραθύρου. Για να βάλουμε το δεύτερο torus 30 μονάδες στα αριστερά του κέντρου του παραθύρου θα πρέπει, αντί για την τελευταία, να χρησιμοποιήσουμε την εντολή
glTranslatef(-60.0, 0.0, 0.0);
Για την αποφυγή τέτοιων καταστάσεων το OpenGL μας παρέχει δύο εντολές, τις glPushMatrix και glPopMatrix. Η δομή της στοίβας είναι χρήσιμη για την εύκολη πραγματοποίηση ιεραρχικών μετασχηματισμών (όπως θα δούμε αμέσως πιο κάτω). Με τις εντολές glPushMatrix, glPopMatrix ελέγχουμε ποιος πίνακας είναι ενεργός. Η εντολή glPushMatrix τοποθετεί αντίγραφο του τρέχοντα μετασχηματισμού στην κορυφή της στοίβας. Ο μετασχηματισμός που εφαρμόζεται στα αντικείμενά μας είναι αυτός που προκύπτει από τη σύνθεση όλων των μετασχηματισμών που βρίσκονται στη στοίβα μετά την εντολή glLoadIdentity(). Αντίστοιχα η εντολή glPopMatrix αφαιρεί από τη στοίβα τον πίνακα που βρίσκεται στην κορυφή της. Με απλά λόγια η εντολή glPushMatrix σημαίνει «θυμήσου που ήσουν» και η εντολή glPopMatrix σημαίνει «πήγαινε εκεί που ήσουν». Αυτό φαίνεται και στην παρακάτω εικόνα. Το OpenGL χρησιμοποιεί τρία είδη μετασχηματισμών: αντικειμένων (GL_MODELVIEW), προβολής (GL_PROJECTION) και υφής (GL_TEXTURE). Συνήθως πρώτα επιλέγουμε το είδος του μετασχηματισμού με την glMatrixMode();, μετά τον αρχικοποιούμε με την glLoadIdentity(); και τέλος προσθέτουμε τη σειρά μετασχηματισμών που θέλουμε.
Εικόνα 2 glPushMatrix , glPopMatrix
Στο κομμάτι κώδικα (04) μπορείτε να δείτε το παράδειγμα (03) γραμμένο με glPushMatrix, glPopMatrix. Αντικαταστήστε και τρέξτε το.
5ο βήμα
Κάντε compile το πρόγραμμα αφού ξεσχολιάσετε το 05 και τον κώδικα της Idle() και σχολιάσετε τα υπόλοιπα. Θα πρέπει να βλέπετε ένα μικρό «καροτσάκι» να αναπηδά στην οθόνη σας με σταθερή ταχύτητα.
Η κίνησή του υλοποιείται στην idle. Το καροτσάκι ξεκινάει με ταχύτητα v ίση με 0.0 (στην αρχή του αρχείου visuals.cpp). Όσο το καροτσάκι δεν έχει πέσει κάτω από το επίπεδο ΧΖ (Υ<=0), η ταχύτητά του αυξάνεται κατά g ίσο με 0.1 και αυτό (αρνητικό) προστίθεται στη θέση του στον άξονα Υ. Άρα είναι σαν να πέφτει με «ομαλά επιταχυνόμενη» κίνηση (με υποθετικό dt=1). Όταν κάποια στιγμή πέσει κάτω από το επίπεδο ΧΖ, τότε η ταχύτητά του αντιστρέφεται και γίνεται θετική, ενώ ο μηχανισμός με το g παραμένει ο ίδιος. Άρα τώρα το καροτσάκι ανεβαίνει με «ομαλά επιβραδυνόμενη» κίνηση (με υποθετικό dt=1). Ώσπου σε κάποια στιγμή η ταχύτητά του θα μηδενιστεί και θα γίνει αρνητική και το καροτσάκι θα αρχίσει να πέφτει πάλι, ακριβώς όπως πριν. Όσον αφορά το σχεδιασμό του τώρα, στη Render αρχικά σχεδιάζεται το καροτσάκι με τη χρήση ενός κλιμακωμένου κύβου και τεσσάρων tori.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Κάντε compile το πρόγραμμα. Θα πρέπει να βλέπετε ένα torus (ένα στερεό που μοιάζει με λουκουμά).
2ο βήμα
Βρείτε και σχολιάστε το κομμάτι κώδικα (00) και ξεσχολιάστε το κομμάτι κώδικα “(01)-pumpkin”. Αυτό που κάνει ο κώδικας αυτός είναι να σχεδιάζει 9 tori (ο πληθυντικός του torus), το κάθε ένα περιστρεμμένο κατά 20 μοίρες γύρω από τον άξονα Ψ σε σχέση με το προηγούμενο. Έτσι σχηματίζεται μια κολοκύθα.
3ο βήμα
Ξεσχολιάστε και το κομμάτι κώδικα (02a). Με την εντολή που μόλις ξεσχολιάσατε, η κολοκύθα μεταφέρεται κατά 100 μονάδες μακριά μας. Θα παρατηρήσετε όμως ότι πάλι φαίνεται το ίδιο μεγάλη με πριν. Το ίδιο θα συνέβαινε όσες μονάδες μακριά σας και αν το μεταφέρετε. Μπορείτε να δοκιμάσετε. Μόνο να έχετε υπόψη σας ότι αν υπερβείτε το «far clipping plane»-«μακρινό επίπεδο αποκοπής», η κολοκύθα θα σταματήσει να φαίνεται στην οθόνη σας.
Αυτό συμβαίνει γιατί χρησιμοποιούμε (παράλληλη) ορθογραφική προβολή για την απεικόνιση της εικόνας μας στις δύο διαστάσεις. Αυτό όμως δε συμβαδίζει με την πραγματικότητα, όπου όσο πιο μακριά είναι ένα αντικείμενο, τόσο πιο μικρό φαίνεται. Για να προσομοιώσουμε το φαινόμενο αυτό, χρησιμοποιούμε την προοπτική προβολή.
Αυτό επιτυγχάνεται στο πρόγραμμα με την εντολή:
gluPerspective(60.0, (float)w/(float)h, 1.0, 500.0);
Οι παράμετροι της εντολής αυτής είναι οι εξής:
gluPerspective(θ, aspect, near, far);
Στην Resize() αλλάξτε την υπάρχουσα glOrtho() στην παραπάνω gluPerspective() , κομμάτι κώδικα (02b).
Οι παράμετροι επεξηγούνται στην εικόνα 1.
Εικόνα 1 Προοπτική Προβολή – Επεξήγηση Παραμέτρων
Αυτό που κάνει σε γενικές γραμμές η προοπτική προβολή είναι ότι διαιρεί τις Χ,Ψ συντεταγμένες ενός αντικειμένου με το Ζ .
Αν τώρα «παίξετε» με διάφορες τιμές απομάκρυνσης της κολοκύθας θα τη δείτε να αλλάζει μέγεθος ανάλογα με την απόστασή της από τον παρατηρητή.
4ο βήμα
Ξανασχολιάστε το κομμάτι κώδικα (01) και ξεσχολιάστε το κομμάτι κώδικα (03). Αυτό που κάνει ο κώδικας αυτός είναι να ζωγραφίζει, σε απόσταση 100 μονάδες από εμάς, δύο tori. Το πρώτο ζωγραφίζεται 30 μονάδες προς τα δεξιά και το δεύτερο 30 μονάδες προς τα αριστερά.
Θα παρατηρήσετε όμως ότι το δεύτερο σχεδιάζεται στο κέντρο του παραθύρου.
Όπως θα θυμάστε το OpenGL είναι μια μηχανή καταστάσεων. Όταν χρησιμοποιούμε την εντολή
glTranslatef(30.0, 0.0, 0.0);
βάζουμε το OpenGL σε μια νέα κατάσταση όπου ο πίνακας μετασχηματισμών μετακινεί όλα τα ακόλουθα αντικείμενα κατά 30 μονάδες προς την κατεύθυνση του θετικού άξονα Χ (προς τα δεξιά). Οταν εκτελεσθεί η εντολή
glTranslatef(-30.0, 0.0, 0.0);
ο καινούριος πίνακας μετασχηματισμού που προκύπτει από τη σύνθεση των δύο μετασχηματισμών (30 δεξιά και 30 αριστερά) θα αφήνει τα αντικείμενα στο κέντρο του παραθύρου. Για να βάλουμε το δεύτερο torus 30 μονάδες στα αριστερά του κέντρου του παραθύρου θα πρέπει, αντί για την τελευταία, να χρησιμοποιήσουμε την εντολή
glTranslatef(-60.0, 0.0, 0.0);
Για την αποφυγή τέτοιων καταστάσεων το OpenGL μας παρέχει δύο εντολές, τις glPushMatrix και glPopMatrix. Η δομή της στοίβας είναι χρήσιμη για την εύκολη πραγματοποίηση ιεραρχικών μετασχηματισμών (όπως θα δούμε αμέσως πιο κάτω). Με τις εντολές glPushMatrix, glPopMatrix ελέγχουμε ποιος πίνακας είναι ενεργός. Η εντολή glPushMatrix τοποθετεί αντίγραφο του τρέχοντα μετασχηματισμού στην κορυφή της στοίβας. Ο μετασχηματισμός που εφαρμόζεται στα αντικείμενά μας είναι αυτός που προκύπτει από τη σύνθεση όλων των μετασχηματισμών που βρίσκονται στη στοίβα μετά την εντολή glLoadIdentity(). Αντίστοιχα η εντολή glPopMatrix αφαιρεί από τη στοίβα τον πίνακα που βρίσκεται στην κορυφή της. Με απλά λόγια η εντολή glPushMatrix σημαίνει «θυμήσου που ήσουν» και η εντολή glPopMatrix σημαίνει «πήγαινε εκεί που ήσουν». Αυτό φαίνεται και στην παρακάτω εικόνα. Το OpenGL χρησιμοποιεί τρία είδη μετασχηματισμών: αντικειμένων (GL_MODELVIEW), προβολής (GL_PROJECTION) και υφής (GL_TEXTURE). Συνήθως πρώτα επιλέγουμε το είδος του μετασχηματισμού με την glMatrixMode();, μετά τον αρχικοποιούμε με την glLoadIdentity(); και τέλος προσθέτουμε τη σειρά μετασχηματισμών που θέλουμε.
Εικόνα 2 glPushMatrix , glPopMatrix
Στο κομμάτι κώδικα (04) μπορείτε να δείτε το παράδειγμα (03) γραμμένο με glPushMatrix, glPopMatrix. Αντικαταστήστε και τρέξτε το.
5ο βήμα
Κάντε compile το πρόγραμμα αφού ξεσχολιάσετε το 05 και τον κώδικα της Idle() και σχολιάσετε τα υπόλοιπα. Θα πρέπει να βλέπετε ένα μικρό «καροτσάκι» να αναπηδά στην οθόνη σας με σταθερή ταχύτητα.
Η κίνησή του υλοποιείται στην idle. Το καροτσάκι ξεκινάει με ταχύτητα v ίση με 0.0 (στην αρχή του αρχείου visuals.cpp). Όσο το καροτσάκι δεν έχει πέσει κάτω από το επίπεδο ΧΖ (Υ<=0), η ταχύτητά του αυξάνεται κατά g ίσο με 0.1 και αυτό (αρνητικό) προστίθεται στη θέση του στον άξονα Υ. Άρα είναι σαν να πέφτει με «ομαλά επιταχυνόμενη» κίνηση (με υποθετικό dt=1). Όταν κάποια στιγμή πέσει κάτω από το επίπεδο ΧΖ, τότε η ταχύτητά του αντιστρέφεται και γίνεται θετική, ενώ ο μηχανισμός με το g παραμένει ο ίδιος. Άρα τώρα το καροτσάκι ανεβαίνει με «ομαλά επιβραδυνόμενη» κίνηση (με υποθετικό dt=1). Ώσπου σε κάποια στιγμή η ταχύτητά του θα μηδενιστεί και θα γίνει αρνητική και το καροτσάκι θα αρχίσει να πέφτει πάλι, ακριβώς όπως πριν. Όσον αφορά το σχεδιασμό του τώρα, στη Render αρχικά σχεδιάζεται το καροτσάκι με τη χρήση ενός κλιμακωμένου κύβου και τεσσάρων tori.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Μάθημα 2ο
Δεύτερο Μάθημα Γραφικών – OpenGL
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Η glRect φτιάχνει ορθογώνια. Παίρνει σαν ορίσματα την κάτω αριστερή και πάνω δεξιά γωνία του ορθογωνίου. Για οποιοδήποτε πιο πολύπλοκο σχήμα πρέπει να χρησιμοποιηθούν οι glBegin και glEnd. Βάλτε σε σχόλια το κομμάτι 00.
Οι glBegin και glEnd οριοθετούν vertices που καθορίζουν ένα σχήμα. Η glBegin δέχεται ένα όρισμα που διευκρινίζει με ποιον από δέκα τρόπους θα συνδυαστούν τα vertices. Αφαιρέστε τα σχόλια από το κομμάτι 01 και πειραματισθείτε με τις διάφορες παραμέτρους (προσοχή, αφήστε μόνο ένα glBegin σε χρήση). Οι παράμετροι που χρησιμοποιούνται σε αυτό το κομμάτι κώδικα είναι οι ακόλουθες:
GL_POINTS
Μεταχειρίζεται κάθε vertex ως ανεξάρτητο σημείο. Η glPointSize ,πριν τη glBegin, μας καθορίζει το μέγεθός τους.
GL_LINES
Μεταχειρίζεται κάθε ζευγάρι vertices ως μία ανεξάρτητη γραμμή. Οπότε από Ν σημεία ορίζονται Ν/2 γραμμές.
GL_LINE_STRIP
Ζωγραφίζει μια συνδεδεμένη ομάδα ευθύγραμμων τμημάτων από το πρώτο vertex στο τελευταίο. Με Ν σημεία, ζωγραφίζονται Ν-1 τμήματα.
GL_LINE_LOOP
Ζωγραφίζει μια συνδεδεμένη ομάδα ευθύγραμμων τμημάτων από το πρώτο vertex στο τελευταίο, έπειτα πίσω στο πρώτο. Με Ν σημεία, ζωγραφίζονται Ν τμήματα
GL_TRIANGLES
Μεταχειρίζεται κάθε τριάδα vertices ως ανεξάρτητο τρίγωνο. Δηλαδή από Ν σημεία ζωγραφίζονται Ν/3 τρίγωνα.
Υπάρχουν ακόμη οι εξής παράμετροι: GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_QUADS , GL_QUAD_STRIP, GL_POLYGON
2ο βήμα
Τώρα θα δούμε τους μετασχηματισμούς των αντικειμένων.
Η glTranslatef(x,y,z) μετατοπίζει το αντικείμενο κατά το διάνυσμα x,y,z
Η glRotatef(θ,x,y,z) περιστρέφει το αντικείμενο κατά θ μοίρες γύρω από τον άξονα που καθορίζεται από διάνυσμα x,y,z
Η glScalef(sx,sy,sz) κλιμακώνει το αντικείμενο κατά sx,sy,sz
Να θυμάστε ότι το OpenGL είναι μια μηχανή καταστάσεων. Κάθε μετασχηματισμός θα ισχύει για όλα τα μετέπειτα αντικείμενα, μέχρι να εφαρμοστεί ο αντίστροφός του ή να φορτώσουμε τον μοναδιαίο πίνακα.
Για να δείτε την επίδραση των μετασχηματισμών ξεσχολιάστε τα κομμάτια κώδικα (02a)-(02c) και «παίξτε» με τις τιμές.
Στα κομμάτια κώδικα (02d-*) φαίνεται η διαφορά στην εφαρμογή πρώτα ενός μετασχηματισμού περιστροφής και μιας μεταφοράς και στην εφαρμογή τους με την αντίστροφη σειρά. Μπορείτε να το δείτε και στην παρακάτω εικόνα.
Εικόνα 1 Περιστροφή και μεταφορά vs. μεταφοράς και περιστροφής
Τέλος στα κομμάτια κώδικα (02e-*) μπορείτε να δείτε ότι δύο μετασχηματισμοί μεταφοράς, είναι ισοδύναμοι με έναν όπου η μεταφορά σε κάθε άξονα είναι το άθροισμα των δύο άλλων.
3ο βήμα
Παρατηρούμε μια νέα συνάρτηση (που είναι δηλωμένη στο .h αρχείο), την idle. Στο αρχείο main.cpp , στη main χρησιμοποιούμε την εντολή:
glutIdleFunc(Idle);
Με την εντολή αυτή υποδεικνύουμε στο glut ποια συνάρτηση (που δεν παίρνει ορίσματα και δεν επιστρέφει τιμή) θα χρησιμοποιείται όταν το glut δεν «ασχολείται» με κάτι άλλο (κατάσταση «ηρεμίας»), δηλαδή όταν δεν κάνει render τα γραφικά μας και δεν δέχεται είσοδο από το πληκτρολόγιο ή το ποντίκι. Η κατάσταση ηρεμίας έρχεται όταν τελειώνει η επεξεργασία ενός καρέ, οπότε η Idle() μπορεί να χρησιμοποιηθεί για να δημιουργήσουμε κίνηση. Εδώ ορίζουμε τη συνάρτηση αυτή ‘Idle’, αλλά μπορείτε να την ονομάσετε όπως θέλετε. Ξεσχολιάστε τα τμήματα κώδικα (03) στην main() και render() και τρέξτε το πρόγμαμμα.
Ουσιαστικά χρησιμοποιούμε την Idle για να δώσουμε κίνηση (animation) στην σκηνή μας. Ανανεώνουμε τις μεταβλητές που επηρεάζουν την κίνηση στην Idle και τις χρησιμοποιύμε μέσα σε μετασχηματισμούς στην Render.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Τη θεωρία και τον κώδικα του μαθήματος μπορείτε να τα βρείτε εδώ.
Τις θεωρητικές και πρακτικές ασκήσεις του μαθήματος μπορείτε να τις βρείτε εδώ.
1ο βήμα
Η glRect φτιάχνει ορθογώνια. Παίρνει σαν ορίσματα την κάτω αριστερή και πάνω δεξιά γωνία του ορθογωνίου. Για οποιοδήποτε πιο πολύπλοκο σχήμα πρέπει να χρησιμοποιηθούν οι glBegin και glEnd. Βάλτε σε σχόλια το κομμάτι 00.
Οι glBegin και glEnd οριοθετούν vertices που καθορίζουν ένα σχήμα. Η glBegin δέχεται ένα όρισμα που διευκρινίζει με ποιον από δέκα τρόπους θα συνδυαστούν τα vertices. Αφαιρέστε τα σχόλια από το κομμάτι 01 και πειραματισθείτε με τις διάφορες παραμέτρους (προσοχή, αφήστε μόνο ένα glBegin σε χρήση). Οι παράμετροι που χρησιμοποιούνται σε αυτό το κομμάτι κώδικα είναι οι ακόλουθες:
GL_POINTS
Μεταχειρίζεται κάθε vertex ως ανεξάρτητο σημείο. Η glPointSize ,πριν τη glBegin, μας καθορίζει το μέγεθός τους.
GL_LINES
Μεταχειρίζεται κάθε ζευγάρι vertices ως μία ανεξάρτητη γραμμή. Οπότε από Ν σημεία ορίζονται Ν/2 γραμμές.
GL_LINE_STRIP
Ζωγραφίζει μια συνδεδεμένη ομάδα ευθύγραμμων τμημάτων από το πρώτο vertex στο τελευταίο. Με Ν σημεία, ζωγραφίζονται Ν-1 τμήματα.
GL_LINE_LOOP
Ζωγραφίζει μια συνδεδεμένη ομάδα ευθύγραμμων τμημάτων από το πρώτο vertex στο τελευταίο, έπειτα πίσω στο πρώτο. Με Ν σημεία, ζωγραφίζονται Ν τμήματα
GL_TRIANGLES
Μεταχειρίζεται κάθε τριάδα vertices ως ανεξάρτητο τρίγωνο. Δηλαδή από Ν σημεία ζωγραφίζονται Ν/3 τρίγωνα.
Υπάρχουν ακόμη οι εξής παράμετροι: GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_QUADS , GL_QUAD_STRIP, GL_POLYGON
2ο βήμα
Τώρα θα δούμε τους μετασχηματισμούς των αντικειμένων.
Η glTranslatef(x,y,z) μετατοπίζει το αντικείμενο κατά το διάνυσμα x,y,z
Η glRotatef(θ,x,y,z) περιστρέφει το αντικείμενο κατά θ μοίρες γύρω από τον άξονα που καθορίζεται από διάνυσμα x,y,z
Η glScalef(sx,sy,sz) κλιμακώνει το αντικείμενο κατά sx,sy,sz
Να θυμάστε ότι το OpenGL είναι μια μηχανή καταστάσεων. Κάθε μετασχηματισμός θα ισχύει για όλα τα μετέπειτα αντικείμενα, μέχρι να εφαρμοστεί ο αντίστροφός του ή να φορτώσουμε τον μοναδιαίο πίνακα.
Για να δείτε την επίδραση των μετασχηματισμών ξεσχολιάστε τα κομμάτια κώδικα (02a)-(02c) και «παίξτε» με τις τιμές.
Στα κομμάτια κώδικα (02d-*) φαίνεται η διαφορά στην εφαρμογή πρώτα ενός μετασχηματισμού περιστροφής και μιας μεταφοράς και στην εφαρμογή τους με την αντίστροφη σειρά. Μπορείτε να το δείτε και στην παρακάτω εικόνα.
Εικόνα 1 Περιστροφή και μεταφορά vs. μεταφοράς και περιστροφής
Τέλος στα κομμάτια κώδικα (02e-*) μπορείτε να δείτε ότι δύο μετασχηματισμοί μεταφοράς, είναι ισοδύναμοι με έναν όπου η μεταφορά σε κάθε άξονα είναι το άθροισμα των δύο άλλων.
3ο βήμα
Παρατηρούμε μια νέα συνάρτηση (που είναι δηλωμένη στο .h αρχείο), την idle. Στο αρχείο main.cpp , στη main χρησιμοποιούμε την εντολή:
glutIdleFunc(Idle);
Με την εντολή αυτή υποδεικνύουμε στο glut ποια συνάρτηση (που δεν παίρνει ορίσματα και δεν επιστρέφει τιμή) θα χρησιμοποιείται όταν το glut δεν «ασχολείται» με κάτι άλλο (κατάσταση «ηρεμίας»), δηλαδή όταν δεν κάνει render τα γραφικά μας και δεν δέχεται είσοδο από το πληκτρολόγιο ή το ποντίκι. Η κατάσταση ηρεμίας έρχεται όταν τελειώνει η επεξεργασία ενός καρέ, οπότε η Idle() μπορεί να χρησιμοποιηθεί για να δημιουργήσουμε κίνηση. Εδώ ορίζουμε τη συνάρτηση αυτή ‘Idle’, αλλά μπορείτε να την ονομάσετε όπως θέλετε. Ξεσχολιάστε τα τμήματα κώδικα (03) στην main() και render() και τρέξτε το πρόγμαμμα.
Ουσιαστικά χρησιμοποιούμε την Idle για να δώσουμε κίνηση (animation) στην σκηνή μας. Ανανεώνουμε τις μεταβλητές που επηρεάζουν την κίνηση στην Idle και τις χρησιμοποιύμε μέσα σε μετασχηματισμούς στην Render.
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Μάθημα 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 τιμές, άρα για να το αποθηκεύσουμε χρειαζόμαστε 28 τιμές = 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 κάνει μια απεικόνιση από τον χώρο R3 στον οποίο βρίσκονται τα αντικείμενα στον R2 σε συντεταγμένες εικόνας. Γίνεται λοιπόν αντιστοιχία των τιμών από τον R3 oι οποίες δεν έχουν μονάδες μέτρησης, σε τιμές στον R2 οι οποίες μετρώνται σε 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();
Το αποτέλεσμα της πρακτικής άσκησης θα πρέπει να είναι αυτής της μορφής.
Εισαγωγή
Αυτό το blog έχει σκοπό να παρουσιάσει 4 μικρά εισαγωγικά μαθήματα γραφικών σε OpenGL, που υποβοηθούν και παρουσιάζουν τις βασικές έννοιες των γραφικών σε αρχάριους προγραμματιστές με μικρή εμπειρία σε C/C++.
Μορφή των μαθημάτων:
Τον διδακτικό σχεδιασμό του μαθήματος μπορείτε να τον βρείτε εδώ.
Ακριβώς κάτω από τον τίτλο υπάρχει link από το οποίο μπορειτε να κατεβάσετε το απαραίτητο υλικό για το μάθημα. Αυτό περιέχει την θεωρία και τον κώδικα που θα χρειαστεί για την ολοκλήρωση του φύλλου εργασίας και της πρακτικής άσκησης.
Από κάτω υπάρχει link από το οποίο μπορειτε να κατεβάσετε το φύλλο εργασίας και την πρακτική άσκηση.
Μετά υπάρχει αναρτημένη η θεωρία του μαθήματος, ώστε αμα κάποιος θέλει να μπορεί να την δει μέσω του blog.
Στο τέλος καθε μαθήματος υπάρχει βίντεο με το αποτέλεσμα της πρακτικής άσκησης.
Αρχικά διαβάστε την θεωρία (η οποία περιέχει πρακτικά παραδείγματα) ώστε να κατανοήσετε την χρήση των εντολών της opengl. Έπειτα με την βοήθεια αυτών που διαβάσατε εκπονήστε το φύλλο εργασίας και την πρακτική άσκηση.
Το πρώτο μάθημα περιέχει τις πληροφορίες που χρειάζεται για να εγκαταστήσετε την OpenGL στο σύστημα σας.
Μορφή των μαθημάτων:
Τον διδακτικό σχεδιασμό του μαθήματος μπορείτε να τον βρείτε εδώ.
Ακριβώς κάτω από τον τίτλο υπάρχει link από το οποίο μπορειτε να κατεβάσετε το απαραίτητο υλικό για το μάθημα. Αυτό περιέχει την θεωρία και τον κώδικα που θα χρειαστεί για την ολοκλήρωση του φύλλου εργασίας και της πρακτικής άσκησης.
Από κάτω υπάρχει link από το οποίο μπορειτε να κατεβάσετε το φύλλο εργασίας και την πρακτική άσκηση.
Μετά υπάρχει αναρτημένη η θεωρία του μαθήματος, ώστε αμα κάποιος θέλει να μπορεί να την δει μέσω του blog.
Στο τέλος καθε μαθήματος υπάρχει βίντεο με το αποτέλεσμα της πρακτικής άσκησης.
Αρχικά διαβάστε την θεωρία (η οποία περιέχει πρακτικά παραδείγματα) ώστε να κατανοήσετε την χρήση των εντολών της opengl. Έπειτα με την βοήθεια αυτών που διαβάσατε εκπονήστε το φύλλο εργασίας και την πρακτική άσκηση.
Το πρώτο μάθημα περιέχει τις πληροφορίες που χρειάζεται για να εγκαταστήσετε την OpenGL στο σύστημα σας.
Εγγραφή σε:
Αναρτήσεις (Atom)