Στιγμιότυπο οθόνης από την εφαρμογή

Θέλετε να παρακολουθήσετε το Milky Way online; Νέα υπηρεσία οπτικοποίησης από Googleπου ονομάζεται 100.000 Stars, σας επιτρέπει να κάνετε περιηγήσεις στην κοσμική γειτονιά μας, τόσο ανεξάρτητα όσο και με τη βοήθεια μιας διαδραστικής περιήγησης.

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

Το ταξίδι στο Galaxy έγινε δυνατό

Αλλά πρόσφατα, χάρη σε διαδραστική οπτικοποίησητου Γαλαξία μας, όλοι έχουν την ευκαιρία να ταξιδέψουν μέσα από τις εκτάσεις του Γαλαξία μας. Τώρα αρκεί να ανοίξετε την υπηρεσία «Our Galaxy 3D and 100.000 Stars» στο πρόγραμμα περιήγησης και να βυθιστείτε σε ένα εικονικό ταξίδι στο διάστημα. Αναπτύχθηκε από την Google, η εφαρμογή περιλαμβάνει δεδομένα τοποθεσίας για σχεδόν 120.000 αστέρια στον Γαλαξία μας, που συλλέγονται από διάφορες πηγές, συμπεριλαμβανομένων των διαστημικών αποστολών.

Πλοήγηση

Η πλοήγηση στον διαδραστικό χάρτη γίνεται με μετατόπιση με το ποντίκι ή την επιφάνεια αφής.

Κάνοντας κλικ στο αστέρι ενδιαφέροντος θα εμφανιστούν πληροφορίες σχετικά με αυτό. Σε αυτήν την περίπτωση, η κάμερα πλησιάζει απευθείας στο επιλεγμένο αστέρι και όλες οι απαραίτητες πληροφορίες εμφανίζονται στο παράθυρο δίπλα της. Αυτό καθιστά δυνατή τη λεπτομερή μελέτη των αντικειμένων του Γαλαξία μας.

ΜΟΥΣΙΚΗ

Το ταξίδι στον διαδραστικό χώρο συνοδεύεται από μουσικά έργα του συνθέτη Sam Hulink, ο οποίος είναι επίσης γνωστός για τη συγγραφή μουσικής για παιχνίδια στον υπολογιστή, όπως το Mass Effect.

Καλή μέρα.
Ξέρετε ποια είναι η διαφορά μεταξύ του υπολογιστή σας και ενός διαστημόπλοιου;
Σωστή απάντηση:τα πάντα, αλλά όχι αυτή τη φορά.

100.000 αστέρια είναι ένα από δημιουργικά έργα google για να οπτικοποιήσετε τον γαλαξία μας. Υπάρχουν πάρα πολλά αστέρια μέσα. Μπορείτε να μετακινηθείτε ανάμεσά τους και, στο μεταξύ, να αξιολογήσετε την κλίμακα του σύμπαντος - είναι αρκετό Ωραία εικόνααυτό επιτρέπει. Η διαχείριση πραγματοποιείται από το ποντίκι.

Όλη αυτή η ομορφιά γράφτηκε στη μηχανή THREE.js, σε συνδυασμό με CSS και WebGL για εμφάνιση κειμένου. Πληροφορίες για τα αστέρια και τις συντεταγμένες τους λαμβάνονται από τη βάση δεδομένων HYG, η οποία με τη σειρά της είναι μια συλλογή τριών άλλων.
Σύμφωνα με έναν από τους συμμετέχοντες στο έργο, η ιδέα γεννήθηκε ως παρενέργεια της έρευνας του κινητήρα.

Και, ένα μικρό απόσπασμα βασισμένο σε πραγματικά γεγονότα.

