canvas vs. webGL vs. CSS 3d -> quale scegliere?

Question

Per l'applicazione Web di base 3d, ad esempio alcuni cubi, rotazione e traduzione nello spazio 3d: quale è meglio scegliere?

CSS 3d sembra la più facile, ma non è supportato su IE9 o sul tracciato per l'IE10, e offre meno controllo rispetto alle altre opzioni. Canvas & WebGL sembra molto più complicato, ma non so se sono una prova futura.

Perché esistono così tante tecniche diverse per il 3D? che è migliore? quale è la prova del futuro?

Answer 1

Il motivo per cui ci sono così tante diverse opzioni per il 3D è perché il tutto è ancora in uno stato di flusso - il 3D nel browser non è uno standard finito, e delle opzioni che hai elencato, l'unico che funziona in tutti i browser attualmente disponibili è Canvas.

IE, in particolare, è improbabile che darà molta gioia - come dici tu, 3D non è nemmeno previsto per IE10 a questo punto. Detto questo, SVG è stato aggiunto a IE9 abbastanza tardi, quindi c'è sempre speranza. Ma la ragione è improbabile che Microsoft abbia preso in considerazione solo le funzionalità di supporto che sono state formalmente ratificate come standard.

Delle tecnologie che hai elencato, Canvas è di gran lunga il migliore supportato, ma Canvas non è una tecnologia 3D; è una tela 2D, e se vuoi avere effetti 3D, devi scriverli da te e non saranno accelerati dall'hardware.

Credo che la vera risposta alla tua domanda dipende da quanto sia importante la funzione è per il tuo sito. Se è solo un piacere per gli occhi, che gli utenti di browser non supportati potrebbero vivere senza, quindi farlo con tutti i CSS 3D. Ma se hai bisogno di renderlo coerente in tutti i browser attuali, fallo con Canvas.

avrei tendono a raccomandare di non utilizzare WebGL per il vostro caso, perché suona come sarebbe eccessivo per quello che stai facendo.

3D CSS è probabilmente la risposta destra, ma per ora utilizzare Canvas, finché il resto dei browser non aggiungerà il supporto per CSS 3D.

Answer 2

Dipendo davvero da cosa stai cercando di fare. Quanto è semplice?

3D CSS è tutt'altro che utilizzabile. Si è appena trasformato in Firefox. È buggy sia in firefox che in chrome. Non funziona in FF9 beta su OSX. Ha anche problemi con Chrome fino ad almeno 16. Vedi http://greggman.com/downloads/examples/intersecting-elements-3d-css.html e confronta Safari su OSX praticamente con qualsiasi altro browser.

Three.js (https://github.com/mrdoob/three.js/) utilizzati per (e forse lo fa ancora) forniscono alcuni semplici 3d con tela.

In caso contrario, se si desidera qualcosa di interessante andare WebGL e scegliere una libreria (Three.js, SceneJS, ecc ..)

hai avuto modo di fare una scelta. Usa WebGL e rinuncia a IE, Usa Flash 11, Usa Unity3D, usa Canvas e ottieni 3d molto limitati, oppure non fare 3d.

WebGL è già utilizzato da importanti siti. CNN ora utilizza WebGL http://www.stinkdigital.com/en/work/ecosphere

Answer 3

So che questo ha 2 anni ma immagino che lo postherei qui per i futuri lettori.

Cosa scegliere dipende da ciò che è necessario.

Hai bisogno di una semplice forma 3D con animazioni assenti o poco? Prova se puoi farlo con CSS3, che è il più facile di gran lunga. Per IE probabilmente puoi ottenere una libreria che offre supporto.

Avete bisogno di alcuni modelli 3d con una bella grafica e che possono fare ogni genere di roba? Vai a WebGL, non puoi chiedere più controllo e prestazioni per i browser 3d.

Avete bisogno di forme 3D in grado di eseguire qualsiasi tipo di materiale, ma non hanno bisogno di trame e funzioneranno ovunque e non richiedono molte prestazioni? Vai alla tela.

CSS3 è solo per il piacere degli occhi. Puoi farlo abbastanza facilmente, stile come vuoi ed è facilmente gestibile. Una volta che vuoi fare qualcosa di più che un semplice piacere per gli occhi, indossa i guanti perché questo sarà un po 'di lavoro.

Con 2d Canvas puoi fare cose 3d. Se sei nuovo, sarà molto noioso e complicato (per citarne un esempio, devi conoscere le matrici), puoi praticamente fare qualsiasi cosa con la tela 2D che puoi fare con WebGL ma alcune cose saranno più facili in WebGL (seriamente, se vai su 2d Canvas, non provare a usare trame, è un incubo). WebGL usa OpenGL che, in poche parole, significa che sarà sempre migliore di 2d Canvas.

Tuttavia, WebGL richiede all'utente di disporre di una scheda video compatibile.

Answer 4

Ognuno è probabilmente stanco di sentire "dipende", ma ... dipende!

C'è un po 'di "guerra" in corso sul fatto che sia meglio usare Canvas o HTML/CSS3, e precisamente perché Canvas è più lento del DOM su macchine/dispositivi più vecchi. Yeap, DOM è molto più veloce in alcuni casi, mentre la tela è più veloce sulla maggior parte dei browser/dispositivi moderni.

WebGL: la migliore opzione sia per il 2D che per il 3D, ma poiché non è supportato abbastanza bene su browser e dispositivi, è necessario offrire il fallback su canvas o DOM ogni volta che è necessario.

Canvas - Meno adatto per il 3D confronto con WebGL, ma più adatto per la compatibilità, comunità, strumenti ecc

DOM - Più veloce della maggior parte pensa, se utilizzato a destra, più alto supporto intorno, ma non si può andare l'animazione troppo di fantasia/gioco-saggio.

Spero che questo aiuti