# Εισαγωγή

<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>

Οι παραπάνω εικόνες φτιάχτηκαν με διαφορετικούς τρόπους. Η πρώτη φτιάχτηκε από το χέρι του Van Gogh, προσθέτοντας στρώματα χρώματος, το ένα πάνω στο άλλο. Του χρειάστηκαν ώρες. Η δεύτερη δημιουργήθηκε σε δευτερόλεπτα από τον συνδυασμό τεσσάρων πινάκων από pixels: έναν για το κυανό (cyan), έναν για το πορφυρό (magenta), έναν για το κίτρινο και έναν για το μαύρο. Η βασική διαφορά είναι πως η δεύτερη εικόνα δημιουργήθηκε με μη-σειριακό τρόπο (δηλαδή, όχι ένα-ένα βήμα, αλλά ολόκληρη την ίδια στιγμή)

Αυτό το βιβλίο πραγματεύεται την επαναστατική υπολογιστική τεχνική, *fragment shaders* (φωτοσκιαστές τεμαχίων), η οποία ανεβάζει τις ψηφιακά παραγόμενες εικόνες σε επόμενο επίπεδο. Σκεφτείτε το σαν το αντίστοιχο του πιεστηρίου του Γουτεμβέργιου για τα graphics.

![Τυπογραφείο του Γουτεμβέργιου](gutenpress.jpg)

Οι fragment shaders μας δίνουν πλήρη έλεγχο πάνω στα pixels που ζωγραφίζονται στην οθόνη, σε υπερυψηλές ταχύτητες. Γι' αυτό το λόγο χρησιμοποιούνται σε όλων των ειδών τις περιπτώσεις, από φίλτρα βίντεο σε κινητά τηλέφωνα μέχρι απίστευτα 3D βιντεοπαιχνίδια.

![Journey απο That Game Company](journey.jpg)

Στα επόμενα κεφάλαια θα ανακαλύψετε πόσο απίστευτα γρήγορη και ισχυρή είναι αυτή η τεχνική και πως να τη χρησιμοποιήσετε στην επαγγελματική και προσωπική σας δουλειά.

## Σε ποιούς απευθύνεται αυτό το βιβλίο;

