30 experimentov WebGL, ktoré sú práve Wow!
Hľa, za tvojimi očami prichádza veľký nástroj s veľkými sľubmi. Je rýchly a hladký. Vykresľuje 3D a s integráciou animuje, hádajte, čo to je? HTML5? CSS3? Nie, nazýva sa to WebGL, softvérová knižnica, ktorá rozširuje schopnosť jazyka JavaScript generovať interaktívnu 3D grafiku a áno, bez akýchkoľvek pluginov!
V tejto vitríne nechceme, aby sme vám ukázali bežné veci. Chceme vám predstaviť 30 WebGL experimentktoré sú starostlivo vytvorené profesionálnymi vývojármi, aby ste mohli svedkom skutočnej sily WebGL, ktorá je nielen inšpiratívna, ale aj vám umožní pohľad na to, ako by mohla vyzerať budúcnosť webu. Skočiť do budúcnosti po kliknutí!
Duchom odporúčame zobraziť tieto ukážky pomocou najnovšej verzie verzie prehliadača Google Chrome pre vývojárov. Väčšina ukážok podporuje najnovšiu verziu prehliadačov Firefox, Google Chrome a Safari.
3 Sny z čiernej
Autorizovaný týmom Google Data Arts, 3 Dreams of Black vás prináša do 3 senových svetov vytvorených kombináciou bohatých 2D výkresov a animácií prepojených s interaktívnymi 3D sekvenciami. Pozrite sa na zázraky pre nádherný zážitok!
Animované častice objemu
Toto je naozaj umelecké - animované zvieratá, ktoré sú konštruované pomocou 3D častíc pomocou textúr s plovoucimi textami a objekty s rámovými puframi. Viac prekvapenie, keď posuniete myš!
akvárium
Simulovať prostredie pod vodou? To nie je problém pre WebGL. Demo je vybavené 3D modelmi s vysoko kvalitnými textúrami, animáciou scény, animáciou pixelov, odrazmi, lomom a žieravinami, všetko, čo je pre realistickú podvodnú scénu!
azatioprin
Pravdepodobne najpopulárnejší demo WebGL, dosť povedané. Klobúk tip na autora Jochen Wilhelmy.
Attractor výlet
Ak chcete zažiť 3D, toto je pre vás to najlepšie demo, taktiež si meditujte s obrovskou krásou generovanej WebGL grafiky pomocou Martinovho vzorca Hopalonga.
medúza
“Procesné modelovanie vykonané s Side FX Houdini. Exportovaný s vývozcom Pythonu do formátu json. Textúra namaľovaná pomocou Autodesk Mudbox. Animované s vrcholovým shaderom.”
Chrysaora
Toto nie je bežná animačná demo, ale obsahuje dynamicky simulované kostry, čiastočnú simuláciu na strane servera a synchronizáciu s WebSocket, kamerovým systémom častíc, volumetrickým svetelným efektom a knižnicou mjs matrix Vladimíra Vukićeviča. Skrátka, úžasný experiment so zložitými prácami.
HelloRacer
Predstavujeme špičkovú simuláciu interaktívneho auta, ktorú prináša výhradne spoločnosť HelloEnjoy.
Materiály: Autá
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 a Chevrolet Camaro vo vašom prehliadači. Vyberte si jazdu a vychutnajte si výhľad. Sakra, môžete si dokonca vybrať svoje farby.
WebGL Cars
Budúcnosť série Need For Speed bude vo webovom prehliadači. Príliš ambiciózne? Určite nie, ak ste navštívili tieto autá, ktoré sú vykresľované dynamickými kockami mapy, tieňovými mapami a postprocesačnými efektmi.
Môj robotický národ
No, ak obrázok nie je váš obľúbený, potom sa pokúste vybudovať chladný a očarujúce robot a ukázať svojmu priateľovi! Môžete dokonca minúť svoje peniaze, aby sa to skutočná dohoda.
Pacmaze
Čo sa týka hry 3D Pac-Man? Grafika a hrateľnosť sú pekné a najdôležitejšie je to zábava!
Červená snímacia kapucňa
Teraz tu je roztomilý ... alebo krvavý. Toto nie je nič iného ako zaujímavá hra, ktorá vám ukáže možnosti WebGL, keď sa vyvinie do hry zhora nadol. Zábavné a zábavné pre istotu.
TankWorld
Hádaj to, zábavná tanková strieľačka so zbraňami na použitie a mapy na preskúmanie, a na niektorých úrovniach môžete dokonca dostať vrtuľník na preskúmanie sveta! Je to naozaj viac ako len bežná hra a grafika vyzerá pohodlne!
pulpo
Najlepší príklad toho, ako jednoduchá grafika a animácia môžu ľudí zapôsobiť, keď sú správne.
povrch
Pozrite sa na povrch, elegantný a inšpirujúci experiment Paul Lewis. Môžete nielen zmeniť veľkosť, elasticitu, automatickú obežnú dráhu, drôtený rámček a kvapky dažďovej kvapky v demo, ale aj drag-and-drop svoje vlastné obrázky do toho cítiť účinok inak.
Fotografické častice
Stačí len spustiť svoj obľúbený obrázok do tohto demo a pozerať sa na to, ako exploduje do tony častíc a začne sa s nejakou formou magnetizovať. Experiment je kombináciou štyroch technológií: Drag and Drop HTML5, File API, Canvas a WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer je emulácia WebGL klasického video syntetizátora Rutt-Etra. Demo vám umožní vložiť svoje vlastné obrázky a manipulovať s nimi. S touto vecou môže obrázok 2D dokonca vyzerať ako 3D!
Wobble Dance
Jednoduché, ale pozoruhodné demo, ktoré ukazuje, ako môže byť kvapalina WebGL, s anizotropným svetelným shaderom a deformáciou vrcholovej vlny.
Ultranoir
Ďalším skvelým experimentom predstavujúcim potenciál WebGL. Nouvelle Vague ponúka poetické a interaktívne 3D zážitky v reálnom čase založené na Twitteri a čo vidíte budú tweety, ktoré sa vykonávajú s rôznymi lietajúcimi objektmi. Určite umelecký spôsob, ako si vychutnať tweety.
Zvlnené opice
“Tentokrát som len chcel urobiť test, aby som zistil, koľko vrcholových pozícií a normálov by som mohol aktualizovať priamo v jazyku JavaScript. Zdá sa, že 2.000 je v poriadku :) Tiež som pridal do trochu mapovania prostredia. A čudnosť. Vždy sa pridáva zvláštnosť.”
Video FX
Pôsobivá aplikácia, ktorú vykonal Daniel Pettersson, ktorý vám umožňuje používať niekoľko simultánnych postprocessing efektov na trailer značky Happy Feet 2. Skúste a bavte sa!
Voxels Liquid
3D reprezentácia klasického algoritmu 2D vodného efektu vám tiež ukáže, ako je interaktívna WebGL.
Knižnica WebGL
Prezrite si viac ako 10 000 knižných obálok s touto knižnicou WebGL vyvinutou tímom Google Data Arts. Môžete tiež vyhľadávať podľa témy, otvoriť 3D model každého z nich kliknutím naň a stiahnuť kópie v telefóne pomocou kódu QR.
WebGL Globe
Skvelý experiment tímu Google, ktorý vás v skutočnosti prináša pocit, že ste v budúcnosti s jeho krásnou, elegantnou a futuristickou vizualizáciou dát.
Svetové lety
Ďalšia vizuálne atraktívna aplikácia na vizualizáciu dát, ktorá zobrazuje hlavné linky leteckých liniek, vyzerá sľubne!
Filter obrázkov WebGL
Aplikácia grafického editora s WebGL? Je to nikdy nemožné. Najlepšie zo všetkého je to rýchle a hladké!
WebGL Water
“Bazén vody poskytnutý s odrazom, lomom, žieravinami a oklúziou okolia. Bazén je simulovaný výškovým poľom a obsahuje guľu, ktorá môže interagovať s povrchom vody.”
odraz
Najväčším problémom, ktorým čelila WebGL, je možno jej bezpečnosť. Podľa Wikipédií americký tím Computer Emergency Readiness Team (US-CERT) vydal varovanie, že WebGL obsahuje niekoľko možných bezpečnostných problémov, ktoré môžu viesť k náhodnému spusteniu kódu, k odmietnutiu služby a dokonca k útokom medzi doménami. To znamená veľmi, veľmi na majiteľa webových stránok.
Skupina Khronos, ktorá zahŕňa Mozilla a Google, však navrhuje možné riešenia a budúci rozvojový prístup na posilnenie bezpečnosti pred možnými bezpečnostnými hrozbami. Dúfajme, že problémy môžu byť znížené a dokonca aj vyriešené v budúcnosti, keďže WebGL má toľko možností, ako to demonštrujú talentovaní a profesionálni vývojári!
Dajte nám vedieť, ktorý experiment vás najviac udivuje a, samozrejme, ukážte nám, ak máte jeden!
Ďalšie súvisiace príspevky:
- Webová stránka HTML5: 48 Potenciálne ukážky zabíjania bleskov
- Webová stránka HTML5: 15 Viac experimentov
- Inšpirácia animácií CSS3
