9 vynikajúcich spôsobov využitia 3D vo webovom dizajne

3D na webe skutočne dorazil v roku 2011 uvedením produktu WebGL, rozhrania JavaScript API na vykreslenie 3D grafiky v kompatibilnom prehliadači bez použitia doplnkov. A nasledujúce roky zaznamenali medzi webdizajnérmi veľa vzrušenia pre možnosti 3D.

Tento počiatočný humbuk mohol v posledných rokoch utíchnuť. Vývoj online 3D však pokračoval rýchlym tempom a existujú niektoré celkom pôsobivé implementácie; od vizuálov „wow factor“, ktoré slúžia hlavne ako dôkaz koncepcie, až po premyslené využitie 3D, ktoré je zamerané na vytvorenie skvelého webového zážitku.

V tomto príspevku uvádzame niektoré nedávne použitia 3D na webe (niektoré malé a jemné, iné honosné a epické) na inšpirovanie vašich vlastných projektov. Áno, a ak ste vo voľnej prírode spozorovali veľké využitie 3D, zdieľajte odkaz v komentároch.



01. Acko.net

Dlhá a kľukatá hlavička pre web vývojára Steva Wittensa

Dlhá a kľukatá hlavička pre web vývojára Steva Wittensa

Ak hľadáte príklad toho, čo 3D na báze prehliadača môže priniesť na web, nemusíte hľadať nič iné ako Acko.net, osobný web webového vývojára Stevena Wittensa. Obsahuje krásnu animovanú hlavičku inšpirovanú pouličným umením; je to jednoduchý nápad, ale úžasne vykonaný.

Wittens ho vytvoril pomocou kombinácie CSS 3D a WebGL. „Krútenie každej pásky nie je generované ľubovoľne, ale matematicky odvodené,“ vysvetľuje. „Stelesňuje diferenciálny princíp paralelnej dopravy. Smer nahor sa mení rovnobežne s každou krivkou, čo znamená, že pásky sa nikdy neotáčajú na danom mieste. Otáčajú sa iba vtedy, keď to prirodzene chcú. Dizajn má teda vlastnú vôľu. “

Môžete si prečítať celý príbeh, ako to dal dohromady tento príspevok na blogu . A ak animácia vo vašom prehliadači nefunguje, môžete si ju pozrieť v toto video .

02. Campo Alle Comets

Vstúpte do fantastického sveta prostredníctvom tohto oceňovaného webu o víne

Vstúpte do fantastického sveta prostredníctvom tohto oceňovaného webu o víne

Od svojho spustenia vo februári tento web už získal množstvo ocenení a nie je ťažké pochopiť prečo. Vytvorené na propagáciu talianskeho vína Campo Alle Comete, zobrazuje 3D plávajúce mesto, „kde sa konečne môžu stretnúť sny a mágia“. Imaginatívne kvality dizajnu, spojené s plynulosťou implementácie, sú dosť ohromujúce a je skutočne radosť preháňať sa po tomto fantastickom svete pomocou myši.

  • Sedem nových nástrojov na grafický dizajn, ktoré vám uľahčia život

Postavené talianskymi štúdiami Toto a Jednopriestorový , toto vynikajúce využitie 3D na webe bolo vytvorené pomocou WebGL a GSAP spolu s three.js a AngularJS.

03. Stripe.com

Jednoduchá, ale efektívna implementácia 3D na stránkach Stripe na platobnej platforme

najlepší externý pevný disk pre dj
Jednoduchá, ale efektívna implementácia 3D na stránkach Stripe na platobnej platforme

Oveľa jednoduchšia implementácia 3D, tento interaktívny, rotujúci ikosahedrón je napriek tomu veľmi efektívny pri chladnom a originálnom predstavení celej škály možností ponuky. Predstavený na webe Stripe na platobnej platforme, bol navrhnutý Billom Labusom na základe nápadu o Krithike Muthukumarovi, ktorý pracuje na produktovom marketingu v Stripe.

'Predstavovala si spôsob, ako vizuálne predstaviť poplatok Stripe z pohľadu Radaru, ktorý pomocou strojového učenia vyhodnocuje prichádzajúce poplatky a predpovedá pravdepodobnosť, že sú legitímne alebo podvodné,' vysvetľuje Labus. 'Strojové učenie je svojou povahou pomerne abstraktné, takže 3D objekt sa javil ako efektívny spôsob, ako urobiť tento koncept konkrétnejším.'

Strojové učenie je svojou podstatou dosť abstraktné, takže 3D objekt sa javil ako efektívny spôsob, ako urobiť koncept konkrétnejším

Bill Labus

