9 briljantnih primjena 3D-a u web dizajnu

3D na webu uistinu je stigao 2011. godine lansiranjem WebGL-a, JavaScript API-ja za prikazivanje 3D-grafika u kompatibilnom pregledniku bez upotrebe dodataka. I sljedeće su godine među web dizajnerima vidjeli puno uzbuđenja zbog mogućnosti 3D-a.

Taj je početni hype možda zamro posljednjih godina. No, razvoj internetskog 3D-a nastavio se ubrzano, a postoje i neke prilično impresivne implementacije; od vizuala 'wow faktor' koji djeluju uglavnom kao dokaz koncepta, do promišljene upotrebe 3D-a koja je usmjerena na stvaranje sjajnog web iskustva.



U ovom postu navodimo neke nedavne upotrebe 3D-a na webu (neke male i suptilne, neke drečave i epske) za nadahnuće vlastitih projekata. Oh, i ako se 3D dobro primijeti u divljini, podijelite vezu u komentarima.



01. Acko.net

Dugo i zavojito zaglavlje web stranice programera Stevea Wittensa

Dugo i zavojito zaglavlje web stranice programera Stevea Wittensa

Ako tražite primjer onoga što 3D temeljen na pregledniku može donijeti na web, ne trebate tražiti dalje od Acko.net, osobne stranice web programera Stevena Wittensa. Sadrži prekrasno animirano zaglavlje nadahnuto uličnom umjetnošću; to je jednostavna ideja, ali prekrasno izvedena.



Wittens ga je stvorio koristeći kombinaciju CSS 3D i WebGL. 'Uvijanje svake vrpce ne generira se proizvoljno, već matematički izvodi', objašnjava. „Utjelovljuje diferencijalni princip paralelnog prijevoza. Smjer prema gore mijenja se paralelno sa svakom krivuljom, što znači da se vrpce nikad ne okreću na mjestu. Okreću se samo kad to prirodno žele. Stoga dizajn ima vlastitu volju. '

Možete pročitati cijelu priču o tome kako ga je sastavio ovaj post na blogu . A ako animacija ne radi u vašem pregledniku, možete je provjeriti u ovaj video .

02. Campo Alle Comets

Uđite u fantastičan svijet putem ove nagrađivane vinske web stranice



Uđite u fantastičan svijet putem ove nagrađivane vinske web stranice

Otkako je pokrenuta u veljači, ova je web stranica već osvojila hrpu nagrada i nije teško shvatiti zašto. Stvoren za promociju talijanskog vina Campo Alle Comete, prikazuje 3D plutajući grad, 'u kojem se napokon mogu sresti snovi i magija'. Maštovite osobine dizajna, udružene s glatkošću izvedbe, poprilično su zapanjujuće, a doista je radost mahati ovim fantastičnim svijetom pomoću miša.

  • 7 novih alata za grafički dizajn koji će vam olakšati život

Izgradili talijanski studiji Ovaj i Monogrid , ova briljantna upotreba 3D-a na webu stvorena je pomoću WebGL-a i GSAP-a zajedno s three.js i AngularJS.

03. Stripe.com

Jednostavna, ali učinkovita implementacija 3D-a na web mjestu platforme za plaćanje Stripe

promijeniti veličinu slike zadržati omjer slike
Jednostavna, ali učinkovita implementacija 3D-a na web mjestu platforme za plaćanje Stripe

Puno jednostavnija implementacija 3D-a, ovaj interaktivni rotirajući ikosaedar ipak je vrlo učinkovit u prezentiranju niza opcija izbornika na hladan i originalan način. Predstavljen na web mjestu platforme za plaćanje Stripe, dizajnirao ga je Bill Labus, na temelju ideje o Krithiki Muthukumaru, koja radi na marketingu proizvoda u Stripeu.

'Zamišljala je način kako vizualno predstaviti Stripe naboj iz perspektive radara, koji koristi strojno učenje za bodovanje dolaznih naboja i predviđanje vjerojatnosti da su oni legitimni ili lažni', objašnjava Labus. 'Strojno učenje po svojoj je prirodi prilično apstraktno, pa se 3D objekt činio učinkovitim načinom da koncept postane opipljiviji.'

Strojno učenje po svojoj je prirodi prilično apstraktno, pa se 3D objekt činio učinkovitim načinom da koncept postane opipljiviji

