Mappamondo interattivo con gli mesh CSS e Google Maps

Paul irlandese
Twitter Homepage

Di recente ho letto notizie su Webmonkey secondo cui la proposta di Adobe CSS Shaders, che porterà effetti cinematografici di alta qualità sul web attraverso alcuni nuovi strumenti CSS, è stata accettata dal W3C. Se non l'hai ancora visto, guarda il video.

L'ultima versione canary di Google Chrome ha aggiunto il supporto per gli mesh CSS, quindi ho deciso di sperimentarli.

In questo esperimento ho utilizzato Vertex Shader personalizzato (spherify.vs) e Snippet Shaper (spherify.fs) 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 funzionerà su una mesh con 50 linee e 50 colonne (50 50 border-box). Leggi pure il codice sorgente di vertex Shader: spherify.vs. È scritto in GLSL, ma probabilmente puoi seguirlo anche tu.

La funzione mix() fornisce funzionalità di base per la manipolazione del colore, come la combinazione e la composizione alfa in uno Shader frammenti.

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

Buon divertimento!

Qui sotto puoi vedere un video dell'effetto. Se hai attivato gli Shader, puoi giocare con i veri e propri brani qui sotto.

Se nella parte superiore vedi solo una mappa di Google Maps semplice, puoi attivarla seguendo le istruzioni riportate di seguito.

Supporto dei browser: mesh CSS

Si tratta di una funzionalità all'avanguardia, pertanto è disponibile soltanto nelle versioni più recenti di Google Chrome Canary e WebKit. Per un'esperienza completa, dovrai ruotare alcune manopole.

Passaggi di Chrome Canary

  1. Digita about:flags nella barra di navigazione del browser.
  2. Trova "Attiva Shader CSS". Abilita
  3. Riavvia il browser.

Passi notturni di WebKit

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