Web 3D

Web 3D è un termine usato per indicare i contenuti 3D interattivi inseriti in una pagina HTML, visualizzabili da un comune browser attraverso un particolare Web 3D viewer^[1]. Si utilizza il concetto di Web 3D anche per indicare una possibile evoluzione del Web in cui viene abbandonata l'idea di pagina e ci si immerge in uno spazio tridimensionale interattivo.

Storia

In principio fu VRML, un linguaggio testuale capace di descrivere un ambiente 3D, a comparire sulla scena delle tecnologie 3D esclusivamente pensate per le applicazioni Web.
Era il 1994 quando Tim Berners-Lee e Dave Raggett, durante la prima conferenza annuale sul World Wide Web tenutasi a Ginevra, iniziarono seriamente a pensare ad un linguaggio comune che descrivesse gli scenari 3D e i relativi collegamenti con il Web. Nacque così la prima versione di VRML, un linguaggio di programmazione che prometteva di regalare agli internauti la navigazione in 3D^[2][3].

Dopo un inizio brillante e pieno di aspettative, in cui nacquero numerose aziende pronte a muoversi in questo nuovo campo di ricerca e sviluppare così nuovi standard per un cospicuo ritorno economico, le promesse non vennero mantenute e la navigazione in tre dimensioni rimase solo un'utopia. Molte società 3D abbandonarono il lavoro e cambiarono attività, lasciando di fatto questo promettente progetto in uno stato di stallo. Le cause di questo insuccesso possono essere principalmente ricercate in fattori di natura prettamente tecnologica e in una mancata partecipazione al progetto da parte delle grandi software house. Ma vediamo meglio di cosa si tratta: gli ambienti 3D richiedono l'utilizzo di hardware con certe caratteristiche che il mercato di allora non era ancora in grado di offrire. Inoltre il mancato supporto da parte dei browser, rendeva difficile l'integrazione dello scenario 3D nel browser utilizzato dall'utente. Altre cause possono essere ricondotte alla sofisticata competenza tecnica specifica che la nuova tecnologia richiedeva, carente nei web designer, e alla poca volontà da parte delle aziende di software house di costituire uno standard che fosse "open". Inoltre, a causa di quest'ultima condizione, molte aziende leader come Macromedia (successivamente assorbita da Adobe) hanno sviluppato un proprio standard sul quale basare le proprie applicazioni, introducendo quindi una vera e propria competizione tra standard proprietari e quelli invece open source come VRML.

Giunti a questo punto si pensava che VRML fosse un totale fallimento destinato a scomparire molto presto nel panorama delle tecnologie 3D per il web. Ma non fu così. Grazie alla nascita di un nuovo gruppo nel 1996, il VRML Consortium, successivamente denominato Web 3D Consortium si promuoveva l'uso di VRML con un forte orientamento verso il mercato. VRML è stato sostituito da X3D^[4], standard nato grazie al sostegno di Microsoft, Sun Microsystem e del W3C, che si basa sul linguaggio XML e porta con sé notevoli migliorie.

Questa situazione di dualità tra il desiderio di realizzare uno standard Open source e la volontà da parte delle aziende di creare applicazioni closed source, cercando di affermare sugli altri la propria tecnologia, non portò a nessuna conclusione e di fatto non si è arrivati alla definizione di uno standard vincente in maniera netta sugli altri. C'è un considerevole numero di società che realizzano servizi 3D per puro scopo commerciale, ognuna delle quali sviluppa un proprio player^[2]. Ad esempio Adobe Flash (obsoleto dal 31 dicembre 2020^[5]) era in grado di creare animazioni 3D anche interattive^[6] con il plugin Flash Player.

Di conseguenza l'utente si trova a dover installare una quantità consistente di plug-in per player 3D per poter visionare tutti i contenuti 3D attualmente disponibili sul web.

Strumenti per la creazione di scenari 3D

Lo stesso argomento in dettaglio: Grafica 3d e Rendering.

Attualmente esistono diversi strumenti utilizzati per la creazione di scenari 3D. Tuttavia, sin dal principio furono utilizzati i linguaggi di Markup per la creazione di scenari 3D adattabili ad una pagina HTML.

