最近,我閱讀了 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;ll=14.597042,-15.625&amp;spn=158.47027,316.054688&amp;t=h&amp;z=2&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 步驟
- 在瀏覽器的導覽列中輸入
about:flags
- 找出「Enable CSS Shaders」。啟用
- 重新啟動瀏覽器
WebKit 夜間版本步驟
- 下載及安裝 Mac OSX 專用的 WebKit 夜間版本
- 開啟瀏覽器的偏好設定面板。前往「進階」分頁,勾選「開發」>「啟用 WebGL」選單,以便顯示在選單列中。
- 在瀏覽器的選單列中,選取「Develop」