Πώς WebGL ανακαλύπτει την κληρονομιά του Flash
Θυμάστε όλα αυτά τα έργα με εξαιρετικές αλληλεπιδράσεις, κινουμένων σχεδίων animations και συναρπαστικά συνοδευτικά ηχητικά εφέ που οδήγησαν σε μια εντυπωσιακή εμπειρία χρήστη; Ναι, οι πιθανότητες είναι αυτές που δημιουργήθηκαν με τη βοήθεια του Flash.
Ωστόσο, το μίσος μου παραδέχεται ότι η εποχή αυτής της πλούσιας πλατφόρμας πολυμέσων έχει λήξει. Το φλας είναι τελικά νεκρό. Φοβάστε όμως! Όπως συχνά συμβαίνει όταν μια πόρτα κλείνει, μια άλλη ανοίγει και το Flash αντικαθίσταται αργά από έναν πιο φρέσκο, πιο έντονο διάδοχο. Τεχνολογίες όπως WebGL , και τις συνοδευτικές βιβλιοθήκες JavaScript όπως Three.js αναπτύσσονται ταχέως, επιτρέποντας στους προγραμματιστές να δημιουργούν έργα που μοιάζουν με Flash, χωρίς τα συνοδευτικά ζητήματα ασφάλειας.
Σήμερα θα επικεντρωθούμε σε WebGL και Three.js. Αυτό το ζεύγος είναι ισχυρή επιλογή για βυθιζόμενο UX.
WebGL και Three.js
Το WebGL χρησιμεύει ως ένα ίδρυμα που παρέχει εργαλεία χειρισμού με διαδραστικά γραφικά 3D και 2D υπολογιστών. Σας δίνει την ευκαιρία να αναμίξετε και να ταιριάξετε τα στοιχεία του με τα στοιχεία HTML και να τα συνδυάσετε με άλλα στοιχεία της σελίδας ή του φόντου.
Το Three.js είναι μια βιβλιοθήκη Javascript με μια λίστα χαρακτηριστικών υψηλής τεχνολογίας που σας επιτρέπουν να λειτουργείτε με σκηνές, κάμερες, φώτα, γεωμετρία και πολλά άλλα. Σκοπός είναι να ξεκλειδώσει το δυναμικό του WebGL προσθέτοντας επιπλέον λειτουργίες στην πλατφόρμα. Είναι εύκολο να δημιουργήσετε 3D animations με επιτάχυνση GPU χωρίς να εξαρτάται από τα plugins του προγράμματος περιήγησης.
Ζητήματα συμβατότητας
Με τις σύγχρονες τεχνολογίες, είστε πάντα πιασμένοι σε ένα δίλημμα: είτε να δημιουργήσετε ένα έργο "ενιαίου μεγέθους που ταιριάζει σε όλους" το οποίο θα λειτουργεί σε διάφορες συσκευές και να προσφέρει συνεπή εμπειρία χρήστη ή να βάζει τα πάντα στη γραμμή και να εντυπωσιάζει άμεσα το κοινό που μπορείτε να προσεγγίσετε .
Με το WebGL και το Three.js είναι η ίδια ιστορία. Το Safari, η Opera και η πλειοψηφία των browsers για κινητά (και αυτό δεν λέει τίποτα για τον Internet Explorer) είναι σαν μια μύγα στο Chardonnay. Δυστυχώς, πολλοί χρήστες έχουν κολλήσει με παλαιότερα προγράμματα περιήγησης, οπότε η συμβατότητα είναι αρκετά εμπόδιο, αλλά η υποστήριξη αυξάνεται (κάτι που είναι κάτι παραπάνω από το Flash) και με την προϋπόθεση ότι δεν θα το χρησιμοποιήσετε για οτιδήποτε κρίσιμη για την αποστολή, WebGL και Τα τρία.js είναι εξαιρετικές επιλογές.
Παραδείγματα
Κενός
Κενός είναι ένα πείραμα από το Hi-ReS !, ένα δημιουργικό στούντιο που εδρεύει στο Λονδίνο. Οι προγραμματιστές ήθελαν να αφηγηθούν από τους περιορισμούς που είναι εγγενείς στις σύγχρονες πλατφόρμες και προγράμματα περιήγησης και να δοκιμάσουν τα όρια των σημερινών τεχνολογιών. Φαίνεται ότι το καρφώθηκαν.
Πρόκειται για μια καθαρά εφαρμογή επιφάνειας εργασίας που τροφοδοτείται από λειτουργίες WebGL και Web Audio. Μαζί με το Howler.js, το GSAP και το Coffee Collider, το Three.js έλαβε μέρος στην παραγωγή αυτής της εκπληκτικής παιδικής χαράς που τραβά αδιάκοπα τους επισκέπτες σε ένα ταξίδι που μοιάζει πολύ με ένα ψηφιακό βιβλίο.
Αναδιαμορφώνοντας την Αριστεία
Αυτή η διαδραστική καμπάνια αφιερωμένο στην επέτειο του Sennheiser είναι μια επική οδύσσεια που συνδυάζει όχι μόνο δραματικά τοπία sci-fi, αλλά και πολυάριθμες αιχμές και λεπτομέρειες. Πρόκειται για ένα καθαρό πείραμα του Chrome που επιτρέπει στους επισκέπτες να συμμετέχουν στη διαμόρφωση και τη διαμόρφωση ενός μνημείου ήχου. Παρόλο που ολοκληρώθηκε η φάση του σχηματισμού - ένα εκατομμύριο άνθρωποι σε ολόκληρη τη Σφαίρα συμμετείχαν στην εκδήλωση - είναι πετρώματα. Μπορείτε να κάνετε τη δική σας συνεισφορά, να εξετάσετε αυτό το τεράστιο ηχητικό γλυπτό και να απολαύσετε το intro video και την κορυφαία εκτέλεση.
Bruno Quintela
Το προσωπικό χαρτοφυλάκιο του Bruno Quintela είναι ένα πείραμα WebGL σε πραγματικό χρόνο που καταδεικνύει τις δυνατότητες του καλλιτέχνη και τις δυνατότητες των σύγχρονων τεχνολογιών ιστού. Χρησιμοποιήστε το ποντίκι για να εξετάσετε προσεκτικά τη σκηνή. Σύρετε το σε διαφορετικές κατευθύνσεις για να δείτε τι είναι κρυμμένο μέσα σε αυτό το μεγαλύτερο μέρος των τρισδιάστατων πολυγώνων με γυαλιστερό επιφάνειες. Η ιδέα χρησιμεύει ως ένα εξαιρετικό άνοιγμα για την ιστοσελίδα που αφήνει μια ισχυρή, διαρκή πρώτη εντύπωση.
Δοκιμή σωματιδίων
Αυτη η εργασια παρουσιάζει έναν ανεμοστρόβιλο λιγότερο οργανωμένων και οργανωμένων σωλήνων σωματιδίων που ακτινοβολεί από υψηλής τεχνολογίας vibe. Υπάρχει ένα κέντρο ελέγχου που σας ενθαρρύνει να παίξετε με τέτοια χαρακτηριστικά όπως η ακτίνα ενός κυλινδρικού σχήματος σύννεφο, η πυκνότητα των σωλήνων, το ύψος, η κλίμακα και πολλά άλλα. Η ιδέα είναι μαγευτική.
Συσκευή καθαρισμού νερού
Αυτός ο καλλιτέχνης κατάφερε μιμούνται μια επιφάνεια νερού με τη μίμηση της φυσικής συμπεριφοράς του υγρού. Το κυρτό σχήμα και η κυματοειδής επιφάνεια με τις αντανακλάσεις του ήλιου ως τελικές πινελιές δημιουργούν μια πραγματικά ρεαλιστική σκηνή που αγγίζει το μάτι από το πρώτο δευτερόλεπτο.
WebGL Κεφάλι σωματιδίων
Όπως ήταν όταν το Flash ήταν επιτυχές, τα σωματίδια είναι όλα τα οργή σήμερα. Κινήσεις διαφόρων μεγεθών και τύπων μπορούν να προβληθούν σε πολλά έργα, και αυτή η δουλειά είναι ένα τέτοιο. Η λεπτή έκδοση ενός κεφαλιού που θυμίζει αόριστα ένα έξυπνο ανθρώπινο ρομπότ από τα μυθιστορήματα του Isaac Asimov είναι ένα πραγματικό αριστούργημα. Όχι μόνο η έκπληξη της υλοποίησης, αλλά και η συμπεριφορά της. Αντιδρά με τις κινήσεις του ποντικιού, με φυσική κλίση προς τα δεξιά, αριστερά, πάνω και κάτω.
Δυναμικό κείμενο 3D Confetti
Το εφέ κειμένου είναι ένας από τους τρόπους για να γεμίσουν τις βαρετές διασυνδέσεις με μια νότα παιχνιδιού και δροσιάς, καθώς και να τονίσω τα απαιτούμενα γράμματα. Η Ρέιτσελ Σμιθ εμπνευσμένη από κομφετί λύση θα βοηθήσει σίγουρα τον εμπλουτισμό του σχεδίου με τα φωτεινά συναισθήματα και θα τοποθετήσει τον τίτλο στην κεντρική σκηνή. Πληκτρολογήστε μια λέξη στο παρακάτω πεδίο εισαγωγής για να δείτε ολόκληρη τη μαγεία. Ζωντανά και ζωντανά 3D γεωμετρικά κομμάτια θα διαμορφώσουν το αίτημα και θα κάνουν το αποτέλεσμα όμορφα διαδραστικό.
Πρόγραμμα προβολής 3D πανοραμάτων
Το Three.js είναι χρήσιμο σε κοινά έργα, όπως αποδεικνύει ο Max Chuhryaev. Η λύση του μετατρέπει εύκολα τις πανοραμικές εικόνες σε μια ουσιαστική λεπτομέρεια της εμπειρίας του χρήστη. Έχει μια ευχάριστη προοπτική και αργά κινούμενη κάμερα: μαζί σας κάνουν να νιώσετε ένα κομμάτι της σύνθεσης. Πάει καλά με τα τοπία, τα αστικά τοπία και τους εσωτερικούς χώρους, επιτρέποντας στους χρήστες να απολαμβάνουν την ομορφιά των στατικών πολυμέσων.
Γεννήτρια μοτίβων τριγώνου
Αυτό το πείραμα σας δίνει ένα φανταστικό πολυγωνικό υπόβαθρο με υπέροχη 3D αίσθηση. Λειτουργεί επίσης ως παιδική χαρά, όπου μπορείτε να κάνετε κάποιες περιοχές πιο φωτεινές και άλλες να εξασθενίζουν: απλά χρησιμοποιήστε το ποντίκι σας. Ο πίνακας επιλογών σάς δίνει τη δυνατότητα να συντονίσετε ένα μεγάλο μέρος των λεπτομερειών του καμβά, συμπεριλαμβανομένων των ρυθμίσεων φωτισμού, πλέγματος, απόδοσης και ακόμη και εξαγωγής.