Bill Labus

Primarna tehnologija koja se koristi za to je WebGL, iako je API prilično niske razine, kaže Labus. “Odabrali smo three.js kao okvir više razine koji apstrahira preko WebGL-a i olakšava učitavanje objekata, postavljanje rasvjete i materijala i još mnogo toga. Zapravo, imali smo dovoljno sreće da smo ustanovili da three.js uključuje ikosaedar prema zadanim postavkama kao jedan od njegovih ugrađenih primitiva.

“Početna verzija jednostavno je koristila ugrađeni primitiv. Međutim, kasnije smo zaključili da želimo da zaobljeni rubovi na obliku bolje odgovaraju postojećoj 3D estetskoj uporabi negdje drugdje pruga.com , pa smo prikazali zaobljeni ikosaedar u Cinema4D i učitali ga kao objekt u three.js. Oznake vrhova koje predstavljaju različite atribute naboja ne prikazuju se u 3D okruženju, već kao normalni HTML elementi iznad 3D platna. To je trebalo osigurati najkvalitetnije prikazivanje teksta i ujedno olakšati lokalizaciju.

„Prilikom animiranja ikosaedra izračunavamo položaje vrhova, kao i jesu li trenutno vidljivi ili su prikriveni iza objekta, a zatim koristimo te podatke za pozicioniranje i prikazivanje / skrivanje elemenata naljepnice.

najbolja kamera za film i snimanje

“Još jedan element koji se ne prikazuje u 3D okruženju je sjena koju baca objekt. Budući da je dovoljno difuzan, uspjeli smo jednostavno zamagliti a iza 3D platna, a da nije primjetno da oblik sjene ne odgovara savršeno obliku ikosaedra. To je učinjeno prvenstveno iz razloga izvedbe, jer su velike, difuzne sjene tipično jedan od skupljih efekata koji se generiraju, posebno unutar animacijske petlje. '

04. Diane martel

S ovim rotirajućim naslovima s pomicanjem zabavno se igrati

S ovim rotirajućim naslovima s pomicanjem zabavno se igrati

Tekst na webu u stilu Ratova zvijezda vidjeli smo već prije, ali nikad ovako. Web stranica američke redateljice i koreografkinje glazbenog spota Diane Martel (najpoznatije po videu 'Zamućene crte') koristi uređaj s velikim učinkom za prikazivanje naslova svog djela na svojoj početnoj stranici.

Koristite miš da biste ih okretali i rotirali dok se kreću, zadržite pokazivač iznad naslova da biste otkrili još fotografija ili kliknite na cijelu stranicu. Ovu živopisnu i impresivnu stranicu dizajnirao je Ben Wegsheider , čija vlastita web stranica sadrži i prilično lijepe 3D trikove.

05. OS karte

Karte Anketa o naoružanju postaju 3D

Karte Anketa o naoružanju postaju 3D

Od zabavne i neozbiljne upotrebe 3D-a do cjelovite, funkcionalne. Jučer je Ordnance Survey, britanska nacionalna agencija za mapiranje i jedan od najvećih svjetskih proizvođača karata, svojim nagrađivanim OS kartama dao veliko ažuriranje, uvodeći precizno 3D mapiranje britanskog sela.

Voljeni od šetača, biciklista i drugih koji prelaze brda i doline Velike Britanije, OS Maps dostupan je putem weba i kao aplikacija. 'U njemu je pohranjeno više od 750.000 ruta, a 3D element značit će da možete bolje vidjeti rute i steći ideju je li ruta dostižna', otkriva službenik za tisak Keegan Wilson.

3D mapiranje, izrađeno u spektakularnim detaljima pomoću nevjerojatno preciznih lasera, dostupno je putem weba samo pretplatnicima OS Mapsa. Međutim, svi koji žele istražiti i razgledati to mogu učiniti kroz sedmodnevno besplatno probno razdoblje.

06. Zemlja 2050

Kaspersky predstavlja budućnost Zemlje, koristeći interaktivni 3D globus

Kaspersky predstavlja budućnost Zemlje, koristeći interaktivni 3D globus

