Mappamondo interattivo con gli mesh CSS e Google Maps

Paul Irish

Di recente ho letto una notizia su Webmonkey che annuncia che la proposta di Adobe relativa agli shader CSS, che porterà effetti cinematografici di alta qualità sul web tramite alcuni nuovi strumenti CSS, è stata accettata dal W3C. Se non l'hai ancora visto, guarda il video.

L'ultima versione di Canary di Google Chrome ha aggiunto il supporto degli shader CSS, quindi ho deciso di sperimentarli.

In questo esperimento ho utilizzato shader vertex (spherify.vs) e shader frammento (spherify.fs) personalizzati per creare un globo con Google Maps.

<iframe
  class="globe"
  src="https://maps.google.com/?ie=UTF8&amp;amp;ll=14.597042,-15.625&amp;amp;spn=158.47027,316.054688&amp;amp;t=h&amp;amp;z=2&amp;amp;output=embed"
  scrolling="no"></iframe>

.globe {
  width: 550px;
  height: 550px;
  border: 0;
  -webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
    50 50 border-box,
    amount 1,
    sphereRadius 0.5,
    sphereAxis -0.41 1 0.19,
    sphereRotation 43.5,
    ambientLight 0.15,
    lightPosition 1 0.87 0.25,
    lightColor 1 1 1 1,
    transform perspective(500));
}

Qui stiamo applicando un vertex shader (spherify.vs) che opererà su una mesh con 50 righe e 50 colonne (50 50 border-box). Puoi leggere il codice sorgente del vertex shader: spherify.vs. È scritto in GLSL, ma probabilmente puoi seguire la procedura.

La funzione mix() fornisce funzionalità di base per la manipolazione dei colori, come la miscelazione e la composizione alfa in uno shader di frammento.

Possiamo modificare il raggio, l'asse e la rotazione della sfera direttamente nel CSS. In questo esempio, impostiamo il valore di sphereRadius: 0.5 e viene restituita la dimensione originale della sfera.

Buona visione.

Di seguito è riportato un video dell'effetto. Se hai attivato gli shader, puoi giocare con la versione reale proprio di seguito.

Se sopra vedi solo una mappa di Google Maps piatta, puoi attivarla seguendo le istruzioni riportate di seguito

Supporto dei browser: shader CSS

Questa funzionalità è attualmente all'avanguardia, quindi è disponibile solo nelle ultime versioni di Google Chrome Canary e WebKit nightly. Per usufruire dell'esperienza completa, dovrai regolare alcune impostazioni.

Passaggi per Chrome Canary

  1. Digita about:flags nella barra di navigazione del browser
  2. Trova "Attiva shader CSS". Attivala
  3. Riavviare il browser

Passaggi per le build notturne di WebKit

  1. Scarica e installa WebKit nightly per Mac OSX
  2. Apri il riquadro delle preferenze del browser. Vai alla scheda Avanzate e seleziona l'opzione per visualizzare il menu Sviluppa > Attiva WebGL nella barra dei menu.
  3. Nella barra dei menu del browser, seleziona Sviluppa.