Interactive globe with CSS shaders and Google Maps
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.
-webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
50 50 border-box,
sphereAxis -0.41 1 0.19,
lightPosition 1 0.87 0.25,
lightColor 1 1 1 1,
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.
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
about:flagsin the browser's navigation bar
- Find "Enable CSS Shaders". Enable it
- Relaunch the browser
WebKit nightly steps
- 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.
- In the browser's menu bar select Develop