30 WebGL eksperimenata koji su samo Wow!

Evo, dolazi vam veliki alat s velikim obećanjima. Brza je i glatka. Prikazuje 3D, a uz integraciju animira, pogodite što je to? HTML5? CSS3? Ne, zove se WebGL, softverska knjižnica koja proširuje sposobnost JavaScripta da generira interaktivnu 3D grafiku, i da, bez dodataka!

U ovom izlogu ne želimo vam pokazati uobičajene stvari. Želimo vam pokazati 30 WebGL eksperimentTo su pažljivo izrađeni od strane profesionalnih razvojnih inženjera da biste mogli svjedočiti pravoj snazi ​​WebGL-a koji ne samo da inspirira, nego vam također omogućuje da vidite kako budućnost weba može izgledati. Skoči u budućnost nakon klika!

Preporučujemo vam da ove demo prikaze pogledate pomoću najnovije verzije Google Chromea za razvojnu inačicu. Većina demo verzija podržava najnoviju verziju preglednika Firefox, Google Chrome i Safari.

3 Snovi o crnom

Autorica je Google Data Arts Team, 3 Dreams of Black vas dovodi u 3 svjetove sna izgrađena kombinacijom bogatih 2D crteža i animacija isprepletenih s interaktivnim 3D sekvencama. Provjerite čuda za divno iskustvo!

Animirane čestice volumena

Ovo je doista umjetničko - animirane životinje konstruirane 3D česticama koristeći plutajuće teksture i objekte međuspremnika. Više iznenađenja ako pomaknete miša!

akvarijum

Simulirati podvodno okruženje? To nije problem za WebGL. Demo ima 3D modele s visokokvalitetnim teksturama, animaciju scene, animaciju pixel shadera, refleksije, refrakciju i kaustiku, samo sve za postavljanje realistične podvodne scene!

azatioprin

Vjerojatno najveći epski WebGL demo, dovoljno je rečeno. Šaljem savjet autoru Jochenu Wilhelmyju.

Putovanje atraktora

Ako želite doživjeti 3D, to je najbolji demo za vas, također meditirajte s golemom ljepotom WebGL-generirane grafike koristeći Martinovu Hopalong formulu.

Meduza

“Modeliranje postupaka s Side FX Houdinijem. Izvezeno s Python izvoznikom u json format. Tekstura obojana pomoću Autodesk Mudbox-a. Animirani s vertex shader-om.”

Chrysaora

Ovo nije redovni demo animacija, ali sadrži dinamički simulirane kosture, djelomičnu simulaciju i sinkronizaciju na strani poslužitelja s WebSocketom, sustavom čestica okrenutim kamerom, volumetrijskim svjetlosnim efektom i mjs matričnom knjižnicom Vladimira Vukićevića. Ukratko, nevjerojatan eksperiment s složenim djelima.

HelloRacer

Predstavljamo vam vrhunsku interaktivnu simulaciju automobila koju vam donosi isključivo HelloEnjoy.

Materijali: Automobili

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 i Chevrolet Camaro u vašem pregledniku. Odaberite vožnju i uživajte u pogledu. Pakao, čak možete odabrati njihove boje.

WebGL Automobili

Budućnost serije Need For Speed ​​bit će u web pregledniku. Previše ambiciozni? Zasigurno ne ako ste posjetili te automobile koji su prikazani dinamičnom kockom, mapama sjena i efektima naknadne obrade.

Moja nacija robota

Pa, ako lik nije vaš omiljeni, a zatim pokušajte izgraditi cool i šarmantan robot i pokazati se na svoj prijatelj! Možete čak i potrošiti svoj novac da bi to bio pravi posao.

Pacmaze

Što mislite o 3D Pac-Man igri? Grafika i igra su lijepi, i što je najvažnije, zabavno je!

Crvena kapuljača

Sada je slatka ... ili krvava. Ovo je samo zanimljiva igra koja će vam pokazati mogućnosti WebGL-a kada se razvije u top-down pucač. Zabavno i zabavno.

TankWorld

Možete pogoditi, ugodan tenk pucač igra s oružjem za korištenje i karte za istraživanje, a na nekim razinama možete čak dobiti helikopter za istraživanje svijeta! To je uistinu više od obične igre, a grafika izgleda ugodno!

Pulpo

Najbolji primjer kako jednostavne grafike i animacije mogu impresionirati ljude kada su dobro obavljeni.

