Husker du alle de prosjektene med fremragende interaksjoner, tankegangs animasjoner og spennende ledsagende effekter som resulterte i en intenst nedsenkende brukeropplevelse? Ja, sjansene er de som ble opprettet ved hjelp av Flash.

Men jeg hater å innrømme det, æraen til denne rike multimedieplattformen er avsluttet. Flash er endelig død. Men vær ikke redd! Som ofte skjer når en dør lukkes, åpner en annen, og Flash blir sakte erstattet av en ferskere, mer kraftig etterfølger. Teknologier som WebGL , og tilhørende JavaScript-biblioteker som Three.js vokser raskt, slik at utviklere kan bygge Flash-lignende prosjekter uten de medfølgende sikkerhetsproblemene.

I dag skal vi fokusere på WebGL og Three.js. Denne sammenkoblingen er et kraftig alternativ for nedsenkende UX.

WebGL og Three.js

WebGL fungerer som et fundament som gir instrumenter for manipulering med interaktiv 3D og 2D datagrafikk. Det gir deg mulighet til å mikse og matche elementene med HTML-elementer og kombinere dem med andre komponenter på siden eller bakgrunnen.

Three.js er et Javascript-bibliotek med en liste over avanserte funksjoner som lar deg operere med scener, kameraer, lys, geometri og mer. Det er ment å låse opp potensialet til WebGL ved å legge til ekstra funksjonalitet til plattformen. Det gjør det enkelt å lage GPU-akselererte 3D-animasjoner uten å stole på nettleserplugger.

Kompatibilitetsproblemer

Med den moderne teknologien blir du alltid fanget i et dilemma: enten skape et "one size fits all" -prosjekt som vil kjøre på ulike enheter og tilby konsistent brukeropplevelse, eller sette alt på linjen og umiddelbart imponere publikum som du kan nå .

Med WebGL og Three.js er det samme historie. Safari, Opera og flertallet av mobile nettlesere (og det er ikke å si noe om Internet Explorer) er som et fly i Chardonnay. Dessverre er det mange brukere som står fast med eldre nettlesere, slik at kompatibilitet er ganske et hinder, men støtten vokser (det er mer enn sagt for Flash), og forutsatt at du ikke bruker det til noe misjonskritisk, WebGL og Three.js er gode alternativer.

eksempler

Tomrom

001

Tomrom er et eksperiment fra Hi-ReS !, et kreativt studio basert i London. Utviklerne ønsket å abstrahere fra begrensningene iboende moderne plattformer og nettlesere og teste grensene for dagens teknologi. Det ser ut til at de spikret det.

Det er et rent skrivebordsprogram som drives av WebGL- og Web Audio-funksjoner. Sammen med Howler.js, GSAP og Coffee Collider deltok Three.js i å produsere denne enestående lekeplassen som unødvendig trekker online besøkende til en reise som ser ut som en digital bok.

Omforme Excellence

002

Denne interaktive kampanjen dedikert til Sennheisers jubileum er en episk odyssey som kombinerer ikke bare dramatiske sci-fi landskap, men også mange spennende funksjoner og detaljer. Det er et rent Chrome-eksperiment som lar besøkende delta i å danne og forme et lydmonument. Selv om dannelsesfasen har blitt fullført, deltok en million mennesker over hele verden i hendelsen-det herregårde bergarter. Du er velkommen til å gi ditt eget bidrag, undersøke denne massive lydskulpturen, og nyt introvideoen og toppkvaliteten.

Bruno Quintela

003

Den personlige porteføljen av Bruno Quintela er et real-time gjengitt WebGL-eksperiment som demonstrerer potensialet til kunstneren og mulighetene for dagens webteknologi. Bruk musen til å undersøke scenen grundig. Dra den i forskjellige retninger for å se hva som er skjult inne i denne massen av nøyaktig plasserte sammen 3d-polygoner med glatte overflater. Ideen tjener som en utmerket åpning for nettsiden som gir et sterkt og varig førsteinntrykk.

Partikkeltest

004

Dette prosjektet utviser en virvelvind av mer mindre bestilte og organiserte rør av partikler som utstråler høyteknologisk vibe. Det er et kontrollsenter som oppfordrer deg til å spille med slike egenskaper som radius av en sylindrisk formet sky, tetthet av rør, høyde, skala og mer. Konseptet er fascinerende.

Vannskygge

005

Denne artisten har klart å etterligne en vannoverflate ved å etterligne den naturlige oppførselen til væske. Den konvekse formen og bølgende overflaten med solrefleksjoner som sluttbelastning gjenskaper en virkelig realistisk scene som fanger øyet fra første sekund.

WebGL Particle Head

006

Som de var da Flash var vellykket, er partikler alle raseri i dag. Animasjoner av forskjellig størrelse og type kan ses i mange prosjekter, og denne jobben er en slik. Den subtile versjonen av et hode som er vagt minner om en intelligent menneskelig robot fra Isaac Asimovs romaner, er et sant mesterverk. Ikke bare realiserer overraskelsen, men også dens oppførsel. Det reagerer på musebevegelser, naturligvis vipper hodet til høyre, venstre, opp og ned.

Dynamic 3D Confetti Text

007

Teksteffekt er en av måtene å krydre kjedelige grensesnitt med et notat av leknemlighet og kjølighet, samt understreke ønsket bokstav. Rachel Smiths konfetti-inspirert løsning vil sikkert bidra til å berike designet med lyse følelser og plassere tittelen til midtfasen. Skriv inn et ord i inntastingsfeltet under for å se hele magien. Levende og levende 3D geometriske stykker vil forme forespørselen og gjøre resultatet pent interaktiv.

3D Panorama Viewer

008

Three.js kommer til nytte i felles prosjekter som Max Chuhryaev beviser. Hans løsning forvandler enkelt panoramabilder til en viktig detalj av brukeropplevelsen. Den har et hyggelig perspektiv og sakte beveger kamera: sammen får de deg til å føle en del av komposisjonen. Det går bra med landskap, bybilder og interiører, slik at brukerne kan nyte skjønnheten i statisk multimedia.

Triangle Pattern Generator

009

Dette eksperimentet gir deg en fantastisk polygonal bakgrunn med en nydelig 3D-følelse. Det fungerer også som en lekeplass hvor du kan gjøre noen områder lysere og andre dimmer: bare bruk musen. Alternativpanelet gjør at du kan justere et stort antall detaljer på lerretet, inkludert lys, mesh, gjengivelse og til og med eksportinnstillinger.