使用WebGL畫點

webgl給我的感覺就像是老太太的裹腳布，又臭又長。層層封裝，每個人程式碼都不一樣，缺少統一的介面。

自頂向下有理論，guide講的清楚，但是教材是自頂向下，所以要把guide的程式碼都搬過去。

著色器

頂點著色器控制點的位置和大小，片元著色器控制點的顏色。

函式呼叫關係：

gl.drawArrays()->頂點著色器->main->片元著色器->main

取出點並賦值

var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
gl.program = program;
 

獲取program中一個點，然後傳值。

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

attribute是溝通的橋樑，也可以說是溝通的約定，如果js要拿到program物件裡的變數，就得知道attribute變數的名字。

繪製多個點

緩衝區是視訊記憶體裡的，能被gl訪問。就像手動malloc一塊記憶體一樣

1. 建立緩衝區物件：gl.createBuffer()
2. 繫結緩衝區物件，即指定用途
3. 將資料寫入緩衝區物件
4. 將緩衝區物件分配給一個attribute變數
5. 開啟attribute變數