美女视频非法网站,鞠婧祎直播视频,美女视频在线福利

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

2015.09.18

byzhangxinxu fromhttp://www.zhangxinxu.com

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

一、前面的所以然

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

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

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

二、各自廬山面目

HTML5 Canvas

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

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

OpenGL

標題中并未出現(xiàn)OpenGL，一是因為標題已經(jīng)很長了，而是這個東東并不專屬于web前端領(lǐng)域。

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

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

具體可參見OpenGL百科

WebGL

WebGL是一種3D繪圖標準，這種繪圖技術(shù)標準允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創(chuàng)建復雜的導航和數(shù)據(jù)視覺化。顯然，WebGL技術(shù)標準免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復雜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)了各種應用。例如小有名氣的基于webgl技術(shù)的谷歌人體瀏覽器(Google Body Browser)實驗項目，用戶可以查看3D人體結(jié)構(gòu)（下圖來自cnbeta）。

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（幾何著色器）。負責運行頂點著色的是頂點著色器。它可以得到當前OpenGL 中的狀態(tài)，GLSL內(nèi)置變量進行傳遞。

CSS Shaders

CSS Shaders是上周舉行的Adobe Max上，Adobe公司推出的一個全新的項目。

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

Shader（著色器）可以理解為是一種運行于顯卡端的小程序，通常用于游戲和其他圖形相關(guān)的應用。著色器有兩種，一種是頂點著色器，用于控制幾何體的頂點以繪制出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將擁有更強的表現(xiàn)力，而CSS Shaders正是為了達到這個目的而推出的。

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)頁。兩者是沒有沖突滴~~

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

三、關(guān)系整理

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