Alcuni dei linguaggi di marcatura più noti sono: VRML, X3D, KML, 3DMLW, COLLADA e Burster (Blender Web Plugin). Questi formati sono visualizzabili da una pagina HTML attraverso dei plugin appositi.

Oltre a questi standard di modellazione usati per descrivere gli scenari 3D, questo settore presenta tecnologie dotate di altre caratteristiche: stiamo parlando delle librerie e in alcuni casi di veri e propri software in grado di realizzare ambienti 3D che si basano su OpenGL, la libreria grafica di base, senza tuttavia fare uso di linguaggi di markup standard^[7].

Con lo scopo di sfruttare le caratteristiche multi-linguaggio e multi-piattaforma di OpenGL, sono stati sviluppati molti binding per questa libreria, in molti linguaggi. Tra i più importanti troviamo la libreria OpenSceneGraph, e l'innovativa libreria Java 3D che si appoggia su OpenGL per sfruttarne l'accelerazione hardware. Inoltre Sun Microsystems ha pubblicato una libreria Open source, che fornisce binding ai comandi OpenGL in Java. Questa libreria si chiama JOGL.

Esempio di OpenGL

Anche Google ha creato una libreria per costruire scenari 3D su Web. Si tratta di O3D, realizzata con l'intenzione di diventare in breve tempo uno dei principali standard 3D su Web.

La tecnologia Blend4Web si sta affermando come potente strumento di esportazione di scene realizzate in Blender in applicazioni basate su WebGL^[8] (tecnologia basata su HTML5 Canvas che non richiede plugin, dal 2019 circa supportata da tutti i browser^[9]), integrabili in una pagina web. Tale tecnologia dispone di un add-on di Blender, che permette l'esportazione della scena in un canvas della pagina, e di un framework completo di sviluppo JavaScript ed API avanzate che permettono di creare interazioni utente complesse, animazioni, simulazioni fisiche, integrazione di elementi 2D/3D, supporto di dispositivi per la realtà virtuale, il tutto destinato a realizzare applicazioni web per la visualizzazione scientifica, navigazione di ambienti virtuali, cultural-heritage research, showcasing.

Anche la proprietà CSS3 3D transform è in grado di creare alcuni basilari animazioni e oggetti 3D interattivi^[10].

Alcuni software di modellazione 3D possono esportare creazioni per il web 3D come WebGL senza scrivere il codice da zero^[11].

Foto in sequenza di un cellulare che danno l'illusione di movimento tridimensionale

Web 3D simulato

JS 360° degree

Con JQuery è possibile creare un 3D simulato^[12], ossia scattare più fotografie di un oggetto in diverse posizioni che poi attraverso il codice JavaScript permettere all'utente di ruotarlo di 360 gradi con il mouse o il dito creando un effetto tridimensionale. Si può anche fare con un paesaggio o un interno (di un edificio, un automobile, ecc.). Non serve installare plugin ed è un metodo che supportano tutti i browser, anche Internet Explorer 8^[13][14]. Si usa in pratica la stessa tecnica delle animazioni video, GIF e Adobe Flash (un frame dopo l'altro che creano l'illusione di movimento, esattamente come la pellicola cinematografica).

SVG

Con SVG e JavaScript integrati si possono creare animazioni ed effetti che creano l'illusione della tridimensionalità con alcune possibilità di interazione con l'utente^{[15][16][17][18]}.

Immagini prospettiche

• 
  A questo computer costruito in 3D è stato tolto lo sfondo, messo in prospettiva e salvato in PNG trasparente (o GIF). Ciò fa sì che crei un'illusione di tridimensionalità nella pagina web.
• 
  Questa slider (JS o CSS 3) è formata da più immagini contenenti oggetti in prospettiva e, scorrendole, danno l'illusione che i cellulari ruotino su diversi piani tridimensionali e si spostino.
• 
  GIF formata da più rendering dello scheletro messi in sequenza. In questo caso l'utente non può interagire con lo scheletro.

Content management system

Lo stesso argomento in dettaglio: Content management system.

Esistono plugin per CMS che permettono di integrare tecniche di Web 3D nei CMS^[19][20][21].

