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

Paul Irish

我最近在 Webmonkey 上看到了一条新闻，说 W3C 已接受 Adobe 的 CSS 着色器提案，该提案将通过一些新的 CSS 工具为 Web 带来高品质的电影效果。如果您尚未观看，请观看此视频。

Google Chrome 的最新 Canary 版添加了对 CSS 着色器的支持，因此我决定对其进行实验。

在本实验中，我使用自定义顶点着色器 (spherify.vs) 和片段着色器 (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 border-box) 进行操作。您可以随意阅读顶点着色器的源代码：spherify.vs。该代码使用 GLSL 编写，但您应该可以跟着学习。

mix() 函数提供基本颜色处理功能，例如在片段着色器上进行混合和 Alpha 合成。

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

祝您使用愉快！

以下是该效果的视频演示。如果您已启用着色器，则可以直接在下方玩真人版！

如果您只看到上面的平面 Google 地图，可以按照以下说明进行启用

浏览器支持：CSS 着色器

这项功能目前处于尖端阶段，因此仅在最新的 Google Chrome Canary 和 WebKit 每夜版中提供。如需畅享完整体验，您需要调整一些旋钮。

Chrome Canary 版的操作步骤

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

WebKit 每夜步骤

  1. 下载并安装适用于 Mac OSX 的 WebKit 每夜 build
  2. 打开浏览器的偏好设置面板。前往高级标签页，然后选中相应复选框，以便在菜单栏中显示 Develop > Enable WebGL 菜单。
  3. 在浏览器的菜单栏中，选择开发