Hur WebGL återuppfinner Flash Legacy
Kommer du ihåg alla dessa projekt med enastående interaktioner, sinnesblåsande animationer och spännande medföljande ljudeffekter som resulterade i en intensiv nedsänkt användarupplevelse? Ja, chansen är de som skapades med hjälp av Flash.
Men jag hatar att erkänna det, den här rika multimediaplattformens era har upphört. Flash är äntligen död. Men frukta inte! Som ofta händer när en dörr stängs öppnar en annan, och Flash ersätts långsamt av en nyare, mer kraftfull efterträdare. Tekniker som WebGL , och medföljande JavaScript-bibliotek som Three.js växer snabbt, vilket gör det möjligt för utvecklare att bygga Flash-liknande projekt utan att åtföljande säkerhetsproblem.
Idag kommer vi att fokusera på WebGL och Three.js. Denna koppling är ett kraftfullt alternativ för nedsänkt UX.
WebGL och Three.js
WebGL fungerar som en grund som ger instrument för att manipulera med interaktiv 3D- och 2D-datorgrafik. Det ger dig möjlighet att blanda och matcha dess element med HTML-element och kombinera dem med andra innehållsämnen på sidan eller bakgrunden.
Three.js är ett Javascript-bibliotek med en lista över avancerade funktioner som låter dig fungera med scener, kameror, ljus, geometri och mycket mer. Det är avsett att låsa upp potentialen i WebGL genom att lägga till extra funktionalitet på plattformen. Det gör det enkelt att skapa GPU-accelererade 3D-animeringar utan att förlita sig på webbläsarpluggar.
Kompatibilitetsproblem
Med den moderna tekniken är du alltid inblandad i ett dilemma: antingen skapa ett "one size fits all" -projekt som kommer att köras på olika enheter och erbjuda konsekvent användarupplevelse eller sätta allt på rad och direkt imponera på publiken som du kan nå .
Med WebGL och Three.js är det samma historia. Safari, Opera och majoriteten av mobila webbläsare (och det vill säga ingenting om Internet Explorer) är som en fluga i din Chardonnay. Tyvärr är en hel del användare fasta med äldre webbläsare, så kompatibilitet är ganska ett hinder, men supporten växer (vilket är mer än det kan sägas om Flash) och förutsatt att du inte använder det för någonting missionskritisk, WebGL och Three.js är utmärkta alternativ.
exempel
Ogiltig
Ogiltig är ett experiment av Hi-ReS !, en kreativ studio baserad i London. Utvecklarna ville abstrahera från de begränsningar som är förknippade med moderna plattformar och webbläsare och testa gränserna för nuvarande teknik. Det verkar som om de spikade det.
Det är en ren skrivbordsapplikation som drivs av funktionerna WebGL och Web Audio. Tillsammans med Howler.js, GSAP och Coffee Collider deltog Three.js i att producera denna enastående lekplats som otvivelaktigt dra online besökare till en resa som ser ut som en digital bok.
Omforma Excellence
Den här interaktiva kampanjen dedikerad till Sennheizers årsdag är en episk odyssey som kombinerar inte bara dramatiska sci-fi landskap utan också många spännande funktioner och detaljer. Det är ett rent Chrome-experiment som tillåter besökare att delta i att forma och forma ett ljudmonument. Även om bildningsfasen har slutförts, deltog en miljon människor över hela världen i händelsen - det varar stenar. Du är välkommen att göra ditt eget bidrag, undersöka den här massiva ljudskulpturen och njut av introvideo och toppkörning.
Bruno Quintela
Den personliga portföljen av Bruno Quintela är ett real-time renderat WebGL-experiment som visar potentialen hos artisten och möjligheterna för den nuvarande webbtekniken. Använd musen för att granska scenen noggrant. Dra det i olika riktningar för att se vad som är dolt inuti denna stor del av exakt placerade ihop 3d polygoner med blanka ytor. Idén tjänar som en utmärkt öppning för webbplatsen som lämnar ett starkt, varaktigt första intryck.
Partikeltest
Det här projektet uppvisar en virvelvind av mer mindre beställda och organiserade rör av partiklar som strålar ut med högteknologiska vibe. Det finns ett kontrollcenter som uppmuntrar dig att spela med sådana attribut som radien av ett cylindriskt moln, tätheten av rör, höjd, skala och mer. Konceptet är fascinerande.
Vattenskuggning
Den här artisten har lyckats imitera en vattenyta genom att imitera det naturliga beteendet hos vätska. Den konvexa formen och böljande ytan med solreflektioner som slutgiltiga rörelser återskapar en verkligt realistisk scen som fångar ögat från första sekunden.
WebGL Particle Head
Som de var när Flash var framgångsrik, är partiklar hela rasen nuförtiden. Animationer av olika storlek och typ kan ses i många projekt, och detta jobb är en sådan. Den subtila versionen av ett huvud som vagt påminner om en intelligent mänsklig robot från Isaac Asimovs romaner är ett sant mästerverk. Inte bara förverkligar förverkligandet, utan även dess beteende. Det reagerar på musrörelser, naturligt lutande huvud till höger, vänster, upp och ner.
Dynamisk 3D Confetti Text
Texteffekt är ett sätt att krydda upp tråkiga gränssnitt med en anmärkning av lekfullhet och kyla samt betona den nödvändiga bokstaven. Rachel Smiths konfetti-inspirerad lösning kommer säkert att bidra till att berika designen med ljusa känslor och placera titeln i mitten av scenen. Skriv ett ord i inmatningsfältet nedan för att se hela magiken. Levande och levande 3D geometriska bitar kommer att forma förfrågan och göra resultatet snyggt interaktivt.
3D Panorama Viewer
Three.js kommer till nytta i gemensamma projekt som Max Chuhryaev bevisar. Hans lösning enkelt omvandlar panoramabilder till en viktig detalj i användarupplevelsen. Det har ett trevligt perspektiv och sakta rörande kamera: tillsammans gör de dig till en del av kompositionen. Det går bra med landskap, stadsbilder och interiörer, vilket gör det möjligt för användarna att njuta av skönheten i statisk multimedia.
Triangle Pattern Generator
Detta experiment ger dig en fantastisk polygonal bakgrund med en härlig 3D-känsla. Det fungerar också som en lekplats där du kan göra vissa områden ljusare och andra dimmer: använd bara musen. Alternativpanelen gör att du kan ställa in en hel del detaljer på duken inklusive ljus, nät, render och till och med exportinställningar.