Quasi tutti i
moderni computer e la maggior parte smartphone hanno GPU potenti
processori grafici che spesso hanno più potenza di calcolo rispetto alla
CPU. Ma fino a poco le pagine web e sito web mobile s non potevano usarle - che significa lento, la grafica di bassa qualità, quasi sempre in 2D.
Tutto è cambiato quando WebGL è stato rilasciato nelle ultime versioni di Firefox e Chrome. WebGL , basato sul noto OpenGL standard grafico 3D, dà JavaScript accesso senza plugin per l'hardware grafico, tramite l' HTML5 elemento canvas - fare grafica 3D in tempo reale nelle pagine web possibili.
Supporto tecnico
Apple
sta sostenendo lo standard troppo, in modo che possiamo (si spera!) Si
aspettano di vederlo saltar fuori in Safari su Mac, iPhone e iPad
Sometime (anche se probabilmente non breve) - e Opera stanno testando la
propria versione, quindi l'unico dati di controllo è Microsoft
Quindi sedetevi, alzare la vostra ultima
versione del browser, e prova anche questi demo - se si pensa che si può
fare di meglio, andare per esso: ci sono alcuni suggerimenti e consigli
su come alla fine.
Questo pezzo di WebGL presenta la canzone Black da Danger Mouse e Daniele Luppi3 Dreams of Black è un film semi-interattivo Chris Milk , utilizzando tecnologia sviluppata da Google e altri, con la canzone Nero dall'album ROMA da Danger Mouse e Daniele Luppi, con Norah Jones e Jack White. Esso vi porterà attraverso tre sogni distinti, mescolando 2D e 3D computer grafica con il video. Funziona meglio su Chrome. Leggi la rivista netta rapporto 's sul progetto qui .
Navigator è reso in tempo reale in JavaScript e WebGLCreato
dal team di Mozilla API Audio, il Navigator è un video musicale non
interattivo reso in tempo reale in JavaScript e WebGL, con
l'integrazione di Twitter e Flickr. Si può leggere tutto su come è stato creato su di David Humphrey blog .
3Dtin è grande per i principianti in quanto è facile iniziare conLa
maggior parte degli strumenti per la creazione di contenuti 3D sono
difficili da usare - esperto-friendly, ma principiante-ostile. 3Dtin è facile iniziare con, che consente di creare forme con un approccio naturale voxel-orientato (si pensi pixel 3D). E una volta che hai creato il tuo disegno, è possibile esportarlo in realtà utilizzando i servizi di stampa 3D da i.materialise .
ChemDoodle consente di vedere strutture chimiche in 3DCome
ci si aspetterebbe con una nuova tecnologia, ci sono un sacco di
persone che utilizzano WebGL per fare dimostrazioni fresco, e un minor
numero di strumenti reali. ChemDoodle è un'eccezione a questa. iChemLabs
, una società di visualizzazione scientifica, ha messo insieme gli
strumenti per la visualizzazione di molecole nelle pagine web; questa
pagina demo permette di scegliere uno di una serie di farmaci e vedere
una rappresentazione 3D della sua struttura chimica nel browser.
I frattali rendono tutto più Awesomer - fattoMentre stiamo guardando bella grafica ... Tom Beddard, alias subblue
, è ben noto per la sua incredibile frattali in 3D e FractalLab è una
sua creazione WebGL, calcolando tutto ciò che vi mostra in tempo reale
sul tuo computer. Attenzione: se non si dispone di una
scheda grafica molto veloce, potrebbe essere necessario attendere un po
'quando si avvia in su, e potrebbe apparire come il browser si è
bloccato per qualche istante. Ne vale la pena, però.
Musical sistema solare risale via del ritorno al 2009. Si può ricordare che lontano?WebGL
non è stato in giro, anche nei primissimi versioni pre-beta, per molto
tempo, così musicale Sistema Solare di Jacob Seidelin dalla fine del
2009 è il più vicino si trova a un vecchio classico: astronomia, musica
techno e almeno un terribile scherzo, in uno stile demoscene.
Un mare di meduse galleggianti, tutto sul monitorUn'altra bella scena, ma un po 'più tranquillo, è Aleksandar Rodic Chrysaora s' - un mare di meduse galleggianti, tutto simulato sul computer. Inoltre, non perdetevi il video di lui ha fatto mostrando una versione (purtroppo non pubblico) che è controllabile da un Kinect!
Angry Birds è un ... Sai cosa Angry Birds è! E qui è in WebGLQuando Rovio
ha deciso di creare una versione web di Angry Birds, ha fatto una
decisione intelligente: una versione a bassa risoluzione (SD) sulla base
del 2D Canvas non con accelerazione hardware, e quindi WebGL per la
versione HD. Ma non so il motivo per cui sto scrivendo questo comunque: hai già cliccato attraverso e inizia a suonare, non è vero? Ci vediamo in un'ora o cinque ...
Tron-tipo di gioco CycleBob diventa sempre più complessaUn'altra
nuova svolta su un gioco familiare dall'aspetto è CycleBlob Timido di
Shalom, basata sulla scena Lightcycles da Tron, ma impostato su una
serie di superfici sempre più complesse.
E 'Quake 3, ma non del tutto ...L'ultima partita che abbiamo è meno giocabile, ma più graficamente impressionante - sviluppatore Brandon Jones convertito un livello da Quake 3 a un WebGL demo, con tanto di musica. E 'divertente correre in, anche se non si può giocare in modo corretto.
Remixing realtà è un brillante esempio di video-processing nel browserAllontanandosi dai giochi, Ilmari Heikkinen e Patric Re s 'Realtà rimescolamento è un brillante esempio di video-processing nel browser. Il film ha solo qualcuno spingendo alcuni pezzi di carta in giro su un tavolo. Ma
il codice JavaScript nella pagina analizza il film per i modelli molto
particolari stampati su carta, e permette di sovrapporre con una scelta
di forme 3D. Primi passi verso realtà aumentata sul web.
Come YouTube per animazioni 3D - che è 3DF33D3DF33D, dal generale 3D , è come YouTube, ma per il video 3D. Forse un po 'confusamente, per impostazione predefinita viene visualizzato roba in 2D; clicca
su 'modalità 3D corrente' nella parte superiore della pagina per
passare in una delle varie modalità di visualizzazione, tra cui il
rosso-blu in stile tradizionale 'anaglifi'. Una volta fatto questo, ha messo gli occhiali 3D e godetevi lo spettacolo!
quadro thrree.js WebGL è un ottimo modo per iniziareI nostri prossimi tre siti sono tutti su come creare le proprie pagine WebGL. WebGL
è dotato di un'interfaccia di programmazione molto stripped-down, che
rende molto più facile per i produttori di browser per ottenere il
diritto e per standardizzare correttamente, ma più difficile per i
programmatori di creare le cose, soprattutto quando si sta prima di
iniziare. Un certo numero di grandi sviluppatori hanno
speso un sacco di tempo a fare quadri che rendono le cose più facili per
gli altri sviluppatori, e uno dei più importanti è Three.js,
originariamente creati da Mr.doob .
E
'stato utilizzato in 3 Dreams of Black (per i quali Mr.doob era
direttore tecnico), ed è una scelta popolare per le persone che imparano
in 3D per la prima volta. Ci sono tonnellate di grandi dimostrazioni per esso là fuori (che ha anche un proprio sub-Reddit , dove le persone possono mostrare le loro creazioni!), Ma qui ci sono quattro dei miei preferiti: il ballo oscillazione da Thierry Tranchina , HelloRacer da studio di design HelloEnjoy , testa di Lee Perry-Smith da Mr.doob se stesso, e un shader di Fresnel da AlteredQualia .
GLGE è un altro grande quadro, ma progettato per meno brillanti demoL'altro quadro grande nome per fare WebGL facile da programmare per è Paul Brunt s 'GLGE. E
'rivolto a meno demo lucide, e più a giochi, musei e altri tipi di
applicazioni in cui si desidera spostare in giro una scena 3D. Un grande esempio è Wloom , un gioco in fase di sviluppo da parte di qualcuno conosciuto solo come Pl4n3.
I giovani vivono - dare un'occhiata al esperimento Acqua di EvanWebGL L'acqua è un esperimento da Evan Wallace
ed è dotato di una scena interattiva di una palla in una piscina
completa di riflessioni, rifrazioni, caustiche e ambient occlusion.
La chiave per la demo di Evan è che sta facendo il lavoro pesante per i vari effetti all'interno delle shader WebGL. Shaders
sono compilati i programmi - scritti in GLSL - che girano su GPU ogni
volta che si disegna una scena in WebGL e che stanno pesantemente
ottimizzati per i tipi di calcoli che sono alla base di questi effetti. Se siete interessati a conoscere shader, per saperne di più qui: Introduzione alla Shaders parte 1 e parte 2 .
video musicale interattivo dotato di luci canzone di Ellie GouldingLuci è un video musicale interattivo creato da belle gente sopra a HelloEnjoy che caratterizzano la canzone con lo stesso nome da Ellie Goulding. Il sito che vola sopra un paesaggio pulsante e colorato e mostra i nomi utente Twitter di persone che hanno un tweet sul sito.
Si può leggere di più su Luci nel magazine rete s ' dietro le quinte sono dotate .
WebGL Terrain Editor è un pezzo incredibilmente impressionante tecnicaCreato da Rob Chadwick, il WebGL Terrain Editor è un pezzo incredibilmente tecnica impressionante. La
demo permette di mestiere i propri paesaggi in tempo reale ed è dotato
di alcuni splendidi effetti come ombre volumetriche, ombre morbide
ray-tracing e occlusione ambientale. In breve, gli esperimenti WebGL raramente vengono più bella di questo!
Questa
demo utilizza alcune nuove funzionalità a WebGL in modo di vederlo
avrete bisogno di una GPU moderna per farlo funzionare, e una pesante
per farlo funzionare bene.
Aiuta una piccola sfera blu navigare per le strade di una città vicino (ish) siIl team di Google Maps è unito con B-Reel
per rendere il Google Maps Game Cube, in cui dovrai aiutare una piccola
sfera blu navigare le strade di New York, Tokyo, Parigi e San Francisco
(tra gli altri). Quando si sposta il mouse la rotazione
del cubo e la sfera rotola giù per le strade, rimbalzando edifici e
facendo la sua strada verso la porta avversaria.
Il gioco Maps Cube fa uso di Three.js per la sua splendida rendering. Come
abbiamo accennato in precedenza, se state pensando di fare un po 'di
lavoro WebGL in Three.js impostazione commerciale è davvero un buon
punto di partenza; si tratta di una bella biblioteca che vi farà risparmiare un sacco di mal di testa.
Strano ma incredibile - questo è animati particelle VolumeMikael Emtinger faceva parte del team che sta dietro l'anno scorso a Roma video musicale. Dal retro di che ha continuato a creare un involucro WebGL concentrandosi sulla creazione di shader, chiamato GLOW . Animati
Particelle Il volume è uno dei campioni che mette in mostra la potenza
di entrambi WebGL e bagliore simulando una serie di particelle 3D che
passano anche se un animale animato. Suona strano, è strano, ma sembra incredibile.
Poiché le particelle simulate attraversano l'animale sua forma mostra attraverso. Tutto il lavoro per questo, come i demo WebGL Terrain Editor e WebGL acqua, viene fatto nei shader. Non sorprende, dato che è l'enfasi di GLOW!
le ricerche Texture
In
particolare questa demo utilizza le ricerche all'interno della
struttura vertex shader, che è una caratteristica più recente di WebGL e
consente lo shader fare la manipolazione vertice per leggere e scrivere
le trame con valori in virgola mobile. Se tutto questo suona un po 'folle si può leggere il tutorial per questo e gli altri esempi per Glow.
WebGL Cars è una demo creato da Three.js co-autore AlteredQualia . Come è tipico per i suoi demo è visivamente impressionante e spinge i confini di ciò che può essere realizzato in WebGL. In WebGL auto si può guidare circa due vetture ad alta poligono attorno ad una scena. La demo si vanta riflessi in tempo reale, mappe ombra e un impressionante di post-elaborazione effetto motion blur.
Per
creare effetti di post-processing in WebGL richiede disegnare la scena
un paio di volte, ogni volta che disegno in un distinto texture. Quando ciò è fatto essi sono mescolati insieme per il risultato finale. C'è
un sacco di abilità necessarie per assicurare che ognuno di questi
passaggi di rendering è fatto nell'ordine corretto e che il numero dei
singoli rendering vengono ridotti al minimo. Forse non
sorprende, dato che è uno dei co-autori di Three.js, AlteredQualia è
estremamente bravo a creare e combinare questi effetti.
La premessa di Nouvelle Vague da UltraNoir è relativamente semplice: prendere alcuni tweets e metterli in un paesaggio in 3D. Questo, tuttavia, non rendono giustizia a questo particolare sito. Nouvelle Vague ha tutti i tipi di veicoli volanti, come un biplano, un dirigibile e alcuni palloncini. Tutti
questi modelli brillantemente realizzati - costruiti e animati in
Blender da artisti e poi importati in scena WebGL - portano i tweet e
cerchio intorno ad una statua centrale gigante. E 'sito molto surreale ed è molto ben fatto.
WebGL ha la capacità di spingere in giro un sacco di punti 3D, come si vedrà in OutsideOfSociety particelle Morph demo 's. Nella
demo si vedrà 85.000 particelle morphing tra le forme, i quali
dovrebbero correre liscio come la seta per chiunque utilizzi un computer
relativamente nuovo. La chiave per questo tipo di
prestazioni è in realtà per spostare il maggior numero di calcoli dalla
JavaScript e nelle shader WebGL.
Nonostante
la velocità fenomenale di JavaScript nei browser di oggi, shader sono
ottimizzati per calcoli comuni di lavoro in 3D, quindi dovremmo usarli
in preferenza al JavaScript dove possiamo. Se facciamo i
nostri calcoli all'interno shader di WebGL, come OutsideOfSociety sta
facendo in questa demo, stiamo anche aumentando l'utilizzo della GPU e
liberando la CPU (e quindi la nostra JavaScript) di concentrarsi su
altri compiti. Ciao aumento delle prestazioni!
Caos alla perfezione, fatta da Les 84 in collaborazione con l'Istituto di Cultura di Google e il palazzo stesso , è descritto come un "passeggiata interattivo intorno al Palazzo di Versailles" e che, ad essere onesti, è esattamente quello che è.
Come
si avvia il sito si sono salutati con una colonna sonora e dato un tour
di alcune delle caratteristiche del palazzo, ma è nell'esecuzione di
questo progetto brilla davvero. Sia in barca intorno alle
varie impostazioni del palazzo guardando la sua architettura ad alta
fedeltà e pezzi le scene senza sforzo si fondono con una conseguente
sensazione molto cinematografico.
E 'anche interessante notare che sotto il cofano il sito si avvale di Three.js. Quella biblioteca ottiene ovunque, ti dico!
Visualizzazioni sono grandi, e questo è esattamente ciò che Ecosfera della CNN è. Il
sito aggrega i tweet con i tag # RIO20 e li raggruppa in argomenti e
discussioni appropriati come 'clima' o 'sostenibilità', poi li presenta
come alberi sporgenti dalla superficie di un pianeta.
Gli
alberi stessi sono colorati in modo diverso e additivo miscelazione di
WebGL è attivata con una conseguente sensazione bella glowy. Nonostante
il grande numero di particelle e linee su schermo contemporaneamente il
framerate rimane elevata che testimonia sia la potenza di WebGL e la
codifica dietro questo sito.
Conclusione
Spero che d'accordo che alcuni incredibili siti WebGL e demo sono ora stati liberati. A
supporto continua ad aumentare sul desktop e - presto - mobili,
aspettiamo di vedere i siti ancora più coinvolgenti e suggestive
WebGL-based.
Se non hai mai giocato con WebGL, non c'è mai stato un momento migliore per iniziare. Se si vuole giocare con WebGL direttamente si dovrebbe verificare le lezioni sul blog Learning WebGL , oppure se si vuole giocare con Three.js c'è un tutorial per questo , troppo! Collaboratori : Giles Thomas e Paul Lewis Giles Thomas è uno sviluppatore con sede a Londra a lavorare su applicazioni cloud Python ( pythonanywhere.com ) e WebGL. Il suo sito Learning WebGL ( learningwebgl.com ) ha tutorial e collegamenti regolari a ciò che c'è di nuovo nel mondo WebGL, e si possono trovare anche su Twitter come @ gpjt . Paul Lewis lavora per Google come Chrome Developer avvocato. Ha fortemente impegnata ad aiutare gli sviluppatori risolvere problemi di rendering di prestazioni. Seguilo su Google+
Nessun commento:
Posta un commento