HTML5 Canvas,WebGL,CSS Shaders,GLSL的曖昧關(guān)系 ? 張鑫旭

看見就非常 2015-09-18

展開全文

by zhangxinxu from http://www.
本文地址：http://www./wordpress/?p=1987

一、前面的所以然

技術(shù)的發(fā)展日新月異，說不定回家釣幾天魚，就出來個新東西了。新事物新技術(shù)發(fā)展的初期，你無法預(yù)見其未來之趨勢，生命誠可貴，沒有必要花過多時間深入研究這些新東西，不過，知道了大概，了解個全貌還是很有必要的。雖不是時代締造者，也不至于落后于時代發(fā)展大潮。

互聯(lián)網(wǎng)的發(fā)展相當(dāng)?shù)纳袼?，其他不說，就前端技術(shù)這塊，出現(xiàn)的些新名詞或生名詞就讓人眼花繚亂，應(yīng)接不暇，比如說：HTML5 Canvas, WebGL, CSS Shaders, GLSL等。你是否有這樣的疑問：這些都是些什么玩意？是喜歡打醬油還是客串CCTV群眾演員？他們之間是否有曖昧，或是跨輩分的恩怨情仇？

好吧，我就八卦下這些前端前沿技術(shù)相關(guān)名字。

二、各自廬山面目

HTML5 Canvas
這個想必聽過的人不少，所以這里匆匆數(shù)行帶過。HTML5 Canvas實際上就是個畫布元素，使用JavaScript在上面畫圖形，像是折線啊，圓形，漸變之類。

目前在web實際項目中已有不少應(yīng)用。例如圖像的旋轉(zhuǎn)，圓角的生成等。低版本的IE瀏覽器不支持該元素，還在可以通過調(diào)用如下JS可以讓其支持部分canvas的功能：excanvas.js

OpenGL
標(biāo)題中并未出現(xiàn)OpenGL，一是因為標(biāo)題已經(jīng)很長了，而是這個東東并不專屬于web前端領(lǐng)域。
OpenGL（全寫Open Graphics Library）是個定義了一個跨編程語言、跨平臺的編程接口的規(guī)格，它用于三維圖象（二維的亦可）。OpenGL是個專業(yè)的圖形程序接口，是一個功能強(qiáng)大，調(diào)用方便的底層圖形庫，是行業(yè)領(lǐng)域中最為廣泛接納的 2D/3D 圖形 API，是個與硬件無關(guān)的軟件接口，其自誕生至今已催生了各種計算機(jī)平臺及設(shè)備上的數(shù)千優(yōu)秀應(yīng)用程序。

OpenGL使用簡便，效率高。它具有七大功能：建模、變換、顏色模式設(shè)置、光照和材質(zhì)設(shè)置、紋理映射(Texture Mapping)、位圖顯示和圖象增強(qiáng)圖象功能和雙緩存動畫(Double Buffering)。

具體可參見OpenGL百科

WebGL
WebGL是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。顯然，WebGL技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁面，甚至可以用來設(shè)計3D網(wǎng)頁游戲等等。

由于webgl是基于OpenGL和JavaScript技術(shù)結(jié)合，而OpenGL與微軟DirectX存在著競爭關(guān)系，而且微軟自身也開發(fā)了Silverlight插件，與webgl其實是類似的，所以微軟對webgl技術(shù)并不支持。這很好理解，好比五阿哥和爾康在爭奪心愛的容嬤嬤之前是不可能相互擁抱的。

微軟的不支持并不影響webgl的發(fā)展，隨著firefox、谷歌和蘋果等加入，webgl也開始出現(xiàn)了各種應(yīng)用。例如小有名氣的基于webgl技術(shù)的谷歌人體瀏覽器(Google Body Browser)實驗項目，用戶可以查看3D人體結(jié)構(gòu)（下圖來自cnbeta）。
google人體瀏覽器截圖張鑫旭-鑫空間-鑫生活

GLSL
GLSL為OpenGL著色語言(GLSL――OpenGL Shading Language)（后面的可以不用看，都是專業(yè)術(shù)語，一個頭，兩個大）。是開發(fā)人員用來在OpenGL中著色編程編寫的短小的自定義程序，他們是在圖形卡的GPU （Graphic Processor Unit圖形處理單元）上執(zhí)行的，代替了固定的渲染管線的一部分。比如：視圖轉(zhuǎn)換、投影轉(zhuǎn)換等。GLSL（GL Shading Language）的著色器代碼分成2個部分：Vertex Shader（頂點著色器）和Fragment（片斷著色器），有時還會有Geometry Shader（幾何著色器）。負(fù)責(zé)運(yùn)行頂點著色的是頂點著色器。它可以得到當(dāng)前OpenGL 中的狀態(tài)，GLSL內(nèi)置變量進(jìn)行傳遞。

CSS Shaders
CSS Shaders是上周舉行的Adobe Max上，Adobe公司推出的一個全新的項目。
這項由Adobe和Apple、Opera合作研發(fā)的新標(biāo)準(zhǔn)已經(jīng)提交至W3C，將為CSS技術(shù)帶來3D圖形特性。

Shader（著色器）可以理解為是一種運(yùn)行于顯卡端的小程序，通常用于游戲和其他圖形相關(guān)的應(yīng)用。著色器有兩種，一種是頂點著色器，用于控制幾何體的頂點以繪制出3D表面網(wǎng)格；另一種是片元著色器，用于控制像素的顏色。CSS Shaders技術(shù)將允許開發(fā)者同時使用頂點著色器和片元著色器。

在CSS中使用著色器可以制作出很多吸引眼球的動態(tài)效果。

Adobe展示了一些Demo視頻，在第一個視頻中Twitter的頁面被渲染成了彎曲的表面；第二個視頻更加有趣，將Google地圖和街景渲染折疊了起來，像真的紙質(zhì)地圖那樣。因為著色器可以作用于所有HTML內(nèi)容，所以CSS Shaders渲染的元素包括了普通的表格、SVG甚至是HTML5 Video等等。

CSS目前已經(jīng)可以制作一些3D動畫效果，但是著色器這個關(guān)鍵角色的加入，將使這項技術(shù)變得更加靈活，提高了可編程性。CSS Shaders可以與Adobe Edge配合使用，制作出更多動態(tài)效果的網(wǎng)頁。Adobe稱未來Edge將擁有更強(qiáng)的表現(xiàn)力，而CSS Shaders正是為了達(dá)到這個目的而推出的。

CSS Shaders內(nèi)置了一些常用的濾鏡，包括設(shè)置模糊、陰影、色調(diào)、翻轉(zhuǎn)、灰度、透明度、Gamma值等。另外也允許開發(fā)者自己編寫著色器代碼，使用的語言——不出所料，和WebGL一樣——是GLSL。

有人可能會疑問，貌似CSS Shaders跟WebGL作用和接近，使用語言也一致，會不會發(fā)生沖突啊。根據(jù)Adobe的某些人員的說法，WebGL只能作用于一個Canvas，而CSS Shaders適用于任何Web內(nèi)容。CSS的本意就是用來定義網(wǎng)頁樣式的，Shader的加入毋庸置疑可以大大增加靈活度，讓開發(fā)者有更多的方式去創(chuàng)造出更具想象力的網(wǎng)頁。兩者是沒有沖突滴~~

目前，貌似沒有瀏覽器鳥這廝，俺們需要靜觀些時日。