30 WebGL-eksperimenter, der er bare wow!
Se, for et godt redskab med store løfter kommer til dine øjne. Det er hurtigt og glat. Det gør 3D, og med integration det animerer, gætte hvad det er? HTML5? CSS3? Nej, det hedder WebGL, et softwarebibliotek, der udvider muligheden for JavaScript til at generere interaktiv 3D grafik, og ja, uden plugins!
I denne udstilling ønsker vi ikke at vise dig de almindelige ting. Vi ønsker at vise frem til dig 30 WebGL-eksperiments, der omhyggeligt udarbejdes af professionelle udviklere for at du kan se den sande magt hos WebGL, som ikke kun er inspirerende, men også giver dig et glimt om, hvordan fremtiden på internettet kan se ud. Gå ind i fremtiden efter klik!
Du anbefales kraftigt at se disse demoer ved hjælp af den nyeste version af udviklerversionen af Google Chrome. De fleste demoer understøtter dog den nyeste version af Firefox, Google Chrome og Safari.
3 drømme af sort
3 Dreams of Black bringer dig i 3 drømmeverden konstrueret gennem en kombination af rige 2D-tegninger og animationer sammenvævet med interaktive 3D-sekvenser. Tjek underen for vidunderlig oplevelse!
Animerede Volume Partikler
Denne er virkelig kunstnerisk - animerede dyr konstrueret af 3D-partikler ved hjælp af flyde-teksturer og rammebuffere. Mere overraskelse, hvis du bevæger musen!
Akvarium
Simulere et undervands miljø? Det er ikke et problem for WebGL. Demoen indeholder 3D-modeller med højkvalitets teksturer, scene animation, pixel shader animation, refleksioner, refraktion og kaustics, bare alt for at sætte den realistiske undervands scene!
azathioprin
Sandsynligvis den mest episke WebGL-demo, sagde nok. Hat tip til forfatteren Jochen Wilhelmy.
Attractors Trip
Hvis du vil opleve 3D'en, er dette den bedste demo til dig, også mediteret med den enorme skønhed af WebGL-genereret grafik ved hjælp af Martins Hopalong-formel.
Vandmand
“Procedural modellering lavet med Side FX Houdini. Eksporteres med en Python eksportør til json format. Tekstur malet med Autodesk Mudbox. Animeret med vertex shader.”
Chrysaora
Dette er ikke en almindelig animationsdemo, men den indeholder dynamisk simulerede skeletter, delvis server-side simulering og synkronisering med WebSocket, kamera-vendende partikel system, volumetrisk lys effekt og Vladimir Vukićevićs mjs matrix bibliotek. Kort sagt et fantastisk eksperiment med komplekse værker.
HelloRacer
Introduktion til den avancerede interaktive bilsimulering, bragt til dig udelukkende af HelloEnjoy.
Materialer: Biler
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 og Chevrolet Camaro i din browser. Vælg din tur og nyd udsigten. Heck, du kan endda vælge deres farver.
WebGL-biler
Fremtiden for Need For Speed serien vil være i webbrowser. Alt for ambitiøs? Bestemt ikke, hvis du har besøgt disse biler, der er gengivet med dynamiske terningskort, skyggekort og efterbehandlingseffekter.
Min robot nation
Nå, hvis figuren ikke er din favorit, så prøv at bygge en cool og charmerende robot og vise frem til din ven! Du kan endda bruge dine penge for at gøre det til en ægte aftale.
Pacmaze
Hvad med et 3D Pac-Man spil? Grafikken og gameplay er rart, og vigtigst af alt er det sjovt!
Rød skydning hætte
Nu er her en sød en eller en blodig. Dette er intet andet end et interessant spil for at vise dig mulighederne hos WebGL, når det er udviklet til top down shooter spillet. Sjovt og underholdende.
TankWorld
Du gætter på det, et sjovt tankskytespil med våben til brug og kort til at udforske, og på nogle niveauer kan du endda få en helikopter til at udforske verden! Det er virkelig mere end blot et almindeligt spil, og grafikken ser godt ud!
Pulpo
Bedste eksempel på, hvor enkelt grafik og animation kan imponere folk, når de er færdige rigtigt.
Overflade
Tjek overfladen, et elegant og inspirerende eksperiment lavet af Paul Lewis. Du kan ikke kun ændre størrelsen, elasticiteten, det automatiske kredsløb, wireframe og regndråber i demoen, men også træk og slip dine egne billeder ind i det for at mærke effekten forskelligt.
Foto partikler
Bare slip dit yndlingsbillede i denne demo og nyd at se det eksplodere i et ton partikler og få interaktion med en form for magnetisme. Eksperimentet er en kombination af fire teknologier: HTML5's Drag and Drop, File API, Canvas og WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer er en WebGL-emulering af den klassiske Rutt-Etra videosynteseapparat. Demoen giver dig mulighed for at sætte dine egne billeder inde og manipulere dem. Med disse ting kan et 2D-billede endda se ud som en 3D!
The Wobble Dance
En simpel, men bemærkelsesværdig demo, der viser, hvor flydende WebGL kan være, med anisotrop lysskygger og wobble vertex deformation.
Ultranoir
Et andet stort eksperiment, der viser potentialet hos WebGL. Nouvelle Vague tilbyder en poetisk og interaktiv realtids 3D-oplevelse baseret på kvidre, og det du ser er tweets, der udføres med forskellige flyvende objekter. Bestemt en kunstnerisk måde at nyde tweets.
Bølgende abe
“Denne gang ville jeg bare lave en test for at se, hvor mange vertexpositioner og normaler jeg kunne opdatere direkte i JavaScript. Udviser 2.000 er bare fint :) Jeg har også tilføjet i en smule miljømapping. Og underlig. Tilføj altid uklarhed.”
Video FX
Imponerende app udført af Daniel Pettersson, der giver dig mulighed for at anvende flere samtidige efterbehandlingseffekter til en Happy Feet 2 trailer. Prøv og have det sjovt!
Voxels Liquid
3D-repræsentation af den klassiske 2D-vand-effektalgoritme, viser dig også, hvordan interaktive WebGL er.
WebGL Bogreol
Gennemse over 10.000 bogomslag med denne WebGL-bogreol, udviklet af Google Data Arts Team. Du kan også søge efter emne, åbne en 3D-model af hver ved at klikke på den og downloade bøger på din telefon med QR-koden.
WebGL Globe
Et koldt Google-holds eksperiment, der faktisk får dig til at føle at du er i fremtiden med sin smukke, elegante og futuristiske datavisualisering.
World Flights
En anden visuel appellerende data visualiseringsapp, der visualiserer store flyselskabsruter, ser lovende ud!
WebGL-billedfilter
Grafisk editor applikation med WebGL? Det er aldrig umuligt. Bedst af alt er det hurtigt og glat!
WebGL Vand
“En pool af vand gengivet med refleksion, refraktion, kaustik og omgivende okklusion. Puljen simuleres med højdefelt og indeholder en kugle, som kan interagere med vandets overflade.”
Afspejling
Det største problem, WebGL står over for, er måske dets sikkerhed. Ifølge Wikipedia udstedte USAs Computer Emergency Readiness Team (US-CERT) advarslen om, at WebGL indeholder flere mulige sikkerhedsproblemer, der kan føre til udførelse af vilkårlig kode, afslag på service og endda angreb på tværs af domæner. Det betyder meget, meget meget for webstedets ejer.
Khronos-gruppen, der omfatter Mozilla og Google, har imidlertid foreslået mulige løsninger og fremtidige udviklingsmetoder for at styrke sikkerheden mod de mulige sikkerhedstrusler. Forhåbentlig kan problemerne reduceres og endda løses i fremtiden, da WebGL har så mange muligheder som fremvist af de talentfulde og professionelle udviklere!
Lad os vide, hvilket eksperiment forbløffer dig mest, og selvfølgelig vise os, hvis du har en!
Flere relaterede indlæg:
- HTML5 Website: 48 Potentielle Flash-Killing Demos
- HTML5 Website: 15 Flere eksperimenter
- Inspirerende CSS3 Animation Demos
