30 WebGL-kokeilua, jotka ovat vain Wow!

Katso, sillä suuri työkalu, jolla on suuret lupaukset, on tulossa silmäsi. Se on nopea ja sileä. Se tekee 3D: n, ja integroimalla se animoi, arvaa mitä se on? HTML5? CSS3? Ei, sitä kutsutaan WebGL-ohjelmistokirjastoksi, joka laajentaa JavaScriptin mahdollisuuksia luoda interaktiivisia 3D-grafiikoita, ja kyllä, ilman lisäosia!

Tässä esityksessä emme halua näyttää sinulle tavallisia asioita. Haluamme esitellä sinulle 30 WebGL-kokeilus, jotka ammattimaiset kehittäjät ovat huolellisesti laatineet, voit todistaa WebGL: n todellisen mahdollisuuden, joka ei ole pelkästään inspiroiva, vaan antaa myös mahdollisuuden katsoa, ​​miten webin tulevaisuus saattaa näyttää. Hyppää tulevaisuuteen klikkauksen jälkeen!

Suosittelemme, että tarkastelet näitä demoja Google Chromen kehittäjän version uusimman version avulla. Useimmat demot tukevat kuitenkin Firefoxin, Google Chromen ja Safarin uusinta versiota.

3 Musta unia

Googlen tietojenkäsittelyryhmän laatimat 3 Dreams of Black tuo 3 unelma-maailmaa, jotka on rakennettu yhdistämällä rikkaita 2D-piirustuksia ja animaatioita, jotka on yhdistetty vuorovaikutteisten 3D-sekvenssien kanssa. Tutustu ihmeisiin ihana kokemus!

Animoidut äänen hiukkaset

Tämä on todella taiteellinen - animoituja eläimiä, jotka on rakennettu 3D-hiukkasten avulla käyttämällä float-kuvioita ja kehyspuskuri-objekteja. Yllätys, jos siirrät hiirtä!

Akvaario

Simuloi vedenalainen ympäristö? Se ei ole ongelma WebGL: lle. Demo sisältää 3D-malleja, joissa on laadukkaita kuvioita, kohtaus-animaatiota, pikselivärähtely-animaatioita, heijastuksia, taitekerrosta ja kausticsia.!

atsatiopriini

Todennäköisesti kaikkein eeppisin WebGL-demo, tarpeeksi sanoi. Hat kärki kirjoittajalle Jochen Wilhelmylle.

Attractors Trip

Jos haluat kokea 3D: n, tämä on paras demo sinulle, mieti myös WebGL: n tuottaman grafiikan valtavaa kauneutta käyttämällä Martinin Hopalong-kaavaa.

Meduusa

“Side FX Houdinilla tehdyt menettelytavat. Vienti Python-viejällä json-muotoon. Tekstuuri maalattu Autodesk Mudboxilla. Animoitu vertex-varjostimella.”

Chrysaora

Tämä ei ole säännöllinen animaatioesitys, mutta siinä on dynaamisesti simuloituja luurankoja, osittaista palvelinpuolen simulointia ja synkronointia WebSocketin, kameran suuntaisen hiukkasten, volumetrisen valotehon ja Vladimir Vukićevićin mjs-matriisikirjaston kanssa. Lyhyesti sanottuna hämmästyttävä kokeilu monimutkaisilla teoksilla.

HelloRacer

Esittelyssä high-end interaktiivinen auto simulointi, tuonut sinulle yksinomaan HelloEnjoy.

Materiaalit: Autot

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 ja Chevrolet Camaro selaimessasi. Valitse matkasi ja nauti näkymistä. Heck, voit jopa valita värinsä.

WebGL Autot

Need For Speed ​​-sarjan tulevaisuus on web-selaimessa. Liian kunnianhimoinen? Varmasti ei, jos olet käynyt näissä autoissa, jotka on tehty dynaamisilla kuutikartoilla, varjo-kartoilla ja jälkikäsittelyefekteillä.

Oma robotti kansani

No, jos luku ei ole suosikkisi, yritä rakentaa viileä ja viehättävä robotti ja näyttää ystävällesi! Voit jopa viettää taalasi, jotta se olisi todellinen.

Pacmaze

Entä 3D Pac-Man-peli? Grafiikka ja pelattavuus ovat mukavia, ja mikä tärkeintä, se on hauskaa!

Red Shooting huppu

Nyt täällä on söpö ... tai verinen. Tämä on pelkästään mielenkiintoinen peli, joka näyttää WebGL: n ominaisuudet, kun se on kehittynyt ylhäältä alas ampuvapeliksi. Hauska ja hauska.

TankWorld

Voit arvata sen, miellyttävän säiliökoneen, jossa on aseita, ja karttoja tutkia, ja joillakin tasoilla voit jopa saada helikopterin tutustumaan maailmaan! Se on todellakin enemmän kuin pelkkä tavallinen peli, ja grafiikka näyttää mukavalta!

pulpo

Paras esimerkki siitä, kuinka yksinkertaiset grafiikat ja animaatiot voivat vaikuttaa ihmisiin, kun ne tehdään oikein.

