Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Elementi 3D per il web

Due soluzioni per arricchire il nostro siti di interazioni o animazioni tridimensionali
Due soluzioni per arricchire il nostro siti di interazioni o animazioni tridimensionali
Link copiato negli appunti

Con sempre maggiore frequenza chi progetta siti web tende a integrare elementi multimediali e interattivi finalizzati alla concretizzazione di esperienze di navigazione avvincenti ed emotivamente coinvolgenti. Da questo punto di vista, oltre all'adozione sempre più massiccia di contributi e sistemi di comunicazione video, lo studio di soluzioni 3D per la realizzazione di interfacce di navigazione o elementi grafici merita un posto in prima fila tra gli obiettivi dei web designer.

Il problema tecnico da superare non è però indifferente per almeno due serie di criticità. Da un lato esiste un'oggettiva complessità nel realizzare ambienti o elementi 3D che, tipicamente, sono prodotti con software molto complessi e di difficile apprendimento. Per tali scopi, di conseguenza, ci si rivolge a figure specializzate che fanno lievitare i costi di sviluppo del progetto web.

Dall'altro lato, l'integrazione nelle pagine web e la conseguente fruibilità di contenuti 3D attraverso un browser non è affatto una modalità scontata e codificata da esperienze di riferimento assolute. In attesa infatti della pubblicazione ufficiale di Adobe Director 11, che stando alle anticipazioni sarà fortemente orientato alla realizzazione di sistemi interattivi tridimensionali anche per il web, l'aggiunta di oggetti 3D veri alle pagine HTML, cioè che non siano immagini statiche tridimensionali renderizzate, è di difficile interpretazione.

Fortunatamente però esistono alcuni strumenti di authoring multimediale che permettono in maniera rapida e semplice - anche ai non esperti di modellazione 3D o di programmazione - di realizzare creazioni 3D pensate espressamente per essere fruite sul web. Ne prederemo in considerazione due che rappresentano approcci significativamente diversi ma in grado di generare risultati sicuramente di grande impatto grafico.

Ambienti panoramici navigabili

