30 WebGL eksperimentov, ki so samo Wow!

Glejte, veliko orodje z velikimi obljubami prihaja k vam. Je hitra in gladka. Omogoča 3D, in z integracijo animira, uganite, kaj je to? HTML5? CSS3? Ne, to se imenuje WebGL, knjižnica programske opreme, ki razširja zmožnost JavaScripta za ustvarjanje interaktivne 3D grafike, in da, brez vtičnikov!

V tej predstavitvi vam ne želimo pokazati običajnih stvari. Želimo vam pokazati 30 WebGL eksperimentki so jih profesionalni razvijalci skrbno oblikovali, da bi bili priča resnični moči WebGL-a, ki ne le navdihuje, temveč vam omogoča tudi vpogled v prihodnost spleta. Po kliku skoči v prihodnost!

Priporočamo vam, da si ogledate te predstavitve z najnovejšo različico različice Google Chrome za razvijalce. Večina demonov podpira najnovejšo različico Firefoxa, Google Chroma in Safarija.

3 Sanje o črni

Avtor: Google Data Arts Team, 3 Dreams of Black vas pripelje v 3 sanjske svetove, zgrajene s kombinacijo bogatih 2D risb in animacij, prepletenih z interaktivnimi 3D zaporedji. Oglejte si čudesa za čudovito doživetje!

Animirani delci volumna

Ta je resnično umetniško - animirane živali, zgrajene s 3D delci, ki uporabljajo float teksture in predmete okvirjev. Več presenečenja, če premaknete miško!

Akvarij

Simulirajte podvodno okolje? Za WebGL to ni problem. Demo ima 3D modele z visokokakovostnimi teksturami, animacijo scene, animacijo pixel shaderjev, refleksije, lomom in kaustiko, vse, kar je potrebno za postavitev realistične podvodne scene!

Azathioprine

Verjetno najbolj epski WebGL demo, dovolj je rekel. Namig k avtorju Jochenu Wilhelmyju.

Atrakcija Trip

Če želite doživeti 3D, je to najboljši demo za vas, meditirajte tudi z ogromno lepoto grafike, ki jo generira WebGL, z uporabo Martinove Hopalong formule..

Meduze

“Postopno modeliranje s Side FX Houdini. Izvozi se z Python izvoznikom v json format. Tekstura je pobarvana z Autodesk Mudbox. Animirani z vertex shaderjem.”

Chrysaora

To ni običajen demo animacija, temveč vsebuje dinamično simulirane skelete, delno simulacijo in sinhronizacijo strežniške strani z WebSocketom, sistem delcev, obrnjenih s kamero, volumetrični svetlobni učinek in mjs knjižnico Vladimirja Vukićevića. Skratka, neverjeten eksperiment s kompleksnimi deli.

HelloRacer

Predstavljamo vam vrhunsko interaktivno simulacijo avtomobilov, ki vam jo priskrbi izključno HelloEnjoy.

Materiali: Avtomobili

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 in Chevrolet Camaro v vašem brskalniku. Izberite svojo vožnjo in uživajte v pogledu. Heck, lahko celo izberete barve.

Avtomobili WebGL

Prihodnost serije Need For Speed ​​bo v spletnem brskalniku. Preveč ambiciozni? Seveda ne, če ste obiskali te avtomobile, ki so upodobljeni z dinamičnimi kartami kocke, zemljevidi senc in učinki naknadne obdelave.

Moj robotski narod

No, če številka ni vaš najljubši, potem poskusite zgraditi kul in očarljiv robot in se pokažite prijatelju! Lahko celo porabiš svoje dolarje, da bo to resnično.

Pacmaze

Kaj pa 3D igra Pac-Man? Grafika in igranje sta prijetna, predvsem pa zabavna!

Rdeča kapa za streljanje

Zdaj je tukaj lepa ... ali krvava. Ta ni nič drugega kot zanimiva igra, ki vam pokaže zmožnosti WebGL-a, ko se je razvila v strelec od zgoraj navzdol. Zabavno in zabavno zagotovo.

TankWorld

Uganite, prijetno igro s tankerjem z orožjem in zemljevidi, ki jih želite raziskati, v nekaterih nivojih pa lahko dobite tudi helikopter, ki raziskuje svet! To je res več kot le običajna igra, grafika pa izgleda udobno!

Pulpo

Najboljši primer, kako lahko preprosta grafika in animacija navdušita ljudi, ko se pravilno opravita.

