30 WebGL Experimenty, které jsou právě Wow!

Hle, pro tvé oči přichází velký nástroj s velkými sliby. Je rychlá a hladká. To vykresluje 3D, as integrací animuje, hádejte, co to je? HTML5? CSS3? Ne, je to tzv. WebGL, softwarová knihovna, která rozšiřuje schopnost JavaScriptu vytvářet interaktivní 3D grafiku, a ano, bez jakýchkoli pluginů!

V této showcase vám nechceme ukázat běžné věci. Chceme vám předvést 30 WebGL experiments, které jsou pečlivě vytvořeny profesionálními vývojáři pro vás, abyste byli svědky pravdy WebGL, které jsou nejen inspirativní, ale také vám umožní nahlédnout do toho, jak by mohla vypadat budoucnost webu. Skok do budoucnosti po kliknutí!

Důrazně doporučujeme tyto ukázky zobrazit pomocí nejnovější verze prohlížeče Google Chrome pro vývojáře. Většina dema však podporuje nejnovější verzi Firefoxu, Google Chrome a Safari.

3 Sny Černé

3 Dreams of Black jsou autorem týmu Google Data Arts a přinášejí vás do 3 vysněných světů vytvořených kombinací bohatých 2D výkresů a animací propletených interaktivními 3D sekvencemi. Podívejte se na zázraky pro úžasný zážitek!

Animované objemové částice

Toto je opravdu umělecké animované zvíře vytvořené 3D částicemi pomocí plovákových textur a rámových vyrovnávacích objektů. Více překvapení, když pohnete myší!

Akvárium

Simulovat podvodní prostředí? To není problém pro WebGL. Demo obsahuje 3D modely s vysoce kvalitními texturami, animací scén, animací shaderů pixelů, odrazy, lomem a žíravinami, a to vše, co je v realistické podvodní scéně.!

Azathioprin

Pravděpodobně nejvíce epické demo na WebGL, dost. Klobouk tip na autora Jochen Wilhelmy.

Atrakce výlet

Pokud chcete zažít 3D je to nejlepší demo pro vás, také si meditoval s ohromnou krásu grafiky generované WebGL pomocí Martinova Hopalong vzorce.

Medúza

“Procesní modelování provedené s Side FX Houdini. Exportováno s exportérem Python do formátu json. Textura malovaná pomocí Autodesk Mudbox. Animovaný s shaderem vrcholu.”

Chrysaora

Nejedná se o běžnou ukázku animace, ale obsahuje dynamicky simulované kostry, částečnou simulaci na straně serveru a synchronizaci s WebSocket, částicovým systémem orientovaným na fotoaparát, objemovým světelným efektem a knihovnou matic Vladimíra Vukićeviće. Stručně řečeno, úžasný experiment s komplexními pracemi.

HelloRacer

Představujeme špičkovou interaktivní simulaci vozu, kterou vám přináší výhradně společnost HelloEnjoy.

Materiály: Auta

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 a Chevrolet Camaro ve vašem prohlížeči. Vyberte si jízdu a vychutnejte si výhled. Sakra, můžete si vybrat i jejich barvy.

WebGL auta

Budoucnost série Need For Speed ​​bude ve webovém prohlížeči. Příliš ambiciózní? Určitě ne, pokud jste navštívili tyto vozy, které jsou vykresleny s mapami dynamických krychlí, stínovými mapami a efekty po zpracování.

Můj Robot Nation

No, pokud postava není vaše oblíbená, pak se pokuste postavit chladného a okouzlujícího robota a předvést se svému příteli! Můžete dokonce utratit své peníze, aby byl skutečný obchod.

Pacmaze

A co 3D hra Pac-Man? Grafika a hratelnost jsou pěkné a hlavně je to zábava!

Červená Střílecí kapuce

Teď je tu roztomilý ... nebo krvavý. Tohle není nic jiného než zajímavá hra, která vám ukáže schopnosti WebGL, když se vyvinul do hry střelce shora dolů. Zábavné a zábavné jistě.

TankWorld

Hádáte, je to zábavná tanková střílečka se zbraněmi k použití a mapy k prozkoumání, a v některých úrovních můžete dokonce získat vrtulník prozkoumat svět! Je to opravdu víc než jen obyčejná hra a grafika vypadá pohodlně!