Έχει περάσει πολύς καιρός από το τέλος του Michael Chang ( περίπου. Μέλος δημιουργικής ομάδας Google) ενός από τα έργα του. Το έργο ηττήθηκε και φαινόταν ότι όλα είχαν τελειώσει. Οι πελάτες ήταν ευχαριστημένοι το κοινό-στόχοεκτίμησε θετικά τις προσπάθειες του πλοιάρχου και ο ίδιος ο πλοίαρχος, για να είμαι ειλικρινής, ήταν λίγο περήφανος για το αποτέλεσμα των κόπων του. Όλα έχουν επιστρέψει στο φυσιολογικό. Ωστόσο, με τον καιρό, η χαρά της νίκης άρχισε σταδιακά να δίνει τη θέση της στην αδυναμία της ύπαρξης. Ο συνηθισμένος ρυθμός ζωής του καταληκτικού απαιτούσε μια νέα μερίδα καφέ, αλλά όχι μια χαλαρή ανάγνωση της ροής ειδήσεων ανάμεσα στα μεγάλα χασμουρητά.
Από πλήξη, ο Michael αποφάσισε να συνεχίσει τα πειράματά του στον κινητήρα THREE.js. Ήταν αδύνατο να ονομάσουμε αυτά τα πειράματα κάτι ασυνήθιστο - μάλλον απλώς εξερεύνησε νέο εργαλείο, όπως κάθε δάσκαλος που σέβεται τον εαυτό του που θέλει να εξελιχθεί περαιτέρω στο επάγγελμά του. Αλλά στην περίπτωση του προγραμματισμού, σίγουρα δεν θα μπορούσε να τελειώσει καλά.
Ήταν μετά τα μεσάνυχτα στο ρολόι όταν μια ελαφριά ψύχρα διαπέρασε ξαφνικά το σώμα του Μάικλ. Ο πλοίαρχος παρατήρησε ότι με κάποιες αλλαγές στην κλίμακα της σκηνής, η έξοδος είναι απίστευτα όμορφες εικόνες. Αυτοί οι πίνακες έγιναν ακόμη πιο ενδιαφέροντες μετά την προσθήκη επιπλέον σωματιδίων. Με πολλαπλή μεγέθυνση, κάθε σημείο της εικόνας ήταν θολό, δημιουργώντας την ψευδαίσθηση της παρατήρησης μέσω μικροσκοπίου. Σε απόσταση, η σκηνή έμοιαζε με ένα μικρό νησί σε μακρινό διάστημα. Ο Μάικλ περπάτησε σκεφτικός στο δωμάτιο. Δεν ήθελα να κοιμηθώ καθόλου. Οι ιδέες τον στοίχειωσαν. Δεν έπαιξε ο τελευταίος ρόλος το Mass Effect που ολοκληρώθηκε πρόσφατα.
Ο ήλιος μόλις έβγαινε από τον ορίζοντα όταν ο αναλυτής έβγαλε ένα τσιριχτό τρίξιμο. Ο κύριος ανατρίχιασε. Στη σκοτεινή οθόνη πάγωσε η μόνη επιγραφή - "Σύνολο: 119.617". Η μέρα έχει ήδη πάει καλά. Εκατόν δεκαεννέα χιλιάδες εξαιρετικά αστέρια, μαζί με τις συντεταγμένες τους, κρύφτηκαν κάπου στον σκληρό δίσκο. Απομένει να δώσουμε λίγη ζωή σε αυτό το μάτσο byte.

Το πρωτότυπο κόβεται και αντ' αυτού εμφανίζονται σελίδες κώδικα...

P.S. Όπως αποδείχθηκε, αυτό είναι ήδη

(Προσοχή σε όσους έχουν ενεργοποιημένα ηχεία: παίζει μυστηριώδης μουσική)

Έτσι, τον Νοέμβριο του 2012, οι λάτρεις της αστρονομίας από την Google παρουσίασαν μια νέα διαδικτυακή εφαρμογή "100.000 αστέρια", επιδεικνύοντας τις δυνατότητες πρόγραμμα περιήγησης Chromeσχετικά με την επεξεργασία τρισδιάστατου περιεχομένου χρησιμοποιώντας WebGL. Η εφαρμογή σάς επιτρέπει να απεικονίσετε έναν ρεαλιστικό τρισδιάστατο χάρτη του τμήματος του γαλαξία που περιβάλλει τον Ήλιο, με τον οποίο μπορείτε να εκτιμήσετε οπτικά την απόσταση και τη θέση ορισμένων αστεριών. Για την εικόνα των αστεριών και του γαλαξία, χρησιμοποιούνται πραγματικές φωτογραφίες που παρουσιάζονται στον ιστότοπο της NASA, οι περιγραφές των αστεριών λαμβάνονται από τη Wikipedia.
Σας προειδοποιώ αμέσως - για όσους έχουν πολλή δουλειά, είναι καλύτερα να μην συμπεριλάβετε αυτήν την επιχείρηση στις ώρες εργασίας, υπάρχει κίνδυνος να κολλήσετε! ;)
(Επίσης, μου φάνηκε ότι τα προγράμματα περιήγησης που δεν είναι chrome είναι προφανώς αργά σε αυτήν την εφαρμογή, οπότε ορίστε.)

