5 upeaa esimerkkiä WebGL: stä

Tarvitsevat vähän inspiraatiota web-suunnitteluun ? Tässä on joitain parhaita esimerkkejä WebGL: n käytöstä, joita olemme nähneet muutaman kuukauden aikana.

01. Brakebillsin yliopisto

WebGL: Brakebillsin yliopisto



kuinka poistaa alueen valinta Photoshopissa
UNIT9 loi tämän interaktiivisen sivuston Taikureiden seuraan

Kun NBCUniversal otti yhteyttä YKSIKKÖ9 luoda uuden interaktiivisen toisen näytön kokemus uudelle Syfy-sarjalle The Magicians, yksi haasteista, joita heille esitettiin, oli ajatella taikaopetusta jokaiselle jaksolle. Tavoitteena oli luoda verkkosivusto, joka oli informatiivisempi kuin pelimainen, mutta tarjosi silti paljon haasteita ja sisältöä, jonka käyttäjä voi löytää.



Tiivissä yhteistyössä Syfyn kanssa UNIT9: n tiimi loi 13 peliä verkkosivuston taikatunteja varten. Näitä voidaan toistaa kaikilla laitteilla ja mukauttaa kyseiseen laitteeseen.

'' Teknologisen puolen haaste oli itsenäisten pelien rakentaminen 13 oppitunnille, jotka kumpikin vaativat eri tekniikkaa - AngularJS: stä ja WebGL: stä 3D-animaatioihin '', kertoo UNIT9: n Ligia Stan.



Jokaisen jakson lähetyksen jälkeen käyttäjä voi palata sivustolle ja ottaa uuden oppitunnin sekä oppia lisää hahmoista. Tiimin oli varmistettava, että koodi, kopio ja resurssit ovat käytettävissä samalla kun jakso ilmestyi, mikä tarkoitti mukautetun tavan löytämistä sisällön julkaisemiseksi perinteisten CMS: ien lisäksi. Tämä oli joukkueen suurin haaste, mutta tulos on yksi parempia esimerkkejä.

02. Lyhyt matka

WebGL: Lyhyt matka

Lyhyt matka, kirjoittanut cher ami

Lyhyt matka syntyi kesällä 2015, jolloin joukkue rakas ystävä otti tauon asiakastyöstä ja teki yhteistyötä 3D-taiteilija Benoît Challandin kanssa. Aluksi sen piti olla lyhytelokuva, mutta siitä tuli vuorovaikutteinen tarina matkasta merelle, kun tiimi tajusi, että verkkosivusto voisi saada käyttäjän mukaan enemmän.



'Suunnittelimme joitain 3D-elementtejä Cinema 4D: llä ja muita 2D-elementtejä Photoshopilla. Ajatuksena oli aina saada uusi muotoilu yhdistämällä nykyaikainen tekniikka ja klassinen tekniikka '', sanoo perustaja Jean-Frédéric Passot. 'Käytimme WebGL: ää luomaan jokaisen kohtauksen 3D: nä, ja vaikka tällä verkkosivustolla onkin paljon hankalia teknisiä näkökohtia, tavoitteena oli aina tarjota mukava tunne aurinkoisesta matkasta.'

Sivusto avattiin uuden vuoden onnittelukorttina asiakkaiden lämmittämiseksi kylminä talvipäivinä. Lyhyt matka on yksinkertainen mutta ihana esimerkki siitä, miten vuorovaikutteisuutta voidaan käyttää kokemuksen siirtämiseen eteenpäin.

03. Histografia

WebGL: Histografia

Histografia, kirjoittanut Matan Stauber

Histografia - Israelin suunnittelija ja kehittäjä Tapa Stauber Viimeisen vuoden projekti Bezalelin taideakatemiassa - interaktiivinen aikajana, joka ulottuu vähintään 14 miljardiin vuoteen Suuresta Bangista nykypäivään. Kirjaimellisesti ulottuu tunnetun maailmankaikkeuden koko historiaan, ja se on valtava, interaktiivinen infografiikka, joka haastaa ennakkoluulomme monimutkaisten aiheiden kommunikoinnista.

