带有 CSS 着色器和 Google 地图的交互式地球仪

Paul Irish

最近,我阅读了 Webmonkey 上的新闻,其中指出 Adobe 的 CSS 着色器提案将通过一些新的 CSS 工具为网络带来高品质的电影特效,并且已被 W3C 接受。如果您尚未观看视频,请先观看视频。

Google Chrome 最新的 Canary 版添加了对 CSS 着色器的支持,因此我决定试用一下它们。

在此实验中,我使用了自定义顶点着色器 (spherify.vs) 和 fragment 着色器 (spherify.fs),通过 Google 地图创建了一个地球。

<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));
}

在这里,我们应用了一个顶点着色器 (spherify.vs),该着色器将在具有 50 条线和 50 列 (50 50 border-box) 的网格上运行。您可以随意读取顶点着色器的来源:spherify.vs。它是用 GLSL 编写的,但您可以遵循以下步骤。

mix() 函数提供在 fragment 着色器上进行颜色操作(例如混合和 Alpha 合成)的基本功能。

我们可以直接在 CSS 中更改球面的半径、轴和旋转角度。在本例中,我们设置了 sphereRadius: 0.5 的值并给出了原始的球面大小。

尽情体验演示吧!

以下是对这种效果的影响视频。如果您启用了着色器,就可以体验下面的真实内容!

如果您只是在上方看到一个平面 Google 地图,则可以按照以下说明将其启用

浏览器支持:CSS 着色器

这是目前最先进的功能,因此只在最新的 Google Chrome Canary 和 WebKit 每夜版中提供。如果想获得完整体验,您需要转动几个旋钮。

Chrome Canary 版步骤

  1. 在浏览器的导航栏中输入 about:flags
  2. 找到“启用 CSS 着色器”。启用
  3. 重新启动浏览器

WebKit 每夜步数

  1. 下载并安装适用于 Mac OSX 的 WebKitnightly
  2. 打开浏览器的偏好设置面板。前往 Advanced 标签页,然后在菜单栏中显示 Develop > Enable WebGL 菜单。
  3. 在浏览器的菜单栏中,选择 Develop