14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Αλγόριθμος Ray Casting

Δημιουργία τρισδιάστατων κόσμων στο Scratch

Μακρής Αντώνης
Μαθητής Γ Γυμνασίου, Ελληνικό Κολλέγιο Θεσσαλονίκης

Παρασκευόπουλος Κωνσταντίνος
Καθηγητής Πληροφορικής (ΠΕ86)
Ελληνικό Κολλέγιο Θεσσαλονίκης
diparaske@gmail.com

Περίληψη
Χάρη στην ταχεία αύξηση της υπολογιστικής ισχύος και την πρόοδο των οπτικών συστημάτων, στις μέρες
μας όλο και περισσότερο χρησιμοποιούνται τεχνολογίες ρεαλιστικής, τρισδιάστατης αναπαράστασης
εικόνων και σκηνών, σε διάφορες πτυχές της ζωής μας (ψυχαγωγία, εκπαίδευση, επιστήμες κλπ). Σε αυτή
την εργασία θελήσαμε να εμβαθύνουμε στις τεχνολογίες και στους αλγορίθμους τρισδιάστατης
απεικόνισης. Συγκεκριμένα, μελετήσαμε τον αλγόριθμο Ray Casting και τον χρησιμοποιήσαμε για να
δημιουργήσουμε ένα πρωτότυπο σύστημα τρισδιάστατων κόσμων στο Scratch.
Λέξεις κλειδιά: Ray Casting, τρισδιάστατοι κόσμοι, Scratch.

1. Εισαγωγή
Σε παλαιότερες εποχές, όταν οι υπολογιστές ήταν αργοί, δεν υπήρχε η δυνατότητα δημιουργίας
τρισδιάστατων γραφικών σε πραγματικό χρόνο. Το πρόβλημα αυτό αντιμετωπίστηκε με την τεχνική
Raycasting. Το Raycasting λοιπόν είναι μία τεχνική δημιουργίας τρισδιάστατων γραφικών πάνω σε έναν
δισδιάστατο χάρτη και το βασικό της πλεονέκτημα είναι η ταχύτητα αφού απαιτούνται ελάχιστοι
υπολογισμοί. Πολλά από τα πρώτα παιχνίδια με τρισδιάστατα γραφικά, όπως το Wolfenstein, το Doom και
το Duke, χρησιμοποίησαν αυτή την τεχνική.
Η ιδέα πίσω από την τεχνική Raycasting είναι απλή. Ας υποθέσουμε ότι έχουμε έναν δισδιάστατο χάρτη
ενός φανταστικού κόσμου, όπως αυτός που φαίνεται στην επόμενη εικόνα. Για να μετατρέψουμε τον χάρτη
σε τρισδιάστατο, στέλνουμε ακτίνες (κόκκινες γραμμές) από το αντικείμενό μας (πράσινη κουκίδα) προς
την μεριά των τοίχων μπλε ορθογώνια. Κάθε φορά που η ακτίνα χτυπάει επάνω σε ένα αντικείμενο του
φανταστικού μας κόσμου, θα πρέπει να υπολογίσουμε την απόσταση που διένυσε. Χρησιμοποιώντας την
τιμή της απόστασης κατάλληλα, μπορούμε να υπολογίσουμε το ύψος που θα έχει ο τοίχος σε μία
τρισδιάστατη απεικόνιση.
2. Ο προγραμματισμός της εφαρμογής
2.1. Δημιουργία του δισδιάστατου χάρτη
Ξεκινήσαμε δημιουργώντας ένα νέο έργο στο Scratch. Αρχικά έπρεπε να κατασκευάσουμε τον δισδιάστατο
χάρτη του φανταστικού μας κόσμου. Γεμίσαμε λοιπόν με μαύρο χρώμα το υπόβαθρο και δημιουργήσαμε
ένα νέο αντικείμενο το οποίο το ονομάσαμε Level. Επεξεργαστήκαμε την ενδυμασία του αντικειμένου στον

1
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

επεξεργαστή γραφικών του Scratch ώστε να αναπαριστά έναν χώρο με πολλά δωμάτια και διαδρόμους,
όπως μπορείτε να δείτε στην Εικόνα 1.

Εικόνα 1: Το αντικείμενο Level

2.2. Δημιουργία και προγραμματισμός του αντικειμένου Player

Στη συνέχεια, δημιουργήσαμε ένα νέο αντικείμενο με το όνομα Player. Χρησιμοποιώντας πάλι τον
επεξεργαστή γραφικών του Scratch, δημιουργήσαμε μία απλή ενδυμασία γι’ αυτό το αντικείμενο στο σχήμα
ενός τριγώνου, όπως μπορείτε να δείτε στην Εικόνα 2.

Εικόνα 2: Το αντικείμενο Player

Αφού δημιουργήσαμε το αντικείμενο Player, το προγραμματίσαμε ώστε να μπορούμε να το χειριζόμαστε
από το πληκτρολόγιο χρησιμοποιώντας τα πλήκτρα με τα βελάκια. Επίσης προσθέσαμε εντολές για να
ελέγξουμε την συμπεριφορά του αντικειμένου όταν αυτό προσκρούει σε τοίχους (Εικόνα 3, Εικόνα 4).

Εικόνα 3: Εντολές χειρισμού του αντικειμένου Player

2
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Εικόνα 4: Εντολές χειρισμού του αντικειμένου Player

2.3. Υλοποίηση της λειτουργίας Raycasting