Kako bi proslavio 20. godišnjicu, sigurnosni div Kaspersky pokrenuo je interaktivni projekt koji poziva korisnike da razgovaraju o svijetu budućnosti, mogućnostima koje donosi i prijetnjama koje bi mogao izazvati. U njegovom je središtu Zemlja 2050, cool mjesto koje je sagradio moskovski studio Moguće koji poziva dizajnere i ilustratore da svoje vizije budućnosti prenesu putem interaktivnog portala.

kako napraviti pranje akrilnom bojom

Na početnoj stranici nalazi se rotirajući planet Zemlja podijeljen u zemljopisna područja, od kojih svaki uključuje prognozu za određeni aspekt života 2050. godine. Bilo koji dizajner, ilustrator ili umjetnik može poslati svoj rad, a građani mogu komentirati vjeruju li da će se određene prognoze ostvariti.

'Naš koncept nadahnut je Google Street Viewom i računalnim igrama poput NLO-a i Civilizacije, kao i futurističkim izgledima samog Kaspersky Laba', objašnjavaju iz tima Possible. 'Globus je stvarao koristeći izvorne WebGL, HTML5, CSS3, JS, WebGL i PHP 7. Izgradnja frontenda uključivala je optimizaciju propusnosti i standardno predmemoriranje preglednika, module sadržaja, kodiranje, WebGL module s planetom, pregledavanje i uređivanje panorame.'

07. Titouan Mathis

Programer Titouan Mathis oživljava svoje osobno web mjesto zabavnom serijom animacija

Programer Titouan Mathis oživljava svoje osobno web mjesto zabavnom serijom animacija

Titouan Mathis, web programer sa sjedištem u Strasbourgu u Francuskoj, ima vrlo jednostavnu web stranicu koju koristi za povezivanje sa stranicama svog Twittera, Instagrama i poslodavca Studio Meta. Ali on to oživljava zabavnim prskanjem interaktivnog, animiranog 3D-a: tri neprestano spiralna uzorka koja izgledaju super-stilski i s kojima se jednostavno ne možete ne poigrati.

'Inspiracija mi je uglavnom dolazila od stvari s kojima se susrećem tijekom dana', objašnjava Mathis. “Ponekad se sve te stvari pomiješaju i ideja mi se pojavi u glavi. Pokušat ću ga ponovno stvoriti i poigrati se oblicima kako bih pronašao lijepe načine interakcije s njima. '

Sve tri animacije izrađene su s HTML-om, CSS-om i JavaScript-om, a Vue.js pomaže u strukturi, a kôd je dostupan na GitHub ako želite provjeriti. 'Najveći tehnički izazov bile su performanse', dodaje Mathis. „Moje poznavanje HTML-a, CSS-a i JavaScript-a omogućuje brzo prototipiranje ideja, ali animiranje puno DOM elemenata može brzo postati prilično teško za preglednik. Moje sljedeće animacije sigurno će biti stvorene s Three.js ili sličnom bibliotekom. '

08. Mađioničari 2. sezona

Krećite se fantazijskim svijetom Mađioničara na ovoj stranici koju je izradio Unit 9

Krećite se fantazijskim svijetom Mađioničara na ovoj stranici koju je izradio Unit 9

Na drugu interaktivnu mapu, ovaj put za izmišljeni svijet fantastične TV emisije Čarobnjaci. UK agencija Jedinica 9 Tim programera koristio je Three.js, WebGL i GLSL za razvoj ove sjajno interaktivne karte na kojoj korisnici mogu započeti zadatke i otkriti više o drugoj sezoni. Od fantastičnih bića do drevnih bogova, svaka tjedna potraga odražava temu svake epizode. Čak i ako ne gledate emisiju, ovu obimnu upotrebu web 3D-a itekako vrijedi posjetiti.

09. Potraga za zvukom

Zabavna i luda igra francuskog studija Biborg

Zabavna i luda igra francuskog studija Biborg

Završit ćemo s nečim što je jednostavno zabavno. Izbjegavajte prepreke, uhvatite predmete i stvorite vlastiti soundtrack kroz svoje ludo glazbeno trčanje, u ovom ludom WebGL eksperimentu. Namijenjen i povremenom korisniku stolnih računala / mobilnih uređaja i ljubitelju VR-a (kompatibilan je s Google Cardboardom), ovo je sjajna izložba za 3D pametne kreativne agencije Pariza Biborg . Svaki put kad je igrate, okruženja su različita, a to izaziva veliku ovisnost ... budite upozoreni!