Histografian aikajana kattaa aiheita kirjallisuudesta ja musiikista salamurhiin, keksintöihin ja uskontoon. Kukin historia kutsuu meitä tutkimaan tapahtumia rikkaasta menneisyydestämme, joista jokainen on dynaamisesti vedetty Wikipediasta ja edustettuina näytöllä pienenä mustana pisteenä. On olemassa kaksi tilaa: vaakasuora, vasemmalta oikealle -näkymä, jonka avulla käyttäjä voi palata kotiin tiettynä ajanjaksona; tai kierukkamainen aikakone, joka esittää kuratoidun luettelon tärkeimmistä tapahtumista.

Stauber sanoo, että ajatus historian näyttämisestä on aina ollut kiehtonut: 'Aikajanat ovat suosituin tapa visualisoida historiaa, ja minusta tuntui, että ne olivat aina hyvin rajallisia. Tämän projektin alusta alkaen tiesin, että halusin luoda aikataulun, joka ei rajoitu vuoteen, vuosikymmeneen tai ajanjaksoon. Halusin aikajanan, joka voisi sisältää kaiken historian. '

04. Deutser

WebGL: Deutster

Deutser, Emme voi lopettaa ajattelua

Asiantuntijapalvelusivustot kohtaavat erityisen viestintähaasteen: ei ole konkreettista esinettä, jota esitellä. Kun luot uutta sivustoa konsulttiyritykselle Deutser, Emme voi lopettaa ajattelua tarvitaan selvittämään, kuinka laaja valikoima palveluja tislataan yhdeksi keskeiseksi hyödyksi.

Tiimi päätti keskittyä ajatukseen, että Deutser tarjoaa selkeyttä epävarmassa maailmassa. Hajautuneet hiukkaset edustavat kaaosta - mitä monet yritykset kohtaavat nykymaailmassa. Selkeyttä edustavat hiukkaset, jotka yhdessä muodostavat jotain merkityksellistä '', kertoo luova johtaja Nicholas Scimeca.

Metafora on yhtä selkeä kuin viesti on vahva. Toinen haaste oli varmistaa, että kokemus toimii saumattomasti kaikissa laitteissa. 'Hiukkaset rakennetaan WebGL-kangasta käyttäen yksinkertaistamiseksi three.js: n avulla. Rakensimme mukautetun animaatio- ja jonojärjestelmän, joka antoi meille paremman hallinnan animaatioihin, siirtymiin ja kehyksiin sekunnissa '', Scimeca lisää.

05. Halo Visualizer

WebGL: Hei

mitä animaatio-ohjelmistoja ruwby käyttää
Halo Vizualizer, kirjoittanut Active Theory

Tällä Halo-videopelien franchising-sivustolla on niin poikkeuksellinen navigointirakenne. Käyttäjä liikkuu intuitiivisen, aikajanalla esillä olevan näkymän läpi, ja murtuneet Halo-kypärät toimivat pelin käyttäjän sitouttamisena.

'Käytimme WebGL-hiukkasia, jotka 3D-mallin avulla muodostavat pelihahmojen kypärän muodon, 3D CSS: n animoidakseen käyttäjän sisällön paloja ja Canvasia piirtääkseen ja animoidaksemme aikajanan alareunassa' ', kertoo vuorovaikutteinen Rachel Smith kehittäjä osoitteessa Aktiivinen teoria . 'Se on hyvä esimerkki verkkoteknologioiden yhdistämisestä riippuen siitä, mitä käyttöliittymä tarvitsee.'

Elementtien salaperäinen pirstoutuminen ja uudelleenrakentaminen voi olla hämmentävää, mutta sen sijaan tuntuu täysin sujuvalta. Käyttäjätarinoiden ja jopa elementtien, kuten kontaktimoodien, pieni kallistuminen yhdistää suunnittelun ja liikkeen sivuston jokaisessa osassa. Paikkatunnelmasta tulee kieli itsessään.

Avustajat: Espen Brunberg , Sarah Drasner