Hvordan WebGL genopfinder Flash's Legacy
Kan du huske alle de projekter med fremragende interaktioner, tankegangs animationer og spændende ledsagende lydeffekter, der resulterede i en intenst nedslående brugeroplevelse? Ja, chancerne er dem, der blev skabt ved hjælp af Flash.
Men jeg hader at indrømme det, den æra af denne rige multimedieplatform er nået. Flash er endelig død. Men frygt ikke! Som det ofte sker, når en dør lukker, åbner en anden, og Flash bliver langsomt erstattet af en friskere og mere kraftig efterfølger. Teknologier som WebGL , og tilhørende JavaScript-biblioteker som Three.js vokser hurtigt, hvilket gør det muligt for udviklere at opbygge Flash-lignende projekter uden de medfølgende sikkerhedsproblemer.
I dag vil vi fokusere på WebGL og Three.js. Denne sammenkobling er en kraftfuld mulighed for nedslående UX.
WebGL og Three.js
WebGL fungerer som et fundament, der giver instrumenter til manipulation med interaktive 3D- og 2D-computergrafik. Det giver dig mulighed for at blande og matche sine elementer med HTML-elementer og kombinere dem med andre indholdsstoffer på siden eller baggrunden.
Three.js er et Javascript-bibliotek med en liste over avancerede funktioner, der giver dig mulighed for at operere med scener, kameraer, lys, geometri og meget mere. Det er meningen at låse op for potentialet i WebGL ved at tilføje ekstra funktionalitet til platformen. Det gør det nemt at oprette GPU-accelererede 3D-animationer uden at stole på browser plugins.
Kompatibilitetsproblemer
Med de moderne teknologier bliver du altid fanget i et dilemma: enten oprette et "one size fits all" -projekt, der vil køre på forskellige enheder og tilbyde ensartet brugeroplevelse, eller sætte alt på linjen og straks imponere publikum, som du kan nå .
Med WebGL og Three.js er det den samme historie. Safari, Opera og de fleste mobilbrowsere (og det vil sige ingenting om Internet Explorer) er som en flyve i din Chardonnay. Der er desværre mange brugere der sidder fast med gamle browsere, så kompatibilitet er en hindring, men støtten vokser (hvilket er mere end man kan sige til Flash) og forudsat at du ikke bruger det til noget missionskritisk, WebGL og Three.js er gode muligheder.
eksempler
Ugyldig
Ugyldig er et eksperiment fra Hi-ReS !, en kreativ studie baseret i London. Udviklerne ønskede at abstrahere fra de begrænsninger, der er forbundet med moderne platforme og browsere og teste grænserne for nuværende teknologier. Det lader til, at de spikede det.
Det er en ren desktop applikation, der drives af WebGL og Web Audio funktioner. Sammen med Howler.js, GSAP og Coffee Collider deltog Three.js i at producere denne fremragende legeplads, der unødigt trækker online besøgende til en rejse, der ligner en digital bog.
Omforme Excellence
Denne interaktive kampagne dedikeret til Sennheizers jubilæum er en episk odyssey, der kombinerer ikke kun dramatiske sci-fi landskaber, men også mange spændende funktioner og detaljer. Det er et rent Chrome-eksperiment, der giver besøgende mulighed for at deltage i dannelsen og formen af et monument af lyd. Selvom dannelsesfasen er afsluttet, deltog en million mennesker over hele kloden i eventet-det herregårde. Du er velkommen til at yde dit eget bidrag, undersøge denne massive lydskulptur og nyd introvideo og top-notch-udførelse.
Bruno Quintela
Den personlige portefølje af Bruno Quintela er et real-time gengivet WebGL-eksperiment, der demonstrerer potentialet hos kunstneren og mulighederne i den nuværende webteknologi. Brug musen til at undersøge scenen grundigt. Træk det i forskellige retninger for at se, hvad der er skjult inde i denne masse af nøjagtigt placeret sammen 3d polygoner med blank overflader. Ideen tjener som en glimrende åbning for hjemmesiden, der efterlader et stærkt og varigt første indtryk.
Partikelprøve
Dette projekt udviser en hvirvelvind af mere mindre ordnede og organiserede rør af partikler, der udstråler højteknologisk vibe. Der er et kontrolcenter, der opfordrer dig til at spille med sådanne attributter som radius af en cylindrisk formet sky, tætheden af rør, højde, skala og meget mere. Konceptet er fascinerende.
Vandskygge
Denne kunstner har formået at efterligne en vandoverflade ved at efterligne væskens naturlige opførsel. Den konvekse form og bølgende overflade med solrefleksioner som færdiggør, genskaber en virkelig realistisk scene, der fanger øjet fra første sekund.
WebGL Particle Head
Som de var, da Flash var vellykket, er partikler alle raserier i dag. Animationer af forskellig størrelse og type kan ses i mange projekter, og dette arbejde er en sådan. Den subtile version af et hoved, der vagt minder om en intelligent menneskelignende robot fra Isaac Asimovs romaner, er et sandt mesterværk. Ikke alene forstår realiseringen, men også dens adfærd. Det reagerer på mus bevægelser, naturligvis vippe hovedet til højre, venstre, op og ned.
Dynamisk 3D Confetti Text
Tekst effekt er en af måder at krydre op kedelige grænseflader med en note af legende og kølighed samt understrege den krævede bogstaver. Rachel Smiths konfetti-inspireret løsning vil helt sikkert bidrage til at berige designet med lyse følelser og placere titlen til midtfasen. Skriv et ord i inputfeltet nedenfor for at se hele magien. Levende og levende 3D geometriske stykker vil forme anmodningen og gøre resultatet smukt interaktivt.
3D Panorama Viewer
Three.js kommer til nytte i fælles projekter som Max Chuhryaev beviser. Hans løsning nemt omdanner panoramabilleder til en væsentlig detaljeret brugeroplevelse. Det har et behageligt perspektiv og langsomt bevægende kamera: sammen får de dig til at føle en del af kompositionen. Det går godt med landskaber, bybilleder og interiører, så brugerne kan nyde skønheden i statisk multimedie.
Triangle Pattern Generator
Dette eksperiment giver dig en fantastisk polygonal baggrund med en dejlig 3D-følelse. Det virker også som en legeplads, hvor du kan gøre nogle områder lysere og andre lysere: Brug bare musen. I panelet med muligheder kan du indstille en del af lærredets detaljer, herunder lys, mesh, render og endda eksportindstillinger.