30 ebook a un prezzo mai visto!

Risparmia sui tuoi libri preferiti, mentre supporti la community Python Italia

➡️ Scopri gli ebook bundle
Home
Il web si fa in tre. Tre D

16 Aprile 2015

Il web si fa in tre. Tre D

di

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.

L'autore

  • Luca Accomazzi
    Luca Accomazzi (@misterakko) lavora con i personal Apple dal 1980. Autore di oltre venti libri, innumerevoli articoli di divulgazione, decine di siti web e due pacchetti software, Accomazzi vanta (in ordine sparso) una laurea in informatica, una moglie, una figlia, una società che sviluppa tecnologie per siti Internet

Iscriviti alla newsletter

Novità, promozioni e approfondimenti per imparare sempre qualcosa di nuovo

Immagine decorativa form newsletter
Gli argomenti che mi interessano:
Iscrivendomi dichiaro di aver preso visione dell’Informativa fornita ai sensi dell'art. 13 e 14 del Regolamento Europeo EU 679/2016.