Όταν φορτωθεί το παράθυρο με το Σύμπαν, βλέπουμε κάτι σαν αυτό:

Το κέντρο οπτικοποίησης είναι τοποθετημένο στον Ήλιο. Αλλάζοντας την κλίμακα με την κύλιση του ποντικιού (ή το ρυθμιστικό στα δεξιά), μπορείτε να κάνετε διαλογισμό στο αστέρι μας:

Το ίδιο μπορείτε να κάνετε ενεργοποιώντας τη λειτουργία εξοικείωσης από την αρχή (στην επάνω αριστερή γωνία). Το σύμπαν θα περιστραφεί, ο Ήλιος θα πλησιάσει, θα εμφανιστούν συνοδευτικά επεξηγηματικά «καρότσια».
Ένα από τα πλαίσια της περαιτέρω αναθεώρησης στη λειτουργία εξοικείωσης:

Άλλη μια λήψη της εισαγωγικής τρισδιάστατης εκπομπής. Ανά πάσα στιγμή, το "show" μπορεί να τεθεί σε παύση πατώντας την ξένη λέξη "stop" στο κάτω μέρος της οθόνης.


Σε οποιοδήποτε στάδιο, το Screen Space μπορεί να περιστραφεί-περιστρέφεται διαφορετικές πλευρές«αρπάζοντάς το» με το ποντίκι.

Στην επάνω αριστερή γωνία υπάρχει επίσης ένας διακόπτης για έγχρωμη «φασματική ανάλυση» των αστεριών. Μοιάζει με αυτό:


Φυσικά, ανά πάσα στιγμή μπορείτε να επιστρέψετε στην αρχική προβολή.

Σε μια συγκεκριμένη κλίμακα, τα ονόματά τους εμφανίζονται κοντά στα αστέρια, τα οποία μπορούν να κάνουν κλικ. Κάνοντας κλικ στο όνομα ενός αστεριού, βλέπουμε πώς μας πλησιάζει γρήγορα, πάλλεται και επιδεικνύεται και μια συμπίεση από τη Wikipedia εμφανίζεται στην αριστερή πλευρά της οθόνης:


Ταυτόχρονα, αυτό το αστέρι είναι τώρα το κέντρο του αστρικού χώρου στην οθόνη, και το Σύμπαν θα πρέπει να «στραφεί και να περιστραφεί» με το ποντίκι σε σχέση με αυτό. Για να αλλάξουμε ξανά το κέντρο των συντεταγμένων στον Ήλιο, στην ίδια επάνω αριστερή γωνία που είναι ήδη γνωστό σε εμάς, σε αυτήν την περίπτωση, εμφανίζεται το αντίστοιχο κουμπί.

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

Michael Chang, από Ομάδες Googleστον ιστότοπο HTML5rocks έγραψε ένα ενδιαφέρον άρθρο σχετικά με το τέλος του πειράματος του Chrome, την οπτικοποίηση των πλησιέστερων αστεριών «100.000 Αστέρια». Το έργο αναπτύχθηκε με THREE.js και CSS3D. Περιέγραψε μέρος του έργου, τη διαχείριση των shaders και τον τρόπο χρήσης κείμενο cssσε συνδυασμό με το WebGL.
Διαδήλωση
Ο σκοπός της συγγραφής αυτού του άρθρου είναι να δείξει τις δυνατότητες των σύγχρονων τεχνολογιών Ιστού στους ρωσόφωνους χρήστες του Διαδικτύου, σε αυτήν την περίπτωση το THREE.js χρησιμοποιείται για την οπτικοποίηση κοντινών αστεριών στον Γαλαξία μας. Η τεχνολογία WebGL, τη στιγμή της συγγραφής αυτού του άρθρου, υποστηρίζεται σωστά μόνο από το Google Chrome!

