30 esperimenti WebGL che sono solo Wow!

Ecco, un grande strumento con grandi promesse viene ai tuoi occhi. È veloce e scorrevole. Renderizza il 3D e, con l'integrazione che anima, indovina di cosa si tratta? HTML5? CSS3? No, si chiama WebGL, una libreria software che estende la capacità del JavaScript di generare grafica 3D interattiva, e sì, senza plugin!

In questa vetrina, non vogliamo mostrarti le cose normali. Vogliamo mostrare a voi 30 esperimento WebGLQuesti sono creati con cura da sviluppatori professionisti per testimoniare la vera potenza del WebGL che non solo è stimolante, ma ti permette anche di dare un'occhiata a come potrebbe apparire il futuro del web. Salta nel futuro dopo il clic!

Si consiglia vivamente di visualizzare queste demo utilizzando l'ultima versione della versione per sviluppatori di Google Chrome. La maggior parte delle demo supporta l'ultima versione di Firefox, Google Chrome e Safari.

3 sogni del nero

Creato da Google Data Arts Team, 3 Dreams of Black ti porta in 3 mondi onirici costruiti attraverso una combinazione di ricchi disegni 2D e animazioni intrecciate con sequenze 3D interattive. Scopri le meraviglie per un'esperienza meravigliosa!

Particelle di volume animate

Questo è davvero artistico: animali animati costruiti da particelle 3D che utilizzano trame mobili e oggetti frame buffer. Più sorpresa se sposti il ​​mouse!

Acquario

Simula un ambiente sottomarino? Questo non è un problema per WebGL. La demo presenta modelli 3D con trame di alta qualità, animazioni di scene, animazioni pixel shader, riflessioni, rifrazioni e caustiche, tutto per mettere in scena la scena subacquea realistica!

azatioprina

Probabilmente la demo WebGL più epica, abbastanza detta. Punta di cappello all'autore Jochen Wilhelmy.

Attractors Trip

Se vuoi provare il 3D questa è la migliore demo per te, anche medita con l'immensa bellezza della grafica generata da WebGL usando la formula di Hopalong di Martin.

Medusa

“Modellazione procedurale fatta con Side FX Houdini. Esportato con un esportatore Python in formato json. Texture dipinta usando Autodesk Mudbox. Animato con un vertex shader.”

Chrysaora

Questa non è una normale demo di animazione, ma include scheletri simulati dinamicamente, parziale simulazione lato server e sincronizzazione con WebSocket, sistema di particelle con fotocamera rivolta, effetto di luce volumetrico e libreria mjs matrix di Vladimir Vukićević. In breve, un incredibile esperimento con opere complesse.

HelloRacer

Presentazione della simulazione di auto interattive di fascia alta, offerta esclusivamente da HelloEnjoy.

Materiali: auto

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 e Chevrolet Camaro nel tuo browser. Scegli la tua corsa e goditi il ​​panorama. Diamine, puoi persino scegliere i loro colori.

Automobili WebGL

Il futuro della serie Need For Speed ​​sarà nel browser web. Troppo ambizioso? Certamente no se hai visitato queste auto che sono renderizzate con mappe cubo dinamiche, mappe ombra ed effetti postelaborazione.

My Robot Nation

Beh, se la figura non è la tua preferita, prova a costruire un robot bello e affascinante e mostralo al tuo amico! Puoi persino spendere i tuoi soldi per farlo diventare un vero affare.

Pacmaze

Che ne dici di un gioco 3D Pac-Man? La grafica e il gameplay sono belli e, soprattutto, è divertente!

Cappuccetto rosso

Ora eccone uno carino ... o sanguinario. Questo non è altro che un gioco interessante per mostrarti le funzionalità di WebGL quando viene sviluppato nel gioco sparatutto dall'alto verso il basso. Divertente e divertente di sicuro.

TankWorld

Lo indovini, un divertente gioco sparatutto con le bombe da usare e le mappe da esplorare, e in alcuni livelli puoi persino ottenere un elicottero per esplorare il mondo! È veramente più di un normale gioco e la grafica sembra comoda!

Pulpo

Il miglior esempio di come una grafica e un'animazione semplici possono impressionare le persone quando sono fatte bene.

