WebGL是Web前端最快的制圖方式佛嬉，比傳統(tǒng)的canvas2d要快近十倍砰碴。在做圖時兽埃，如果前端需要展現(xiàn)的數(shù)據(jù)量過多，可能需要這種技術(shù)涡相。例如做Graph Network, canvas2d可以支持的元素在2k左右哲泊，而WebGL可以支持到20k。
WebGL更接近于OpenGL而相異于Js/Canvas2d催蝗，主要的思想是用JS生成可以在GPU上執(zhí)行的代碼切威，利用GPU直接渲染所需圖形。
WebGL是一個光柵引擎丙号。
WebGL的程序是運(yùn)行在GPU上面的先朦，可以在GPU上面的運(yùn)行的CODE需要兩個function，一個是vertex shader犬缨，一個是fragment shader喳魏，這兩個function是用GLSL來寫的。這一對函數(shù)成為一個program怀薛。
GLSL
GLSL是Graphics Library Shader Language的簡稱刺彩，基本的語法與C相似。特殊的地方在于存在vec2, vec3, vec4, mat2, mat3, mat4之類的數(shù)據(jù)類型乾戏，vec用來表示對應(yīng)的向量迂苛，mat表示對應(yīng)的矩陣。所有的加減法乘法都可以針對向量和矩陣來執(zhí)行鼓择，一些函數(shù)也可以針對這些類型來計(jì)算三幻，例如sin, cos。
向Shader傳值的方法可以分為4種：
-
Attribute和buffer呐能，這個是最經(jīng)常使用的傳值方式念搬，buffer是我們上傳到GPU的二進(jìn)制數(shù)組，一般存儲坐標(biāo)位置摆出、紋理坐標(biāo)朗徊、頂點(diǎn)顏色等，當(dāng)然存儲什么都可以偎漫。Attribute用來確定怎么從buffer中取數(shù)據(jù)爷恳，例如從哪個buffer中獲取數(shù)據(jù)，獲取的數(shù)據(jù)類型象踊，數(shù)據(jù)存取的偏移量温亲，每次取幾個字節(jié)等
buffer中的數(shù)據(jù)是線性訪問的棚壁，每次會取出下一個值放到attribute里面。 - Uniforms是shader中的全局變量栈虚，不隨每個頂點(diǎn)的處理而改變
- Varings可以從vertex shader中傳值給fragment shader袖外。根據(jù)畫的東西的不同，在執(zhí)行過程中魂务，會在vertex shader中插值給fragment shader
-
Texture是可以在shader里面隨機(jī)訪問的數(shù)組曼验，一般用來存放圖像數(shù)據(jù)。
Vertex shader提供clip space坐標(biāo)粘姜，所謂clip space坐標(biāo)鬓照，就是把整個畫布的坐標(biāo)放到[-1, 1] [-1, 1]中間的坐標(biāo)。
Fragment shader提供的顏色是rgba的顏色相艇，是[0,1]區(qū)間的顏色颖杏。
假設(shè)我們來畫一個三角形，每當(dāng)我們傳給GPU三個頂點(diǎn)點(diǎn)坛芽，GPU會生成三角形里面的每一個點(diǎn)留储，GPU會向Fragment shader詢問每個點(diǎn)的顏色。雖然我們只傳給vertex shader 3個點(diǎn)咙轩，GPU會根據(jù)attribute中的值來生成三角形內(nèi)的所有的點(diǎn)获讳。
總結(jié)自 http://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html
