http://www.adobe.com/cn/devnet/html5/articles/css-shaders.html
带给网页电影般视觉冲击力的CSS着色器
HTML5和CSS方面不断涌现的成果 (如过渡，动画，变形，文本阴影，图形阴影，渐变和SVG) 大大提升了HTML的图形和互动的丰富性。 现在你可以在CSS和HTML中使用. SVG的滤镜效果* Filter Effects 1.0* ， 除SVG外， 针对网页内容的其他效果如灰度，棕褐色调，色相旋转都逐渐成为可能。还有更高级的特效，如下面图一展示给你的轮廓分明的效果，也将成为可能。
图一. SVG内容加了滤镜效果，转自svg-wow.org网站
Adobe CSS着色器* 已提交W3C FX专案组。CSS着色器定义一个过滤效果的可扩展性机制，它为所有HTML5内容提供丰富且容易实现的动画视觉效果， 它们能和 CSS动画* 和 CSS 过度*。
下面的视频让你体验一下CSS 着色器让HTML内容产生什么样咂舌的效果：
CSS 着色器翻页效果 (0:39)
CSS 着色器展开地图效果 (0:18)
CSS 着色器显示twiter数据源 (0:22)
这篇文章描述CSS着色器到底是什么以及它是如何工作的，过程中会附上代码样例，还会涉及到如何使用CSS着色器创建自定义效果和写自己的自定义着色器。
几点需要注意: 这是一个处在进展中的工作，随着我们继续更广泛的和社会讨论，我们将会做一些改变。在这篇文章中所使用的语法反映CSS着色器的建议的语法，但它很可能会随着与W3C FX专责小组和广泛社区的讨论而演变。还要注意，按照惯例，在我们的WebKit的原型里所有提议的新属性的前缀都会加上-webkit-前缀。 为了简单起见，在本文的其余部分我将省略此前缀。
Filter Effects 1.0
为了便于理解CSS着色器，有必要让你对提前定义好的滤镜做一番了解， 下面这个例子展示了一个简单的滤镜效果：鼠标移到上面，用户可以看到一个简单的内容灰度渐变效果。
灰度渐变效果演示 (0:06)
<html>
<head>
...
<style>
#shaded {
filter: grayscale(1);
transition: filter ease-in 0.3s;
}
#shaded:hover {
filter: grayscale(0);
}
</style>
</head>
<body>
<div id="shaded">
<div id="multi-col">
<h2>The Creative Web</h2>
<p>Lorem ipsum dolor ... </p>
<img id="png-img" src="planes.jpg"/>
<p>Mauris at ... </p>
<img id="svg-img" src="picture.svg" />
<p>Morbi congue ....</p>
<img id="css3-img" src="html5_css3_styling.svg" />
</div>
</div>
</body>
</html>
使用这个滤镜效果方法很简单：filter属性定义了针对内容的一个滤镜（或者一系列滤镜）。你可以看到，把它和CSS动画集成是很简单的。filter 属性是可以作为动画参数实现动画的。
在这个例子中， grayscale()滤镜被调用实现逐渐淡出的动画，原因当用户鼠标放在目标元素上时，滤镜函数的参数amount被从1（完全灰度）过度到0（没有灰度）。
W3C滤镜效果规范草案（W3C Filter Effects 1.0）做了下面2个定义：
- 它作为定义滤镜的通用语法，把基础滤镜整合在一张图上。
- CSS
filter属性是一个已定义了的滤镜的索引，你可以把一个或者多个滤镜传给它。
你可以把一系列的滤镜方法传给这个filter属性，如：blur(模糊), drop-shadow（阴影）, gamma（伽马）, grayscale（灰度）, hue-rotate（色旋转）, invert（反向）, opacity（透明度）, saturate（饱和度）, sepia（边缘突出）, and sharpen（锐化）等.
- blur(5, 5)
- drop-shadow(10, 5, 5)
- hue-rotate(328deg)
- saturate(5)
- invert(1)
- grayscale(1)
- opacity(0.5)
- gamma(1.1, 3.6, 0)
- sepia(0.5)
图二. 滤镜效果函数效果
滤镜效果美就美在其简单非常语法，与CSS动画的渐变集成相当容易。
但是，有些效果实现起来就很难了，比如，怎么只让内容的一部分变成灰度？ 或者如何实现内容的以不同的方式渐变，如内容上实现扫过的效果？ 或者你想实现的滤镜效果在预先定义好的滤镜包里没有？ 这就是CSS着色器诞生的原因。
CSS着色器提出在预定义的过滤器和CSS动画过渡的过滤效果集中添加自定义方法custom()。CSS着色器为创建任意的效果提供了灵活性和表现力，通过它实现从最简单的到最复杂的效果都没有问题。
CSS着色器实现高级特效
这里我从一个例子开始，上边提过的灰度效果的例子很不错， 但它任然有改进的余地。 下面这个视频展示了一个更加强大的效果: 随着内容从灰度到彩色渐变，它会闪动几下，同时，一个色彩效果从底部到顶部扫过去。
这个例子使用了一个vertex着色器实现闪动效果，一个像素着色器实现颜色横扫。二者都是通过自定义滤镜被引用的，这个自定义滤镜也带了参数方便着色器的配置。下面是代码：
<html>
<head>
...
<style>
#shaded {
filter: custom(url('wobble.vs') /* wobble effect */
url('color-swipe.fs'), /* swipe effect */
40 40, /* mesh lines/cols */
amplitude 60, /* wobble strength */
amount 0.0); /* effect amount */
transition: filter ease-in-out 2s;
...;
}
#shaded:hover {
filter: custom(url('wobble.vs')
url('color-swipe.fs'),
40 40,
amplitude 60,
amount 1.0);
}
</style>
</head>
<body>
<div id="shaded">
<div id="multi-col">
<h2>The Creative Web</h2>
<!-- Same as previous example -->
</div>
</div>
</body>
</html>
着色器规范我们将在日后详细讨论。目前重要的是让你们了解各个着色器都带给你什么样的效果，以及向外暴露什么参数供CSS来控制。
在这个例子中，自定义滤镜使用了wobble.vs顶点着色器实现变形、 color-swipe.fs 碎片着色器实现灰度到常色扫过的切换效果。
着色器是什么？
着色器在3D图形中是常见的，它们（一般是）处理3D几何面（vertex 着色器）和颜色像素（碎片着色器）的小程序。
比如vertex着色器能够实现表面如旗子飘动的效果，或者翻滚效果，就如前面例子一样。碎片着色器（通常叫做像素着色器）能够实现任意方式的计算来控制像素的颜色。CSS着色器能够驾驱于硬件加速着色器软件的强大功能。
CSS着色器如何工作的？
有了CSS着色器，你可以把你的HTML和SVG元素变成一个顶点网格(在第二步)，这可以实现各种变形，即使可能在3D场合中。第三步，网格能够被渲染（或者合并）为像素交给碎片着色器上色。
图三. CSS着色器处理模型.
作为一个开发者，你可以控制网格的颗粒度，你可以定义参数控制着色器。在这个例子中，有着色器ID的元素被设置了滤镜参数：
custom(url('wobble.vs') /* wobble effect */
url('color-swipe.fs'), /* swipe effect */
40 40, /* mesh lines/cols */
amplitude 60, /* wobble strength */
amount 0.0); /* effect amount */
wobble.vs 和 color-swipe.fs 着色器内部设定，当参数为0时，内容整体灰度上将不会有任何翻滚和像素着色器。wobble.vs和color-swipe.fs着色器内部设定，当参数为0时，内容整体灰度上将不会有任何翻滚和像素着色器。
当用户鼠标经过目标内容，它的滤镜属性就被设置为：
custom(url('wobble.vs')
url('color-swipe.fs'),
40 40,
amplitude 60,
amount 1)
再次提醒，那些参数的意义会因着色器而异。在这个例子中，原着色器作者做出规定， 如果参数为0.5， 那么翻滚达到最大效果，参数为1时，动作将变为静止。颜色横扫着色器是这样的：在0.0到1.0之间， 效果从底部到顶部以shine曲线过渡。观察上面的视频你能够更好地理解这个视觉效果。
就如前面提到的灰度滤镜例子，与CSS集成实现效果的做法一样，同样非常简单，只要使用渐变属性就ok了。
开发着色器
在现实开发中，大多数人将通过配置参数充分发挥着色器提供的完美的自定义效果，就如前面提到的例子。
开发着色器，从中做些实践并不是那么难。其实其中有一个小秘密，就是这个过程中你会享受到无穷的乐趣。
着色器的开发语言是OpenLG ES 语言*,和开发 WebGL*着色器使用的是同一种语言。 这里是上面产生翻滚效果中用的顶点着色器的例子。
如果你不了解着色器，下面术语能够帮助你理解这个例子：
- Vertex:(顶点)供着色器作处理的几何坐标
- Texture:(光栅图像). CSS着色器把元素的渲染转换为材质供vertex和片段着色器处理
- Attributes:(属性)基于每个顶点的参数, 传给vertex 着色器
- Uniform:(全局参数)面对所有顶点和面的全局参数，由custom()方法传给着色器
- Projection Matrix: (投射矩阵)是一个将 归一化的顶点坐标范围(沿每个坐标轴[-0.5, +0.5] s)的坐标点转换回实际视角的坐标系统坐标点的矩阵
precision mediump float; /* required */
// ================= Per-vertex attributes =================== //
attribute vec3 a_position; /* The vertex's coordinates */
attribute vec2 a_texCoord; /* The vertext's texture coordinate */
// Uniform parameters are available to shaders and have the
// same value for all vertex or pixel.
uniform mat4 u_projectionMatrix; /* The projection matrix */
// ================ Shader parameters ======================== //
uniform float amplitude;
uniform float amount;
// ============== End shader parameters ====================== //
const float rotate = 20.0; /* could be made a uniform */
/* to allow control form CSS */
const float PI = 3.14...;
varying vec2 v_texCoord;
mat4 rotateX(float f) {...}
mat4 rotateY(float f) {...}
mat4 rotateZ(float f) {...}
void main()
{
v_texCoord = a_texCoord.xy;
vec4 pos = vec4(a_position, 1.0);
float r = 1.0 - abs((amount - 0.5) / 0.5);
float a = r * rotate * PI / 180.0;
mat4 rotX = rotateX(a);
mat4 rotY = rotateY(a / 4.0);
mat4 rotZ = rotateZ(a / 8.0);
float dx = 0.01 * cos(3.0 * PI * (pos.x + amount)) * r;
float dy = 0.01 * cos(3.0 * PI * (pos.y + amount)) * r;
float dz = 0.1 * cos(3.0 * PI * (pos.x + pos.y + amount)) * r;
pos.x += dx;
pos.y += dy;
pos.z += dz;
gl_Position = u_projectionMatrix * rotZ * rotY * rotX * pos;
}
这是那个例子中用的颜色横扫着色器代码：
precision mediump float; /* required */
// The 'original' content rendering in a texture.
uniform sampler2D s_texture;
// ================ Shader parameters ======================== //
uniform float amplitude; /* unused in this fragment shader */
uniform float amount;
// ============== End shader parameters ====================== //
varying vec2 v_texCoord;
// The desired 'color swipe' color.
const vec4 swipeColor = vec4(1.0, 1.0, 1.0, 1.0);
vec4 grayscale(vec4 color) {
...;
return gray;
}
void main() {
vec4 color = texture2D(s_texture, v_texCoord);
vec4 gray = grayscale(color);
vec2 pos = v_texCoord;
float p = 1.0 - pos.y; /* progress from bottom to top */
vec4 sc = swipeColor * color.a;
float threshold = amount * 1.2;
if (p < threshold) {
float a = min(abs(threshold - p) / 0.2, 1.0);
gl_FragColor = mix(sc, color, a);
} else {
float a = min(abs(threshold - p) / 0.005, 1.0);
gl_FragColor = mix(sc, gray, a);
}
}
网上有很多不错的资源会对你的着色器开发有帮助，一切类库也包含了很棒的着色器套件（参看文章底部的链接）
着色语言，如OpenGL ES，都是让视觉效果开发变得简单，CSS着色器将这些很棒的表现元素与CSS句法紧紧相连，让它产生这些效果变得异常容易。
和WebGL作对比
WebGL* 提供了HTML5画布元素的实现方案，它为画布提供了3D上下文，在这个上下文里面，你可以访问到像素着色器（和其他顶点着色器以及WebGL提供的其他3D特性），WebGL的作用范围仅仅在canvas* 范围内。
与此形成鲜明对比的是，CSS着色器可以应用任何着色器到任何网页内容。
下一步该怎么办？
Adobe作为FX主力军的一员正把CSS着色器贡献给W3C， 我们的目标是一旦得到W3C的肯定，我们将着手把代码贡献给WebKit，这样不久网站开发者们就能够受益于这套全新强大的滤镜效果集了。
与此同时， 你可能想参考下面的资源获取更多关于CSS动画和特效的相关信息：
- FX Task Force*
- CSS Animations*
- CSS Transitions*
- Filter Effects 1.0*
- CSS 2D Transforms*
- CSS 3D Transforms*
- OpenGL ES 2.0*
- OpenGL ES Shading Language* (PDF)
- WebGL*
- WebGL Wiki*
- GLFX.js*
+
本文遵守知识共享—署名-非商业性使用-相同方式共享3.0 Unported License (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License)许可条件。 适合本文包含的代码范例、但超越本许可条件范围的其它许可条件能够在Adobe中查到。
关于作者
Vincent 致力于互联网标准工程，现于CSS工作组、FX专责小组以及SVG工作组工作。目前他正致力于CSS着色器（CSS shaders）、CSS 区域（CSS regions）、CSS排除（CSS exclusions）以及可伸缩矢量图形（SVG）的研究。在加入Adobe之前，Vincent供职于Oracle公司，主要是在商业智能领域从事图形、交互以及用户界面动画制作的工作，他使得大量复杂的数据集变得直观可解，让用户能够更为方便地设置浏览数据、检测趋势，或是发现异常。而在加入Oracle以前，Vincent在Sun Microsystems工作，在那里他专注于图形、动画及交互技术的研究，其中Java 2D API 以及SVG格式方面则是他最重要的关注点。
Vincent在Apache（软件基金会的支持下）与人共同发起并领导了Batik项目，这是一个开源Java工具包，用于操控、查看或SVG内容的代码转换。Vincent为SVG规范及其在移动设备上的版本——SVG微型简化版本（SVG Tiny）——的发展做出了巨大贡献。他在万维网联盟（W3C）主持复合文档格式（CDF）方面的事务。Vincent还是 《Java 2D API 图形》（Java 2D API Graphics）一书的作者，对于图形设计，他总是抱有极大的热情。