Primárnou technológiou, ktorá sa na to používa, je WebGL, aj keď je to pomerne nízke API, hovorí Labus. „Vybrali sme si tri.js ako rámec vyššej úrovne, ktorý abstrahuje nad WebGL a zjednodušuje načítanie objektov, nastavenie osvetlenia a materiálov a ďalšie. V skutočnosti sme mali to šťastie, že sme zistili, že súbor tri.js štandardne obsahuje icosahedron ako jeden zo svojich zabudovaných primitívov.

'Pôvodná verzia jednoducho používala zabudovaný primitív.' Neskôr sme sa však rozhodli, že chceme, aby zaoblené hrany tvaru lepšie zodpovedali existujúcemu 3D estetickému použitiu inde stripe.com , takže sme v Cinema4D vykreslili zaoblený ikosahedrón a načítali sme ho ako objekt do súboru tri.js. Štítky vrcholov, ktoré predstavujú rôzne atribúty náboja, sa nevytvárajú v 3D prostredí, ale ako bežné prvky HTML nad 3D plátnom. To malo zabezpečiť najkvalitnejšie vykreslenie textu a tiež uľahčiť lokalizáciu.

„Pri animácii ikosahedónu vypočítame polohy vrcholov, ako aj to, či sú alebo nie sú momentálne viditeľné alebo skryté za objektom, a potom pomocou týchto informácií umiestnime a zobrazíme / skryjeme prvky štítka.

„Ďalším prvkom, ktorý sa nevytvára v 3D prostredí, je tieň vrhaný objektom. Pretože je dostatočne rozptýlený, mohli sme jednoducho rozmazať a za 3D plátnom bez toho, aby bolo viditeľné, že tvar tieňa úplne nezodpovedá tvaru ikosahedra. Toto bolo urobené predovšetkým z dôvodov výkonu, pretože veľké, rozptýlené tiene sú zvyčajne jedným z nákladnejších efektov na vykreslenie, najmä v rámci animačnej slučky. “

04. Diane Martel

S týmito otočnými a rolovanými titulmi je zábava hrať

Ako získať Adobe After Effects zadarmo 2019
S týmito otočnými a rolovanými titulmi je zábava hrať

Webový text v štýle úvodných titulkov Star Wars sme už videli, ale nikdy sa nám to nepáčilo. Webová stránka americkej režisérky a choreografky hudobného videa Diane Martelovej (známa predovšetkým pre video „Blurred Lines“) používa toto zariadenie s veľkým účinkom na prezentáciu názvov svojich diel na svojej domovskej stránke.

Pomocou myši ich pri rolovaní otáčajte a otáčajte, umiestnite kurzor myši na názov, aby ste odhalili ďalšie fotografie, alebo sa preklikajte na celú stránku. Túto farebnú a pôsobivú stránku navrhol Ben Wegsheider , ktorého vlastná webová stránka obsahuje aj niekoľko celkom šikovných 3D trikov.

05. Mapy OS

Mapy prieskumu arzenálu idú 3D

Mapy prieskumu arzenálu idú 3D

Od zábavného a ľahkovážneho používania 3D až po úplné a funkčné využitie. Včera spoločnosť Ordnance Survey, britská národná mapovacia agentúra a jeden z najväčších svetových producentov máp, priniesla svojmu oceňovanému OS Maps veľkú aktualizáciu a predstavila presné 3D mapovanie britského vidieka.

OS Mapy, ktoré obľubujú chodci, cyklisti a ďalší prechádzajúci po kopcoch a údoliach Spojeného kráľovstva, sú dostupné na webe a ako aplikácia. „Je v ňom uložených viac ako 750 000 trás a 3D prvok znamená, že trasy môžete lepšie vidieť a získať predstavu o tom, či je trasa dosiahnuteľná,“ prezrádza tlačový referent Keegan Wilson.

3D mapovanie, ktoré bolo skonštruované do pozoruhodných detailov pomocou neuveriteľne presných laserov, je k dispozícii na webe iba predplatiteľom OS Maps. Každý, kto chce vyšetrovať a pozrieť sa na to, to však môže urobiť prostredníctvom sedemdňovej bezplatnej skúšobnej verzie.

06. Zem 2050

Spoločnosť Kaspersky predstavuje budúcnosť Zeme pomocou interaktívnej 3D zemegule

Spoločnosť Kaspersky predstavuje budúcnosť Zeme pomocou interaktívnej 3D zemegule

