Globo interactivo con sombreadores CSS y Google Maps

Paul Ireland

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

La versión Canary de Google Chrome más reciente 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í, aplicaremos un sombreador de vértices (spherify.vs), que funcionará en una malla que tiene 50 líneas y 50 columnas (50 50 border-box). Lee la fuente del sombreador de vértices: spherify.vs. Está escrito en GLSL, pero probablemente puedas seguirlo.

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

Podemos cambiar el radio, el eje y la rotación de shere a la derecha en la CSS. En este ejemplo, se establece el valor de sphereRadius: 0.5 y se proporciona el tamaño original de la esfera.

¡Disfruta la demostración!

A continuación, puedes ver un video del efecto. Si tienes sombreadores habilitados, puedes jugar con lo real a continuación.

Si solo ves un mapa plano de Google Maps arriba, puedes habilitarlo siguiendo las instrucciones a continuación.

Compatibilidad con navegadores: sombreadores de CSS

Esta función es de vanguardia, por lo que solo está disponible todas las noches en las versiones más recientes de Google Chrome Canary y WebKit. Para disfrutar 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". Habilitarlo
  3. Reiniciar el navegador

Pasos nocturnos de WebKit

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