The concepts of WebGL

Interessante articolo su hacks.mozilla.org che introduce e chiarisce alcuni concetti fondamentali dietro le WebGL.

What is WebGL?

WebGL is a Web API that allows low-level graphics programming. “Low-level” means that WebGL commands are expressed in terms that map relatively directly to how a GPU (graphics processing unit, i.e. hardware) actually works. That means that WebGL allows you to really tap into the feature set and power of graphics hardware. What native games do with OpenGL or Direct3D, you can probably do with WebGL too.

Link all’articolo su hack.mozilla.org: The concepts of WebGL

L’articolo non si pone come un ennesimo tutorial, infatti, alla fine, segnala delle risorse molto utili per iniziare a programmare con le WebGL.

CanvasLoader Creator

CanvasLoader Creator è una piccola libreria javascript (5.8kb minificata) che vi permette di riprodurre nel <canvas> un animazione di caricamento (loader) senza utilizzare gif animate.

Sul sito c’è un piccolo pannello di controllo che vi permette di settare i diversi parametri e vedere il risultato in tempo reale.

image

I vantaggi dell’utilizzare una libreria del genere sono diversi:

  1. 5kb sono meno di una gif animata (circa 100×100)
  2. Il colore, la velocità e tanti altri parametri possono essere cambiati in tempo reale e quindi riprodurre effetti più carini a seconda delle situazioni
  3. La dimensione può essere cambiata e quindi adattata alle diverse interfacce
  4. Il codice necessario per utilizzarla è semplicissimo

image

Progressive JPEG pro e contro

Nell’articolo Progressive jpegs: a new best practice, Ann Robson (@aronbson), analizza tutti i pro e i contro dell’utilizzare progressive JPEG invece che baseline.

Per capirci una progressive JPEG è un’immagine composta da diversi layer che presi singolarmente sono grandi quanto l’immagine originale ma sembrano “sgranati”, se “sovrapposti” ci permettono di ottenere l’immagine completa. Al contrario, una JPEG baseline è composta da un solo frame con tutte le informazioni necessarie per una corretta visualizzazione.

Utilizzare JPEG progressive conviene sotto tanti punti di vista, il primo tra tutti è la velocità nel download e la percezione che si da all’utente “che qualcosa sta succedendo”.

In un test effettuato usando Firefox/12.0 e confrontando il download di una JPEG baseline di 5.4kb e di una JPEG progressive di 78.3kb si evince che il browser impiega meno tempo a scaricare un frame completo di una JPEG progressive di 78kb che di una JPEG baseline di soli 5.4kb.

image

Allora perché non utilizzare sempre JPEG progressive?


Sembrerebbe che non ci siano motivi per non usare questo tipo di codifica, invece bisogna far attenzione ad alcuni particolari.

  • Non tutti i browser rederizzano le JPEG progressive man mano che vengono scaricati i frame e quindi si perde tutto il vantaggio della codifica.

image

  • Renderizzare un solo frame di una JPEG Progressive richiede una tempo di elaborazione uguale a quello di elaborare un’intera JPEG baseline. Motivo per il quale sulle versioni mobile dei browser non vengono renderizzate le JPEG Progressive man mano che vengono scaricate, ma solo a download completato.

Da un po’ di tempo anche il modulo Pagespeed di google suggerisce di convertire le jpeg in progressive per ottimizzare le performance. Ovviamente questo perché Chrome supporta pienamente le JPEG progressive 🙂