1. 默認(rèn)情況下，canvas是透明的。

2. canvas可以靈活地支持二維圖形和三維圖形，它不直接提供繪圖方法，而是提供一種叫上下文（context）的機(jī)制來進(jìn)行繪圖。

3. WebGL 中的顏色取值rgba繼承OpenGL， 取值為0.0 — 1.0

gl.clearColor()

如果沒有指定背景色，默認(rèn)值如下:

default-bg-color

4. gl.clear(gl.COLOR_BUFFER_BIT)清空繪圖區(qū)域，實(shí)際上是在清空顏色緩沖區(qū)（color buffer）。
   WebGL中除了顏色緩沖區(qū)，還有比如深度緩沖區(qū)（DEPTH_BUFFER_BIT）、模板緩沖區(qū)（STENCIL_BUFFER_BIT）等。

5. gl.clearColor() 指定了背景色以后，背景色會(huì)駐存在WebGL系統(tǒng)中，在下一次調(diào)用gl.clearColr()方法前不會(huì)改變。即，如果后面你想用同一種顏色再清空一次繪圖區(qū)，沒必要再指定一次背景色。

6. WebGL依賴一種新的稱為著色器（shader）的繪圖機(jī)制。

7. WebGL需要兩種著色器：

（1）頂點(diǎn)著色器（Vertex shader）：用來描述頂點(diǎn)的特性（如位置、顏色等）。
（2）片元著色器（Fragment shader） ： 進(jìn)行逐片處理過程（如光照等），片元也可以理解為像素（圖像的單元）。

8. WebGL程序執(zhí)行流程

webgl-flow

最右邊的是顏色緩沖區(qū)不是瀏覽器，因?yàn)轭伾彌_區(qū)的內(nèi)容會(huì)自動(dòng)顯示在瀏覽器中。

9. 初始化著色器initShaders()的行為

initShades()

在初始化著色器之前，頂點(diǎn)著色器和片元著色器都是空白的，我們需要將字符串形式的著色器代碼從JavaScript傳給WebGL系統(tǒng)，并建立著色器，這就是initShaders()所做的事情。

注意：

著色器代碼運(yùn)行在WebGL系統(tǒng)中，而不是JavaScript程序中。
頂點(diǎn)著色器先執(zhí)行，片元著色器后執(zhí)行。

10. WebGL程序包括運(yùn)行在瀏覽器中的JavaScript和運(yùn)行在WebGL 系統(tǒng)中的著色器這兩部分。

11. 頂點(diǎn)著色器

var VSHADER_SOURCE = 
 'void main() {\n' +
 ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
 ' gl_PointSize = 10.0;\n' + // Set the point size
 '}\n';

（1）void → 沒有返回值
（2）不能為main函數(shù)指定參數(shù)
（3）gl_Position 表示位置，是內(nèi)置變量，必須被賦值，否則著色器無法工作
（4）gl_PointSize 表示尺寸，也是內(nèi)置變量，默認(rèn)值為1.0

vshader

GLSE_data_type

vec4

gl_Position = vec4(0.0, 0.0, 1.0, 1.0)

前三個(gè)分量分別為X, Y, Z，最后一個(gè)分量為 齊次坐標(biāo)

齊次坐標(biāo)

12. 片元著色器

// Fragment shader program
var FSHADER_SOURCE =
 'void main() {\n' +
 ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
 '}\n';

fshader

13. 繪制操作
    步驟：
    （1）清空繪制區(qū)
    （2）gl.drawArrays(mode, first, count)

gl.drawArrays()

gl.drawArrays(mode, first, count) 將會(huì)執(zhí)行 count 次

shader-flow

14. WebGL 坐標(biāo)系統(tǒng)

webgl-coord

15. attribute 變量 和 uniorm 變量
    attribute 變量 ： GLSL ES變量，傳輸?shù)氖悄切┡c頂點(diǎn)相關(guān)的數(shù)據(jù)（外部向頂點(diǎn)著色器傳輸，只有頂點(diǎn)著色器能使用）。
    uniform 變量： 傳輸?shù)氖悄切┡c所有頂點(diǎn)都相同（或與頂點(diǎn)無關(guān)）的數(shù)據(jù) （數(shù)據(jù)傳輸?shù)哪繕?biāo)是片元著色器，而非頂點(diǎn)著色器）。

data-transfer

為了使用 attribute 變量：示例程序需要包含以下步驟：

（1）在頂點(diǎn)著色器中，聲明 attribute 變量；

attribute vec4 a_Position;

attribute 被稱為存儲(chǔ)限定符（storage qualifier），它表示接下來的變量，attribute變量必須聲明為全局變量。

storage-qualifier

（2）將 attribute 變量賦值給 gl_Position 變量；

先獲取 attribute變量的存儲(chǔ)位置:

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

gl.program => 程序?qū)ο螅?code>頂點(diǎn)著色器和片元著色器

gl.getAttribLotation()

（3）向 attribute 變量傳輸數(shù)據(jù)；
將頂點(diǎn)位置傳輸給 attribute 變量：

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

vertexAttrib3f

gl.vertexAttrib3f()的同族函數(shù):

vertexAttribnf

WebGL 相關(guān)函數(shù)命名規(guī)范：

webgl-function-standard

使用 uniform 變量步驟：
（1）在片元著色器中準(zhǔn)備 uniform 變量；

uniform vec4 u_FragColor;

uniform-declaration

precision mediump float; 精度限定詞（precision qualifier） ,指定變量的范圍（最大值與最小值）和精度。

（2）用這個(gè) uniform 變量向 gl_FragColor 賦值；
獲取 uniform 變量的存儲(chǔ)地址。

getUniformLocation.png

（3）將顏色數(shù)據(jù)從JavaScript傳給該 uniform 變量。
向 uniform 變量賦值 gl.uniform4f(location, v0, v1, v2, v3)

uniform4f

gl.uniform4f()的同族函數(shù)

uniformnf