30 „WebGL“ eksperimentų, kurie yra tiesiog Wow!

Štai dėl jūsų akis ateina puikus įrankis su dideliais pažadais. Tai greitas ir sklandus. Ji suteikia 3D, ir su integracija ji animuoja, atspėti, kas tai yra? HTML5? CSS3? Ne, tai vadinama WebGL, programinės įrangos biblioteka, kuri išplečia „JavaScript“ galimybes kurti interaktyvią 3D grafiką, ir taip, be jokių papildinių!

Šioje vitrinoje nenorime parodyti įprastų dalykų. Mes norime jums parodyti 30 WebGL eksperimentass, kuriuos profesionalūs kūrėjai kruopščiai sukūrė, kad galėtumėte matyti tikrąją „WebGL“ galią, kuri yra ne tik įkvepianti, bet ir leidžia pažvelgti į tai, kaip atrodytų interneto ateitis. Peršokti į ateitį po paspaudimo!

Labai rekomenduojama peržiūrėti šiuos demonstravimus naudodami naujausią „Google Chrome“ programinės įrangos versijos versiją. Dauguma demo palaiko naujausią „Firefox“, „Google Chrome“ ir „Safari“ versiją.

3 „Juoda“ sapnai

„Google“ dailės meno komandos sukurta „3 Dreams of Black“ atneša jums 3 svajonių pasaulius, sukurtus gausių 2D brėžinių ir animacijų, sujungtų su interaktyviomis 3D sekomis, deriniu. Išsiaiškinkite nuostabų įspūdį!

Animuotos apimties dalelės

Tai yra tikrai meniniai - animuoti gyvūnai, sukurti 3D dalelių, naudojant plūduriuojančias tekstūras ir rėmo buferio objektus. Daugiau nustebinti, jei perkeliate pelę!

Akvariumas

Imituoti povandeninę aplinką? Tai nėra problema „WebGL“. Demonstracijoje yra 3D modeliai su aukštos kokybės tekstūromis, scenos animacija, „pixel shader“ animacija, atspindžiai, refrakcija ir kaukazija, tik viskas, kas padėtų įgyvendinti realistišką povandeninį vaizdą!

Azatioprinas

Tikriausiai labiausiai epic WebGL demo, pakanka. Kepurės viršūnė autoriui Jochen Wilhelmy.

Lankytojai Kelionė

Jei norite patirti 3D, tai yra geriausias demo jums, taip pat gauti meditaciją su didžiuliu „WebGL“ sukurtos grafikos grožiu, naudojant „Martin's Hopalong“ formulę.

Medūza

“Procedūrinis modeliavimas atliekamas su „Side FX Houdini“. Eksportuojamas su „Python“ eksportuotoju į „json“ formatą. Tekstūra dažoma naudojant „Autodesk Mudbox“. Su animacija su viršūnių šešėliu.”

Chrysaora

Tai nėra reguliarios animacijos demonstracija, tačiau jame yra dinamiškai imituojamų skeletų, dalinio serverio pusės modeliavimas ir sinchronizavimas su „WebSocket“, fotoaparatu nukreipta dalelių sistema, tūrio šviesos efektas ir Vladimiro Vukičevičiaus „mjs“ matricos biblioteka. Trumpai tariant, nuostabus eksperimentas su sudėtingais darbais.

HelloRacer

Pristatome aukštos klasės interaktyvų automobilių modeliavimą, kurį atnešė tik „HelloEnjoy“.

Medžiagos: automobiliai

„Bugatti Veyron“, „Lamborghini Gallardo“, „Ferrari F50“ ir „Chevrolet Camaro“ naršyklėje. Pasirinkite savo kelionę ir mėgaukitės vaizdu. Heck, netgi galite pasirinkti savo spalvas.

„WebGL Cars“

„Need for Speed“ serijos ateitis bus žiniatinklio naršyklėje. Per daug ambicingi? Žinoma, ne jei jūs lankotės šiuose automobiliuose, kurie yra suformuoti su dinaminiais kubo žemėlapiais, šešėliniais žemėlapiais ir po apdorojimo.

Mano robotų tauta

Na, jei figūra nėra tavo mėgstamiausia, tada pabandykite sukurti vėsią ir žavingą robotą ir parodyti savo draugui! Jūs netgi galite išleisti savo pinigus, kad tai būtų tikras sandoris.

Pacmaze

Kaip apie 3D Pac-Man žaidimą? Grafinis ir gameplay yra gražus, ir svarbiausia tai smagu!

Raudonasis šaudymo gaubtas

Dabar čia yra mielas ... ar kruvinas. Tai yra tik įdomus žaidimas, rodantis jums „WebGL“ galimybes, kai jis sukurtas į viršų į apačią. Pramogos ir juokingas tikrai.

TankWorld

Jūs atspėti, malonus bako šaudyklės žaidimas su ginklais, kuriuos galite naudoti, ir žemėlapiai, kuriuos galite ištirti, o kai kuriais lygiais jūs netgi galite gauti sraigtasparnį tyrinėti pasaulį! Tai tikrai daugiau nei paprastas žaidimas, o grafika atrodo patogi!

Pulpo

