欧美日韩亚洲综合在线一区二区,国产三区二区

byzhangxinxu fromhttp://www.zhangxinxu.com

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

一、前面的所以然

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

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

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

二、各自廬山面目

HTML5 Canvas

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

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

OpenGL

標(biāo)題中并未出現(xiàn)OpenGL，一是因?yàn)闃?biāo)題已經(jīng)很長(zhǎng)了，而是這個(gè)東東并不專(zhuān)屬于web前端領(lǐng)域。

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

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

具體可參見(jiàn)OpenGL百科

WebGL

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

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

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

GLSL

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

CSS Shaders

CSS Shaders是上周舉行的Adobe Max上，Adobe公司推出的一個(gè)全新的項(xiàng)目。

這項(xiàng)由Adobe和Apple、Opera合作研發(fā)的新標(biāo)準(zhǔn)已經(jīng)提交至W3C，將為CSS技術(shù)帶來(lái)3D圖形特性。

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

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

Adobe展示了一些Demo視頻，在第一個(gè)視頻中Twitter的頁(yè)面被渲染成了彎曲的表面；第二個(gè)視頻更加有趣，將Google地圖和街景渲染折疊了起來(lái)，像真的紙質(zhì)地圖那樣。因?yàn)橹骺梢宰饔糜谒蠬TML內(nèi)容，所以CSS Shaders渲染的元素包括了普通的表格、SVG甚至是HTML5 Video等等。

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

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

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

目前，貌似沒(méi)有瀏覽器鳥(niǎo)這廝，俺們需要靜觀些時(shí)日。

三、關(guān)系整理

上面的表述中多少透露個(gè)各個(gè)名詞之間的關(guān)系。所謂一圖勝前言，什么媽媽的二姑的三舅媽的小外孫家的一條狗身上的虱子之類(lèi)的話就免了，直接上圖：