30 πειράματα WebGL που είναι απλά καταπληκτικά!

Ιδού, για ένα υπέροχο εργαλείο με μεγάλες υποσχέσεις έρχεται στα μάτια σας. Είναι γρήγορη και ομαλή. Κάνει 3D, και με την ενσωμάτωση ζωντανεύει, μαντέψτε τι είναι; HTML5; CSS3; Όχι, ονομάζεται WebGL, μια βιβλιοθήκη λογισμικού που επεκτείνει τη δυνατότητα JavaScript για τη δημιουργία διαδραστικών γραφικών 3D και ναι, χωρίς plugins!

Σε αυτήν την βιτρίνα, δεν θέλουμε να σας δείξουμε τα τακτικά πράγματα. Θέλουμε να σας παρουσιάσουμε 30 Πείραμα WebGLs που είναι προσεκτικά κατασκευασμένα από επαγγελματίες προγραμματιστές για να μπορείτε να δείτε την αληθινή δύναμη του WebGL που δεν είναι μόνο εμπνευσμένη, αλλά και σας επιτρέπει να έχετε μια ματιά στο πώς μπορεί να μοιάζει το μέλλον του ιστού. Μετάβαση στο μέλλον μετά από κλικ!

Σας συνιστούμε να δείτε αυτές τις παρουσιάσεις χρησιμοποιώντας την τελευταία έκδοση της έκδοσης προγραμματιστών του Google Chrome. Τα περισσότερα demos υποστηρίζουν την τελευταία έκδοση του Firefox, του Google Chrome και του Safari.

3 Όνειρα του Μαύρου

Συντάχθηκε από την ομάδα δεδομένων Google Data Arts, 3 Dreams of Black σας φέρνουν σε 3 κόσμους ονείρων που κατασκευάζονται μέσω ενός συνδυασμού πλούσιων σχεδίων 2D και κινουμένων σχεδίων συνυφασμένων με διαδραστικές 3D ακολουθίες. Ελέγξτε τα θαύματα για υπέροχη εμπειρία!

Κινούμενα σωματίδια όγκου

Αυτό είναι πραγματικά καλλιτεχνικά - κινούμενα ζώα κατασκευασμένα από σωματίδια 3D χρησιμοποιώντας υφές επιπλεύσεων και αντικείμενα buffer. Περισσότερη έκπληξη αν μετακινήσετε το ποντίκι!

Ενυδρείο

Προσομοιώστε ένα υποβρύχιο περιβάλλον; Αυτό δεν αποτελεί πρόβλημα για το WebGL. Το demo διαθέτει τρισδιάστατα μοντέλα με υφές υψηλής ποιότητας, κινούμενα σχέδια σκηνών, animation shader pixel, αντανακλάσεις, διάθλαση και καυστικά, απλά τα πάντα για να δημιουργήσουν την ρεαλιστική υποβρύχια σκηνή!

Αζαθειοπρίνη

Πιθανώς το πιο επικό demo του WebGL, αρκετό είπε. Κατσαρίστε τον συγγραφέα Jochen Wilhelmy.

Αξιοθέατα

Εάν θέλετε να δοκιμάσετε το 3D αυτό είναι το καλύτερο demo για εσάς, επίσης να διαλογιστείτε με την τεράστια ομορφιά των γραφικών που παράγονται από το WebGL χρησιμοποιώντας τον τύπο Hopalong του Martin.

Μέδουσα

“Διαδικαστική μοντελοποίηση με Side HX Houdini. Εξάγεται με εξαγωγέα Python σε μορφή json. Υφή ζωγραφισμένη με τη χρήση του Autodesk Mudbox. Κινούμενο με shader κορυφής.”

Χρυσαόρα

Αυτό δεν είναι μια τακτική επίδειξη κινουμένων σχεδίων, αλλά διαθέτει δυναμικά προσομοιωμένους σκελετούς, μερική προσομοίωση από πλευράς διακομιστή και συγχρονισμό με WebSocket, σύστημα σωματιδίων που αντιμετωπίζει κάμερα, εφέ όγκου φωτός και βιβλιοθήκη matrix του Vladimir Vukićević. Με λίγα λόγια, ένα εκπληκτικό πείραμα με πολύπλοκα έργα.

