Un sito web in 3D image

Un sito web in 3D Web design non significa necessariamente grafica 2D: Hybrid Forest mescola Cinema 4D e WebGL per creare un pittoresco paesaggio 3D per il proprio sito web!

Hybrid Forest è uno studio creativo svedese, con sede a Stoccolma, specializzato nella produzione di mondi VR e video a 360°. Si occupa di tematiche molto attuali che offrono al giovane team infinite possibilità di progettazione e libertà creativa.

Per testare dei metodi avanzati per la visualizzazione di grafica 3D nei browser web, il team ha sperimentato la tecnologia WebGL. WebGL è un'interfaccia grafica piuttosto recente che utilizza la potenza della scheda grafica per renderizzare grafica 3D nei browser web. L'utente non necessita di alcun plugin aggiuntivo del browser.

Visto che Hybrid Forest aveva bisogno di un sito web innovativo che riflettesse la propria specializzazione, il team ha pensato di utilizzare il risultato delle proprie sperimentazioni WebGL per creare il sito ufficiale dell'azienda.

Per il design, il team di Hybrid Forest si è ispirato all'idilliaca natura svedese e al fascino che il 3D esercita sul proprio team: il sito mostra una vista a 360° di un pittoresco paesaggio, con un lago circondato dalle montagne ed una tipica casa in legno svedese ai limiti della foresta. Se osservate più da vicino potreste scorgere anche un orso animato.

L'intera scena e tutti gli elementi presenti sono stati modellati dall'artista Ashley Reed con Cinema 4D. L'artista ha cercato di tenere basso il numero di poligoni per creare un look stilizzato e anche per ottimizzare le performance della scena per l'utilizzo in dispositivi meno potenti. Lo strumento Penna Poligono si è rivelato fondamentale per una veloce creazione della geometria, mentre lo strumento Riduzione Poligoni è stato utilizzato per ridurre la complessità e per triangolare la geometria delle montagne, create con la funzione Sculpt. Questo passaggio ha inoltre evitato eventuali problemi provocati dall'utilizzo in WebGL di risorse non triangolate. Con l'eliminazione del tag Phong, Ashley è riuscito a accentuare l'aspetto low-poly, in quanto i poligoni non erano più arrotondati dalla tipica ombreggiatura morbida.

Grazie alla facilità d'uso di Cinema 4D, il team ha potuto concentrarsi interamente sull'espressione della propria libertà creativa: "Cinema 4D si è rivelato uno strumento perfetto, e ha permesso una grande simbiosi tra il modellatore e me, il programmatore", spiega Daniel Mayor, game engine e web developer presso la Hybrid Forest.

Una sfida particolare è stata l'integrazione nel sito web WebGL degli asset creati in Cinema 4D. A questo scopo gli elementi sono stati esportati come file OBJ da Cinema 4D e poi salvati con uno strumento particolare come file JSON. Questi file contengono testo leggibile dalle applicazioni Web e possono essere integrati nei siti web grazie alla libreria JavaScript Three.js.

Una volta terminata la scena e messa in esecuzione nel browser da WebGL, il team ha sperimentato alcune limitazioni dovute alla tecnologia, che impedivano la proiezione di ombre realistiche nel browser. A questo punto sono state completamente disattivate le ombre nella scena. Di conseguenza la luce, in combinazione con l'ottica low-poly della scena, ha generato ombreggiature simili ad ombre proiettate. Per finire è stato aggiunto un Ester Egg: la posizione del sole dipende dall'ora impostata sul computer del visitatore! Inoltre il visitatore può influenzare la posizione del sole tramite un pulsante, e passare così dall'illuminazione diurna a quella notturna.

Il lancio di questo sito web così innovativo è stato un vero e proprio successo per il team di Hybrid Forest: il progetto è stato presentato in un servizio di ispirazione per designer ed è stato nominato per un premio sul design all'AWWWARDS.

Lo studio Hybrid Forest è rimasto piacevolmente impressionato da Cinema 4D, tanto che un numero crescente del suo staff sta attualmente utilizzando il software. Il team svolge regolarmente anche dei workshop su Cinema 4D. L'artista 3D Ashley Reed è un grande fan della facilità d'uso di Cinema 4D: "Lavorare con Cinema 4D è incredibilmente divertente, perché mi consente di concentrarmi in modo assoluto sulla realizzazione delle mie idee".


Author

Sebastian BeckerOnline Editor & Content Manager, Maxon