Globo interativo com sombreadores de CSS e o Google Maps

PaulIrlandês
Twitter Página inicial

Recentemente, li notícias no Webmonkey que a proposta de sombreadores de CSS da Adobe, que trará efeitos cinematográficos de alta qualidade para a Web por meio de novas ferramentas de CSS, foi aceita pelo W3C. Assista ao vídeo caso ainda não tenha visto.

A versão Canary mais recente do Google Chrome adicionou suporte a sombreadores CSS, então decidi fazer testes com eles.

Neste experimento, usei o sombreador de vértice personalizado (spherify.vs) e o sombreador de fragmento (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). Fique à vontade para ler a origem do sombreador de vértice: spherify.vs. Ele está escrito em GLSL, mas você provavelmente pode acompanhar.

A função mix() fornece funcionalidades básicas para manipulação de cores, como mistura e composição Alfa em um sombreador de fragmento.

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

Aproveite a demonstração.

Confira abaixo um vídeo do efeito. Se você tiver sombreadores ativados, poderá brincar com a coisa real logo abaixo.

Se apenas um mapa do Google Maps aparecer acima, ative-o seguindo as instruções abaixo

Suporte a navegadores: sombreadores de CSS

No momento, esse recurso é de última geração e só está disponível no Google Chrome Canary e no WebKit todas as noites. Para aproveitar a experiência completa, é preciso girar alguns botões.

Etapas do Chrome Canary

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

Passos noturnos 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 Avançado e marque a opção para mostrar o menu Desenvolver > Ativar WebGL na barra de menus.
  3. Na barra de menus do navegador, selecione Develop.