30 WebGL-experiment som bara är wow!
Se, för ett bra verktyg med stora löften kommer till dina ögon. Det är snabbt och smidigt. Det gör 3D, och med integration det animerar, gissa vad det är? HTML5? CSS3? Nej, det kallas WebGL, ett programbibliotek som utökar JavaScript för att generera interaktiv 3D-grafik, och ja, utan plugins!
I den här utställningen vill vi inte visa dig de vanliga sakerna. Vi vill visa upp för dig 30 WebGL-experiments som är omsorgsfullt utarbetade av professionella utvecklare för att du ska bevittna WebGLs sanna makt som inte bara är inspirerande utan också ger dig en inblick i hur webens framtid kan se ut. Hoppa in i framtiden efter klick!
Du rekommenderas starkt att visa dessa demos med den senaste versionen av utvecklarversionen av Google Chrome. De flesta demon stöder dock den senaste versionen av Firefox, Google Chrome och Safari.
3 drömmar av svart
3 Dreams of Black ger dig 3 drömvärldar konstruerade genom en kombination av rika 2D-ritningar och animationer sammanvävda med interaktiva 3D-sekvenser. Kolla in underverk för underbar upplevelse!
Animerade volympartiklar
Den här är verkligen konstnärliga - animerade djur konstruerade av 3D-partiklar med flytande texturer och rambuffertobjekt. Mer överraskning om du flyttar musen!
Akvarium
Simulera en undervattensmiljö? Det är inte ett problem för WebGL. Demon har 3D-modeller med högkvalitativa strukturer, scenanimering, animering av pixelskuggning, reflektioner, refraktion och kaustik, bara allt för att sätta upp den realistiska undervattensscenen!
azatioprin
Förmodligen sagt den mest episka WebGL-demo. Hat tips till författaren Jochen Wilhelmy.
Attractors Trip
Om du vill uppleva 3D är den bästa demoen för dig, får du också mediterade med den enorma skönheten i WebGL-genererad grafik med hjälp av Martins Hopalong-formel.
Manet
“Procedural modellering gjord med Side FX Houdini. Exporteras med en Python-exportör till json-format. Textur målade med Autodesk Mudbox. Animerad med en vertex shader.”
Chrysaora
Det här är inte en vanlig animationsdemo, men den har dynamiskt simulerade skelett, delvis serverns simulering och synkronisering med WebSocket, kamera-vänd partikelsystem, volymetrisk ljuseffekt och Vladimir Vukićevićs mjs matrisbibliotek. Kort sagt, ett fantastiskt experiment med komplexa verk.
HelloRacer
Introducerar den avancerade interaktiva bilsimuleringen, uteslutande till dig av HelloEnjoy.
Material: Bilar
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 och Chevrolet Camaro i din webbläsare. Välj din åktur och njut av utsikten. Heck, du kan även välja sina färger.
WebGL-bilar
Framtiden för Need For Speed-serien kommer att finnas i webbläsaren. För ambitiös? Visst inte om du har besökt dessa bilar som görs med dynamiska kubkartor, skuggkartor och efterbehandlingseffekter.
Min Robot Nation
Tja, om siffran inte är din favorit, försök sedan bygga en cool och charmig robot och visa upp till din vän! Du kan till och med spendera dina pengar för att göra det till en riktig affär.
Pacmaze
Vad sägs om ett 3D Pac-Man-spel? Grafiken och gameplayen är trevliga, och viktigast av allt är det roligt!
Röd skjuthuvud
Nu är här en söt ... eller blodig. Det här är inget annat än ett intressant spel för att visa dig möjligheterna hos WebGL när den utvecklas till topp down shooter-spelet. Roligt och underhållande säkert.
TankWorld
Du gissar det, ett roligt tankskyttsspel med vapen att använda och kartor att utforska, och på vissa nivåer kan du till och med få en helikopter för att utforska världen! Det är verkligen mer än bara ett vanligt spel, och grafiken ser bekväm ut!
pulpo
Bästa exempel på hur enkelt grafik och animering kan imponera på människor när de är färdiga rätt.
Yta
Kolla in Surface, ett elegant och inspirerande experiment gjord av Paul Lewis. Du kan inte bara ändra storleken, elasticiteten, automatisk omlopp, wireframe och regndroppar i demoen, men dra och släpp också dina egna bilder i det för att känna effekten annorlunda.
Fotopartiklar
Bara släpp din favoritbild i denna demo och njut av att se den explodera i massor av partiklar och bli interagerad med någon form av magnetism. Experimentet är en kombination av fyra teknologier: HTML5: s Drag och släpp, File API, Canvas och WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer är en WebGL-emulering av den klassiska Rutt-Etra videosyntesen. Demon låter dig lägga in egna bilder och manipulera dem. Med dessa saker kan en 2D-bild även se ut som en 3D-bild!
The Wobble Dance
En enkel men ändå anmärkningsvärd demo som visar hur flytande WebGL kan vara, med anisotropisk ljusskärm och wobble vertex deformation.
Ultranoir
Ett annat bra experiment som visar potentialen hos WebGL. Nouvelle Vague erbjuder en poetisk och interaktiv realtids 3D-upplevelse baserad på Twitter, och vad du ser kommer att bli tweets som utförs med olika flygande objekt. Visst ett konstnärligt sätt att njuta av tweetsna.
Böljande apa
“Den här gången ville jag bara göra ett test för att se hur många vertexpositioner och normaler jag kunde uppdatera direkt i JavaScript. Visas 2000 är bara bra :) Jag har också lagt till lite miljökartläggning. Och konstighet. Lägg alltid på konstighet.”
Video FX
Imponerande app gjord av Daniel Pettersson som låter dig applicera flera samtidiga efterbehandlingseffekter till en Happy Feet 2 trailer. Prova och ha det roligt!
Voxels Liquid
3D-representation av den klassiska 2D-vatteneffektalgoritmen, visar dig också hur interaktiv WebGL är.
WebGL bokhylla
Bläddra över 10 000 bokomslag med denna WebGL-bokhylla, utvecklad av Google Data Arts Team. Du kan också söka efter ämne, öppna en 3D-modell av varje genom att klicka på den och ladda ner böcker på din telefon med QR-koden.
WebGL Globe
Ett coolt Google-teams experiment som faktiskt gör att du känner att du är i framtiden med sin vackra, eleganta och futuristiska datavisualisering.
Världsflygningar
En annan visuellt tilltalande data visualiseringsapp som visualiserar stora flygbolagens flygleder, ser lovande ut!
WebGL-bildfilter
Grafisk redigeringsapplikation med WebGL? Det är aldrig omöjligt. Bäst av allt är det snabbt och smidigt!
WebGL Water
“En pool av vatten gjord med reflektion, refraktion, kaustik och omgivande ocklusion. Poolen simuleras med ett höjdfält och innehåller en sfär som kan interagera med vattenytan.”
Reflexion
Den största frågan som WebGL mötte, är kanske dess säkerhet. Enligt Wikipedia utfärdade United States Computer Emergency Readiness Team (US-CERT) varningen om att WebGL innehåller flera möjliga säkerhetsproblem som kan leda till exekvering av godtycklig kod, avslag på tjänst och till och med tvärdomänattacker. Detta betyder väldigt mycket för webbplatsens ägare.
Men Khronos-gruppen som inkluderar Mozilla och Google har föreslagit möjliga lösningar och framtida utvecklingsmetoder för att stärka säkerheten mot eventuella säkerhetshot. Förhoppningsvis kan problemen minskas och till och med lösas i framtiden, eftersom WebGL har så många möjligheter som framträder av de begåvade och professionella utvecklarna!
Låt oss veta vilket experiment förvånar dig mest, och naturligtvis visa oss om du har en!
Fler relaterade inlägg:
- HTML5 Webbplats: 48 Potentiella Flash-Killing Demos
- HTML5 hemsida: 15 Fler experiment
- Inspirerande CSS3 Animation Demos
