Hoe WebGL de erfenis van Flash opnieuw uitvindt
Herinner je al die projecten met uitstekende interacties, verbluffende animaties en spannende begeleidende geluidseffecten die hebben geresulteerd in een intens meeslepende gebruikerservaring? Jazeker, de kans is groot dat deze met behulp van Flash zijn gemaakt.
Maar ik haat het om het toe te geven, het tijdperk van dit rijke multimedia-platform is ten einde. Flash is eindelijk dood. Maar vrees niet! Zoals vaak gebeurt wanneer een deur sluit, wordt een andere geopend en wordt Flash langzaam vervangen door een frissere, krachtdadigere opvolger. Technologieën zoals WebGL en bijbehorende JavaScript-bibliotheken vinden leuk Three.js zijn snel groeiend-waardoor ontwikkelaars Flash-achtige projecten kunnen bouwen, zonder de bijbehorende beveiligingsproblemen.
Vandaag gaan we focussen op WebGL en Three.js. Deze koppeling is een krachtige optie voor meeslepende UX.
WebGL en Three.js
WebGL dient als een basis die instrumenten biedt voor het manipuleren met interactieve 3D- en 2D-computerafbeeldingen. Het geeft je de mogelijkheid om de elementen te combineren met HTML-elementen en ze te combineren met andere bestanddelen van de pagina of achtergrond.
Three.js is een Javascript-bibliotheek met een lijst met geavanceerde functies waarmee u kunt werken met scènes, camera's, licht, geometrie en meer. Het is bedoeld om het potentieel van WebGL te ontsluiten door extra functionaliteit aan het platform toe te voegen. Het maakt het eenvoudig om GPU-versnelde 3D-animaties te maken zonder te vertrouwen op browser-plug-ins.
Compatibiliteitsproblemen
Met de moderne technologieën sta je altijd voor een dilemma: maak een "one size fits all" -project dat op verschillende apparaten zal draaien en een consistente gebruikerservaring biedt, of zet alles op het spel en maak direct indruk op het publiek dat je kunt bereiken .
Met WebGL en Three.js is het hetzelfde verhaal. Safari, Opera en de meeste mobiele browsers (en dat is niets te zeggen over Internet Explorer) zijn als een vlieg in je Chardonnay. Helaas zitten veel gebruikers vast aan oude browsers, dus compatibiliteit is een groot obstakel - maar de ondersteuning groeit (wat meer is dan kan worden gezegd voor Flash) en op voorwaarde dat je deze niet gebruikt voor iets dat kritiek is op de missie, WebGL en Three.js zijn uitstekende opties.
Voorbeelden
leegte
leegte is een experiment van Hi-ReS !, een creatieve studio gevestigd in Londen. De ontwikkelaars wilden abstraheren van de beperkingen die inherent zijn aan moderne platforms en browsers en de grenzen van de huidige technologieën testen. Het lijkt erop dat ze het hebben genageld.
Het is een puur bureaubladtoepassing die wordt aangedreven door WebGL- en Web Audio-functies. Samen met Howler.js, GSAP en Coffee Collider nam Three.js deel aan de productie van deze buitengewone speeltuin die online bezoekers onweerstaanbaar aantrekt voor een reis die veel weg heeft van een digitaal boek.
Hervorming van uitmuntendheid
Deze interactieve campagne gewijd aan het jubileum van Sennheiser is een epische odyssee die niet alleen dramatische scifi-landschappen combineert, maar ook tal van geavanceerde functies en details. Het is een puur Chrome-experiment waarmee bezoekers kunnen deelnemen aan het vormen en vormgeven van een monument van geluid. Hoewel de fase van vorming is voltooid, hebben een miljoen mensen overal ter wereld aan het evenement deelgenomen - het is rotsen. Je bent van harte welkom om je eigen bijdrage te leveren, deze massieve geluidssculptuur te bekijken en te genieten van de introductievideo en de beste uitvoering.
Bruno Quintela
De persoonlijke portfolio van Bruno Quintela is een real-time gerenderde WebGL-experiment dat het potentieel van de kunstenaar en de mogelijkheden van de huidige webtechnologieën laat zien. Gebruik je muis om de scène grondig te onderzoeken. Sleep het in verschillende richtingen om te zien wat er verborgen zit in deze bulk van nauwkeurig geplaatste 3D-polygonen met glanzende oppervlakken. Het idee dient als een uitstekende opening voor de website die een sterke, blijvende eerste indruk achterlaat.
Partikeltest
Dit project vertoont een wervelwind van minder geordende en georganiseerde buizen met deeltjes die stralen van hightech uitstraling. Er is een controlecentrum dat je aanmoedigt om te spelen met attributen als de straal van een cilindervormige wolk, de dichtheid van buizen, hoogte, schaal en nog veel meer. Het concept is fascinerend.
Water Shader
Deze artiest is erin geslaagd imiteer een wateroppervlak door het natuurlijke gedrag van vloeistof na te bootsen. De bolle vorm en het golvende oppervlak met zonweerspiegelingen als finishing touch creëren een echt realistische scène die vanaf de eerste seconde in het oog springt.
WebGL Particle Head
Zoals ze waren toen Flash succesvol was, zijn deeltjes tegenwoordig allemaal razernij. Animaties van verschillende grootte en soort zijn te zien in tal van projecten, en dit werk is zo'n. De subtiele versie van een hoofd die vaag doet denken aan een intelligente mensachtige robot uit de romans van Isaac Asimov is een echt meesterwerk. Niet alleen verrassen de realisatie, maar ook het gedrag. Het reageert op muisbewegingen, waarbij het hoofd op natuurlijke wijze naar rechts, links, boven en beneden wordt gekanteld.
Dynamische 3D Confetti-tekst
Teksteffect is een van de manieren om saaie interfaces te verfraaien met een vleugje speelsheid en koelte en om de vereiste belettering te benadrukken. Van Rachel Smith op confetti geïnspireerde oplossing zal zeker helpen om het ontwerp te verrijken met heldere emoties en de titel centraal te stellen. Typ een woord in het onderstaande invoerveld om de hele magie te zien. Levendige en levendige 3D-geometrische stukken zullen het verzoek vormgeven en het resultaat mooi interactief maken.
3D Panorama Viewer
Three.js is handig in veelvoorkomende projecten zoals Max Chuhryaev bewijst. Zijn oplossing transformeert eenvoudig panoramische afbeeldingen in een essentieel detail van de gebruikerservaring. Het heeft een prettig perspectief en een langzaam bewegende camera: samen voel je je een deel van de compositie. Het past goed bij de landschappen, stadsgezichten en interieurs, waardoor gebruikers kunnen genieten van de schoonheid van statische multimedia.
Triangle-patroongenerator
Dit experiment geeft je een fantastische veelhoekige achtergrond met een mooi 3D-gevoel. Het fungeert ook als een speeltuin waar je sommige gebieden helderder kunt maken en andere dimmen: gebruik gewoon je muis. Met het deelvenster met opties kunt u een groot deel van de details van het canvas afstemmen, waaronder instellingen voor licht, mesh, render en zelfs export.