Globe interactif avec des nuanceurs CSS et Google Maps

J'ai récemment lu sur Webmonkey que la proposition de nuanceurs CSS d'Adobe, qui permet de proposer des effets cinématiques de haute qualité sur le Web via de nouveaux outils CSS, a été acceptée par le W3C. Si vous ne l'avez pas encore vu, regardez la vidéo.

Canary de Google Chrome étant désormais compatible avec les nuanceurs CSS, j'ai décidé de les tester.

Dans ce test, j'ai utilisé un nuanceur de sommets personnalisé (spherify.vs) et un nuanceur de fragments (spherify.fs) 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 sommets (spherify.vs) qui fonctionne sur un maillage de 50 lignes et 50 colonnes (50 50 border-box). N'hésitez pas à consulter la source du nuanceur de sommets: spherify.vs. Il est écrit en GLSL, mais vous pouvez probablement suivre la procédure.

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 fragments.

Vous pouvez modifier le rayon, l'axe et la rotation du rectangle directement dans le CSS. Dans cet exemple, nous définissons la valeur de sphereRadius: 0.5 pour obtenir la taille d'origine de la sphère.

Profitez de la démo !

Vous trouverez ci-dessous une vidéo illustrant l'effet. Si vous avez activé des nuanceurs, vous pouvez utiliser l'outil juste en dessous !

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

Navigateurs compatibles: nuanceurs CSS

Cette technologie est actuellement à la pointe de la technologie. Elle n'est donc disponible que dans la dernière version de Google Chrome Canary et de WebKit tous les soirs. Pour profiter pleinement de l'expérience, tournez quelques commandes.

Procédure pour Chrome Canary

1. Saisissez about:flags dans la barre de navigation du navigateur.
2. Recherchez l'option "Activer les nuanceurs CSS". Activer
3. Relancer le navigateur

Pas WebKit la nuit

1. Télécharger et installer WebKit Night pour Mac OSX
2. Ouvrez le panneau des préférences du navigateur. Accédez à l'onglet Advanced (Avancé) 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.