5 gode eksempler på WebGL

Har brug for lidt webdesign inspiration ? Her er nogle af de bedste eksempler på WebGL-brug, som vi har set i løbet af de få måneder.

01. Brakebills University

WebGL: Brakebills University



bedste køb point og skyde kameraer
UNIT9 oprettede dette interaktive sted for at ledsage The Magicians

Da NBCUniversal nåede ud til ENHED9 at skabe en interaktiv anden skærmoplevelse til den nye Syfy-serie The Magicians, en af ​​de udfordringer, de blev præsenteret for, var at tænke på en magisk lektion for hver episode. Målet var at skabe et websted, der var mere informativt end spillignende, men stadig tilbød masser af udfordringer og indhold, som brugeren kunne opdage.



I tæt samarbejde med Syfy oprettede teamet på UNIT9 13 spil til 'Magic lektioner' delen af ​​hjemmesiden. Disse kan afspilles på alle enheder og tilpasses til den pågældende enhed.

'Udfordringen på den teknologiske side var at opbygge selvstændige spil til de 13 lektioner, som hver krævede forskellige teknologier - fra AngularJS og WebGL til 3D-animationer,' siger UNIT9s Ligia Stan.



Når hver episode er sendt, kan brugeren vende tilbage til webstedet og tage en anden lektion samt lære mere om tegnene. Holdet havde brug for at sikre, at koden, kopien og aktiverne blev tilgængelige på samme tid, som episoden blev sendt, hvilket betød at finde en brugerdefineret måde at frigive indhold ud over klassiske CMS'er. Dette var holdets største udfordring, men resultatet er et af de bedre eksempler af sin art.

02. En kort rejse

WebGL: En kort rejse

En kort rejse, af cher ami

En kort rejse blev født i sommeren 2015, da holdet i Kære ven tog en pause fra klientarbejde for at samarbejde med 3D-kunstner Benoît Challand. Først skulle det være en kortfilm, men det blev til en interaktiv historie om en rejse til havet, da teamet indså, at et websted kunne involvere brugeren mere.



'Vi designede nogle elementer i 3D med Cinema 4D og andre elementer i 2D med Photoshop. Ideen var altid at få et nyt design ved at kombinere moderne teknologi og klassiske teknikker, 'siger grundlægger Jean-Frédéric Passot. 'Vi brugte WebGL til at genskabe hver scene i 3D, og ​​selvom der er mange vanskelige tekniske aspekter på dette websted, var målet altid at tilbyde en dejlig følelse af en solrig rejse.'

Webstedet blev lanceret som lykønskningskort til det nye år for at varme klienter op på kolde vinterdage. En kort rejse er et simpelt, men dejligt eksempel på, hvordan interaktivitet kan bruges til at bevæge en oplevelse sammen.

03. Histografi

WebGL: Histografi

Histografi, af Matan Stauber

Histografi - israelsk designer og udvikler Dræb Stauber Det sidste årsprojekt på Bezalel Academy of Arts and Design - er en interaktiv tidslinje, der strækker sig over ikke færre end 14 milliarder år, fra Big Bang til i dag. Bogstaveligt talt strækker sig sig over hele det kendte universes historie og er en enorm, interaktiv infografik, der udfordrer vores forestillinger om, hvordan vi kommunikerer komplekse emner.

Histografiens tidslinje, der dækker emner lige fra litteratur og musik til mord, opfindelser og religion, inviterer os til at udforske begivenheder fra vores rige fortid, hver dynamisk trukket fra Wikipedia og repræsenteret på skærmen som en lille sort prik. Der er to tilstande: den vandrette, venstre-til-højre-visning, der giver brugeren mulighed for at komme hjem i en bestemt tidsperiode; eller den helixlignende tidsmaskine, der præsenterer en kurateret liste over vigtige begivenheder.

Stauber siger, at han altid har været fascineret af ideen om at vise historie udfolde sig over tid: 'Tidslinjer er den mest populære måde at visualisere historien på, og alligevel følte jeg, at de altid var meget begrænsede. Fra starten af ​​dette projekt vidste jeg, at jeg ville skabe en tidslinje, der ikke er begrænset til et år, årti eller en periode. Jeg ønskede en tidslinje, der kunne indeholde al historie. '

04. Deutser

WebGL: Deutster

huion h610 pro grafisk tegning tablet anmeldelse
Deutser, af We Can't Stop Thinking

Websteder med professionelle tjenester står over for en særlig kommunikationsudfordring: der er intet håndgribeligt objekt at fremvise. Når du opretter et nyt websted til rådgivning Deutser, Vi kan ikke stoppe med at tænke behov for at finde ud af, hvordan man destillerer en bred vifte af tjenester til en enkelt kernefordel.

Holdet besluttede at fokusere på ideen om, at Deutser leverer klarhed i en usikker verden. 'De spredte partikler repræsenterer kaos - noget mange virksomheder støder på i nutidens verden. Klarhed er repræsenteret af partiklerne, der kommer sammen for at danne noget af mening, 'forklarer kreativ direktør Nicholas Scimeca.

Metaforen er så klar som budskabet er stærk. Det var en anden udfordring at sikre, at oplevelsen fungerede problemfrit på tværs af enheder. 'Partiklerne er bygget ved hjælp af WebGL-lærred ved hjælp af three.js til forenkling. Vi byggede et brugerdefineret animations- og køsystem, som gav os mere kontrol over animation, overgange og billeder pr. Sekund, ”tilføjer Scimeca.

05. Halo Visualizer

WebGL: Hej

Halo Vizualizer, af Active Theory

Dette site til videospil-franchise Halo har sådan en ekstraordinær navigationsstruktur. Brugeren bevæger sig gennem en intuitiv, tidslinjeagtig visning med brudte stykker af Halo-hjelme, der fungerer som brugerinddragelser i spillet.

'Vi brugte WebGL-partikler, der bruger en 3D-model til at danne formen på spilkarakterens hjelme, 3D CSS til at animere i stykker brugerindhold og Canvas til at tegne og animere tidslinjen i bunden,' siger Rachel Smith, interaktiv. udvikler hos Aktiv teori . 'Det er et godt eksempel på at kombinere webteknologier afhængigt af, hvad grænsefladen har brug for.'

Den mystiske splintring og genopbygning af elementer kan være desorienterende, men føles i stedet helt flydende. Den lette vipning af brugerhistorierne og endda elementer som kontaktmodeller forener design og bevægelse på tværs af alle dele af webstedet. Den rumlige atmosfære bliver et sprog i sig selv.

Bidragydere: Espen Brunberg , Sarah Drasner