Superficie

Dai un'occhiata a Surface, un esperimento elegante e stimolante realizzato da Paul Lewis. Puoi non solo modificare la magnitudo, l'elasticità, l'orbita automatica, il wireframe e le gocce di pioggia nella demo, ma anche trascinare e rilasciare le tue immagini per sentire l'effetto in modo diverso.

Foto di particelle

Lascia cadere la tua immagine preferita in questa demo e divertiti a guardarla esplodere in una tonnellata di particelle e interagire con una qualche forma di magnetismo. L'esperimento è una combinazione di quattro tecnologie: Drag and Drop di HTML5, API di file, Canvas e WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer è un'emulazione WebGL del classico sintetizzatore video Rutt-Etra. La demo ti consente di inserire le tue immagini e manipolarle. Con questa roba, un'immagine 2D può persino sembrare un 3D!

The Wobble Dance

Una demo semplice ma degna di nota che mostra quanto può essere liquido il WebGL, con shader leggero anisotropico e deformazione del vertice oscillante.

UltraNoir

Un altro grande esperimento che mostra il potenziale del WebGL. Nouvelle Vague offre un'esperienza 3D in tempo reale poetica e interattiva basata su Twitter, e quelli che vedrai saranno tweets realizzati con diversi oggetti volanti. Sicuramente un modo artistico per godersi i tweet.

Scimmia ondeggiante

“Questa volta volevo solo fare un test per vedere quante posizioni dei vertici e le normali potevo aggiornare direttamente in JavaScript. Risulta che 2.000 è giusto :) Ho aggiunto anche un po 'di mappatura dell'ambiente. E stranezza. Aggiungi sempre stranezza.”

Video FX

Impressionante app realizzata da Daniel Pettersson che ti consente di applicare più effetti di postelaborazione simultanea a un trailer di Happy Feet 2. Prova e divertiti!

Voxels Liquid

La rappresentazione 3D del classico algoritmo 2D per l'effetto acqua, mostra anche come è interattivo WebGL.

Libreria WebGL

Sfoglia oltre 10.000 copertine di libri con questa libreria WebGL, sviluppata dal team di Google Data Arts. Puoi anche cercare per argomento, aprire un modello 3D di ciascuno facendo clic su di esso e scaricare libri sul telefono con il codice QR.

Globo WebGL

Un fantastico esperimento del team di Google che ti fa sentire davvero come se fossi in futuro con la sua visualizzazione dei dati bella, elegante e futuristica.

Voli mondiali

Un'altra app visiva di visualizzazione dei dati che visualizza le principali rotte di volo delle compagnie aeree, sembra promettente!

Filtro immagine WebGL

Applicazione di editor grafico con WebGL? Non è mai impossibile Meglio di tutti, è veloce e scorrevole!

Acqua WebGL

“Una pozza d'acqua resa con riflessione, rifrazione, caustiche e occlusione ambientale. La piscina è simulata con un campo di altezza e contiene una sfera che può interagire con la superficie dell'acqua.”

Riflessione

Il problema più grande affrontato da WebGL è forse la sua sicurezza. Secondo Wikipedia, il Computer United States Computing Team (US-CERT) ha emesso l'avviso che WebGL contiene molteplici possibili problemi di sicurezza che potrebbero portare a esecuzione arbitraria di codice, negazione del servizio e persino attacchi tra domini. Questo significa molto, molto per il proprietario del sito web.

Tuttavia, il Gruppo Khronos che include Mozilla e Google ha suggerito possibili soluzioni e un approccio di sviluppo futuro per rafforzare la sicurezza contro le possibili minacce alla sicurezza. Speriamo che i problemi possano essere ridotti e persino risolti in futuro, dato che il WebGL ha così tante possibilità, come dimostrano gli sviluppatori di talento e professionisti!

Facci sapere quale esperimento ti stupisce di più e, naturalmente, mettici in mostra se ne hai uno!

Altri post correlati:

• Sito Web HTML5: 48 potenziali dimostrazioni di uccisione flash
• Sito Web HTML5: altri 15 esperimenti
• Inspiranti demo di animazione CSS3