5 nagyszerű példa a WebGL-re

Szüksége van egy kicsit webdesign inspiráció ? Íme a WebGL használatának néhány legjobb példája, amelyeket néhány hónap alatt láthattunk.

01. Brakebills Egyetem

WebGL: Brakebills Egyetem

Az UNIT9 ezt az interaktív oldalt a Mágusok kíséretében hozta létre

Amikor az NBCUniversal elérte UNIT9 hogy létrehozzanak egy interaktív második képernyős élményt az új Syfy sorozat, a Bűvészek számára, az egyik kihívás számukra az volt, hogy minden epizódhoz mágikus leckét gondoltak. A cél egy olyan weboldal létrehozása volt, amely informatívabb, mint játékszerű, de mégis rengeteg kihívást és tartalmat kínál a felhasználó számára.



A Syfy-vel szoros együttműködésben az UNIT9 csapata 13 játékot készített a weboldal „Varázslatok” részéhez. Ezeket minden eszközön lejátszhatjuk, és alkalmazkodhatunk a kérdéses eszközhöz.

'A technológiai oldalon az volt a kihívás, hogy önálló játékokat építsenek ki a 13 órára, amelyek mindegyikéhez különféle technikákra volt szükség - az AngularJS-től és a WebGL-től a 3D-s animációkig' - mondja az UNIT9 munkatársa, Ligia Stan.

Minden epizód sugárzása után a felhasználó visszatérhet a webhelyre, és más leckét vehet igénybe, valamint többet megtudhat a szereplőkről. A csapatnak biztosítania kellett a kód, a másolat és az eszközök hozzáférhetővé válását az epizód sugárzása közben, ami azt jelentette, hogy a klasszikus CMS-eken túlmenően egyedi módot kell találni a tartalom kiadására. Ez volt a csapat legnagyobb kihívása, de az eredmény a fajtájának egyik jobb példája.

02. Rövid utazás

WebGL: Rövid utazás

Cher ami rövid utazása

Egy rövid utazás 2015 nyarán született, amikor a csapat kedves barátom szünetet tartott az ügyfél munkájában, hogy együttműködjön Benoît Challand 3D-s képzőművésszel. Eleinte rövid filmnek kellett volna lennie, de ez egy interaktív történetté vált a tengerig tartó utazásról, amikor a csapat rájött, hogy egy weboldal jobban bevonhatja a felhasználót.

'Néhány elemet 3D-ben terveztünk a Cinema 4D-vel, más elemeket pedig 2D-ben a Photoshop alkalmazással. Az ötlet mindig az volt, hogy a modern technológiát és a klasszikus technikákat ötvözve új designt nyerjünk. '- mondja Jean-Frédéric Passot alapító. 'A WebGL segítségével minden jelenetet 3D-ben készítettünk, és még ha sok trükkös technikai szempont is található ezen a weboldalon, a cél mindig az volt, hogy a napsütéses út kellemes érzését kínáljuk.'

A weboldal üdvözlőkártyaként indult az új évre, az ügyfelek melegítésére a hideg téli napokon. A Rövid utazás egyszerű, mégis kedves példa arra, hogy az interaktivitás hogyan használható fel az élmény továbbviteléhez.

03. Szövettan

WebGL: Szövettan

Szövettan, Matan Stauber

Szövettan - izraeli tervező és fejlesztő Öld meg Staubert A Bezaleli Művészeti és Formatervezési Akadémia utolsó évének projektje egy interaktív ütemterv, amely legalább 14 milliárd évet ölel fel az ősrobbanástól napjainkig. Szó szerint kiterjedve az ismert univerzum teljes történelmére, ez egy hatalmas, interaktív infografika, amely megkérdőjelezi a bonyolult témák kommunikációjával kapcsolatos előfeltevéseinket.

Az irodalomtól és a zenétől kezdve a merényletekig, a találmányokig és a vallásig terjedő témakörökig a Histography ütemterve arra hív fel bennünket, hogy vizsgáljuk meg gazdag múltunk eseményeit, mindegyiket dinamikusan a Wikipédiából húzzuk, és a képernyőn kis fekete pontként ábrázoljuk. Kétféle mód van: a vízszintes, balról jobbra néző nézet, amely lehetővé teszi a felhasználó számára, hogy egy adott időtartamon belül otthonra lépjen; vagy a spirálszerű időgép, amely a legfontosabb események kurátora listáját mutatja be.

Stauber elmondása szerint mindig is elbűvölte a történelem bemutatásának gondolata, amely az idők folyamán kibontakozik: „Az idővonalak a legnépszerűbb módszerek a történelem megjelenítésére, és mégis úgy éreztem, hogy mindig nagyon korlátozottak. A projekt kezdetétől fogva tudtam, hogy szeretnék létrehozni egy ütemtervet, amely nem korlátozódik egy évre, évtizedre vagy időszakra. Olyan idővonalat akartam, amely tartalmazhatja az egész történelmet.

04. Deutser

WebGL: Deutster

Deutser, nem tudjuk abbahagyni a gondolkodást

A professzionális szolgáltatási oldalak egy sajátos kommunikációs kihívással néznek szembe: nincs kézzelfogható tárgy, amelyet bemutatnának. Amikor új webhelyet hoz létre a Deutser tanácsadó cég számára, Nem hagyhatjuk abba a gondolkodást szükséges ahhoz, hogy kitaláljuk, hogyan lehet a szolgáltatások széles skáláját egyetlen alapvető előnybe bontani.

A csapat úgy döntött, hogy arra az ötletre összpontosít, hogy Deutser egyértelműséget nyújt egy bizonytalan világban. 'A szétszórt részecskék a káoszt képviselik, amellyel sok vállalat találkozik a mai világban. A világosságot az képviseli, hogy a részecskék összefognak, hogy valami értelmes dolgot alkossanak '- magyarázza Nicholas Scimeca kreatív igazgató.

A metafora ugyanolyan világos, mint az üzenet erős. Másik kihívást jelentett, hogy a tapasztalatok zökkenőmentesen működjenek az eszközök között. 'A részecskéket WebGL vászon felhasználásával, a három.js segítségével egyszerűsítik. Felépítettünk egy egyedi animációs és sorban állási rendszert, amely másodpercenként jobban kontrollálta az animációt, az átmeneteket és a képkockákat ”- teszi hozzá Scimeca.

05. Halo Visualizer

WebGL: Helló

Halo Vizualizer, az Active Theory készítette

A Halo videojáték-franchise-oldal ilyen rendkívüli navigációs felépítésű. A felhasználó egy intuitív, idővonalon áttekinthető nézetben mozog, a Halo sisakok törött darabjai a játék felhasználói elköteleződései.

'WebGL részecskéket használtunk, amelyek 3D modellt használnak a játék karaktereinek sisakjainak kialakításához, a 3D CSS-t a felhasználói tartalom darabjainak animálásához, a Canvas pedig az idővonal rajzolását és animálását az alján' - mondja Rachel Smith, interaktív fejlesztő itt: Aktív elmélet . 'Ez jó példa a webes technológiák ötvözésére attól függően, hogy mire van szüksége az interfésznek.'

Az elemek titokzatos széttörése és újjáépítése lehet, hogy zavaró, de ehelyett teljesen folyékonynak érzi magát. A felhasználói történetek enyhe megdöntése, sőt olyan elemek, mint az érintkezési módok, egyesítik a dizájnt és a mozgást a webhely minden részén. A térbeli légkör önmagában nyelvvé válik.

Közreműködők: Espen Brunberg , Sarah Drasner