css 3d样子

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网站

图一. 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（锐化）等.

  1. blur(5, 5)
  2. drop-shadow(10, 5, 5)
  3. hue-rotate(328deg)
  4. saturate(5)
  5. invert(1)
  6. grayscale(1)
  7. opacity(0.5)
  8. gamma(1.1, 3.6, 0)
  9. 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着色器处理模型

图三. 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动画和特效的相关信息：

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

本文遵守知识共享—署名-非商业性使用-相同方式共享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）一书的作者，对于图形设计，他总是抱有极大的热情。


posted @ 2011-11-25 10:20  y0umer  阅读(209)  评论(0)  编辑  收藏  举报