Na oslavu 20. výročia spustil bezpečnostný gigant Kaspersky interaktívny projekt, ktorý vyzýva používateľov, aby diskutovali o svete budúcnosti, možnostiach, ktoré prináša, a hrozbách, ktoré by to mohlo spôsobiť. V jeho strede je Earth 2050, skvelé miesto postavené moskovským štúdiom Možné ktorý pozýva návrhárov a ilustrátorov, aby prostredníctvom interaktívneho portálu nahrali svoje vízie budúcnosti.

Domovská stránka obsahuje rotujúcu planétu Zem rozdelenú do geografických oblastí, pričom každá z nich obsahuje predpoveď určitého aspektu života do roku 2050. Každý dizajnér, ilustrátor alebo umelec môže nahrať svoje práce a verejnosť môže komentovať, či veria v splnenie určitých predpovedí.

ako používať textúry v

„Náš koncept bol inšpirovaný Google Street View a počítačovými hrami ako UFO a Civilization, ako aj futuristickým výhľadom samotnej spoločnosti Kaspersky Lab,“ vysvetľujú tím spoločnosti Možné. „Svet sa tvoril pomocou natívnych formátov WebGL, HTML5, CSS3, JS, WebGL a PHP 7. Budovanie frontendu zahŕňalo optimalizáciu šírky pásma a štandardné ukladanie do vyrovnávacej pamäte prehliadača, moduly obsahu, kódovanie, moduly WebGL s planétou, prehliadanie a úpravu panorámy.“

07. Titouan Mathis

Vývojár Titouan Mathis uvádza svoje osobné stránky do života zábavnou sériou animácií

Vývojár Titouan Mathis uvádza svoje osobné stránky do života zábavnou sériou animácií

Titouan Mathis, webový vývojár so sídlom vo francúzskom Štrasburgu, má veľmi jednoduchú webovú stránku, ktorú používa na prepojenie svojich webových stránok Twitter, Instagram a zamestnávateľa Studio Meta. Oživí to však zábavným splashom interaktívneho animovaného 3D: tromi neustále sa točiacimi vzormi, ktoré vyzerajú superštýlovo a pri ktorých sa jednoducho nemôžete pohrať.

„Inšpirácia pochádzala hlavne z vecí, na ktoré som počas dňa narazil,“ vysvetľuje Mathis. 'Niekedy sa všetky tieto veci zmiešajú a v hlave sa mi objaví nápad.' Pokúsim sa to znovu vytvoriť a pohrať sa s tvarmi, aby som našiel pekné spôsoby interakcie s nimi. “

Všetky tri animácie boli vytvorené pomocou formátu HTML, CSS a JavaScript, pričom štruktúre pomohol Vue.js. Kód je k dispozícii na GitHub ak si to chcete pozrieť. „Najväčšou technickou výzvou bol výkon,“ dodáva Mathis. „Moja znalosť HTML, CSS a JavaScriptu umožňuje rýchle prototypovanie nápadov, ale animácia mnohých prvkov DOM môže byť v prehliadači rýchlo ťažká. Moje ďalšie animácie budú určite vytvorené pomocou Three.js alebo podobnej knižnice. “

08. 2. sezóna kúzelníkov

Prejdite sa vo svete fantázie Kúzelníkov na tomto webe vytvorenom jednotkou 9

Prejdite sa vo svete fantázie Kúzelníkov na tomto webe vytvorenom jednotkou 9

Na ďalšiu interaktívnu mapu, tentokrát pre fiktívny svet modernej televíznej fantasy šou Kúzelníci. Britská agentúra 9. blok Tím programátorov použil program Three.js, WebGL a GLSL na vývoj tejto vynikajúco interaktívnej mapy, kde sa používatelia môžu pustiť do úloh a dozvedieť sa viac o sezóne dva. Od fantastických stvorení až po starodávnych bohov - každý týždenný quest odráža tému každej epizódy. Aj keď sa na reláciu nepozeráte, toto pohlcujúce využitie 3D webu stále stojí za návštevu.

09. Snaha o zvuk

Zábavná a bláznivá hra od francúzskeho štúdia Biborg

Zábavná a bláznivá hra od francúzskeho štúdia Biborg

Skončíme s niečím, čo je jednoducho zábava. V tomto bláznivom experimente WebGL sa vyhýbajte prekážkam, chytajte predmety a vytvorte si svoj vlastný soundtrack prostredníctvom svojho šialeného hudobného behu. Je zameraný na bežného používateľa stolných počítačov / mobilných telefónov aj na nadšencov VR (je kompatibilný s Google Cardboard). Je to skvelá prehliadka kreatívnych agentúr 3D Smarts v Paríži. Biborg . Zakaždým, keď ju hráte, prostredie je odlišné a je veľmi návykové ... varujte nás!