Αυτό το βιβλίο γράφτηκε για δημιουργικούς coders, game developers και μηχανικούς με εμπειρία στο coding, βασικές γνώσεις γραμμικής άλγεβρας και τριγωνομετρίας, που θέλουν να ανεβάσουν τη δουλειά τους σε ένα συναρπαστικό νέο επίπεδο ποιότητας γραφικών. (Αν θέλετε να μάθετε πως να γράφετε κώδικα, προτείνω ιδιαίτερα να ξεκινήσετε με την [Processing](https://processing.org/) και να επιστρέψετε όταν έχετε αποκτήσει μια σχετική άνεση με αυτή.)

Αυτό το βιβλίο θα σας δείξει πως να χρησιμοποιείτε και να ενσωματώνετε shaders στα δικά σας έργα,  βελτιώνοντας την απόδοση και την οπτική τους ποιότητα. Επειδή οι shaders που είναι γραμμένοι σε GLSL (η γλώσσα για περιγραφή shaders που ορίζει η OpenGL) μεταγλωττίζονται και τρέχουν σε μια πληθώρα από περιβάλλοντα, θα μπορείτε να εφαρμόσετε ο,τι μάθετε εδώ σε οποιοδήποτε περιβάλλον χρησιμοποιεί OpenGL, OpenGL ES ή WebGL. Με άλλα λόγια, θα μπορείτε να εφαρμόσετε και να χρησιμοποιήσετε τις γνώσεις σας με αρχεία [Processing](https://processing.org/), εφαρμογές [openFrameworks](http://openframeworks.cc/), διαδραστικά περιβάλλοντα [Cinder](http://libcinder.org/), ιστοσελίδες [Three.js](http://threejs.org/) ή παιχνίδια σε iOS/Android.

## Τι καλύπτει αυτό το βιβλίο;

Αυτό το βιβλίο εστιάζει στη χρήση pixel shaders σε GLSL. Πρώτα θα ορίσουμε τι είναι οι shaders, στη συνέχεια θα μάθουμε πως να φτιάχνουμε διαδικάστικά (procedural) σχήματα, μοτίβα, υφές (textures) και animations (κίνηση) με αυτούς. Θα μάθετε τις αρχές της γλώσσας περιγραφής shaders και θα την χρησιμοποιήσετε σε πιο χρηστικά σενάρια όπως: επεξεργασία εικόνας (χειρισμούς εικόνας, συγκερασμούς (convolution) πινάκων, θόλωμα (blur), φίλτρα χρώματος, πίνακες αναζήτησης (lookup tables) και άλλα εφέ) και προσομοιώσεις (Conway's game of life, Gray-Scott's reaction-diffusion, κυματισμούς νερού, εφέ νερομπογιάς, στοιχεία Voronoi, κτλ.). Προς το τέλος του βιβλίου θα δούμε ένα σύνολο απο προχωρημένες τεχνικές βασισμένες σε Ray Marching (βηματισμό ακτίνων).

*Υπάρχουν διαδραστικά παραδείγματα με τα οποία μπορείτε να παίξετε σε κάθε κεφάλαιο* Όταν αλλάζετε τον κώδικα, θα μπορείτε να βλέπετε τις αλλαγές άμεσα. Οι έννοιες μπορεί να είναι αφηρημένες και περίπλοκες, οπότε τα διαδραστικά παραδείγματα είναι απαραίτητα ώστε να σας βοηθήσουν να μάθετε το υλικό. Όσο πιο σύντομα βάλετε σε "κίνηση" τις έννοιες, τόσο ευκολότερη θα γίνει η διαδικασία της αφομοίωσης.

Τι δεν καλύπτει αυτό το βιβλίο:

* Αυτό *δεν είναι* ενα βιβλίο για την OpenGL ή τη webGL. Η OpenGL/webGL είναι ένα αντικέιμενο μεγαλύτερο από την GLSL και τους fragment shaders. Για να μάθετε περισσότερα σχετικά με OpenGL/webGL, προτείνω να ρίξετε μια ματιά σε:  [OpenGL Introduction](https://open.gl/introduction), [8η έκδοση του βιβλίου OpenGL Programming Guide](http://www.amazon.com/OpenGL-Programming-Guide-Official-Learning/dp/0321773039/ref=sr_1_1?s=books&ie=UTF8&qid=1424007417&sr=1-1&keywords=open+gl+programming+guide) (γνωστό επίσης ως "το κόκκινο βιβλίο") ή [WebGL: Up and Running](http://www.amazon.com/WebGL-Up-Running-Tony-Parisi/dp/144932357X/ref=sr_1_4?s=books&ie=UTF8&qid=1425147254&sr=1-4&keywords=webgl)

* Αυτό *δεν είναι* ένα βιβλίο μαθηματικών. Αν και θα καλύψουμε ένα σύνολο απο αλγορίθμους και τεχνικές που βασίζονται στην κατανόηση άλγεβρας και τριγωνομετρίας, δε θα τις εξηγήσουμε με λεπτομέρεια. Για απορίες σχετικές με τα μαθηματικά προτείνω να έχετε πρόχειρο ένα από τα ακόλουθα βιβλία: [3η Έκδοση του Mathematics for 3D Game Programming and computer Graphics](http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869/ref=sr_1_1?ie=UTF8&qid=1424007839&sr=8-1&keywords=mathematics+for+games) ή [2η Έκδοση του Essential Mathematics for Games and Interactive Applications](http://www.amazon.com/Essential-Mathematics-Games-Interactive-Applications/dp/0123742978/ref=sr_1_1?ie=UTF8&qid=1424007889&sr=8-1&keywords=essentials+mathematics+for+developers).

## Τι χρειάζεται για να ξεκινήσετε;

Όχι πολλά! Αν έχετε ένα σύγχρονο browser που υποστηρίζει WebGL (όπως οι Chrome, Firefox, Safari) και μια σύνδεση στο internet, πατήστε "Next" (επόμενο κεφάλαιο) στο τέλος αυτής της σελίδας για να ξεκινήσετε.

Εναλλακτικά, ανάλογα με τι έχετε ή τι χρειάζεστε από αυτό το βιβλίο μπορείτε:

- [Να φτιάξετε μια off-line εκδοχή του βιβλίου](https://thebookofshaders.com/appendix/00/)

- [Να τρέξετε τα παραδείγματα σε ενα Raspberry Pi χωρίς browser](https://thebookofshaders.com/appendix/01/)

- [να φτιάξετε ενα PDF του βιβλίου για εκτύπωση](https://thebookofshaders.com/appendix/02/)

- Συμβουλευτείτε το [αποθετήριο GitHub (repository)](https://github.com/patriciogonzalezvivo/thebookofshaders) του βιβλίου για επίλυση προβλημάτων και για να μοιραστείτε κώδικα.