Il primo strumento è Panorama Factory (la versione di prova è scaricabile dall'indirizzo ufficiale www.panoramafactory.com). Si tratta di un applicativo pensato in origine con tutt'altro scopo, ovvero quello di generare composizioni fotografiche panoramiche partendo da normale fotografie.

Pur essendo apparentemente destinato ad altre finalità, Panorama Factory offre però una funzionalità molto evoluta per realizzare panorami a 360° interattivi totalmente navigabili sui quali possono essere aggiunti hot-spot cliccabili che lanciano link esterni. Per realizzare ambienti virtuali 3D foto-realistici (proprio perché generati da fotografie scattate dal vivo) e navigabili che siano già nel formato corretto per essere pubblicati nel web, il procedimento da seguire è molto semplice.

Innanzitutto occorre scattare serie di fotografie di tutte le stanze, le piazze o altri luoghi che vogliamo trasformare in ambienti virtuali interattivi da collocare sul web, seguendo un criterio ben spiegato dalla guida del software. Successivamente utilizzando il sistema guidato di composizione di Panorama Factory, si realizzano fotografie panoramiche a 360° del primo ambiente fotografato.

A questo punto si possono collocare sulla foto panoramica punti ed altri elementi interattivi utilizzando le apposite funzioni del programma e associare a ogni punto cliccabile un indirizzo o uno script che verrà eseguito al clic del mouse sulle aree identificate. Completato il montaggio fotografico, non resta che procedere con l'esportazione della composizione tridimensionale. Il programma, attraverso alcuni plug-in gratuiti scaricabili seguendo le istruzioni della guida di Panorama Factory, permette di esportare il risultato in formato QuickTime panoramico, noto come QTVR,, o in due formati fotografici 3D molto leggeri quali l'IVR (estensione del formato VRML 2.0) e PTViewer . Il sistema di esportazione si occupa di generare automaticamente l'intero pacchetto di file per la pubblicazione sul Web, cosa che rende davvero intuitiva la generazione di ambienti virtuali navigabili interattivamente completi di interfaccia.

Figura 1 - Panorama Factory
screenshot

Con lo stesso sistema e un po' di dimestichezza di programmi di modellazione 3D, si possono generare panoramiche a 360° di ambienti virtuali che rendono ancora più eclatante il risultato ottenuto. Per avere un'idea di quale impatto abbia una soluzione del genere, si possono "navigare" gli ambienti virtuali disponibili all'indirizzo http://www.panoramafactory.com/vtour.

Oggetti 3D per Flash

Un secondo approccio al problema della tridimensionalità nelle pagine web è quello adottato dai creatori di Swift3D, programma noto da anni agli sviluppatori di animazioni Flash come sistema di modellazione tridimensionale molto semplice da padroneggiare anche nelle funzionalità più evolute e che permette di creare animazioni tridimensionali in formato Swf.

La grande novità introdotta nella versione 5 di Swift 3D consiste nell'integrazione con la libreria di script Papervision, strumento che consente di generare veri oggetti 3D interattivi, e non più quindi solo animazioni tridimensionali predefinite che, di fatto, non sono altro che filmati renderizzati in un'animazione Flash, ma elementi tridimensionali controllabili e navigabili col mouse visualizzati attraverso l'onnipresente plug-in Flash.

L'interfaccia di Swift3D risulta di rapido apprendimento anche per chi non ha mai modellato oggetti con software 3D, inoltre il sistema di esportazione automatico degli oggetti creati o importati da formati 3D standard col supporto della libreria Papervision non richiede alcuna conoscenza di ActionScript o di programmazione Flash.

Figura 2 - Swift3D
screenshot

Per quanto l'integrazione con Papervision non si possa certo considerare completa e matura, del resto la stessa libreria Papervision è in continua e rapidissima evoluzione e da un mese all'latro potrebbe evolvere con importanti novità in termini sia di funzionalità di controllo interattivo sia di qualità del rendering supportato, con un po' di pratica e qualche prova si riescono a generare oggetti Flash facilmente inseribili all'interno di layout standard.

Il pacchetto di file generato da Swift3D vede la presenza dei file necessari per generare l'oggetto finale tridimensionale ma non il file .swf. Tale file va generato utilizzando Adobe Flash seguendo un procedimento semplicissimo. Dopo aver generato il pacchetto di file associati all'elemento 3D da collocare nella pagina web, apriamo il file sorgente .fla che troviamo nella cartella. Il file presenta due livelli, uno in cui sono riportate le istruzioni per modificare lo stile dell'interfaccia e uno in cui è collocato l'oggetto 3D esportato. Cancellando il primo livello, quello con le istruzioni, e generando il file .swf del modello otterremo l'ultimo elemento che ci consente di inserire all'interno di un codice HTML il file 3D che risulterà controllabile dinamicamente con mouse, tasti e pulsantiera grafica.

La pubblicazione on-line dell'oggetto così realizzato necessita della copia sul server dell'intero pacchetto di file generati da Swift3D con la sola esclusione del codice sorgente .fla che, una volta compilato, non è più necessario.

L'interfaccia di Swift3D offre una soluzione di facile accesso al mondo del 3D "vero" per il Web e si pone come uno strumento perfetto per creare piccoli oggetti come loghi o elementi di navigazione.

Le due modalità esplorate per introdurre oggetti 3D all'interno di pagine web non possono ovviamente considerarsi come soluzioni definitive per chi vuole realizzare interfacce totalmente tridimensionali ed esperienze d'uso next generation. Tuttavia un uso ponderato di questi strumenti consente di realizzare progetti web che offrono una ricchezza espressiva notevole che sarà sicuramente apprezzata dai Web designer e dai realizzatori di applicazioni Web ad alto impatto visivo.

Daniele Cerra è giornalista e progettista di sistemi di comunicazione multimediale Web 2.0. Il suo sito personale è http://www.danielecerra.it

Ti consigliamo anche