Come WebGL sta reinventando l'eredità di Flash
Ti ricordi tutti quei progetti con interazioni eccezionali, animazioni strabilianti e effetti sonori accompagnatori elettrizzanti che hanno portato a un'esperienza utente intensamente coinvolgente? Sì, è probabile che siano state create con l'aiuto di Flash.
Tuttavia odio ammetterlo, l'era di questa ricca piattaforma multimediale è giunta al termine. Flash è finalmente morto. Ma non temere! Come spesso accade quando una porta si chiude, un'altra si apre e Flash viene lentamente sostituito da un successore più fresco e vigoroso. Tecnologie come WebGL e accompagnando librerie JavaScript come Three.js sono in rapida crescita e consentono agli sviluppatori di creare progetti simili a quelli di Flash, senza i relativi problemi di sicurezza.
Oggi ci concentreremo su WebGL e Three.js. Questo abbinamento è un'opzione potente per UX immersive.
WebGL e Three.js
WebGL funge da base che fornisce strumenti per la manipolazione con la grafica computerizzata 3D e 2D interattiva. Ti dà l'opportunità di combinare i suoi elementi con elementi HTML e combinarli con altri elementi costitutivi della pagina o dello sfondo.
Three.js è una libreria Javascript con un elenco di funzionalità high-end che ti consentono di operare con scene, telecamere, luci, geometrie e altro ancora. Ha lo scopo di sbloccare il potenziale di WebGL aggiungendo funzionalità extra alla piattaforma. Semplifica la creazione di animazioni 3D con accelerazione GPU senza fare affidamento sui plugin del browser.
Problemi di compatibilità
Con le tecnologie moderne, sei sempre preso da un dilemma: o crea un progetto "taglia unica" che funzioni su vari dispositivi e offra un'esperienza utente coerente, o metti tutto in gioco e impressiona immediatamente il pubblico che puoi raggiungere .
Con WebGL e Three.js è la stessa storia. Safari, Opera e la maggior parte dei browser mobili (e per non parlare di Internet Explorer) sono come una mosca nel tuo Chardonnay. Sfortunatamente, molti utenti sono bloccati con browser legacy, quindi la compatibilità è piuttosto un ostacolo, ma il supporto è in crescita (che è più di quanto si possa dire per Flash) e a patto di non utilizzarlo per scopi mission critical, WebGL e Three.js sono opzioni eccellenti.
Esempi
vuoto
vuoto è un esperimento di Hi-ReS !, uno studio creativo con sede a Londra. Gli sviluppatori volevano astrarre dalle limitazioni inerenti alle piattaforme e ai browser moderni e testare i limiti delle attuali tecnologie. Sembra che l'abbiano inchiodato.
Si tratta di un'applicazione puramente desktop alimentata dalle funzionalità WebGL e Web Audio. Insieme a Howler.js, GSAP e Coffee Collider, Three.js ha partecipato alla realizzazione di questo eccezionale parco giochi che attrae inesorabilmente i visitatori online in un viaggio che sembra molto simile a un libro digitale.
Rimodellare l'eccellenza
Questa campagna interattiva dedicato all'anniversario di Sennheiser è un'odissea epica che combina non solo paesaggi fantascientifici ma anche numerose caratteristiche e dettagli all'avanguardia. È un puro esperimento di Chrome che consente ai visitatori di partecipare alla formazione e alla creazione di un monumento del suono. Anche se la fase di formazione è stata completata, un milione di persone in tutto il globo hanno partecipato all'evento: ha scavato pietre. Puoi dare il tuo contributo, esaminare questa enorme scultura sonora e goderti il video introduttivo e l'esecuzione di alto livello.
Bruno Quintela
Il portafoglio personale di Bruno Quintela è un esperimento WebGL reso in tempo reale che dimostra il potenziale dell'artista e le possibilità delle attuali tecnologie web. Usa il mouse per esaminare a fondo la scena. Trascinalo in direzioni diverse per vedere cosa è nascosto all'interno di questo insieme di poligoni 3d accuratamente posizionati con superfici lucide. L'idea è un'eccellente apertura per il sito web che lascia una prima impressione forte e duratura.
Test delle particelle
Questo progetto mostra un vortice di tubi di particelle più ordinati e organizzati che emanano vibrazioni altamente tecnologiche. C'è un centro di controllo che ti incoraggia a giocare con attributi come il raggio di una nuvola a forma cilindrica, la densità di tubi, l'altezza, la scala e altro ancora. Il concetto è ipnotico.
Shader dell'acqua
Questo artista è riuscito a imitare una superficie d'acqua imitando il comportamento naturale del liquido. La forma convessa e la superficie ondulata con riflessi solari come tocco finale ricreano una scena veramente realistica che cattura lo sguardo dal primo secondo.
Testa di particelle WebGL
Come lo erano quando Flash ha avuto successo, oggigiorno le particelle sono di gran moda. Animazioni di varie dimensioni e tipo possono essere viste in numerosi progetti, e questo lavoro è uno di questi. La versione sottile di una testa che ricorda vagamente un robot intelligente simile ad un uomo dai romanzi di Isaac Asimov è un vero capolavoro. Non solo sorprende la realizzazione, ma anche il suo comportamento. Reagisce ai movimenti del mouse, inclinando naturalmente la testa verso destra, sinistra, su e giù.
Testo 3D Confetti dinamico
L'effetto testo è uno dei modi per ravvivare interfacce noiose con una nota di giocosità e frescura oltre a enfatizzare la scritta richiesta. Rachel Smith's soluzione ispirata ai confetti contribuirà sicuramente ad arricchire il design con emozioni luminose e posizionerà il titolo al centro della scena. Digita una parola nel campo di inserimento qui sotto per vedere l'intera magia. Pezzi geometrici 3D vivaci e vividi daranno forma alla richiesta e renderanno il risultato interattivo.
3D Panorama Viewer
Three.js è utile nei progetti comuni come dimostra Max Chuhryaev. La sua soluzione trasforma facilmente le immagini panoramiche in un dettaglio essenziale dell'esperienza dell'utente. Ha una prospettiva piacevole e una fotocamera che si muove lentamente: insieme ti fanno sentire parte della composizione. Si abbina perfettamente a paesaggi, paesaggi urbani e interni, consentendo agli utenti di godere della bellezza dei contenuti multimediali statici.
Generatore di triangoli
Questo esperimento ti offre uno sfondo poligonale fantastico con una piacevole sensazione 3D. Funziona anche come un parco giochi in cui è possibile rendere più luminose alcune aree e altre dimmer: basta usare il mouse. Il pannello delle opzioni consente di mettere a punto una grande quantità di dettagli del quadro, tra cui la luce, la mesh, il rendering e persino le impostazioni di esportazione.