HelloRacer

Παρουσιάζοντας την προσομοίωση αλληλεπιδραστικών αυτοκινήτων υψηλού επιπέδου, σας έφερε αποκλειστικά η HelloEnjoy.

Υλικά: Αυτοκίνητα

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 και Chevrolet Camaro στο πρόγραμμα περιήγησής σας. Επιλέξτε τη βόλτα σας και απολαύστε τη θέα. Heck, μπορείτε ακόμη να επιλέξετε τα χρώματα τους.

WebGL Cars

Το μέλλον της σειράς Need For Speed ​​θα είναι στο πρόγραμμα περιήγησης ιστού. Πολύ φιλόδοξο; Σίγουρα όχι αν έχετε επισκεφτεί αυτά τα αυτοκίνητα που αποδίδονται με δυναμικούς χάρτες κύβων, χάρτες σκιάς και αποτελέσματα μετά την επεξεργασία.

Το έθνος του ρομπότ μου

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

Pacmaze

Τι συμβαίνει με ένα παιχνίδι 3D Pac-Man; Το γραφικό και το gameplay είναι ωραίο, και το πιο σημαντικό είναι ότι είναι διασκεδαστικό!

Κόκκινο κουκούλα

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

TankWorld

Μαντείστε, ένα απολαυστικό παιχνίδι shooter δεξαμενής με όπλα που χρησιμοποιείτε και χάρτες για να εξερευνήσετε και σε ορισμένα επίπεδα μπορείτε να πάρετε ακόμη και ένα ελικόπτερο για να εξερευνήσετε τον κόσμο! Είναι πραγματικά κάτι περισσότερο από ένα απλό παιχνίδι και το γραφικό φαίνεται άνετο!

Pulpo

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

Επιφάνεια

Ελέγξτε την επιφάνεια, ένα κομψό και εμπνευσμένο πείραμα του Paul Lewis. Δεν μπορείτε μόνο να αλλάξετε το μέγεθος, την ελαστικότητα, την τροχιά του auto, το wireframe και τις σταγόνες βροχής στο demo, αλλά και να μεταφέρετε και να αποθέσετε τις δικές σας εικόνες σε αυτό για να αισθανθείτε το αποτέλεσμα διαφορετικά.

Φωτογραφικά σωματίδια

Απλώς ρίξτε την αγαπημένη σας εικόνα σε αυτό το demo και απολαύστε την προσοχή σας να εκραγεί σε έναν τόνο σωματιδίων και να αλληλεπιδράσετε με κάποια μορφή μαγνητισμού. Το πείραμα είναι ένας συνδυασμός τεσσάρων τεχνολογιών: Drag and Drop της HTML5, API αρχείου, Canvas και WebGL.

Rutt-Etra-Izer

Το Rutt-Etra-Izer είναι μια προσομοίωση WebGL της κλασικής συνθέσεως βίντεο Rutt-Etra. Το demo σας επιτρέπει να βάλετε τις δικές σας εικόνες μέσα και να τους χειριστείτε. Με αυτά τα πράγματα, μια εικόνα 2D μπορεί ακόμη να μοιάζει με 3D!

Ο τρελλός χορός

Ένα απλό αλλά αξιοσημείωτο demo που δείχνει πόσο υγρό μπορεί να είναι το WebGL, με ανισότροπο φωτισμό και παραμόρφωση των κορυφών.

Ultranoir

Ένα άλλο σπουδαίο πείραμα που παρουσιάζει τις δυνατότητες του WebGL. Το Nouvelle Vague προσφέρει μια ποιητική και διαδραστική εμπειρία 3D σε πραγματικό χρόνο, βασισμένη στο Twitter, και αυτό που βλέπετε θα είναι tweets που πραγματοποιούνται με διαφορετικά ιπτάμενα αντικείμενα. Σίγουρα ένας καλλιτεχνικός τρόπος για να απολαύσετε τα tweets.

Κυνοειδής μαϊμού

“Αυτή τη φορά ήθελα απλώς να κάνω μια δοκιμή για να δω πόσες θέσεις και κανονικές κορυφές θα μπορούσα να ενημερώσω άμεσα στο JavaScript. Αποδεικνύει 2.000 είναι μια χαρά :) Προστέθηκα επίσης σε ένα κομμάτι της χαρτογράφησης περιβάλλοντος. Και παράξενο. Πάντα να προσθέτετε παράξενο χαρακτήρα.”

