 Paul Irish [X](https://twitter.com/paul_irish) [GitHub](https://github.com/paulirish) [Mastodon](https://toot.cafe/@paul_irish) [Bluesky](https://bsky.app/profile/paul.irish) [Homepage](https://www.paulirish.com/)
[Video](https://www.youtube.com/watch?v=NZRqnohI3m4)
Recently, I have read [news on Webmonkey](https://www.wired.com/2012/09/adobes-css-shaders-now-an-official-web-standard/) 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.
```html
```
```css
.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](http://is.gd/spherifyvs). It's written in [GLSL](https://en.wikipedia.org/wiki/OpenGL_Shading_Language) 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!
[Video](https://www.youtube.com/watch?v=5TG6TK2nueo)
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](https://www.google.com/intl/en/chrome/canary/) and WebKit nightly. To enjoy the full experience you'll need to turn a few knobs.
### Chrome Canary steps
1. Type `about:flags` in the browser's navigation bar
2. Find "Enable CSS Shaders". Enable it
3. Relaunch the browser
### WebKit nightly steps
1. Download and install [WebKit nightly](https://webkit.org/build-archives/) for Mac OSX
2. Open the browser's preferences panel. Go to **Advanced** tab and tick to show **Develop \> Enable WebGL** menu in the menu bar.
3. In the browser's menu bar select **Develop**
> [!NOTE]
> **Note:** Avaz Bokiev is a web developer in NYC. Check out his recent experiments (including CSS Shader) [here](https://developers.google.com/web/updates/2012/09/Interactive-Globe-with-CSS-shaders-Google-Maps) and his blog at [avaz.me](https://avaz.me/).