Google is committed to advancing racial equity for Black communities. See how.

Recently, I have read news on Webmonkey that Adobe’s CSS Shaders proposal, which will bring high-quality cinematic effects to the web through some new CSS tools, has been accepted by the W3C. If you haven't seen it yet, watch the video.

Google Chrome's latest Canary added support for CSS shaders, so I decided to experiment with them.

In this experiment, I used custom vertex shader ( spherify.vs ) and fragment shader ( spherify.fs ) to create a globe with 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)); }

Here, we're applying a vertex shader ( spherify.vs ) which will operate on a mesh that has 50 lines and 50 columns ( 50 50 border-box ). Feel free to read the source of the vertex shader: spherify.vs. It's written in GLSL but you can probably follow along.

The mix() function provides basic functionalities for color manipulation like blending and alpha compositing on a fragment shader.

We can change the shere's radius, axis, rotation right in the CSS. In this example we set the value of the sphereRadius: 0.5 and it gives original sphere size.

Enjoy the demo!

Below is a video of the effect. If you've got shaders enabled you can play with the real thing right below!

If you just see a flat google maps above, you can enable it with the instructions below

Browsers support: CSS shaders

This is currently cutting-edge, so it's only available in the latest Google Chrome Canary and WebKit nightly. To enjoy the full experience you'll need to turn a few knobs.

Chrome Canary steps:

Type about:flags in the browser's navigation bar

in the browser's navigation bar Find "Enable CSS Shaders". Enable it

Relaunch the browser

Download and install WebKit nightly for Mac OSX

Open the browser's preferences panel. Go to Advanced tab and tick to show Develop > Enable WebGL menu in the menu bar.

tab and tick to show menu in the menu bar. In the browser's menu bar select Develop

Avaz Bokiev is a web developer in NYC. Check out his recent experiments (including CSS Shader) here and his blog at avaz.me.

#### WebKit nightly steps