Applicazioni

Lo stesso argomento in dettaglio: Visita virtuale.

Spesso la tecnologia 3D viene impiegata nel World Wide Web con lo scopo di visualizzare terreni e mappe geografiche tridimensionali. L'uso di scenari 3D rende molto realistica la consultazione della mappa e ne facilita quindi la sua comprensione agli utilizzatori. Questo tipo di applicazione prende il nome di Geo-Viewers (ma anche Map-Viewers o Terrain-Viewers)^[22].

Anche in campo medico\scientifico, architettonico e videogaming viene fatto ricorso al 3D^[23][24][25]. Viene inoltre utilizzato per presentare vari prodotti^[26].

Critiche

Limiti di accessibilità e usabilità di una pagina web 3D sui dispositivi mobili. Se si mantenesse la dimensione desktop delle aree cliccabili su mobile esse si accavallerebbero

Jacob Nielsen e Hoa Loranger (esperti di usabilità e accessibilità del web) hanno criticato l'uso del 3D nel web per le seguenti ragioni^[27][28][29]:

• Con la nascita dei dispositivi mobili non è sempre possibile adattare una pagina web 3D ad essi, o comunque anche se ci si riesce la navigabilità non è la stessa che su desktop, poiché il dito ha un'area più ampia di click rispetto al puntatore del mouse^[30]
• Una pagina web 3D può causare problemi di usabilità ad utenti che hanno problemi fisici alle mani e quindi una navigabilità più limitata^[31]
• Spesso non è possibile utilizzare tag accessibili come ALT, TITLE, LONGDESC, e nemmeno fornire un'alternativa testuale a contenuti multimediali^[32]. Quindi potrebbero risultare penalizzati gli utenti che utilizzano gli screen reader
• Il costo di una pagina 3D è solitamente molto superiore a una pagina HTML standard^[33], quindi non è detto che la spesa iniziale sia proporzionata al guadagno successivo
• Nel caso l'utente non sia esperto, può avere problemi a capire ed interpretare la navigazione di una pagina 3D che è solitamente più complessa di una pagina HTML standard
• Molte tecnologie 3D richiedono l'installazione di plugin aggiuntivi^[34] e ciò può infastidire l'utente
• Se l'utente non ha una connessione veloce e dispositivi ad alta risoluzione, le pagine 3D possono apparire lente e sgranate
• Nel caso la pagina 3D voglia vendere un prodotto o servizio, l'utente sarà concentrato sull'interfaccia tridimensionale anziché sul prodotto presentato^[29]
• Aggiornare e\o modificare una pagina 3D richiede molto spesso un intervento notevole e il più delle volte si è costretti a rivolgersi al suo creatore, non come ad esempio nel caso di pagine fatte in HTML o in CMS come Wordpress che sono solitamente strumenti più semplici e veloci da imparare ed utilizzare

Queste due animazioni in 3D hanno un testo che segue la tridimensionalità degli oggetti su cui è posizionato quindi è difficilmente leggibile, soprattutto se gli oggetti si muovono.

• Se la tecnologia 3D utilizzata dovesse cambiare e\o diventare obsoleta^[35][36], il cliente sarebbe costretto a dover farsi rifare da zero la pagina o chiuderla come successe negli anni in cui Adobe Flash iniziò a cadere in disuso a favore di HTML5-CSS3

• Nel caso l'azienda a cui ci si è appoggiati per costruire la pagina 3D chiuda, consegnare il progetto ad una nuova azienda non è facile come effettuare il passaggio di un progetto standard in HTML, CSS o Wordpress.
• Il pulsante "indietro" e "avanti" del browser spesso non funziona su una pagina 3D. Cioè l'utente, cliccando questi tasti, si ritrova la pagina precedente o successiva visitata nella cronologia, non la pagina precedente o successiva dello stesso sito web
• Il testo e le immagini di una pagina 3D a volte non possono essere selezionati dall'utente ne quindi copiati e salvati
• Le tempistiche per costruire pagine 3D sono generalmente più lunghe di quelle che richiedono le pagine HTML o Wordpress

