我最近在 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;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 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 每夜 build
- 打开浏览器的偏好设置面板。前往高级标签页,然后选中相应复选框,以便在菜单栏中显示 Develop > Enable WebGL 菜单。
- 在浏览器的菜单栏中,选择开发