Επόμενο βήμα στον προγραμματισμό της εφαρμογής ήταν η υλοποίηση της τεχνικής Raycasting.
Προγραμματίσαμε λοιπόν το αντικείμενο Player να εκτοξεύει ακτίνες προς τα εμπρός. Με τη βοήθεια
αυτών των ακτινών το αντικείμενο Player μπορεί να εντοπίσει αντικείμενα μέσα στον φανταστικό μας
κόσμο. Η ακτίνα υλοποιήθηκε με το αντικείμενο Raycaster το οποίο προγραμματίσαμε χρησιμοποιώντας
τις εντολές που φαίνονται στην Εικόνα 5. Στην Εικόνα 6 μπορείτε να δείτε τις ακτίνες οι οποίες
εκτοξεύονται από το αντικείμενο Player και εντοπίζουν τοίχους και εμπόδια μέσα στον δισδιάστατο χάρτη.

3
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Εικόνα 5: Οι εντολές του αντικειμένου Raycaster

Εικόνα 6: Η λειτουργία των ακτινών ως μέσου εντοπισμού αντικειμένων

μέσα στον δισδιάστατο χάρτη
2.4. Μετατροπή του δισδιάστατου χάρτη σε τρισδιάστατο κόσμο
Σε αυτό το βήμα μετατρέψαμε τον δισδιάστατο χάρτη σε έναν τρισδιάστατο κόσμο. Μέχρι τώρα
χρησιμοποιήσαμε τις ακτίνες που εκτοξεύονται από το αντικείμενο Player για να προσδιορίσουμε το οπτικό
πεδίο του παίκτη. Για παράδειγμα στην Εικόνα 7 και στην Εικόνα 8, μπορούμε να διακρίνουμε πέντε
διαφορετικά τμήματα από τους τοίχους που είναι ορατοί στον παίκτη. Γνωρίζοντας λοιπόν την απόσταση
που διανύουν οι ακτίνες μέχρι να πέσουν σε έναν τοίχο μπορέσαμε να υπολογίσουμε το ύψος που θα πρέπει

4
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

να έχει αυτός ο τοίχος. Όσο πιο μικρή είναι η απόσταση που διανύει μία ακτίνα τόσο ψηλότερος θα πρέπει
να είναι ο τοίχος. Αντίθετα, όσο πιο μεγάλη είναι η απόσταση που διανύει η ακτίνα τόσο πιο κοντός θα
πρέπει να είναι ο τοίχος. Αυτό ονομάζεται προοπτική και ο μαθηματικός τύπος που χρησιμοποιήσαμε για
τον υπολογισμό του ύψους ενός τοίχου είναι:

Πραγματικό ύψος τοίχου

Ύψος τοίχου =
Απόσταση

4 5

1 2

Εικόνα 7: Χρήση ακτινών για τον προσδιορισμό του οπτικού πεδίου του παίκτη

1 2

4 5

Εικόνα 8: Τρισδιάστατη απεικόνιση του οπτικού πεδίου του παίκτη

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

5
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

και μερικές επιπλέον εντολές ώστε να αλλάζει ελαφρώς η απόχρωση των τοίχων ανάλογα με την απόσταση
που έχουν από τον παίκτη. Στην Εικόνα 9 μπορείτε να δείτε πως διαμορφώθηκαν οι εντολές του
αντικειμένου Raycaster μετά από τις παραπάνω προσθήκες και μετατροπές.

Εικόνα 9: Οι εντολές του αντικειμένου Raycaster

2.5. Προσθήκη οντοτήτων στον τρισδιάστατο κόσμο

Σε αυτό το τελευταίο βήμα προσθέσαμε μερικές οντότητες μέσα στον φανταστικό τρισδιάστατο κόσμο μας.
Για τον σκοπό αυτό δημιουργήσαμε τα αντικείμενα Entities και Pen. Για να αποδώσουμε σωστά τη σκηνή,
χρησιμοποιήσαμε δυναμικές δομές δεδομένων (λίστες) και μία παραλλαγή του αλγορίθμου ταξινόμησης
Insertion Sort για να ταξινομήσουμε αυτές τις οντότητες κατά βάθος, πίσω ή μπροστά από τους τοίχους. Το
αποτέλεσμα ήταν πολύ ρεαλιστικό αλλά και ταυτόχρονα τρομακτικό. Στην Εικόνα 10 φαίνονται οι εντολές
του αντικειμένου Entities ενώ στην Εικόνα 11 οι εντολές του αντικειμένου Pen. Στην Εικόνα 12 μπορείτε
να δείτε ένα στιγμιότυπο από το ολοκληρωμένο πρόγραμμα.

6
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Ο περιορισμένος χώρος της παρούσας εργασίας δεν μας επιτρέπει να παρουσιάσουμε πλήρως τον κώδικα
της εφαρμογής. Μπορείτε να βρείτε την εφαρμογή στο αποθετήριο έργων του Scratch στη διεύθυνση
https://scratch.mit.edu/projects/662875882/ .

Εικόνα 10: Οι εντολές του αντικειμένου Entities

7
14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Εικόνα 11: Οι εντολές του αντικειμένου Pen

Εικόνα 12: Στιγμιότυπο από το ολοκληρωμένο πρόγραμμα

8
 14ο Μαθητικό Συνέδριο Πληροφορικής – Απρίλιος 2022

Ευχαριστίες
Θα θέλαμε να εκφράσουμε τις ευχαριστίες μας στον καθηγητή πληροφορικής του Ελληνικού Κολλεγίου
Θεσσαλονίκης κ. Κωνσταντίνο Παρασκευόπουλο για τις υποδείξεις και την καθοδήγηση που προσέφερε για
να ολοκληρωθεί με επιτυχία αυτή η εργασία.

Βιβλιογραφία
1. Παρασκευόπουλος Κ. (2021), Εισαγωγή στον προγραμματισμό Η/Υ με το Scratch, Θεσσαλονίκη,
Ελληνικό Κολλέγιο Θεσσαλονίκης.
2. https://scratch.mit.edu/