Jak WebGL obnovuje odkaz Flash
Vzpomínáte si na všechny ty projekty s vynikajícími interakcemi, animovanými myšlenkami a napínavými doprovodnými zvukovými efekty, které vyústily v intenzivní uživatelské zkušenosti? Jo, jsou šance, že byly vytvořeny s pomocí Flash.
Nenávidím to však přiznat, éra této bohaté multimediální platformy skončila. Flash je nakonec mrtvý. Ale nebojte se! Jak se často stává, když se dveře zavřou, další se otevírá a blesk se pomalu nahrazuje čerstvším, energičtějším nástupcem. Technologie jako WebGL , a doprovodné knihovny jazyka JavaScript Three.js rychle rostou - umožňují vývojářům vytvářet projekty typu Flash bez doprovodných bezpečnostních problémů.
Dnes se zaměříme na WebGL a Three.js. Toto párování je výkonná volba pro ponořující UX.
WebGL a Three.js
WebGL slouží jako základ, který poskytuje nástroje pro manipulaci s interaktivní 3D a 2D počítačovou grafikou. To vám dává příležitost míchat a přizpůsobit své prvky elementům HTML a spojit je s dalšími prvky stránky nebo pozadí.
Three.js je knihovna s Javascriptem se seznamem špičkových funkcí, které vám umožňují pracovat se scénami, kamerami, světly, geometrií a dalšími. Je určena k odblokování potenciálu WebGL přidáním dalších funkcí platformě. Zjednodušuje vytváření 3D animací s akcelerací GPU bez spoléhání na pluginy prohlížeče.
Problémy s kompatibilitou
Díky moderním technologiím jste vždycky zachyceni v dilematu: buď vytvořte projekt typu "one size fits all", který bude fungovat na různých zařízeních a nabídne konzistentní uživatelskou zkušenost, nebo vše postavte na řadu a okamžitě zapůsobíte na publikum, které můžete dosáhnout .
S WebGL a Three.js je to stejný příběh. Safari, Opera a většina mobilních prohlížečů (a to neznamená nic o aplikaci Internet Explorer) jsou jako moucha ve vašem Chardonnay. Naneštěstí mnoho uživatelů přichází s staršími prohlížeči, takže kompatibilita je docela překážkou - ale podpora roste (což je víc, než lze říci pro Flash) a za předpokladu, že ji nepoužíváte pro cokoliv, co je kritické, WebGL a Three.js jsou vynikající volby.
Příklady
Neplatné
Neplatné je experiment Hi-ReS !, kreativní studio se sídlem v Londýně. Vývojáři chtěli odstranit omezení vyplývající z moderních platforem a prohlížečů a otestovat limity současných technologií. Zdá se, že to zachytili.
Je to čistě desktopová aplikace, která je vybavena funkcemi WebGL a Web Audio. Spolu s Howler.js, GSAP a Coffee Collider se společnost Three.js podílela na produkci tohoto vynikajícího hřiště, které neúprosně přitahuje návštěvníky online do cesty, která vypadá podobně jako digitální kniha.
Přetváření excelence
Tato interaktivní kampaň věnované výročí Sennheiser je epická odysea, která kombinuje nejen dramatickou sci-fi krajinu, ale také řadu špičkových funkcí a detailů. Jedná se o čistý experiment Chrome, který umožňuje návštěvníkům účastnit se formování a tvarování zvukové paměti. Ačkoli fáze formace byla dokončena - jeden milión lidí po celém světě se účastnil události - to jsou parapety. Můžete učinit vlastní příspěvek, prozkoumat tuto mohutnou zvukovou sochu a vychutnat si intro video a špičkovou exekuci.
Bruno Quintela
Osobní portfolia společnosti Bruno Quintela je experiment WebGL v reálném čase, který demonstruje potenciál umělce a možnosti současných webových technologií. Použijte myš k důkladnému prozkoumání scény. Přetáhněte ji v různých směrech, abyste viděli, co je skryto uvnitř této velké části přesně umístěných dohromady 3d polygonů s lesklými povrchy. Tato myšlenka slouží jako vynikající otevření pro webové stránky, které zanechávají silný a trvalý první dojem.
Test částic
Tento projekt vykazuje víru méně méně uspořádaných a organizovaných trubiček částic, které vyzařují špičkovou atmosféru. Existuje řídící centrum, které vás nabádá k tomu, abyste hráli s takovými atributy, jako je poloměr oblouku ve tvaru válce, hustota trubek, výška, měřítko a další. Koncept je fascinující.
Vodní shader
Tento umělec se to podařilo napodobte povrch vody napodobováním přirozeného chování kapaliny. Konvexní tvar a zvlněný povrch se slunečními odlesky jako konečné úpravy znovu vytvářejí skutečně realistickou scénu, která zachycuje oko od první sekundy.
WebGL Particle Head
Stejně jako v době, kdy byl Flash úspěšný, jsou v dnešní době všechny částice. Animace různých velikostí a typů lze vidět v mnoha projektech a tato práce je jeden takový. Nenávistná verze hlavy, která si vágně připomíná inteligentní lidský robot z románů Isaaca Asimova, je opravdovým mistrovským dílem. Nejenže překvapení realizace, ale i jeho chování. Reaguje na pohyby myší, přirozeně skloněnou hlavu vpravo, vlevo, nahoru a dolů.
Dynamický 3D konfety
Textový efekt je jedním ze způsobů, jak ozdobit nudné rozhraní s poznámkou o hravosti a chladu a také zdůraznit požadované písmo. Rachel Smith je řešení inspirované konfety jistě pomůže obohatit design s jasnými emocemi a umístit titul na středový stupeň. Zadejte slovo do níže uvedeného pole pro zobrazení celé kouzlo. Vibrující a živé 3D geometrické kousky vykreslují požadavek a výsledkem je hezky interaktivní.
Prohlížeč 3D panorama
Three.js se hodí v běžných projektech, jak dokazuje Max Chuhryaev. Jeho řešení snadno přeměňuje panoramatické snímky na základní detaily uživatelského zážitku. Má příjemnou perspektivu a pomalu se pohybující kameru: společně vás cítí jako součást kompozice. Vychází dobře s krajinami, městskými scenériemi a interiéry, což uživatelům umožňuje vychutnat si krásu statických multimédií.
Triangle Pattern Generator
Tento experiment vám nabízí fantastické mnohoúhelníkové pozadí s krásným 3D pocit. Také působí jako hřiště, kde můžete vytvořit některé oblasti jasnější a jiné stmívání: stačí použít myši. Panel možností umožňuje naladit velké množství detailů plátna, včetně nastavení světla, oka, renderu a dokonce i exportu.