Χώρος

Μετά την ολοκλήρωση του Globus, πραγματοποιήθηκαν πειράματα με THREE.js. Αποδείχθηκε ότι είναι δυνατή η αλλαγή της κλίμακας της σκηνής και η αύξηση του αριθμού των εφέ.

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

Για να τοποθετηθούν τα αστέρια στη σκηνή, χρησιμοποιήθηκε η βάση δεδομένων αστρονομίας astronexus.com.

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

Η τοποθέτηση αστεριών από δεδομένα αστρονομίας στον τρισδιάστατο χώρο δεν άργησε, αν και υπάρχουν ακριβώς 119617 αστέρια στο σετ, για τα σύγχρονα κάρτα γραφικών GPUδεν ήταν δύσκολο. Για μεμονωμένα καθορισμένα αστέρια, χρησιμοποιείται επικάλυψη CSS, χρησιμοποιώντας την ίδια μέθοδο όπως και για την υδρόγειο.

Η δημιουργία του γαλαξία

Κατά τη γνώμη μου, ο Michael πέτυχε να δημιουργήσει ένα μοντέλο του γαλαξία, με εκπληκτική θέα στον Γαλαξία.

Πρωτότυπο των σωματιδίων του συστήματος Milky Way

Για να σχηματιστεί ο Γαλαξίας, προστίθενται 100.000 σωματίδια και τοποθετούνται σε μια σπείρα.
Πολλοί προσπάθησαν να διαμορφώσουν τον Γαλαξία χρησιμοποιώντας τα σωματίδια ως επίπεδη αναπαράσταση του γαλαξία για τα σωματίδια και να δώσουν στον Γαλαξία μια πιο ρεαλιστική εμφάνιση.

Εικόνα του σπειροειδούς γαλαξία NGC 1232B, περίπου 70 εκατομμύρια έτη φωτός από τη Γη.
Κάθε μονάδα GL είναι ένα έτος φωτός. Σε αυτή την περίπτωση, η σφαίρα έχει πλάτος 110.000 έτη φωτός.

• Ένα μπλοκ GL είναι ένα pixel σε 3D, όπως ένα έτος φωτός

Πρώτα ήταν η απόφαση να περιστραφεί η ίδια η σκηνή του γαλαξία αντί να μετακινηθεί η κάμερα. Αλλά πρέπει να κάνετε μεγέθυνση και να δείτε τι υπάρχει στο pinwheel, ώστε να μπορείτε να σύρετε αριστερά και δεξιά με το ποντίκι, να περιστρέψετε το αντικείμενο και το ζουμ είναι απλώς θέμα αλλαγής camera.position.z.

Συγκρίνετε με τα σωματίδια Πρωτότυπου και τα σωματίδια συνοδεύονται από μια επίπεδη εικόνα.

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

Η τροχιά του ήλιου και οι πλανήτες στη σφαίρα αντιπροσωπεύουν τις ζώνες Kuiper.

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

Μια παρόμοια τεχνική έχει χρησιμοποιηθεί για το στέμμα του Ήλιου, εκτός από το ότι θα είναι ένας επίπεδος spritemap που είναι πάντα στραμμένος προς την κάμερα με THREE.Gyroscope(); .

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

Κώδικας για τον Ήλιο και άλλα αστέρια.

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

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

Εφαρμογή επισήμανσης

Οπτικοποίηση χώρου με χρήση του LensFlare. Το THREE.LensFlare είναι μόνο για αυτόν τον σκοπό, το μόνο που έχετε να κάνετε είναι να το προσθέσετε στη σκηνή.

