30 WebGL-eksperimenter som bare er wow!
Se, for et godt verktøy med store løfter kommer til dine øyne. Det er raskt og jevnt. Det gjør 3D, og med integrasjon det animerer, gjett hva det er? HTML5? CSS3? Nei, det kalles WebGL, et programvarebibliotek som utvider muligheten til JavaScript for å generere interaktiv 3D-grafikk, og ja, uten plugins!
I denne presentasjonen ønsker vi ikke å vise deg de vanlige tingene. Vi ønsker å vise frem til deg 30 WebGL-eksperiments som er nøye utformet av profesjonelle utviklere for at du skal oppleve den sanne kraften i WebGL, som ikke bare er inspirerende, men også gir deg et glimt om hvordan fremtiden for Internettet kan se ut. Hopp inn i fremtiden etter klikk!
Du anbefales på det sterkeste å se disse demoene ved hjelp av den nyeste versjonen av utviklerversjonen av Google Chrome. De fleste demoer støtter imidlertid den nyeste versjonen av Firefox, Google Chrome og Safari.
3 drømmer av svart
3 Dreams of Black bringer deg inn i 3 drømmeverker konstruert gjennom en kombinasjon av rike 2D-tegninger og animasjoner sammenblandet med interaktive 3D-sekvenser. Sjekk ut underverkene for fantastisk opplevelse!
Animerte volumpartikler
Denne er virkelig kunstnerisk - animerte dyr konstruert av 3D-partikler ved hjelp av flyte-teksturer og rammebufferobjekter. Mer overraskelse hvis du beveger musen!
Akvarium
Simulere et undervanns miljø? Det er ikke et problem for WebGL. Demoen har 3D-modeller med høy kvalitet teksturer, scene animasjon, pixel shader animasjon, refleksjoner, refraksjon og kaustics, bare alt for å sette opp den realistiske undervanns scenen!
azatioprin
Sannsynligvis den mest episke WebGL-demoen, sa nok. Hatt tips til forfatteren Jochen Wilhelmy.
Attractors Trip
Hvis du vil oppleve 3D, er dette den beste demoen for deg, og du får også meditasjon med den enorme skjønnheten i WebGL-generert grafikk ved hjelp av Martins Hopalong-formel.
Manet
“Prosedyre modellering gjort med Side FX Houdini. Eksporteres med en Python eksportør til json format. Tekstur malt med Autodesk Mudbox. Animert med vertex shader.”
Chrysaora
Dette er ikke en vanlig animasjonsdemo, men den har dynamisk simulerte skjeletter, delvis server-side simulering og synkronisering med WebSocket, kameravendt partikkelsystem, volumetrisk lyseffekt og Vladimir Vukićevićs mjs matriksbibliotek. Kort sagt, et fantastisk eksperiment med komplekse verk.
HelloRacer
Vi presenterer den interaktive bilsimuleringen, brakt ut av HelloEnjoy.
Materialer: Biler
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 og Chevrolet Camaro i nettleseren din. Velg din tur og nyt utsikten. Heck, du kan selv velge sine farger.
WebGL-biler
Fremtiden for Need For Speed-serien vil være i nettleseren. For ambisiøs? Absolutt ikke hvis du har besøkt disse bilene som er gjengitt med dynamiske terningskart, skyggekort og etterbehandlingseffekter.
Min Robot Nation
Vel, hvis figuren ikke er din favoritt, så prøv å bygge kul og sjarmerende robot og vise frem til din venn! Du kan til og med bruke pengene dine for å gjøre det til en ekte avtale.
Pacmaze
Hva med et 3D Pac-Man-spill? Grafikken og spillingen er fin, og viktigst er det morsomt!
Rød skyve hette
Nå er det en søt en eller en blodig. Dette er ingenting annet enn et interessant spill for å vise deg evnen til WebGL når den er utviklet til topp down shooter spillet. Morsomt og morsomt.
TankWorld
Du gjetter det, et morsomt tankskytespill med våpen å bruke og kart for å utforske, og på noen nivåer kan du til og med få et helikopter for å utforske verden! Det er virkelig mer enn bare et vanlig spill, og grafikken ser behagelig ut!
Pulpo
Beste eksempel på hvor enkelt grafikk og animasjon kan imponere folk når de er ferdige riktig.
Flate
Sjekk ut overflaten, et elegant og inspirerende eksperiment laget av Paul Lewis. Du kan ikke bare endre størrelsen, elastisiteten, automatisk bane, wireframe og regndråper i demoen, men også dra og slipp dine egne bilder inn i den for å føle effekten annerledes.
Foto Partikler
Bare slipp ditt favorittbilde i denne demonstrasjonen og nyt det å se det eksplodere i et parti partikler og få interaksjon med noen form for magnetisme. Eksperimentet er en kombinasjon av fire teknologier: HTML5 er Dra og slipp, Fil API, Lerret og WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer er en WebGL-emulering av den klassiske Rutt-Etra video synthesizer. Demoen lar deg sette inn dine egne bilder og manipulere dem. Med dette kan et 2D-bilde til og med se ut som en 3D!
The Wobble Dance
En enkel, men likevel bemerkelsesverdig demo som viser hvordan flytende WebGL kan være, med anisotropisk lysskygge og wobble vertex deformasjon.
Ultranoir
Et annet stort eksperiment som viser potensialet til WebGL. Nouvelle Vague tilbyr en poetisk og interaktiv sanntids 3D-opplevelse basert på Twitter, og det du ser vil være tweets som utføres med forskjellige flygende objekter. Absolutt en kunstnerisk måte å nyte tweets.
Bølgende ape
“Denne gangen ville jeg bare gjøre en test for å se hvor mange toppunktsposisjoner og normaler jeg kunne oppdatere direkte i JavaScript. Skjermer 2000 er bare bra :) Jeg har også lagt til litt miljøkartlegging. Og raritet. Legg alltid til vekkhet.”
Video FX
Imponerende app utført av Daniel Pettersson som lar deg bruke flere samtidige etterbehandlingseffekter til en Happy Feet 2 trailer. Prøv og ha det gøy!
Voxels Liquid
3D-representasjon av den klassiske 2D-vann-effektalgoritmen, viser deg også hvordan interaktiv WebGL er.
WebGL bokhylle
Bla gjennom over 10 000 bokomslag med denne WebGL-bokhylle, utviklet av Google Data Arts Team. Du kan også søke etter emne, åpne en 3D-modell av hver ved å klikke på den og laste ned bøker på telefonen med QR-koden.
WebGL Globe
Et kult Google-teams eksperiment som faktisk gjør at du føler at du er i fremtiden med sin vakre, elegante og futuristiske datavisualisering.
World Flights
En annen visuelt appellerende data visualiseringsapp som visualiserer store flyselskapsruter, ser lovende ut!
WebGL-bildefilter
Grafisk editor applikasjon med WebGL? Det er aldri umulig. Best av alt, det er raskt og jevnt!
WebGL vann
“Et basseng av vann gjengitt med refleksjon, refraksjon, kaustikk og omgivende okklusjon. Bassenget er simulert med høydefelt og inneholder en kule som kan samhandle med vannoverflaten.”
refleksjon
Det største problemet som WebGL møtte, er kanskje dets sikkerhet. Ifølge Wikipedia utstedte United States Computer Emergency Readiness Team (US-CERT) advarselen om at WebGL inneholder flere mulige sikkerhetsproblemer som kan føre til utførelse av vilkårlig kode, avslag på tjenesten og til og med angrep på flere domener. Dette betyr veldig, veldig mye til nettstedets eier.
Imidlertid har Khronos-gruppen som inkluderer Mozilla og Google, foreslått mulige løsninger og fremtidig utviklingsstrategi for å styrke sikkerheten mot mulige sikkerhetstrusler. Forhåpentligvis kan problemene bli redusert og til og med løst i fremtiden, da WebGL har så mange muligheter som fremvist av talentfulle og profesjonelle utviklere!
Gi oss beskjed om hvilket eksperiment som forbløffer deg mest, og selvfølgelig vis deg for oss hvis du har en!
Flere beslektede innlegg:
- HTML5 Website: 48 Potensielle Flash-Killing Demos
- HTML5 Nettsted: 15 Flere eksperimenter
- Inspirerende CSS3 Animasjonsdemoer
