Il web è spesso visto come un mezzo decisamente bidimensionale. E, per essere onesti, lo è. Questo è quello per cui è stato progettato.
Inoltre, l'aggiunta di elementi grafici tridimensionali, resi live, richiede tradizionalmente plug-in. Macromedia ci ha dato Shockwave, Unity ci ha dato l'Unity Web Player, e per tutto il tempo, abbiamo usato principalmente la grafica 3D per i giochi.
HTML5, CSS3 e alcuni JavaScript inventivi hanno fatto molto per cambiare questo, comunque. Oh, è ancora usato principalmente per i giochi, ma puoi andare oltre e integrare la grafica in un sito normale più facilmente che mai.
Certo, abbiamo ancora problemi di usabilità. Un sito che dipende dalla grafica 3D per la navigazione o contenuti essenziali è ancora una pessima idea. Tuttavia, quando viene utilizzato con il miglioramento progressivo, il 3D è un modo praticabile, e persino di prestazioni, per fare un passo avanti.
A tal fine, presento voxel.css .
voxel.css è un framework che usa CSS3 per eseguire il pesante sollevamento di rendering di oggetti 3D. JavaScript è usato per aggiungere interattività, attivare le animazioni e praticamente tutto il resto.
Bene, questo è CSS di cui stiamo parlando. Non otterrai grafica a livello di Crysis. Come suggerisce il nome di questo framework, quello che ottieni è un sacco di cubi. Pensa a Minecraft nel browser. (E qualcuno costruirà un clone di Minecraft con questo in tre ... due ...)
Tuttavia, puoi fare cose straordinarie con una grafica a blocchi. Pensa a come portare l'arte a 8 bit a un livello completamente nuovo.
L'implementazione di base di voxel.css richiede solo l'inclusione della libreria e 15 righe di codice. Questo crea una scena virtuale salvabile in cui è possibile modificare i modelli, in stile point-and-click.
È quindi possibile visualizzare queste scene su qualsiasi pagina Web e animarle come desiderato.
Usa un PNG per la trasparenza, una GIF per l'animazione o un file SVG per una scalabilità illimitata. Usa un JPG per motivi sconosciuti o il formato WebP perché ti piacciono cose che non sono ancora implementate in tutti i browser.
C'è anche una demo utilizza riprese dal vivo dalla tua webcam come trame per i blocchi.
Ancora una volta, è CSS3. È possibile utilizzare la potenza di rendering superiore della scheda grafica di un dispositivo (o chip, a seconda dei casi) per visualizzare il proprio lavoro. Non dovrai preoccuparti di grafica maldestra su qualsiasi cosa tranne il più lento dei dispositivi mobili. (In ogni caso dovresti usare un fall-back per quelli.)
voxel.css è un modo semplice e pratico per ottenere un po 'di bontà tridimensionale nella tua app, pagina, sito o gioco. Provalo, guarda le demo e vedi se è giusto per il tuo progetto.