Globe interactif avec des nuanceurs CSS et Google Maps

Paul Irish

J'ai récemment lu dans Webmonkey que la proposition d'Adobe concernant les nuanceurs CSS, qui apportera des effets cinématographiques de haute qualité sur le Web grâce à de nouveaux outils CSS, a été acceptée par le W3C. Si vous ne l'avez pas encore regardée, regardez la vidéo.

La dernière version Canary de Google Chrome est compatible avec les nuanceurs CSS. J'ai donc décidé de les tester.

Dans ce test, j'ai utilisé un nuanceur de sommet (spherify.vs) et un nuanceur de fragment (spherify.fs) personnalisés pour créer un globe avec 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));
}

Ici, nous appliquons un nuanceur de sommet (spherify.vs) qui fonctionnera sur un maillage de 50 lignes et 50 colonnes (50 50 border-box). N'hésitez pas à lire la source du nuanceur de sommet: spherify.vs. Il est écrit en GLSL, mais vous pourrez probablement le suivre.

La fonction mix() fournit des fonctionnalités de base pour la manipulation des couleurs, comme le mélange et la composition alpha sur un nuanceur de fragment.

Nous pouvons modifier le rayon, l'axe et la rotation de la rotation directement dans le CSS. Dans cet exemple, nous définissons la valeur de sphereRadius: 0.5, ce qui donne la taille d'origine de la sphère.

Profitez de la démo !

Vous trouverez ci-dessous une vidéo de l'effet. Si vous avez activé les nuanceurs, vous pouvez jouer avec le vrai jeu juste en dessous.

Si vous ne voyez qu'une carte Google Maps plate ci-dessus, vous pouvez l'activer en suivant les instructions ci-dessous.

Prise en charge des navigateurs: nuanceurs CSS

Cette fonctionnalité est actuellement de pointe. Elle n'est donc disponible que dans la dernière version de Google Chrome Canary et de WebKit nightly. Pour profiter pleinement de l'expérience, vous devrez régler quelques paramètres.

Procédure pour Chrome Canary

  1. Saisissez about:flags dans la barre de navigation du navigateur.
  2. Recherchez "Activer les nuanceurs CSS". Activez-la.
  3. Redémarrer le navigateur

Procédure de compilation nocturne WebKit

  1. Télécharger et installer la version WebKit nightly pour Mac OSX
  2. Ouvrez le panneau des préférences du navigateur. Accédez à l'onglet Advanced (Paramètres avancés) et cochez la case pour afficher le menu Develop > Enable WebGL (Développer > Activer WebGL) dans la barre de menu.
  3. Dans la barre de menu du navigateur, sélectionnez Développer.