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

我最近已閱讀 Webmonkey 的新聞，瞭解 Adobe 的 CSS Shaders 提案。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. 找出「啟用 CSS 著色器」。啟用
3. 重新啟動瀏覽器

WebKit 夜間步數

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