透過 CSS 著色器和 Google 地圖建立互動式地球

Paul Irish

最近，我閱讀了 Webmonkey 上的新聞，Adobe 的 CSS 著色器提案已獲得 W3C 的接受，這項提案將透過一些新的 CSS 工具，為網路帶來高品質的電影效果。如果尚未觀看，請觀看這部影片。

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 50 border-box) 的網格上運作。您可以自由閱讀頂點著色器的來源：spherify.vs。雖然這項來源是以 GLSL 編寫，但您應該可以跟著操作。

mix() 函式提供基本功能，可用於著色器片段的混合和 Alpha 合成等色彩操作。

我們可以直接在 CSS 中變更圓弧的半徑、軸線和旋轉角度。在本範例中，我們設定 sphereRadius: 0.5 的值，並提供原始球體大小。

歡迎觀看示範影片！

以下是特效的影片。如果您已啟用著色器，可以直接在下方試玩！

如果您只看到上方平面版 Google 地圖，可以按照下列操作說明啟用

瀏覽器支援：CSS 著色器

這項功能目前屬於尖端技術，因此僅適用於最新的 Google Chrome Canary 和 WebKit 夜間版本。如要享受完整體驗，你需要轉動幾個旋鈕。

Chrome Canary 步驟

  1. 在瀏覽器的導覽列中輸入 about:flags
  2. 找出「Enable CSS Shaders」。啟用
  3. 重新啟動瀏覽器

WebKit 夜間版本步驟

  1. 下載及安裝 Mac OSX 專用的 WebKit 夜間版本
  2. 開啟瀏覽器的偏好設定面板。前往「進階」分頁，勾選「開發」>「啟用 WebGL」選單，以便顯示在選單列中。
  3. 在瀏覽器的選單列中，選取「Develop」