30 WebGL-experimenten die gewoon wauw zijn!

Zie, want een geweldig gereedschap met grote beloften komt naar je toe. Het gaat snel en soepel. Het maakt 3D, en met integratie het animeert, raad eens wat het is? HTML5? CSS3? Nee, het heet WebGL, een softwarebibliotheek die de mogelijkheden van JavaScript uitbreidt om interactieve 3D-afbeeldingen te genereren, en ja, zonder plug-ins!

In deze showcase willen we je niet de normale dingen laten zien. We willen je laten zien 30 WebGL-experiments die zorgvuldig door professionele ontwikkelaars zijn gemaakt zodat u getuige kunt zijn van de ware kracht van de WebGL, die niet alleen inspirerend is, maar u ook een glimp laat zien van hoe de toekomst van het web eruit zou kunnen zien. Spring in de toekomst na de klik!

We raden u ten zeerste aan om deze demo's te bekijken met de nieuwste versie van de ontwikkelaarsversie van Google Chrome. De meeste demo's ondersteunen echter de nieuwste versie van Firefox, Google Chrome en Safari.

3 dromen van zwart

Gegenereerd door Google Data Arts Team, 3 Dreams of Black brengt je in 3 droomwerelden opgebouwd door een combinatie van rijke 2D-tekeningen en animaties verweven met interactieve 3D-reeksen. Bekijk de wonderen voor geweldige ervaring!

Geanimeerde volumedeeltjes

Dit is echt artistiek - geanimeerde dieren geconstrueerd door 3D-deeltjes met behulp van zweeftexturen en framebufferobjecten. Meer verrassing als je de muis beweegt!

Aquarium

Simuleert een onderwateromgeving? Dat is geen probleem voor WebGL. De demo biedt 3D-modellen met texturen van hoge kwaliteit, scène-animatie, pixel shader-animatie, reflecties, breking en bijtende stoffen, gewoon alles om de realistische onderwater scene op te zetten!

azathioprine

Waarschijnlijk de meest epische WebGL-demo, genoeg gezegd. Hoedentip voor de auteur Jochen Wilhelmy.

Attractors Trip

Als je de 3D wilt ervaren, is dit de beste demo voor jou, ook wordt je gemediteerd met de immense schoonheid van WebGL-gegenereerde graphics met Martin's Hopalong-formule.

kwal

“Procedureel modelleren gedaan met Side FX Houdini. Geëxporteerd met een Python-exporteur naar json-formaat. Textuur geschilderd met Autodesk Mudbox. Geanimeerd met een vertex-arcering.”

Chrysaora

Dit is geen gewone animatiedemo, maar het bevat dynamisch gesimuleerde skeletten, gedeeltelijke simulatie aan de serverzijde en synchronisatie met WebSocket, camera-gericht deeltjessysteem, volumetrisch lichteffect en de mjs-matrixbibliotheek van Vladimir Vukićević. Kortom, een geweldig experiment met complexe werken.

HelloRacer

Introductie van de high-end interactieve autosimulatie, exclusief aangeboden door HelloEnjoy.

Materialen: Auto's

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 en Chevrolet Camaro in uw browser. Kies je rit en geniet van het uitzicht. Je kunt zelfs hun kleuren kiezen.

WebGL Cars

De toekomst van de Need For Speed-serie zal in de webbrowser zijn. Te ambitieus? Zeker niet als u deze auto's hebt bezocht die zijn weergegeven met dynamische kubusmappen, schaduwkaarten en nabewerkingseffecten.

My Robot Nation

Nou, als figuur niet jouw favoriet is, probeer dan een coole en charmante robot te bouwen en met je vriend te pronken! Je kunt zelfs je geld uitgeven om het een echte deal te maken.

Pacmaze

Wat dacht je van een 3D Pac-Man-spel? De graphics en gameplay zijn leuk, en vooral het is leuk!

Rode schietkap

Nu is hier een leuke ... of een bloederige. Deze is niets anders dan een interessant spel om je de mogelijkheden van WebGL te laten zien wanneer het is ontwikkeld tot het top-down shooter-spel. Leuk en leuk zeker.

TankWorld

Je raadt het, een plezierig tank shooter-spel met wapens om te gebruiken en kaarten om te verkennen, en op sommige niveaus kun je zelfs een helikopter krijgen om de wereld te verkennen! Het is echt meer dan alleen een gewoon spel en de afbeelding ziet er comfortabel uit!

Pulpo