Pulpo

Nejlepším příkladem toho, jak jednoduchá grafika a animace mohou zapůsobit na lidi, když jsou provedeny správně.

Povrch

Podívejte se na povrch, elegantní a inspirativní experiment od Paula Lewise. V demu můžete nejen změnit velikost, pružnost, automatickou dráhu, drátový model a dešťové kapky, ale také přetáhnout své vlastní obrázky do něj, abyste pocítili efekt jinak..

Foto částice

Stačí přetáhnout svůj oblíbený obrázek do tohoto dema a užívat si pozorování, jak exploduje do tuny částic a dostat se do interakce s nějakou formou magnetismu. Experiment je kombinací čtyř technologií: drag and drop, HTML, Canvas a WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer je emulace WebGL klasického video syntezátoru Rutt-Etra. Demo umožňuje umístit své vlastní obrazy dovnitř a manipulovat s nimi. S tímto materiálem může 2D obraz dokonce vypadat jako 3D!

Wobble Dance

Jednoduché, ale pozoruhodné demo, které ukazuje, jak kapalina WebGL může být, s anizotropním světelným shaderem a wobble vertex deformací.

Ultranoir

Další skvělý experiment představující potenciál WebGL. Nouvelle Vague nabízí poetický a interaktivní 3D zážitek v reálném čase založený na Twitteru a to, co vidíte, budou tweety, které jsou prováděny s různými létajícími objekty. Jistě umělecký způsob, jak si vychutnat tweety.

Zvlněná opice

“Tentokrát jsem chtěl udělat test, abych zjistil, kolik vertexových pozic a normálů jsem mohl aktualizovat přímo v JavaScriptu. Ukázalo se, že 2000 je v pohodě :) Také jsem přidal v trochu mapování prostředí. A podivnost. Vždy přidávejte podivnost.”

Video FX

Působivá aplikace provedená Danielem Petterssonem, která vám umožní aplikovat více současných postprocessing efektů na trailer Happy Feet 2. Zkuste se pobavit!

Voxels Liquid

3D reprezentace klasického 2D efektového algoritmu, také ukazuje, jak interaktivní je WebGL.

Knihovna WebGL

Prohlédněte si více než 10 000 obalů s touto knihovnou WebGL, vyvinutou týmem Google Data Arts. Můžete také hledat podle předmětu, otevřít 3D model kliknutím na něj a stahovat knihy v telefonu pomocí kódu QR.

WebGL Globe

Skvělý experiment týmu Google, díky kterému se budete cítit jako v budoucnu díky své krásné, elegantní a futuristické vizualizaci dat.

Světové lety

Další vizuálně atraktivní aplikace pro vizualizaci dat, která vizualizuje hlavní trasy leteckých společností, vypadá slibně!

Obrazový filtr WebGL

Aplikace grafického editoru s WebGL? Nikdy to není nemožné. Nejlepší ze všeho je, že je rychlá a hladká!

WebGL Water

“Kaluž vody s odrazem, lomem, žíravinami a okolní okluzí. Bazén je simulován výškovým polem a obsahuje kouli, která může ovlivňovat povrch vody.”

Odraz

Největší problém, kterému WebGL čelila, je možná jeho bezpečnost. Podle Wikipedie vydal americký tým pro nouzovou připravenost (US-CERT) varování, že WebGL obsahuje několik možných bezpečnostních problémů, které by mohly vést ke spuštění libovolného kódu, odmítnutí služby a dokonce i útokům napříč doménami. To znamená velmi, vlastně majiteli webu.

Skupina Khronos, která zahrnuje Mozilla a Google, však navrhla možná řešení a budoucí rozvojový přístup k posílení bezpečnosti proti možným bezpečnostním hrozbám. Doufejme, že tyto problémy mohou být v budoucnu sníženy a dokonce vyřešeny, protože WebGL má tolik možností, jaké předvádí talentovaní a profesionální vývojáři.!

Dejte nám vědět, který experiment vás nejvíce ohromí, a samozřejmě se nám předveďte, pokud ho máte!

Další související příspěvky:

• HTML5 Webové stránky: 48 Potenciální Flash-Killing Demos
• Webové stránky HTML5: 15 více experimentů
• Inspirující ukázky animace CSS3