// Αυτή η συνάρτηση επανασυντονίζει ένα αντικείμενο lesnflare THREE που πρόκειται να προστεθεί .add() στη συνάρτηση γραφήματος σκηνής addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff); lensFlare = new THREE. LensFlare(overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor); // θα χρησιμοποιήσουμε πολλαπλά τεχνουργήματα υποφακού, το καθένα με διαφορετικό μέγεθος lensFlare.add(textureFlare1, 4096, 0.0. ). εκτελέστε το καθένα μέσω μιας συνάρτησης κάτω από το lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = νέο THREE.Vector3(x,y,z); lensFlare.size = μέγεθος; μέγεθος: 16000 ; αυτή η συνάρτηση επιστροφής lensFlare θα λειτουργήσει ξανά) // τεχνούργημα lensflare, μετακίνηση τους γύρω από τη λειτουργία της οθόνης lensFlareUpdateCallback(object) ( var f, fl = this.lensFlares.leng ου? var flare? var vecX = -this.positionScreen.x * 2; var vecY = -this.positionScreen.y * 2; varsize = αντικείμενο.μέγεθος ; αντικείμενο.μέγεθος: 16000; var camDistance = camera.position.length(); for(f = 0; f< fl; f ++) { flare = this.lensFlares[ f ]; flare.x = this.positionScreen.x + vecX * flare.distance; flare.y = this.positionScreen.y + vecY * flare.distance; flare.scale = size / camDistance; flare.rotation = 0; } }

Υφή

Αεροπλάνο, για να βοηθήσει τον προσανατολισμό στο διάστημα.

THREE.CylinderGeometry() εφαρμόστηκε στον ήλιο. Για να δημιουργήσετε μια ακτίνα φωτός, αλλάξτε την υφή μετατόπισης χρόνου ως εξής:

Mesh.material.map.needsUpdate = true; mesh.material.map.onUpdate = function()( this.offset.y -= 0.001; this.needsUpdate = true; )

Χρώμα αστεριού

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

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

Var shaderMaterial = νέο THREE.ShaderMaterial(( στολές: datastarUniforms, χαρακτηριστικά: datastarAttributes, /* ... etc */ )); var datastarAttributes = ( size: ( type: "f", value: ), colorIndex: ( type: "f", value: ), );

Γεμίζοντας τον πίνακα ColorIndex έτσι ώστε κάθε σωματίδιο να έχει το δικό του μοναδικό χρώμα.

Κλίμακα χρώματος για να βρείτε το σωστό χρώμα από αναγνώσεις χρώματος αστεριών.

Πρόσβαση σε δεδομένα χρώματος bitmap με JavaScript. Πρώτα φορτώστε την εικόνα στο DOM, σύρετέ την στο στοιχείο γραφικών για να αποκτήσετε πρόσβαση στο bitmap γραφικών.

// Δημιουργήστε έναν κενό καμβά, με μέγεθος όπως η εικόνα, σε αυτήν την περίπτωση το gradientImage είναι ένα στοιχείο εικόνας dom gradientCanvas = document.createElement("καμβάς"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // σχεδιάστε την εικόνα gradientCanvas.getContext("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // μια συνάρτηση για να αρπάξει το χρώμα pixel με βάση μια κανονικοποιημένη ποσοστιαία τιμή gradientCanvas.getColor = συνάρτηση(ποσοστό)( return this.getContext("2d").getImageData(ποσοστό * gradientImage.width,0, 1, 1).data ;)

Αυτή η μέθοδος χρησιμοποιείται επίσης για το χρωματισμό μεμονωμένων αστεριών στο μοντέλο αστεριών.

Η ίδια τεχνική χρησιμοποιείται για να κάνει μια έγχρωμη αναζήτηση για τη φασματική τάξη ενός αστεριού.

Αριθμός σκίαστρων

Το έργο χρησιμοποιεί πολλούς shaders για την εκτέλεση όλων οπτικά εφέέτσι ο Michael Chang έγραψε το shader loader.

// λίστα shaders που θα φορτώσουμε var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...etc...*/]; // ένα μικρό εργαλείο για την εκ των προτέρων ανάκτηση όλων των shader και τοποθέτησή τους σε μια δομή δεδομένων (αντικαθιστώντας την παραπάνω λίστα) συνάρτηση loadShaders(list, callback)( var shaders = (); var expectFiles = list.length * 2; var loadedFiles = 0; συνάρτηση makeCallback(όνομα, τύπος)( συνάρτηση επιστροφής(δεδομένα)( if(shaders === απροσδιόριστο)( shaders = (); ) shaders = δεδομένα; ​​// ελέγξτε αν ολοκληρώθηκαν loadedFiles++; if(loadedFiles == αναμενόμεναFiles)( επανάκληση(shaders); ) ); ) for(var i=0; i