Površina

Oglejte si Surface, eleganten in navdihujoč eksperiment Paula Lewisa. V prikazu ne morete samo spremeniti velikosti, elastičnosti, avtomobilske orbite, žičnega okvirja in dežnih kapljic, temveč tudi povlecite in spustite svoje lastne slike, da občutite učinek drugače..

Foto delci

Samo spustite vašo najljubšo sliko v ta demo in uživajte v gledanju, da eksplodira v tono delcev in se medsebojno poveže z neko obliko magnetizma. Poskus je kombinacija štirih tehnologij: vlečenje in spuščanje HTML5, API za datoteke, Canvas in WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer je WebGL emulacija klasičnega video sintetizatorja Rutt-Etra. Demo vam omogoča, da vstavite svoje slike in jih manipulirate. S to stvarjo lahko 2D slika izgleda celo kot 3D!

Ples z vibriranjem

Preprost, a omembe vreden demo, ki kaže, kako tekoči je lahko WebGL, z anizotropno svetlobno senčilnico in deformacijo nihajnih vrhov.

Ultranoir

Še en velik poskus, ki prikazuje potencial WebGL-a. Nouvelle Vague ponuja poetično in interaktivno 3D izkušnjo v realnem času, ki temelji na Twitterju, in kar boste videli, bodo tweets, ki se izvajajo z različnimi letečimi objekti. Vsekakor umetniški način uživanja v tweetih.

Wooling Monkey

“Tokrat sem samo želel narediti test, da bi videl, koliko položajev in normalov vozlišč lahko posodobim neposredno v JavaScriptu. Izkazalo se je, da je 2.000 prav v redu :) Dodal sem tudi malo preslikave okolja. In čudno. Vedno dodaj čudno.”

Video FX

Impresivno app, ki ga Daniel Pettersson, ki vam omogoča, da uporabite več hkratnih učinkov postprocessing na Happy Feet 2 prikolico. Poskusite in se zabavajte!

Voxels Liquid

3D predstavitev klasičnega 2D algoritma vodnega učinka vam pokaže tudi, kako je interaktivni WebGL.

WebGL

Prebrskajte več kot 10.000 naslovnic knjig s to knjižno knjigo WebGL, ki jo je razvila skupina Google Data Arts. Iščete lahko tudi po predmetih, odprete vsak 3D model tako, da ga kliknete in prenesete knjige v telefonu s kodo QR.

WebGL Globe

Prijeten poskus Googlove ekipe, zaradi katerega se počutite, kot da ste v prihodnosti s svojo lepo, elegantno in futuristično vizualizacijo podatkov.

Svetovni leti

Druga vizualno privlačna aplikacija za vizualizacijo podatkov, ki vizualizira glavne letalske poti letalskih prevoznikov, je obetavna!

Filter za slike WebGL

Aplikacija grafičnega urejevalnika z WebGL? Nikoli ni nemogoče. Najboljše od vsega je hitro in gladko!

WebGL Voda

“Bazen z vodo, ki se oddaja z odbojem, lomom, kaustiko in okluzijo okolja. Bazen je simuliran z višinskim poljem in vsebuje kroglo, ki lahko komunicira z vodno površino.”

Razmišljanje

Največji problem, s katerim se je srečal WebGL, je morda njegova varnost. V skladu z Wikipedijo je ameriška ekipa za pripravljenost na računalniške izredne razmere (US-CERT) izdala opozorilo, da WebGL vsebuje več možnih varnostnih vprašanj, ki lahko vodijo do samovoljnega izvrševanja kode, zavrnitve storitve in celo medpodročnih napadov. To lastniku spletne strani pomeni zelo, zelo veliko.

Vendar pa skupina Khronos, ki vključuje Mozilla in Google, predlaga možne rešitve in prihodnji razvojni pristop za krepitev varnosti pred morebitnimi varnostnimi grožnjami. Upajmo, da se lahko težave zmanjšajo in celo rešijo v prihodnosti, saj ima WebGL toliko možnosti, kot jih prikazujejo nadarjeni in profesionalni razvijalci!

Sporočite nam, kateri eksperiment vas najbolj osupne in seveda se nam pokažite, če ga imate!

Več sorodnih objav:

• Spletna stran HTML5: 48 potencialnih demonstracij za ubijanje flash
• Spletna stran HTML5: 15 dodatnih poskusov
• Navdihujoče CSS3 animacije Demos