帶給網(wǎng)頁電影般視覺沖擊力的CSS著色器
HTML5和CSS方面不斷涌現(xiàn)的成果 (如過渡，動(dòng)畫，變形，文本陰影，圖形陰影，漸變和SVG) 大大提升了HTML的圖形和互動(dòng)的豐富性。 現(xiàn)在你可以在CSS和HTML中使用. SVG的濾鏡效果 Filter Effects 1.0 ， 除SVG外， 針對(duì)網(wǎng)頁內(nèi)容的其他效果如灰度，棕褐色調(diào)，色相旋轉(zhuǎn)都逐漸成為可能。還有更高級(jí)的特效，如下面圖一展示給你的輪廓分明的效果，也將成為可能。
圖一. SVG內(nèi)容加了濾鏡效果，轉(zhuǎn)自svg-wow.org網(wǎng)站
Adobe CSS著色器 已提交W3C FX專案組。CSS著色器定義一個(gè)過濾效果的可擴(kuò)展性機(jī)制，它為所有HTML5內(nèi)容提供豐富且容易實(shí)現(xiàn)的動(dòng)畫視覺效果， 它們能和 CSS動(dòng)畫 和 CSS 過度.
下面的視頻讓你體驗(yàn)一下CSS 著色器讓HTML內(nèi)容產(chǎn)生什么樣咂舌的效果：
CSS 著色器翻頁效果 (0:39)
CSS 著色器展開地圖效果 (0:18)
CSS 著色器顯示twiter數(shù)據(jù)源 (0:22)
這篇文章描述CSS著色器到底是什么以及它是如何工作的，過程中會(huì)附上代碼樣例，還會(huì)涉及到如何使用CSS著色器創(chuàng)建自定義效果和寫自己的自定義著色器。
幾點(diǎn)需要注意: 這是一個(gè)處在進(jìn)展中的工作，隨著我們繼續(xù)更廣泛的和社會(huì)討論，我們將會(huì)做一些改變。在這篇文章中所使用的語法反映CSS著色器的建議的語法，但它很可能會(huì)隨著與W3C FX專責(zé)小組和廣泛社區(qū)的討論而演變。還要注意，按照慣例，在我們的WebKit的原型里所有提議的新屬性的前綴都會(huì)加上-webkit-前綴。 為了簡單起見，在本文的其余部分我將省略此前綴。
Filter Effects 1.0
為了便于理解CSS著色器，有必要讓你對(duì)提前定義好的濾鏡做一番了解， 下面這個(gè)例子展示了一個(gè)簡單的濾鏡效果：鼠標(biāo)移到上面，用戶可以看到一個(gè)簡單的內(nèi)容灰度漸變效果。
灰度漸變效果演示 (0:06)
這里是這個(gè)灰度漸變效果的代碼：
- <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>
使用這個(gè)濾鏡效果方法很簡單：filter屬性定義了針對(duì)內(nèi)容的一個(gè)濾鏡（或者一系列濾鏡）。你可以看到，把它和CSS動(dòng)畫集成是很簡單的。filter 屬性是可以作為動(dòng)畫參數(shù)實(shí)現(xiàn)動(dòng)畫的。
在這個(gè)例子中， grayscale()濾鏡被調(diào)用實(shí)現(xiàn)逐漸淡出的動(dòng)畫，原因當(dāng)用戶鼠標(biāo)放在目標(biāo)元素上時(shí)，濾鏡函數(shù)的參數(shù)amount被從1（完全灰度）過度到0（沒有灰度）。
W3C濾鏡效果規(guī)范草案（W3C Filter Effects 1.0）做了下面2個(gè)定義：
它作為定義濾鏡的通用語法，把基礎(chǔ)濾鏡整合在一張圖上。
CSS filter屬性是一個(gè)已定義了的濾鏡的索引，你可以把一個(gè)或者多個(gè)濾鏡傳給它。
你可以把一系列的濾鏡方法傳給這個(gè)filter屬性，如：blur(模糊), drop-shadow（陰影）, gamma（伽馬）, grayscale（灰度）, hue-rotate（色旋轉(zhuǎn)）, 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)
圖二. 濾鏡效果函數(shù)效果
濾鏡效果美就美在其簡單非常語法，與CSS動(dòng)畫的漸變集成相當(dāng)容易。
但是，有些效果實(shí)現(xiàn)起來就很難了，比如，怎么只讓內(nèi)容的一部分變成灰度？ 或者如何實(shí)現(xiàn)內(nèi)容的以不同的方式漸變，如內(nèi)容上實(shí)現(xiàn)掃過的效果？ 或者你想實(shí)現(xiàn)的濾鏡效果在預(yù)先定義好的濾鏡包里沒有？ 這就是CSS著色器誕生的原因。
CSS著色器提出在預(yù)定義的過濾器和CSS動(dòng)畫過渡的過濾效果集中添加自定義方法custom()。CSS著色器為創(chuàng)建任意的效果提供了靈活性和表現(xiàn)力，通過它實(shí)現(xiàn)從最簡單的到最復(fù)雜的效果都沒有問題。
CSS著色器實(shí)現(xiàn)高級(jí)特效
這里我從一個(gè)例子開始，上邊提過的灰度效果的例子很不錯(cuò)， 但它任然有改進(jìn)的余地。 下面這個(gè)視頻展示了一個(gè)更加強(qiáng)大的效果: 隨著內(nèi)容從灰度到彩色漸變，它會(huì)閃動(dòng)幾下，同時(shí)，一個(gè)色彩效果從底部到頂部掃過去。
簡單CSS著色器演示 (0:10)
這個(gè)例子使用了一個(gè)vertex著色器實(shí)現(xiàn)閃動(dòng)效果，一個(gè)像素著色器實(shí)現(xiàn)顏色橫掃。二者都是通過自定義濾鏡被引用的，這個(gè)自定義濾鏡也帶了參數(shù)方便著色器的配置。下面是代碼：
- <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>
著色器規(guī)范我們將在日后詳細(xì)討論。目前重要的是讓你們了解各個(gè)著色器都帶給你什么樣的效果，以及向外暴露什么參數(shù)供CSS來控制。
在這個(gè)例子中，自定義濾鏡使用了wobble.vs頂點(diǎn)著色器實(shí)現(xiàn)變形、 color-swipe.fs 碎片著色器實(shí)現(xiàn)灰度到常色掃過的切換效果。
著色器是什么？
著色器在3D圖形中是常見的，它們（一般是）處理3D幾何面（vertex 著色器）和顏色像素（碎片著色器）的小程序。
比如vertex著色器能夠?qū)崿F(xiàn)表面如旗子飄動(dòng)的效果，或者翻滾效果，就如前面例子一樣。碎片著色器（通常叫做像素著色器）能夠?qū)崿F(xiàn)任意方式的計(jì)算來控制像素的顏色。CSS著色器能夠駕驅(qū)于硬件加速著色器軟件的強(qiáng)大功能。
CSS著色器如何工作的？
有了CSS著色器，你可以把你的HTML和SVG元素變成一個(gè)頂點(diǎn)網(wǎng)格(在第二步)，這可以實(shí)現(xiàn)各種變形，即使可能在3D場合中。第三步，網(wǎng)格能夠被渲染（或者合并）為像素交給碎片著色器上色。
圖三. CSS著色器處理模型.
作為一個(gè)開發(fā)者，你可以控制網(wǎng)格的顆粒度，你可以定義參數(shù)控制著色器。在這個(gè)例子中，有著色器ID的元素被設(shè)置了濾鏡參數(shù)：
- 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 著色器內(nèi)部設(shè)定，當(dāng)參數(shù)為0時(shí)，內(nèi)容整體灰度上將不會(huì)有任何翻滾和像素著色器。wobble.vs和color-swipe.fs著色器內(nèi)部設(shè)定，當(dāng)參數(shù)為0時(shí)，內(nèi)容整體灰度上將不會(huì)有任何翻滾和像素著色器。
當(dāng)用戶鼠標(biāo)經(jīng)過目標(biāo)內(nèi)容，它的濾鏡屬性就被設(shè)置為：
- custom(url('wobble.vs')
- url('color-swipe.fs'),
- 40 40,
- amplitude 60,
- amount 1)
再次提醒，那些參數(shù)的意義會(huì)因著色器而異。在這個(gè)例子中，原著色器作者做出規(guī)定， 如果參數(shù)為0.5， 那么翻滾達(dá)到最大效果，參數(shù)為1時(shí)，動(dòng)作將變?yōu)殪o止。顏色橫掃著色器是這樣的：在0.0到1.0之間， 效果從底部到頂部以shine曲線過渡。觀察上面的視頻你能夠更好地理解這個(gè)視覺效果。
就如前面提到的灰度濾鏡例子，與CSS集成實(shí)現(xiàn)效果的做法一樣，同樣非常簡單，只要使用漸變屬性就ok了。
開發(fā)著色器
在現(xiàn)實(shí)開發(fā)中，大多數(shù)人將通過配置參數(shù)充分發(fā)揮著色器提供的完美的自定義效果，就如前面提到的例子。
開發(fā)著色器，從中做些實(shí)踐并不是那么難。其實(shí)其中有一個(gè)小秘密，就是這個(gè)過程中你會(huì)享受到無窮的樂趣。
著色器的開發(fā)語言是OpenLG ES 語言,和開發(fā) WebGL著色器使用的是同一種語言。 這里是上面產(chǎn)生翻滾效果中用的頂點(diǎn)著色器的例子。
如果你不了解著色器，下面術(shù)語能夠幫助你理解這個(gè)例子：
Vertex:(頂點(diǎn))供著色器作處理的幾何坐標(biāo)
Texture:(光柵圖像). CSS著色器把元素的渲染轉(zhuǎn)換為材質(zhì)供vertex和片段著色器處理
Attributes:(屬性)基于每個(gè)頂點(diǎn)的參數(shù), 傳給vertex 著色器
Uniform:(全局參數(shù))面對(duì)所有頂點(diǎn)和面的全局參數(shù)，由custom()方法傳給著色器
Projection Matrix: (投射矩陣)是一個(gè)將 歸一化的頂點(diǎn)坐標(biāo)范圍(沿每個(gè)坐標(biāo)軸[-0.5, +0.5] s)的坐標(biāo)點(diǎn)轉(zhuǎn)換回實(shí)際視角的坐標(biāo)系統(tǒng)坐標(biāo)點(diǎn)的矩陣
- 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;
- }
這是那個(gè)例子中用的顏色橫掃著色器代碼：
- 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);
- }
- }
網(wǎng)上有很多不錯(cuò)的資源會(huì)對(duì)你的著色器開發(fā)有幫助，一切類庫也包含了很棒的著色器套件（參看文章底部的鏈接）
著色語言，如OpenGL ES，都是讓視覺效果開發(fā)變得簡單，CSS著色器將這些很棒的表現(xiàn)元素與CSS句法緊緊相連，讓它產(chǎn)生這些效果變得異常容易。
和WebGL作對(duì)比
WebGL 提供了HTML5畫布元素的實(shí)現(xiàn)方案，它為畫布提供了3D上下文，在這個(gè)上下文里面，你可以訪問到像素著色器（和其他頂點(diǎn)著色器以及WebGL提供的其他3D特性），WebGL的作用范圍僅僅在canvas 范圍內(nèi)。
與此形成鮮明對(duì)比的是，CSS著色器可以應(yīng)用任何著色器到任何網(wǎng)頁內(nèi)容。
下一步該怎么辦？
Adobe作為FX主力軍的一員正把CSS著色器貢獻(xiàn)給W3C， 我們的目標(biāo)是一旦得到W3C的肯定，我們將著手把代碼貢獻(xiàn)給WebKit，這樣不久網(wǎng)站開發(fā)者們就能夠受益于這套全新強(qiáng)大的濾鏡效果集了。
與此同時(shí)， 你可能想?yún)⒖枷旅娴馁Y源獲取更多關(guān)于CSS動(dòng)畫和特效的相關(guān)信息：