Η LoadShaders() παίρνει μια λίστα με ονόματα αρχείων shader, προσπαθεί να φορτώσει τα δεδομένα της και, στη συνέχεια, απλώς αντικαθιστά τη λίστα με αντικείμενα. Ως αποτέλεσμα, στη φόρμα THREE.js, μπορείτε να περάσετε shaders σε αυτήν ως εξής:

Var galacticShaderMaterial = νέο THREE.ShaderMaterial(( vertexShader: shaderList.galacticstars.vertex, fragmentShader: shaderList.galacticstars.fragment, /*...*/ ));

CSS και υπότιτλοι στην κορυφή του THREE.JS

Το έργο, Globe, εμφανίζει ετικέτες κειμένου στην κορυφή της σκηνής THREE.js. Το THREE.Projector() χρησιμοποιήθηκε για την εμφάνιση ετικετών στη σωστή θέση στην οθόνη και τη σήμανση με έναν πίνακα CSS στη σωστή θέση.

Το CSS3D θα τοποθετήσει το κείμενο πάνω από το WebGL για αυτήν την ματιά στον πηγαίο κώδικα. Ενημερώστε τη συνάρτηση πίνακα THREE.js:

/* Διορθώνει τη διαφορά μεταξύ συντεταγμένων WebGL σε συντεταγμένες CSS */ συνάρτηση toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; εάν (b) ( f = [ a.elements, -a.elements, a.elements, a .στοιχεία, α.στοιχεία, -α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, -α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, -α.στοιχεία, α.στοιχεία, α.στοιχεία]· ) other ( f = [ α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία , α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία, α.στοιχεία ]; ) για (var e in f) ( f[e] = έψιλον(f[e]); ) επιστροφή "matrix3d(" + f.join(",") + ")"; )

Τώρα το κείμενο δεν φαίνεται πλέον μπροστά στην κάμερα. Για να γίνει αυτό, χρησιμοποιήσαμε THREE.Gyroscope () , το οποίο κάνει το Object3D να χάσει τον προσανατολισμό του κληρονομώντας από τη σκηνή. Αυτή η τεχνική ονομάζεται "billboarding" και το γυροσκόπιο είναι τέλειο για αυτό.

Τα σημάδια πέφτουν πάντα από την κάμερα συνδέοντάς την στο THREE.Gyroscope().

Ήχοι

Έχω χρησιμοποιήσει την ετικέτα ήχου για την αναπαραγωγή μουσικής, ωστόσο ακόμη και στον Chrome είναι αναξιόπιστη - μερικές φορές απλώς δεν κάνει loop. Στο τέλος αυτής της διπλής ετικέτας ήχου, το hack χρησιμοποιείται για τον έλεγχο του τέλους της αναπαραγωγής και τη μετάβαση σε άλλη ετικέτα για το παιχνίδι. Αυτό που ήταν απογοητευτικό ήταν ότι *ακόμα* δεν ήταν μια τέλεια θηλιά όλη την ώρα, δυστυχώς, αισθάνομαι ότι ήταν ό,τι καλύτερο μπορούσα να κάνω.

var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("τελείωσε", function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // κάντε το να περιμένει 15 δευτερόλεπτα πριν παίξει ξανά setTimeout( playB, 15000); ), false); musicB.addEventListener("τελείωσε", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // διαφορετικά η μουσική θα σας τρελάνει setTimeout(playA , 15000); ), ψευδής); // εντάξει οπότε υπάρχει λίγος πλεονασμός κώδικα, το παραδέχομαι musicA.play();

Τελικά

Ίσως σύντομα στο Googlemap να δούμε όχι μόνο έναν τρισδιάστατο χάρτη της γης, αλλά και έναν χάρτη του γαλαξία μας και να ανοίξουμε έναν σύντομο δρόμο από τον Άρη στην Αφροδίτη :-D. Οι σύγχρονες τεχνολογίες ιστού καθιστούν δυνατό να γίνει αυτό, όχι μόνο για διαστημικά παιχνίδια, αλλά και για το πρόγραμμα περιήγησης.