最近,我阅读了 Webmonkey 上的新闻,其中指出 Adobe 的 CSS 着色器提案将通过一些新的 CSS 工具为网络带来高品质的电影特效,并且已被 W3C 接受。如果您尚未观看视频,请先观看视频。
Google Chrome 最新的 Canary 版添加了对 CSS 着色器的支持,因此我决定试用一下它们。
在此实验中,我使用了自定义顶点着色器 (spherify.vs
) 和 fragment 着色器 (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()
函数提供在 fragment 着色器上进行颜色操作(例如混合和 Alpha 合成)的基本功能。
我们可以直接在 CSS 中更改球面的半径、轴和旋转角度。在本例中,我们设置了 sphereRadius: 0.5
的值并给出了原始的球面大小。
尽情体验演示吧!
以下是对这种效果的影响视频。如果您启用了着色器,就可以体验下面的真实内容!
如果您只是在上方看到一个平面 Google 地图,则可以按照以下说明将其启用
浏览器支持:CSS 着色器
这是目前最先进的功能,因此只在最新的 Google Chrome Canary 和 WebKit 每夜版中提供。如果想获得完整体验,您需要转动几个旋钮。
Chrome Canary 版步骤
- 在浏览器的导航栏中输入
about:flags
- 找到“启用 CSS 着色器”。启用
- 重新启动浏览器
WebKit 每夜步数
- 下载并安装适用于 Mac OSX 的 WebKitnightly
- 打开浏览器的偏好设置面板。前往 Advanced 标签页,然后在菜单栏中显示 Develop > Enable WebGL 菜单。
- 在浏览器的菜单栏中,选择 Develop