Globo interativo com sombreadores de CSS e o Google Maps

Paul Irish

Recentemente, li notícias no Webmonkey de que a proposta de CSS Shaders da Adobe, que vai trazer efeitos cinematográficos de alta qualidade para a Web com algumas novas ferramentas de CSS, foi aceita pelo W3C. Assista o vídeo se ainda não o fez.

A versão mais recente do Canary do Google Chrome adicionou suporte a shaders CSS, então decidi testá-los.

Neste experimento, usei o sombreador de vértice personalizado (spherify.vs) e o sombreador de fragmentos (spherify.fs) para criar um globo com o 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));
}

Aqui, estamos aplicando um sombreador de vértice (spherify.vs) que vai operar em uma malha com 50 linhas e 50 colunas (50 50 border-box). Leia a fonte do sombreador de vértice: spherify.vs. Ele foi escrito em GLSL, mas você provavelmente vai conseguir acompanhar.

A função mix() oferece funcionalidades básicas para a manipulação de cores, como mesclagem e composição alfa em um sombreador de fragmentos.

Podemos mudar o raio, o eixo e a rotação da distorção diretamente no CSS. Neste exemplo, definimos o valor de sphereRadius: 0.5 e ele fornece o tamanho original da esfera.

Aproveite a demonstração.

Confira abaixo um vídeo do efeito. Se você tiver os shaders ativados, poderá jogar com o jogo real abaixo.

Se você só vê um mapa plano do Google acima, ative-o com as instruções abaixo.

Suporte a navegadores: shaders CSS

No momento, esse recurso é de ponta e está disponível apenas na versão mais recente do Google Chrome Canary e do WebKit nightly. Para aproveitar a experiência completa, você vai precisar girar alguns botões.

Etapas do Chrome Canary

  1. Digite about:flags na barra de navegação do navegador.
  2. Encontre "Ativar sombreadores CSS". Ativar
  3. Reiniciar o navegador

Etapas noturnas do WebKit

  1. Faça o download e instale o WebKit nightly para Mac OSX.
  2. Abra o painel de preferências do navegador. Acesse a guia Advanced e marque para mostrar o menu Develop > Enable WebGL na barra de menus.
  3. Na barra de menu do navegador, selecione Develop.