Video FX

Εντυπωσιακή εφαρμογή από τον Daniel Pettersson που σας επιτρέπει να εφαρμόζετε πολλαπλές ταυτόχρονες επιδράσεις μετά την επεξεργασία σε ένα ρυμουλκό Happy Feet 2. Δοκιμάστε και διασκεδάστε!

Voxels Liquid

Η 3D απεικόνιση του κλασικού αλγόριθμου επιπτώσεων νερού 2D σας δείχνει επίσης πώς είναι το διαδραστικό WebGL.

Βιβλιοθήκη WebGL

Περιηγηθείτε σε πάνω από 10.000 βιβλίο καλύπτει με αυτό το βιβλίο WebGL, που αναπτύχθηκε από την Ομάδα δεδομένων Google Arts. Μπορείτε επίσης να αναζητήσετε ανά θέμα, να ανοίξετε ένα τρισδιάστατο μοντέλο από το καθένα κάνοντας κλικ σε αυτό και να κατεβάσετε βιβλία στο τηλέφωνό σας με τον κωδικό QR.

WebGL Globe

Ένα δροσερό πείραμα της ομάδας της Google που πραγματικά σας κάνει να νιώσετε σαν να είστε στο μέλλον με την όμορφη, κομψή και φουτουριστική απεικόνιση δεδομένων.

Παγκόσμια πτήσεις

Μια άλλη οπτικά-ελκυστική εφαρμογή απεικόνισης δεδομένων που απεικονίζει τις μεγάλες αεροπορικές πτήσεις, φαίνεται πολλά υποσχόμενη!

Φίλτρο εικόνας WebGL

Γραφική εφαρμογή επεξεργασίας με το WebGL; Δεν είναι ποτέ αδύνατο. Το καλύτερο από όλα, είναι γρήγορο και ομαλό!

WebGL Water

“Μια δεξαμενή νερού που παρήχθη με αντανάκλαση, διάθλαση, καυστικά και απόφραξη του περιβάλλοντος. Η πισίνα προσομοιώνεται με ένα ύψος και περιέχει μια σφαίρα που μπορεί να αλληλεπιδράσει με την επιφάνεια του νερού.”

Αντανάκλαση

Το μεγαλύτερο πρόβλημα που αντιμετώπισε το WebGL είναι ίσως η ασφάλειά του. Σύμφωνα με την Wikipedia, η Αμερικανική ομάδα έκτακτης ανάγκης για την αντιμετώπιση καταστάσεων έκτακτης ανάγκης (US-CERT) εξέδωσε την προειδοποίηση ότι το WebGL περιέχει πολλά πιθανά ζητήματα ασφάλειας, τα οποία ενδέχεται να οδηγήσουν σε αυθαίρετη εκτέλεση κώδικα, άρνηση εξυπηρέτησης και ακόμη και επιθέσεις μεταξύ τομέων. Αυτό σημαίνει πολύ, πάρα πολύ στον ιδιοκτήτη της ιστοσελίδας.

Ωστόσο, ο όμιλος Khronos που περιλαμβάνει το Mozilla και το Google προτείνει πιθανές λύσεις και μελλοντική αναπτυξιακή προσέγγιση για την ενίσχυση της ασφάλειας έναντι των πιθανών απειλών ασφάλειας. Ας ελπίσουμε ότι τα θέματα μπορούν να μειωθούν και ακόμη και να λυθούν στο μέλλον, καθώς το WebGL έχει τόσες πολλές δυνατότητες όπως παρουσιάστηκαν από τους ταλαντούχους και επαγγελματίες προγραμματιστές!

Ενημερώστε μας ποιο πείραμα σας εκπλήσσει το μέγιστο, και, βεβαίως, αποδείξτε μας αν έχετε ένα!

Περισσότερες σχετικές δημοσιεύσεις:

• Ιστοσελίδα HTML5: 48 πιθανές δοκιμασίες που σκοτώνουν το Flash
• Ιστοσελίδα HTML5: 15 περισσότερα πειράματα
• Εμπνευσμένες επίδειξη κινήσεων CSS3