Geriausias pavyzdys, kaip paprastas grafika ir animacija gali paveikti žmones, kai jie daromi teisingai.

Paviršius

Patikrinkite „Surface“, elegantišką ir įkvepiantį Pauliaus Lewio eksperimentą. Demonstracijoje galite ne tik keisti dydį, elastingumą, automatinį orbitą, vielinį rėmelį ir lietaus lašą, bet ir nuvilkite savo vaizdus į jį, kad jaustumėte skirtingą efektą.

Nuotraukų dalelės

Tiesiog įdėkite mėgstamą vaizdą į šią demonstraciją ir mėgaukitės stebėdami, kaip ji sprogsta į dalelių toną ir susiduria su tam tikra magnetizmo forma. Eksperimentas yra keturių technologijų derinys: HTML5's Drag and Drop, File API, Canvas ir WebGL.

Rutt-Etra-Izer

„Rutt-Etra-Izer“ yra klasikinio „Rutt-Etra“ vaizdo sintezatoriaus emuliacija. Demo leidžia įdėti savo vaizdus į vidų ir juos manipuliuoti. Naudojant šią medžiagą, 2D vaizdas gali atrodyti kaip 3D!

Bjaurus šokis

Paprastas, tačiau pastebimas demonstravimas, rodantis, kaip gali būti WebGL skystis, su anizotropiniu šviesos šešėliu ir blaškančiu viršūnių deformacija.

Ultranoir

Kitas puikus eksperimentas, parodantis „WebGL“ potencialą. „Nouvelle Vague“ siūlo poetinę ir interaktyvią 3D patirtį, pagrįstą „Twitter“, ir tai, ką matote, bus „tweets“, kurie atliekami su skirtingais skraidančiais objektais. Žinoma, meninis būdas mėgautis „tweets“.

Undulating Monkey

“Šį kartą norėjau atlikti testą, kad pamatytumėte, kiek viršūnių pozicijų ir normų galėčiau atnaujinti tiesiogiai „JavaScript“. Pasirodo, kad 2000 yra tik gerai :) Aš taip pat pridėjau šiek tiek aplinkos žemėlapių. Ir keistai. Visada pridėkite keistumą.”

Video FX

Įspūdinga programa, padaryta Danielio Petterssono, kuris leidžia jums taikyti daugialypę tolesnio apdorojimo efektą Happy Feet 2 priekaba. Pabandykite ir smagiai!

„Voxels“ skystis

Klasikinio 2D vandens efektų algoritmo 3D vaizdavimas taip pat rodo, kaip yra interaktyvus WebGL.

„WebGL Bookcase“

Naršykite daugiau nei 10 000 knygų viršelių su šia „WebGL“ knygų lentele, kurią sukūrė „Google“ duomenų menų komanda. Taip pat galite ieškoti pagal temą, atidaryti kiekvieno modelio 3D modelį spustelėdami jį ir atsisiųskite knygas telefonu su QR kodu.

„WebGL Globe“

Gražus, elegantiškas ir futuristinis duomenų vizualizavimas - vėsioje „Google“ komandos eksperimentas, kuris iš tikrųjų leidžia jums jaustis kaip jūs ateityje.

Pasauliniai skrydžiai

Kita vizualiai patraukli duomenų vizualizavimo programa, kuri vaizduoja pagrindines oro linijų skrydžių maršrutus, atrodo perspektyvi!

„WebGL“ vaizdo filtras

Grafinio redaktoriaus programa su „WebGL“? Tai niekada neįmanoma. Geriausia, tai greita ir sklandi!

„WebGL“ vanduo

“Vandens baseinas, suformuotas atspindžio, refrakcijos, caustikos ir aplinkos okliuzijos. Baseinas imituojamas su aukščio lauku ir yra sfera, kuri gali sąveikauti su vandens paviršiu.”

Atspindys

Didžiausia problema, su kuria susidūrė „WebGL“, yra galbūt jos saugumas. Pasak „Wikipedia“, Jungtinių Amerikos Valstijų kompiuterinės avarijos parengties grupė (US-CERT) paskelbė įspėjimą, kad „WebGL“ yra keletas galimų saugumo problemų, dėl kurių gali būti atliktas savavališkas kodų vykdymas, atsisakymas teikti paslaugas ir net išpuoliai. Tai reiškia labai, labai daug svetainės savininkui.

Tačiau „Khronos“ grupė, kurioje yra „Mozilla“ ir „Google“, siūlo galimus sprendimus ir ateities plėtros metodą, kad būtų sustiprintas saugumas nuo galimų grėsmių saugumui. Tikimės, kad problemos gali būti sumažintos ir netgi išspręstos ateityje, nes „WebGL“ turi tiek daug galimybių, kaip demonstruoja talentingi ir profesionalūs kūrėjai!

Praneškite mums, kuris eksperimentas jus nustebina labiausiai, ir, žinoma, parodykite mums, jei turite!

Daugiau susijusių įrašų:

• HTML5 svetainė: 48 potencialūs „Flash-Killing Demos“
• HTML5 svetainė: 15 daugiau eksperimentų
• Įkvepiančios CSS3 animacijos demonstracijos