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;ll=14.597042,-15.625&amp;spn=158.47027,316.054688&amp;t=h&amp;z=2&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
- Digite
about:flags
na barra de navegação do navegador. - Encontre "Ativar sombreadores CSS". Ativar
- Reiniciar o navegador
Etapas noturnas do WebKit
- Faça o download e instale o WebKit nightly para Mac OSX.
- 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.
- Na barra de menu do navegador, selecione Develop.