Solo la prima pagina in alto a sinistra è SEO-friendly rispetto alle altre create solo con tecniche di Web 3D

• Non tutte le nuove tecnologie sono a passo con i browser e viceversa. Internet Explorer (obsoleto dal 2020) ad esempio non supportava WebGL quando Chrome e Safari si. Sono passati anni prima di poter usare WebGL su tutti i browser, quindi se si usava questa tecnologia si escludevano dall'esperienza 3D gli utenti di Internet Explorer^[37][38].

• Molti prodotti (ad esempio una maglietta, un profumo, una crema, un pennarello) non guadagnano valore aggiunto con un'interfaccia 3D poiché gli utenti non hanno bisogno di vederli nei minimi particolari da varie angolazioni e dimensioni^[39]
• Spesso gli utenti vogliono trovare informazioni nel più breve tempo possibile sul web e alcune interfacce 3D hanno bisogno di tempo per impararne la navigazione, non avendo quella classica delle pagine HTML^[31]
• Il codice di una pagina 3D è molto diverso, più complesso e lungo di una pagina HTML-CSS standard e ciò può influire sulla SEO. Il Web 3D infatti andrebbe integrato in pagine HTML standard ma non utilizzato da solo per creare l'intera pagina, a meno che il sito web che ospita tale pagina sia già indicizzato molto bene di per sé.

Google Chrome Experiments

Google Chrome Experiments è uno showroom online di esperimenti basati su browser web, programmi interattivi e progetti artistici. Lanciato il 1º marzo 2009, Google Chrome Experiments è un sito web ufficiale di Google che originariamente doveva testare i limiti di JavaScript e le prestazioni e le capacità del browser Google Chrome. Con il progredire del progetto, ha assunto il ruolo di mostrare e sperimentare le più recenti tecnologie open source basate sul web, come JavaScript, HTML5, WebGL, Canvas, SVG, CSS e altri. Tutti i progetti vengono inviati dagli utenti e realizzati utilizzando tecnologie open source.

WebGL è una delle tecnologie più comunemente utilizzate sul sito. La tecnologia ha anche guadagnato un uso attivo in app online famose e utili come Google Maps, e Zygote Body (ex Google Body)^[40][41][42].

Esempi

• 
  Auto
• 
  Viso umano
• 
  Ingranaggio

Note