Pinta

Tutustu pintaan, joka on tyylikäs ja inspiroiva Paul Lewisin tekemä kokeilu. Demossa ei voi vain muuttaa suuruutta, kimmoisuutta, automaattista kiertorataa, lankamerkkiä ja sadepisaroita, vaan myös vetää ja pudottaa omia kuviasi siihen, jotta voit tuntea vaikutuksen eri tavalla.

Photo Particles

Vain pudota suosikkikuvasi tähän demoon ja nauti siitä, että se räjähtää osaksi hiukkasia ja saada vuorovaikutusta jonkinlaisen magnetismin kanssa. Kokeilu on yhdistelmä neljästä teknologiasta: HTML5: n vetämällä ja pudottamalla, tiedoston API, Canvas ja WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer on klassisen Rutt-Etran videon syntetisaattorin WebGL-emulointi. Demon avulla voit laittaa omia kuviasi ja manipuloida niitä. Tällä 2D-kuvalla voi jopa näyttää 3D-kuvalta!

Wobble Dance

Yksinkertainen mutta huomionarvoinen demo, joka näyttää, kuinka nestemäinen WebGL voi olla, anisotrooppisen valon varjostimen ja heiluttavan kärjen muodonmuutoksen kanssa.

Ultranoir

Toinen suuri kokeilu, joka esittelee WebGL: n mahdollisuuksia. Nouvelle Vague tarjoaa poikillisen ja vuorovaikutteisen reaaliaikaisen 3D-kokemuksen, joka perustuu Twitteriin, ja mitä näet, on tweetit, jotka suoritetaan eri lentävät esineet. Varmasti taiteellinen tapa nauttia tweeteistä.

Undulating Monkey

“Tällä kertaa halusin vain testata, kuinka monta vertex-asemaa ja normaalia voin päivittää suoraan JavaScriptissä. Osoittautuu, että 2 000 on hienosti :) Lisäsin myös hieman ympäristökartoitusta. Ja outo. Lisää aina outoa.”

Video FX

Daniel Petterssonin vaikuttava sovellus, jonka avulla voit soveltaa useita samanaikaisia ​​jälkikäsittelyvaikutuksia Happy Feet 2 -perävaunuun. Kokeile ja pidä hauskaa!

Voxels Liquid

3D-esitys klassisesta 2D-vedetehokkuusalgoritmista näyttää myös, miten interaktiivinen WebGL on.

WebGL-kirjahylly

Selaa tätä WebGL-kirjahyllyä, jonka Google Data Arts -tiimi on kehittänyt, yli 10 000 kirjakansiota. Voit myös etsiä aiheen mukaan, avata jokaisen 3D-mallin napsauttamalla sitä ja ladata puhelimessasi kirjoja QR-koodilla.

WebGL Globe

Hieno, tyylikäs ja futuristinen tietojen visualisointi on viileä Google-tiimin kokeilu, joka todella saa sinut tuntemaan olevasi tulevaisuudessa.

Maailman lennot

Toinen visuaalisesti houkutteleva tietojen visualisointiohjelma, joka visualisoi suuria lentoyhtiöitä, näyttää lupaavalta!

WebGL-kuvasuodatin

Graafinen editorisovellus WebGL: n kanssa? Se ei ole koskaan mahdotonta. Mikä parasta, se on nopea ja sileä!

WebGL Water

“Vesi, joka on tehty heijastuksella, taittumisella, kaustisilla ja ympäröivillä tukkeumilla. Allas simuloidaan korkeuskentällä ja sisältää pallon, joka voi olla vuorovaikutuksessa veden pinnan kanssa.”

Heijastus

WebGL: n suurin ongelma on ehkä sen turvallisuus. Wikipedian mukaan Yhdysvaltain tietokoneavusteinen valmiusryhmä (US-CERT) antoi varoituksen siitä, että WebGL sisältää useita mahdollisia turvallisuusongelmia, jotka saattavat johtaa mielivaltaiseen koodin suorittamiseen, palveluneston kieltämiseen ja jopa verkkotunnusten välisiin hyökkäyksiin. Tämä tarkoittaa hyvin paljon, hyvin paljon sivuston omistajalle.

Mozillaa ja Googlea sisältävä Khronos-ryhmä on kuitenkin ehdottanut mahdollisia ratkaisuja ja tulevaa kehitystapaa vahvistaakseen turvallisuutta mahdollisia turvallisuusuhkia vastaan. Toivottavasti ongelmat voidaan pienentää ja jopa ratkaista tulevaisuudessa, sillä WebGL: llä on niin paljon mahdollisuuksia kuin lahjakkaiden ja ammattitaitoisten kehittäjien esittelyssä!

Kerro meille, mikä kokeilu hämmästyttää sinua eniten, ja tietysti näytä meille, jos sinulla on sellainen!

Lisää liittyviä viestejä:

• HTML5-sivusto: 48 potentiaalista Flash-tappamista demoa
• HTML5-sivusto: 15 muuta kokeilua
• Innoittavat CSS3-animaatiodemot