2 Commenti

Semplice come cianfrinare

Il web si fa in tre. Tre D

di

thumbnail

16

apr

2015

Potevamo stupirvi con effetti speciali. Ci abbiamo riflettuto a lungo. Abbiamo infine deciso di stupirvi con effetti speciali.

Prima di iniziare la nostra discussione di oggi, ho una piccola richiesta per te, gentile lettore. Se stavi cominciando a leggere questa pagina con Explorer 10 o precedente, buttalo nel cestino, svuota il cestino, scava una buca in giardino, lanciaci il PC, dagli fuoco, copri di massi. Poi torna a questo indirizzo usando qualcosa di differente, va bene anche un tablet o uno smartphone purché aggiornato. Fatto? Bene, proseguiamo.

Chi ha già avuto occasione di seguirmi su queste pagine mi ha sentito dire che il web moderno, basato su HTML5 ma soprattutto programmato in JavaScript, si è totalmente liberato delle limitazioni che caratterizzavano il web di dieci anni fa. Come piccola dimostrazione parlai del logo di un mio software chiamato Sar-At che — usando la tecnologia web chiamata Canvas — si anima e mostra al suo interno l’ora esatta. Ma si può fare anche di più, molto di più. Per esempio, una animazione in 3D.

Per creare il logo sono partito dalla semplice scritta Sar-At, l’ho estrusa, ho cianfrinato gli spigoli, gli ho imposto un materiale di aspetto simile alla plastica grigia. Le ho disposto un piano sotto, imponendogli di comportarsi come uno specchio. Poi ho disegnato gli ingranaggi, assegnando a ciascuno un materiale di colore diverso e li ho posizionati a sinistra. Ho tracciato una sfera invisibile tutt’attorno e ho acceso quattro fonti di luce puntiformi (una gialla, una rossa, una verde e una blu). Ho scritto quattro righe di codice per farli orbitare sulla sfera. Ho aggiunto due funzioni perché il punto di vista sulla scena si sposti a colpi di mouse o per effetto del tocco del dito a vantaggio di chi usa un tablet. Avrei voluto anche far ruotare gli ingranaggi sul proprio asse centrale ma me n’è mancato il tempo, mi spiace.

Sar-At animato

3D, animazione, interazione, giochi di luce ed è tutto fatto in HTML5.

Chi mastica di grafica, o semplicemente chi ha guardato gli inserti speciali di un DVD della Pixar, avrà riconosciuto alcuni termini tecnici nel passaggio precedente. Sono tutte cose che si fanno da vent’anni con programmi dedicati alla composizione di scene 3D. Io ho fatto tutto con JavaScript, perché HTML5 mette a disposizione di quel linguaggio un ambiente tridimensionale chiamato WebGL. Il browser, quando lo incontra, usa le capacità grafiche native della scheda video di bordo, il che significa che persino creare dentro alla finestra di un browser un videogioco 3D stile World of Warcraft oggi è perfettamente possibile.

Purtroppo quell’accroc… pardon, quella popolare piattaforma che è WordPress, limita le possibilità di visione dell’effetto. Vi invito a guardare il risultato sul mio sito, magari a tutto schermo. Non stupitevi se si accendono le ventole del calcolatore, però.

La morale della favola è che spesso i webdesigner sono limitati in ciò che fanno dalle richieste del cliente, che ha poche idee o idee confuse. Altrettanto spesso però ci lasciamo limitare dal si è sempre fatto così o non l’ho mai visto fare ed è un vero peccato, perché a guardarsi attorno si scopre che il mondo del web è davvero sterminato. E persino 3D.




Luca Accomazzi (@misterakko) ha messo le mani su un calcolatore (Apple) nel 1980 e da allora non le ha quasi mai staccate anche se, avendo una moglie e una figlia, viene da sospettare che qualche pur breve pausa l’abbia trovata. Su Internet dal 1992, si dedica a tempo pieno a scrivere siti – circa trecento da fine 1997 – fermandosi solo per scrivere libri per Apogeo (spesso in sodalizio con Lucio Bragagnolo). L’azienda che ha fondato, Accomazzi.net, è specializzata in commercio elettronico e newsletter.

In Rete: www.accomazzi.net

Letto 3.487 volte | Tag: , , , , , , ,

2 commenti

  1. Facciamo il punto | Apogeonline

    [...] paio di settimane fa ho fatto irruzione su queste pagine spiegando quanto sia potente HTML 5 agli interessati, agli eruditi e a chi aprisse questo sito solo per coprire la finestra sottostante [...]

  2. Safari magari | Apogeonline

    [...] traccia di quali browser supportano quali tecnologie web. Per esempio, avete voglia di mettere grafica 3d sul vostro sito? Andate a guardare su Can I Use quali browser non possono visualizzarla, poi [...]

Lascia il tuo commento