Globo interactivo con sombreadores CSS y Google Maps

Paul Irish

Recientemente, leí noticias en Webmonkey que indicaban que el W3C aceptó la propuesta de sombreadores de CSS de Adobe, que traerá efectos cinematográficos de alta calidad a la Web a través de algunas herramientas de CSS nuevas. Si aún no lo has visto, mira el video.

La versión más reciente de Canary de Google Chrome agregó compatibilidad con sombreadores CSS, así que decidí experimentar con ellos.

En este experimento, usé un sombreador de vértices personalizado (spherify.vs) y un sombreador de fragmentos (spherify.fs) para crear un globo terráqueo 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));
}

Aquí, aplicamos un sombreador de vértices (spherify.vs) que operará en una malla que tiene 50 líneas y 50 columnas (50 50 border-box). No dudes en leer la fuente del sombreador de vértices: spherify.vs. Está escrito en GLSL, pero es probable que puedas seguir el proceso.

La función mix() proporciona funciones básicas para la manipulación de colores, como la combinación y la composición alfa en un sombreador de fragmentos.

Podemos cambiar el radio, el eje y la rotación de la esfera directamente en el CSS. En este ejemplo, configuramos el valor de sphereRadius: 0.5 y se muestra el tamaño original de la esfera.

¡Disfruta de la demostración!

A continuación, se muestra un video del efecto. Si tienes habilitados los sombreadores, puedes jugar con la versión real a continuación.

Si solo ves un mapa de Google Maps plano, puedes habilitarlo con las instrucciones que se indican a continuación.

Compatibilidad con navegadores: sombreadores CSS

Actualmente, es una tecnología de vanguardia, por lo que solo está disponible en las versiones más recientes de Google Chrome Canary y WebKit Nightly. Para disfrutar de la experiencia completa, deberás girar algunos controles.

Pasos de Chrome Canary

  1. Escribe about:flags en la barra de navegación del navegador.
  2. Busca "Habilitar sombreadores de CSS". Habilita la opción
  3. Vuelve a iniciar el navegador

Pasos nocturnos de WebKit

  1. Descarga e instala WebKit nightly para Mac OSX.
  2. Abre el panel de preferencias del navegador. Ve a la pestaña Advanced y marca la casilla para mostrar el menú Develop > Enable WebGL en la barra de menú.
  3. En la barra de menú del navegador, selecciona Desarrollar.