css 3d样子
http://www.adobe.com/cn/devnet/html5/articles/css-shaders.html
帶給網(wǎng)頁電影般視覺沖擊力的CSS著色器
HTML5和CSS方面不斷涌現(xiàn)的成果 (如過渡，動畫，變形，文本陰影，圖形陰影，漸變和SVG) 大大提升了HTML的圖形和互動的豐富性。 現(xiàn)在你可以在CSS和HTML中使用. SVG的濾鏡效果*? Filter Effects 1.0* ， 除SVG外， 針對網(wǎng)頁內(nèi)容的其他效果如灰度，棕褐色調(diào)，色相旋轉(zhuǎn)都逐漸成為可能。還有更高級的特效，如下面圖一展示給你的輪廓分明的效果，也將成為可能。
圖一. SVG內(nèi)容加了濾鏡效果，轉(zhuǎn)自svg-wow.org網(wǎng)站
Adobe CSS著色器* 已提交W3C FX專案組。CSS著色器定義一個過濾效果的可擴展性機制，它為所有HTML5內(nèi)容提供豐富且容易實現(xiàn)的動畫視覺效果， 它們能和 CSS動畫* 和 CSS 過度*。
下面的視頻讓你體驗一下CSS 著色器讓HTML內(nèi)容產(chǎn)生什么樣咂舌的效果：
CSS 著色器翻頁效果 (0:39)
CSS 著色器展開地圖效果 (0:18)
CSS 著色器顯示twiter數(shù)據(jù)源 (0:22)
這篇文章描述CSS著色器到底是什么以及它是如何工作的，過程中會附上代碼樣例，還會涉及到如何使用CSS著色器創(chuàng)建自定義效果和寫自己的自定義著色器。
幾點需要注意: 這是一個處在進展中的工作，隨著我們繼續(xù)更廣泛的和社會討論，我們將會做一些改變。在這篇文章中所使用的語法反映CSS著色器的建議的語法，但它很可能會隨著與W3C FX專責小組和廣泛社區(qū)的討論而演變。還要注意，按照慣例，在我們的WebKit的原型里所有提議的新屬性的前綴都會加上-webkit-前綴。 為了簡單起見，在本文的其余部分我將省略此前綴。
Filter Effects 1.0
為了便于理解CSS著色器，有必要讓你對提前定義好的濾鏡做一番了解， 下面這個例子展示了一個簡單的濾鏡效果：鼠標移到上面，用戶可以看到一個簡單的內(nèi)容灰度漸變效果。
灰度漸變效果演示 (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屬性定義了針對內(nèi)容的一個濾鏡（或者一系列濾鏡）。你可以看到，把它和CSS動畫集成是很簡單的。filter 屬性是可以作為動畫參數(shù)實現(xiàn)動畫的。
在這個例子中， grayscale()濾鏡被調(diào)用實現(xiàn)逐漸淡出的動畫，原因當用戶鼠標放在目標元素上時，濾鏡函數(shù)的參數(shù)amount被從1（完全灰度）過度到0（沒有灰度）。
W3C濾鏡效果規(guī)范草案（W3C Filter Effects 1.0）做了下面2個定義：
- 它作為定義濾鏡的通用語法，把基礎濾鏡整合在一張圖上。
- CSS filter屬性是一個已定義了的濾鏡的索引，你可以把一個或者多個濾鏡傳給它。
你可以把一系列的濾鏡方法傳給這個filter屬性，如：blur(模糊), drop-shadow（陰影）, gamma（伽馬）, grayscale（灰度）, hue-rotate（色旋轉(zhuǎn)）, invert（反向）, opacity（透明度）, saturate（飽和度）, sepia（邊緣突出）, and sharpen（銳化）等.
圖二. 濾鏡效果函數(shù)效果
濾鏡效果美就美在其簡單非常語法，與CSS動畫的漸變集成相當容易。
但是，有些效果實現(xiàn)起來就很難了，比如，怎么只讓內(nèi)容的一部分變成灰度？ 或者如何實現(xiàn)內(nèi)容的以不同的方式漸變，如內(nèi)容上實現(xiàn)掃過的效果？ 或者你想實現(xiàn)的濾鏡效果在預先定義好的濾鏡包里沒有？ 這就是CSS著色器誕生的原因。
CSS著色器提出在預定義的過濾器和CSS動畫過渡的過濾效果集中添加自定義方法custom()。CSS著色器為創(chuàng)建任意的效果提供了靈活性和表現(xiàn)力，通過它實現(xiàn)從最簡單的到最復雜的效果都沒有問題。
CSS著色器實現(xiàn)高級特效
這里我從一個例子開始，上邊提過的灰度效果的例子很不錯， 但它任然有改進的余地。 下面這個視頻展示了一個更加強大的效果: 隨著內(nèi)容從灰度到彩色漸變，它會閃動幾下，同時，一個色彩效果從底部到頂部掃過去。
這個例子使用了一個vertex著色器實現(xiàn)閃動效果，一個像素著色器實現(xiàn)顏色橫掃。二者都是通過自定義濾鏡被引用的，這個自定義濾鏡也帶了參數(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ī)范我們將在日后詳細討論。目前重要的是讓你們了解各個著色器都帶給你什么樣的效果，以及向外暴露什么參數(shù)供CSS來控制。
在這個例子中，自定義濾鏡使用了wobble.vs頂點著色器實現(xiàn)變形、 color-swipe.fs 碎片著色器實現(xiàn)灰度到常色掃過的切換效果。
著色器是什么？
著色器在3D圖形中是常見的，它們（一般是）處理3D幾何面（vertex 著色器）和顏色像素（碎片著色器）的小程序。
比如vertex著色器能夠?qū)崿F(xiàn)表面如旗子飄動的效果，或者翻滾效果，就如前面例子一樣。碎片著色器（通常叫做像素著色器）能夠?qū)崿F(xiàn)任意方式的計算來控制像素的顏色。CSS著色器能夠駕驅(qū)于硬件加速著色器軟件的強大功能。
CSS著色器如何工作的？
有了CSS著色器，你可以把你的HTML和SVG元素變成一個頂點網(wǎng)格(在第二步)，這可以實現(xiàn)各種變形，即使可能在3D場合中。第三步，網(wǎng)格能夠被渲染（或者合并）為像素交給碎片著色器上色。
圖三. CSS著色器處理模型.
作為一個開發(fā)者，你可以控制網(wǎng)格的顆粒度，你可以定義參數(shù)控制著色器。在這個例子中，有著色器ID的元素被設置了濾鏡參數(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ù)為0時，內(nèi)容整體灰度上將不會有任何翻滾和像素著色器。wobble.vs和color-swipe.fs著色器內(nèi)部設定，當參數(shù)為0時，內(nèi)容整體灰度上將不會有任何翻滾和像素著色器。
當用戶鼠標經(jīng)過目標內(nèi)容，它的濾鏡屬性就被設置為：
custom(url('wobble.vs') url('color-swipe.fs'), 40 40, amplitude 60,amount 1)再次提醒，那些參數(shù)的意義會因著色器而異。在這個例子中，原著色器作者做出規(guī)定， 如果參數(shù)為0.5， 那么翻滾達到最大效果，參數(shù)為1時，動作將變?yōu)殪o止。顏色橫掃著色器是這樣的：在0.0到1.0之間， 效果從底部到頂部以shine曲線過渡。觀察上面的視頻你能夠更好地理解這個視覺效果。
就如前面提到的灰度濾鏡例子，與CSS集成實現(xiàn)效果的做法一樣，同樣非常簡單，只要使用漸變屬性就ok了。
開發(fā)著色器
在現(xiàn)實開發(fā)中，大多數(shù)人將通過配置參數(shù)充分發(fā)揮著色器提供的完美的自定義效果，就如前面提到的例子。
開發(fā)著色器，從中做些實踐并不是那么難。其實其中有一個小秘密，就是這個過程中你會享受到無窮的樂趣。
著色器的開發(fā)語言是OpenLG ES 語言*,和開發(fā) WebGL*著色器使用的是同一種語言。 這里是上面產(chǎn)生翻滾效果中用的頂點著色器的例子。
如果你不了解著色器，下面術語能夠幫助你理解這個例子：
- Vertex:(頂點)供著色器作處理的幾何坐標
- Texture:(光柵圖像). CSS著色器把元素的渲染轉(zhuǎn)換為材質(zhì)供vertex和片段著色器處理
- Attributes:(屬性)基于每個頂點的參數(shù), 傳給vertex 著色器
- Uniform:(全局參數(shù))面對所有頂點和面的全局參數(shù)，由custom()方法傳給著色器
- Projection Matrix: (投射矩陣)是一個將 歸一化的頂點坐標范圍(沿每個坐標軸[-0.5, +0.5] s)的坐標點轉(zhuǎn)換回實際視角的坐標系統(tǒng)坐標點的矩陣
這是那個例子中用的顏色橫掃著色器代碼：
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)上有很多不錯的資源會對你的著色器開發(fā)有幫助，一切類庫也包含了很棒的著色器套件（參看文章底部的鏈接）
著色語言，如OpenGL ES，都是讓視覺效果開發(fā)變得簡單，CSS著色器將這些很棒的表現(xiàn)元素與CSS句法緊緊相連，讓它產(chǎn)生這些效果變得異常容易。
和WebGL作對比
WebGL* 提供了HTML5畫布元素的實現(xiàn)方案，它為畫布提供了3D上下文，在這個上下文里面，你可以訪問到像素著色器（和其他頂點著色器以及WebGL提供的其他3D特性），WebGL的作用范圍僅僅在canvas* 范圍內(nèi)。
與此形成鮮明對比的是，CSS著色器可以應用任何著色器到任何網(wǎng)頁內(nèi)容。
下一步該怎么辦？
Adobe作為FX主力軍的一員正把CSS著色器貢獻給W3C， 我們的目標是一旦得到W3C的肯定，我們將著手把代碼貢獻給WebKit，這樣不久網(wǎng)站開發(fā)者們就能夠受益于這套全新強大的濾鏡效果集了。
與此同時， 你可能想?yún)⒖枷旅娴馁Y源獲取更多關于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*
+
本文遵守知識共享—署名-非商業(yè)性使用-相同方式共享3.0 Unported License (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License)許可條件。 適合本文包含的代碼范例、但超越本許可條件范圍的其它許可條件能夠在Adobe中查到。
關于作者
Vincent 致力于互聯(lián)網(wǎng)標準工程，現(xiàn)于CSS工作組、FX專責小組以及SVG工作組工作。目前他正致力于CSS著色器（CSS shaders）、CSS 區(qū)域（CSS regions）、CSS排除（CSS exclusions）以及可伸縮矢量圖形（SVG）的研究。在加入Adobe之前，Vincent供職于Oracle公司，主要是在商業(yè)智能領域從事圖形、交互以及用戶界面動畫制作的工作，他使得大量復雜的數(shù)據(jù)集變得直觀可解，讓用戶能夠更為方便地設置瀏覽數(shù)據(jù)、檢測趨勢，或是發(fā)現(xiàn)異常。而在加入Oracle以前，Vincent在Sun Microsystems工作，在那里他專注于圖形、動畫及交互技術的研究，其中Java 2D API 以及SVG格式方面則是他最重要的關注點。
Vincent在Apache（軟件基金會的支持下）與人共同發(fā)起并領導了Batik項目，這是一個開源Java工具包，用于操控、查看或SVG內(nèi)容的代碼轉(zhuǎn)換。Vincent為SVG規(guī)范及其在移動設備上的版本——SVG微型簡化版本（SVG Tiny）——的發(fā)展做出了巨大貢獻。他在萬維網(wǎng)聯(lián)盟（W3C）主持復合文檔格式（CDF）方面的事務。Vincent還是 《Java 2D API 圖形》（Java 2D API Graphics）一書的作者，對于圖形設計，他總是抱有極大的熱情。
總結
- 上一篇： C++实现对汉字的完美支持
- 下一篇： “SHOT NOTE”新文具，构建虚实之