5 suurepärast näidet WebGL-ist

Vaja natuke veebidisaini inspiratsioon ? Siin on mõned parimad näited WebGL-i kasutamisest, mida oleme mõne kuu jooksul näinud.

01. Brakebillsi ülikool

WebGL: Brakebillsi ülikool

UNIT9 lõi selle interaktiivse saidi The Mustkunstnike saatel

Kui NBCUniversal jõudis Ühik9 interaktiivse teise ekraanikogemuse loomiseks uuele Syfy sarjale The Magicians, oli üks väljakutseid, mis neile esitati, oli mõelda välja maagiline õppetund iga episoodi jaoks. Eesmärk oli luua veebisait, mis oleks informatiivsem kui mängulaadne, kuid pakuks kasutajale siiski palju väljakutseid ja sisu.

Tihedas koostöös Syfyga lõi UNIT9 meeskond veebisaidi osa „Maagilised õppetunnid” jaoks 13 mängu. Neid saab mängida kõigis seadmetes ja kohandada kõnealuse seadmega.

'Tehnoloogilise väljakutse oli eraldiseisvate mängude ehitamine 13 õppetundi jaoks, mis nõudsid igaüks erinevat tehnikat - alates AngularJS-ist ja WebGL-ist kuni 3D-animatsioonideni,' ütleb UNIT9 juht Ligia Stan.

Pärast iga osa eetrisse jõudmist saab kasutaja saidile naasta ja erineva õppetunni teha ning tegelastest rohkem teada saada. Meeskond pidi tagama, et kood, koopia ja varad oleksid juurdepääsetavad samal ajal, kui episood eetrisse jõudis, mis tähendas kohandatud viisi sisu leidmiseks, välja arvatud klassikalised CMS-id. See oli meeskonna suurim väljakutse, kuid tulemus on üks paremaid näiteid omataolistest.

02. Lühike teekond

WebGL: lühike teekond

Lühike teekond, autor cher ami

Lühike teekond sündis 2015. aasta suvel, kui meeskond kell kallis sõber tegi klienditöös pausi, et teha koostööd 3D-kunstniku Benoît Challandiga. Algul pidi see olema lühifilm, kuid sellest sai interaktiivne lugu teekonnast mere äärde, kui meeskond mõistis, et veebisait võib kasutajat rohkem kaasata.

„Kujundasime mõned elemendid 3D-s Cinema 4D-ga ja teised elemendid 2D-s Photoshopiga. Idee oli alati saada värske kujundus, kombineerides kaasaegset tehnoloogiat ja klassikalisi tehnikaid, ”ütleb asutaja Jean-Frédéric Passot. 'Me kasutasime WebGL-i iga stseeni 3D-vormingus loomiseks ja isegi kui sellel veebisaidil on palju keerulisi tehnilisi aspekte, oli eesmärk alati pakkuda mõnusat päikeselise reisi tunnet.'

Veebileht avati uue aasta õnnitluskaardina klientide soojendamiseks külmadel talvepäevadel. Lühike teekond on lihtne, kuid armas näide sellest, kuidas interaktiivsust saab kasutada kogemuse edasiliikumiseks.

03. Histograafia

WebGL: histograafia

Histograafia, autor Matan Stauber

Histograafia - Iisraeli disainer ja arendaja Tapa Stauber Bezaleli kunsti- ja disainiakadeemia viimase aasta projekt on interaktiivne ajaskaala, mis hõlmab vähemalt 14 miljardit aastat, alates Suurest Paugust kuni tänapäevani. Sõna otseses mõttes kogu tuntud universumi ajaloo ulatuses on see tohutu interaktiivne infograafik, mis seab kahtluse alla meie eelarvamused keeruliste subjektide suhtlemiseks.

Käsitledes teemasid alates kirjandusest ja muusikast kuni mõrvade, leiutiste ja religioonini, kutsub Histograafia ajaskaala meid uurima sündmusi meie rikkast minevikust, millest igaüks on dünaamiliselt tõmmatud Vikipeediast ja mida ekraanil on kujutatud väikese musta punktina. On kaks režiimi: horisontaalne, vasakult paremale vaade, mis võimaldab kasutajal kindlal ajaperioodil koju minna; või heeliksitaoline ajamasin, mis esitab põhisündmuste kureeritud loendi.

Stauberi sõnul on teda ajaloo näitamise mõte alati paelunud: „Ajajooned on ajaloo visualiseerimise kõige populaarsem viis ja ometi tundsin, et need on alati väga piiratud. Selle projekti algusest peale teadsin, et tahan luua ajaskaala, mis ei piirdu aasta, kümnendi või perioodiga. Tahtsin ajaskaalat, mis võiks sisaldada kogu ajalugu. '

04. Deutser

WebGL: Deutster

Deutser, me ei saa mõtlemist lõpetada

Professionaalsete teenuste saidid seisavad silmitsi konkreetse kommunikatsiooniprobleemiga: pole ühtegi käegakatsutavat objekti, mida näidata. Uue saidi loomiseks nõustamiseks Deutser, Me ei saa mõtlemist lõpetada vaja välja mõelda, kuidas destilleerida laia valikut teenuseid üheks põhiliseks eeliseks.

Meeskond otsustas keskenduda ideele, et Deutser pakub selgust ebakindlas maailmas. 'Hajutatud osakesed esindavad kaost - seda on paljud ettevõtted tänapäeva maailmas kohanud. Selgust esindavad osakesed, mis koos moodustavad midagi tähenduslikku, ”selgitab loovjuht Nicholas Scimeca.

Metafoor on sama selge kui sõnum tugev. Teine väljakutse oli tagada, et kogemus toimiks sujuvalt kõigis seadmetes. 'Osakesed ehitatakse WebGL-i lõuendi abil, lihtsustamiseks saidi three.js abil. Ehitasime kohandatud animatsiooni- ja järjekorrasüsteemi, mis võimaldas meil animatsiooni, üleminekute ja kaadrite üle sekundis rohkem kontrollida, 'lisab Scimeca.

05. Halo visualiseerija

WebGL: Tere

Halo Vizualizer, aktiivse teooria autor

Sellel videomängude frantsiisi Halo saidil on nii erakordne navigeerimisstruktuur. Kasutaja liigub intuitiivse, ajaskaalal kuvatud vaate kaudu, kusjuures Halo kiivrite murdunud tükid toimivad mängu kasutajaks.

'Kasutasime WebGL-i osakesi, mis kasutasid 3D-mudelit, et moodustada mängutegelaste kiivrid, 3D-CSS-i kasutajate sisutükkide animeerimiseks ja lõuendit, et joonistada ja animeerida ajaskaala allosas,' ütleb interaktiivne Rachel Smith arendaja aadressil Aktiivne teooria . 'See on hea näide veebitehnoloogiate kombineerimisest sõltuvalt liidese vajadustest.'

Elementide salapärane purustamine ja ülesehitamine võib olla orienteeriv, kuid tunneb end selle asemel täiesti voolavana. Kasutajalugude ja isegi selliste elementide nagu kontaktmoodulid väike kallutamine ühendab disaini ja liikumist saidi igas osas. Ruumiline atmosfäär muutub omaette keeleks.

Kaastöötajad: Espen Brunberg , Sarah Drasner