1. interactivelab.it, https://www.interactivelab.it/web-3d-in-tempo-reale/ Titolo mancante per url url (aiuto).
2. Recommended Standards | Web3D Consortium, su web3d.org. URL consultato il 3 febbraio 2021.
3. Platform Independent Virtual Reality, su w3.org. URL consultato il 3 febbraio 2021.
4. x3d, su news.zdnet.co.uk. URL consultato il 3 febbraio 2021 (archiviato dall'url originale il 12 novembre 2009).
5. Flash & The Future of Interactive Content, su theblog.adobe.com, Adobe. URL consultato il 19 settembre 2018 (archiviato dall'url originale il 2 dicembre 2017).
6. 3d flash, su youtube.com.
7. OpenGL Extensions Viewer for Mac: Free Download + Review [Latest Version], su macupdate.com. URL consultato il 3 febbraio 2021.
8. (EN) Giles Thomas, Paul Lewis15 March 2017, 20 amazing examples of WebGL in action, su Creative Bloq. URL consultato il 3 febbraio 2021.
9. (EN) Unity Technologies, Unity - Manual: WebGL Browser Compatibility, su docs.unity3d.com. URL consultato il 3 febbraio 2021.
10. CSS3 3D Transforms, su www-db.deis.unibo.it. URL consultato il 3 febbraio 2021.
11. (EN) Alexander Kovelenov, Blender to WebGL in 4 Simple Steps - a quick start guide to 3D web technology, su Soft8Soft, 9 agosto 2018. URL consultato il 3 febbraio 2021.
12. 10 Best 360 Degree Product View Plugins In JavaScript | jQuery Script, su jqueryscript.net. URL consultato il 5 febbraio 2021.
13. (EN) Aram Vardanyan, 8 Javascript tools to create 360 degree Photosphere viewers, su Medium, 26 gennaio 2021. URL consultato il 5 febbraio 2021.
14. (EN) jQuery Foundation- jquery.org, Browser Support in jQuery 1.12 and Beyond | Official jQuery Blog, su blog.jquery.com. URL consultato il 5 febbraio 2021.
15. jQuery SVG 3D Tag Cloud Plugin Example, su jqueryscript.net. URL consultato il 18 febbraio 2021.
16. three.js docs, su threejs.org. URL consultato il 18 febbraio 2021.
17. seen.js, su seenjs.io. URL consultato il 18 febbraio 2021.
18. (EN) Lucamug, Basic 3D rendering in SVG: elm-playground-3d, su Medium, 19 novembre 2019. URL consultato il 18 febbraio 2021.
19. (EN) 13 Best 3D WordPress Themes for Websites - [2020 Updated], su webCREATE, 14 dicembre 2020. URL consultato il 18 febbraio 2021.
20. (EN) 5 Best WordPress 360 panorama view plugins in 2018, su wpestate.org, 13 aprile 2018. URL consultato il 18 febbraio 2021.
21. (EN) Thomas Scholl, canvasio3D Light, su WordPress.org. URL consultato il 18 febbraio 2021.
22. 3d, su webgis.arpa.piemonte.it. URL consultato il 3 febbraio 2021 (archiviato dall'url originale l'8 febbraio 2021).
23. Simple 3D interactive Human Skeleton in WebGl - YouTube, su youtube.com. URL consultato il 3 febbraio 2021.
24. palazzo 3d, su artstation.com.
25. (EN) PlayCanvas - The Web-First Game Engine, su PlayCanvas.com. URL consultato il 3 febbraio 2021.
26. (EN) Best WebGL Websites | Web Design Inspiration, su awwwards.com. URL consultato il 5 febbraio 2021.
27. Jacob Nielsen e Hoa Loranger, Web Usability 2.0, Apogeo.
28. (EN) World Leaders in Research-Based User Experience, Prioritizing Web Usability: Book by Jakob Nielsen and Hoa Loranger, su Nielsen Norman Group. URL consultato il 5 febbraio 2021.
29. (EN) World Leaders in Research-Based User Experience, 2D is Better Than 3D, su Nielsen Norman Group. URL consultato il 5 febbraio 2021.
30. (EN) World Leaders in Research-Based User Experience, Mouse vs. Fingers as Input Device, su Nielsen Norman Group. URL consultato il 5 febbraio 2021.
31. (EN) 3D Model Accessibility, su Scott Vinkle. URL consultato il 5 febbraio 2021.
32. Accessibilità multimediale - Impara il web | MDN, su developer.mozilla.org. URL consultato il 5 febbraio 2021 (archiviato dall'url originale il 22 ottobre 2020).
33. (EN) How Much Does It Cost To Build an Awesome 3D Website, su IIH Global, 3 aprile 2019. URL consultato il 5 febbraio 2021.
34. X3D Resources, su web3d.org. URL consultato il 5 febbraio 2021.
35. VRML - NoskeWiki, su andrewnoske.com. URL consultato il 5 febbraio 2021.
36. È tempo di dire addio per sempre a Flash Player, su Wired, 12 gennaio 2021. URL consultato il 5 febbraio 2021.
37. Does Internet Explorer 10 support WebGL?, su Super User. URL consultato il 5 febbraio 2021.
38. (EN) Unity Technologies, Unity - Manual: WebGL Browser Compatibility, su docs.unity3d.com. URL consultato il 5 febbraio 2021.
39. (EN) 5 Fancy (But Useless) Web Components You Should Avoid - SitePoint, su sitepoint.com. URL consultato il 5 febbraio 2021.
40. Step inside the map with Google MapsGL, su googleblog.blogspot.in, Google official blog. URL consultato il 15 dicembre 2012.
41. MapsGL, su support.google.com, Google Maps. URL consultato il 15 dicembre 2012.
42. Roni Zeiger, Google Body becomes Zygote Body; built on open source 3D viewer, in Google Open Source blog, Google, 9 gennaio 2012. URL consultato il 27 gennaio 2012.

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica