Il 3d Nei browser: WebGL contro CSS 3D Transforms

Il WebGL e le CSS 3D transforms sono due delle principali tecniche per realizzare effetti 3D nei browser, in questi primi anni il supporto per questi sistemi era veramente scarso ma in un breve lasso di tempo molto è cambiato e, noi di RAD ci teniamo a rimanere sempre aggiornati sulle ultime tecnologie e tendenze dello sviluppo web, per poter fornire prodotti innovativi e all’avanguardia: scopriamo insieme come possiamo sfruttare le tecnologie 3D all’interno dei nostri siti web!

CSS 3D Transforms

Concepire degli effetti 3D all’interno dei nostri siti web ha un suo senso logico: come per tutti gli altri tipi di strutture 2D, l’HTML continua a progettare la struttura e il CSS 3D Transforms si occuperanno invece di realizzare la parte grafica (naturalmente in questo caso in 3D), proprio come avrebbe fatto un normale foglio di stile CSS. Fino a qui penso sia tutto molto semplice e logico per chiunque si intenda un po’ di linguaggi di markup, non continuerò comunque questo articolo con guide sulle proprietà delle CSS 3D Transforms, lo scopo di questo post sarà quello di illustrare una veloce presentazione delle potenzialità di questo nuovo CSS attraverso alcuni interessanti progetti che sarai libero di visionare.

Shading and Multiplaning

Questi termini inglesi stanno a significare ombreggiatura e livelli multipli, grazie ad essi, è possibile realizzare degli effetti che diano la sensazione di tridimensionalità, anche l’ormai famoso parallax scrolling si basa proprio su questi due concetti: i vari contenuti, che siano scritte, elementi grafici o immagini, viaggiano a diverse velocità su dei livelli multipli e, con ombreggiature e sfuocature, è possibile accentuare l’effetto di profondità.

Un altro valido esempio che utilizza gli stessi principi può essere visionato nel progetto di Nick Pettit: il Multiplane Design. In questo progetto, Nick riesce a ricreare un effetto di profondità 3D, grazie ai movimenti dei pannelli sull’asse Z a velocità differenti che avvengono nel momento in cui si prova a scrollare la pagina con il mouse.

Modellazione di oggetti 3d

Oltre a questi metodi appena illustrati, è stato sviluppato un editor molto interessante, chiamato Tridiv: si comporta come un qualsiasi altro software di modellazione 3D da desktop, con diversi strumenti per modellare gli oggetti e modificare la posizione della camera. La cosa sorprendente sta nel poter incollare i codici all’interno delle nostre pagine web per ricreare delle perfette copie 3D, tutto utilizzando solamente HTML e CSS.

WebGL

Il WebGL è completamente differente dall’HTML e il CSS, esso infatti è renderizzato attraverso il tag <canvas>, questo permetterà di realizzare un oggetto non intrusivo rispetto al resto della pagina, ed isolato in un suo contesto specifico. Questo comunque non è un aspetto particolarmente negativo poiché il canvas fa a tutti gli effetti parte del DOM e non avrà particolari difficoltà ad essere flessibile con il resto degli elementi della pagina.

Andiamo adesso ad elencare alcuni strumenti e progetti che ci potranno essere utili per sfruttare il WebGL: