我最近已閱讀 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;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
- 找出「啟用 CSS 著色器」。啟用
- 重新啟動瀏覽器
WebKit 夜間步數
- 下載並安裝 Mac OSX 適用的 WebKit 夜間版本
- 開啟瀏覽器的偏好設定面板。前往「進階」分頁,然後在選單列中勾選「開發」>「啟用 WebGL」選單。
- 在瀏覽器的選單列中選取「開發」。