Het beste voorbeeld van hoe eenvoudige afbeeldingen en animaties indruk kunnen maken op mensen wanneer ze goed zijn gedaan.

Oppervlakte

Check the Surface, een elegant en inspirerend experiment gemaakt door Paul Lewis. Je kunt niet alleen de magnitude, elasticiteit, auto-baan, draadframe en regendruppels in de demo veranderen, maar ook je eigen afbeeldingen erin slepen en neerzetten om het effect anders te voelen.

Foto deeltjes

Laat gewoon je favoriete afbeelding in deze demo vallen en geniet ervan om het te zien exploderen in een ton deeltjes en interactie te krijgen met een of andere vorm van magnetisme. Het experiment is een combinatie van vier technologieën: HTML5 Drag and Drop, File API, Canvas en WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer is een WebGL-emulatie van de klassieke Rutt-Etra-videosynthesizer. Met de demo kun je je eigen afbeeldingen erin plaatsen en ze manipuleren. Met dit spul kan een 2D-afbeelding er zelfs als een 3D uitzien!

The Wobble Dance

Een eenvoudige maar toch opmerkelijke demo die laat zien hoe vloeibaar de WebGL kan zijn, met anisotrope lichtshader en vervormde vertex vervorming.

Ultranoir

Nog een geweldig experiment waarin het potentieel van de WebGL wordt getoond. Nouvelle Vague biedt een poëtische en interactieve realtime 3D-ervaring op basis van Twitter, en wat u ziet zijn tweets die worden uitgevoerd met verschillende vliegende objecten. Zeker een artistieke manier om van de tweets te genieten.

Golvende aap

“Deze keer wilde ik gewoon een test doen om te zien hoeveel vertex-posities en -normen ik direct in JavaScript kon bijwerken. Blijkt dat 2000 prima is :) Ik heb ook een beetje omgevingsmapping toegevoegd. En gekheid. Voeg altijd raar toe.”

Video FX

Indrukwekkende app van Daniel Pettersson waarmee je meerdere simultaan nabewerkingseffecten kunt toepassen op een Happy Feet 2-trailer. Probeer plezier te hebben!

Voxels Liquid

3D-weergave van het klassieke 2D-watereffect-algoritme toont u ook hoe interactief WebGL is.

WebGL-boekenkast

Blader door meer dan 10.000 boekomslagen met deze WebGL-boekenkast, ontwikkeld door het Google Data Arts Team. U kunt ook op onderwerp zoeken, een 3D-model van elk openen door erop te klikken en boeken op uw telefoon downloaden met de QR-code.

WebGL Globe

Een cool Google-teamsexperiment waarmee u zich in de toekomst echt voelt met zijn prachtige, elegante en futuristische gegevensvisualisatie.

Wereld Vluchten

Een andere visueel aantrekkelijke app voor datavisualisatie die de vliegroutes van grote luchtvaartmaatschappijen visualiseert, ziet er veelbelovend uit!

WebGL-afbeeldingsfilter

Grafische editor applicatie met WebGL? Het is nooit onmogelijk. Het beste van alles is dat het snel en soepel verloopt!

WebGL Water

“Een plas water gemaakt met reflectie, breking, bijtende stoffen en atmosferische occlusie. Het zwembad is gesimuleerd met een hoogveld en bevat een bol die kan interageren met het wateroppervlak.”

Reflectie

Het grootste probleem waarmee WebGL te maken kreeg, is misschien de beveiliging ervan. Volgens de Wikipedia gaf het United States Computer Emergency Readiness Team (VS-CERT) de waarschuwing dat WebGL meerdere mogelijke beveiligingsproblemen bevat die kunnen leiden tot willekeurige code-uitvoering, denial of service en zelfs interdomeinaanvallen. Dit betekent heel, heel erg voor de eigenaar van de website.

De Khronos-groep die Mozilla en Google omvat, heeft echter mogelijke oplossingen en een toekomstige ontwikkelingsaanpak voorgesteld om de beveiliging tegen mogelijke veiligheidsbedreigingen te versterken. Hopelijk kunnen de problemen worden verminderd en zelfs worden opgelost in de toekomst, omdat de WebGL zoveel mogelijkheden heeft zoals getoond door de getalenteerde en professionele ontwikkelaars!

Laat ons weten welk experiment je het meest verbaast, en laat ons natuurlijk zien of je er een hebt!

Meer gerelateerde berichten:

• HTML5-website: 48 potentiële demo's over Flash-Killing
• HTML5-website: 15 extra experimenten
• Inspirerende CSS3-animatiedemo's