Površinski

Pogledajte Surface, elegantan i nadahnjujući eksperiment Paula Lewisa. Ne možete samo mijenjati veličinu, elastičnost, auto-orbitu, wireframe, i kišne kapi u demo-verziji, nego i povlačiti i ispuštati vlastite slike u nju kako biste osjetili učinak drugačije.

Foto čestice

Samo spustite omiljenu sliku u ovaj demo i uživajte gledajući kako eksplodira u tonu čestica i stupite u interakciju s nekim oblikom magnetizma. Eksperiment je kombinacija četiriju tehnologija: HTML5 je povuci i ispusti, API datoteka, Canvas i WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer je WebGL emulacija klasičnog Rutt-Etra video sintisajzera. Demo vam omogućuje da stavite svoje vlastite slike i manipulirate njima. S ovim stvarima, 2D slika može izgledati kao 3D!

Ples s kolebanjem

Jednostavan, ali vrijedan demo koji pokazuje koliko je WebGL tekućina, s anizotropnim svjetlosnim shaderima i deformacijom vrtećih vrhova.

Ultranoir

Još jedan veliki eksperiment koji prikazuje potencijal WebGL-a. Nouvelle Vague nudi poetsko i interaktivno 3D iskustvo temeljeno na Twitteru, a ono što vidite bit će tweets koji se izvode s različitim letećim objektima. Svakako umjetnički način za uživanje u tweetovima.

Valoviti majmun

“Ovaj put sam samo htio napraviti test da vidim koliko pozicija i normala vrhova mogu ažurirati izravno u JavaScriptu. Ispalo je da je 2.000 u redu :) Također sam dodao malo mapiranja okruženja. I čudnovatost. Uvijek dodajte čudnovatost.”

Video FX

Impresivan app učinio Daniel Pettersson koji vam omogućuje da primjenjuju više istovremenih postprocessing efekte na Happy Feet 2 prikolica. Pokušajte se zabaviti!

Voxels Liquid

3D prikaz klasičnog 2D algoritma učinka vode, također pokazuje kako je interaktivni WebGL.

WebGL

Pregledajte više od 10.000 naslovnica knjiga s ovim WebGL-ovim ormarićem za knjige, koje je razvio Google Data Arts Team. Također možete pretraživati ​​po temi, otvoriti 3D model svakog klikom i preuzeti knjige na svom telefonu pomoću QR koda.

WebGL Globe

Kul eksperiment Googleova tima koji se zapravo čini da se osjećate kao da ste u budućnosti s prekrasnom, elegantnom i futurističkom vizualizacijom podataka.

Svjetski letovi

Još jedna vizualno-privlačna aplikacija za vizualizaciju podataka koja vizualizira glavne zrakoplovne rute zrakoplova, izgleda obećavajuće!

Filter za slike WebGL

Grafički uređivač s WebGL-om? Nikad nije nemoguće. Najbolje od svega, brzo je i glatko!

WebGL Voda

“Bazen vode dobiven refleksijom, lomom, kaustikom i ambijentalnom okluzijom. Bazen je simuliran s visinskim poljem i sadrži kuglu koja može reagirati s površinom vode.”

Odraz

Najveći problem s kojim se WebGL suočio je možda njegova sigurnost. Prema Wikipediji, tim za američku pripravnost za hitne slučajeve računala (US-CERT) izdao je upozorenje da WebGL sadrži više mogućih sigurnosnih pitanja koja bi mogla dovesti do izvršavanja proizvoljnog koda, uskraćivanja usluge pa čak i napada na više domena. To znači vrlo, jako puno vlasnika web-lokacije.

Međutim, Khronos grupa koja uključuje Mozilla i Google sugerira moguća rješenja i budući razvojni pristup kako bi se ojačala sigurnost od mogućih sigurnosnih prijetnji. Nadajmo se da se problemi mogu smanjiti, pa čak i riješiti u budućnosti, budući da WebGL ima toliko mogućnosti koje su pokazali talentirani i profesionalni programeri!

Javite nam koji eksperiment vas najviše zadivljuje, i naravno, pokažite nam se ako ga imate!

Još povezanih postova:

• HTML5 web-lokacija: 48 potencijalnih demonstracija za ubijanje Flash-a
• HTML5 web-lokacija: 15 dodatnih eksperimenata
• Inspirirajući CSS3 animacije demo